/* ===== Reset & tokens (Light only) ===== */
:root{
  --ui-bg:#f6f7fb;
  --ui-card:#ffffff;
  --ui-text:#151922;
  --ui-muted:#6b7280;
  --ui-primary:#2563eb;
  --ui-primary-soft:#e9f0ff;
  --ui-border:#e5e7eb;
  --ui-radius:16px;
}
html,body{background:var(--ui-bg);color:var(--ui-text);}
a{color:#1d4ed8}
a:hover{opacity:.9}

/* Navbar & brand */
.navbar{min-height:56px}
.brand-logo{max-height:32px;max-width:160px;object-fit:contain;background:#fff;border-radius:8px;padding:2px 6px;box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* Cards / forms */
.card,.card-glass{background:var(--ui-card);border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.form-control,.form-select{background:#fff;border:1px solid var(--ui-border);color:var(--ui-text);border-radius:12px}
.form-label{color:var(--ui-text)}
.btn-primary{background:var(--ui-primary);border-color:var(--ui-primary);border-radius:12px}
.btn-outline-secondary{border-radius:12px}

/* Tables / tabs */
.table thead th{background:#f3f4f6;border-bottom-color:var(--ui-border)}
.nav-tabs .nav-link{color:#334155}
.nav-tabs .nav-link.active{color:#111827;border-color:var(--ui-border) var(--ui-border) #fff;background:#fff}

/* Compose card */
.compose-card .form-hint{color:var(--ui-muted);font-size:.9rem}

/* Referrals timeline (اختیاری) */
.referral-timeline .ref-steps{display:flex;flex-direction:column;gap:14px}
.referral-timeline .ref-item{display:flex;gap:14px;border:1px solid var(--ui-border);border-radius:16px;background:#fff;padding:12px}
.referral-timeline .ref-aside{position:relative;width:56px;display:flex;justify-content:center}
.referral-timeline .avatar{width:40px;height:40px;border-radius:999px;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.referral-timeline .dot{position:absolute;top:48px;width:2px;bottom:-12px;background:var(--ui-border);border-radius:4px}
.referral-timeline .ref-item:last-child .dot{display:none}
.referral-timeline .ref-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.referral-timeline .who{display:flex;align-items:center;gap:6px}
.referral-timeline .who .muted,.referral-timeline .ref-foot .muted{color:var(--ui-muted);font-size:.85rem}
.referral-timeline .ref-note{background:var(--ui-primary-soft);border:1px dashed var(--ui-border);border-radius:12px;padding:8px 10px}


/* Letter body images safe */
.letter-body img{max-width:100%;height:auto;border-radius:8px}

/* Attachments buttons wrap nicely */
@media (max-width: 576px){
  .letter-attachments .btn{width:100%}
}



/* Header brand logo – محدود و واکنشگرا */
.brand-logo{
  max-height: 36px !important;
  max-width: 180px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 2px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* هدر داشبورد اگر تصویر/لوگو داخل hero است */
.header-logo{
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* جلوگیری از کش‌آمدن تصاویر محتوا (بدنه نامه) */
.letter-body img{ max-width:100%; height:auto; }



/* ===== Header refresh ===== */
.app-header{ background: var(--ui-surface, #fff); }
.app-navbar{ background: transparent; }
.brand-logo{ width: 28px; height: 28px; object-fit: contain; }
.brand-title{ font-weight: 700; font-size: 1.05rem; }
.app-search .form-control{ border-radius: .75rem 0 0 .75rem; }
.app-search .btn{ border-radius: 0 .75rem .75rem 0; }
.app-link{ opacity:.9; transition:opacity .2s ease; }
.app-link:hover{ opacity:1 }
.avatar{ width: 32px; height: 32px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
@media (max-width: 992px){
  .brand-title{ font-size: 1rem; }
}
/* Sticky header spacing fix handled by page padding */



/* === Purple theme for header (matches dashboard hero) === */
.app-navbar{
  background: linear-gradient(135deg, oklch(65% 0.17 300), oklch(58% 0.14 320));
}
.app-navbar .navbar-toggler{ border-color: rgba(255,255,255,.35); }
.app-navbar .navbar-toggler-icon{ filter: invert(1); }
.app-header .brand-logo{ width:28px; height:28px; border-radius:8px; background:#fff; padding:2px; }
.app-header .brand-title{ font-weight:800; letter-spacing:.2px; }
.app-header .nav-link{ font-weight:500; }
.app-header .nav-link.active, .app-header .nav-link:hover{ color:#fff !important; }
.app-header .avatar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; }
.dash-hero{ display:none !important; } /* hide lower purple banner */