/* ==========================================================================
   NASIAH CRM — modern interior layer (v20)
   Loaded last. Refines tokens, spacing, cards, tables, forms, plus the new
   masked-phone chip and the admin notifications UI. Login screen untouched.
   ========================================================================== */
:root{
  --radius:14px;--radius-sm:10px;
  --line:#e8ebf2;--bg:#f3f5fa;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.045);
  --shadow-hover:0 2px 6px rgba(15,23,42,.06),0 14px 32px rgba(15,23,42,.09);
  --ring:0 0 0 3px rgba(201,164,92,.25);
}
body{font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
.content{padding:26px 32px 56px}
.content>*+*{margin-top:0}

/* ---- Topbar & sidebar polish ---- */
.topbar{height:64px;box-shadow:0 1px 0 rgba(15,23,42,.03)}
.top-title{font-size:17px}
.sidebar .nav button{height:42px;border-radius:12px;font-weight:600}
.sidebar .nav button.active{background:linear-gradient(90deg,rgba(201,164,92,.20),rgba(201,164,92,.06))!important}
.nav-label{letter-spacing:.08em;text-transform:uppercase}
.user-mini{background:rgba(255,255,255,.05);border-radius:12px;padding:9px 10px}

/* ---- Page header ---- */
.page-head{align-items:flex-end;gap:16px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:24px}
.page-head p{margin-top:4px;max-width:62ch}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Stat cards: accent bar + calmer icon ---- */
.stat{overflow:hidden;padding:18px 20px}
.stat:before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),#e8d3a0)}
.stat-icon{background:linear-gradient(135deg,#fbf4e2,#f3e6c4)}
.stat-value{font-size:30px;margin-top:14px}

/* ---- Panels / filters / chips ---- */
.panel{border-radius:var(--radius);overflow:hidden}
.filters{padding:14px 18px;flex-wrap:wrap}
.filters .btn{border-radius:999px;height:34px}
.filters .btn-soft{background:transparent;border-color:var(--line);color:var(--muted)}
.filters .btn-soft:hover{background:#fff;color:var(--ink)}
.filters .btn-primary{box-shadow:0 2px 8px rgba(15,23,42,.18)}
.search,.filters select{min-width:220px}
.search:focus,.field input:focus,.field select:focus,.field textarea:focus,.area-note-form input:focus{outline:0;border-color:var(--gold);box-shadow:var(--ring)}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto}
th{position:sticky;top:0;z-index:1;text-align:start;white-space:nowrap}
td{vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:nth-child(even){background:rgba(246,248,252,.55)}
tbody tr:last-child td{border-bottom:0}
td .btn-soft{border-radius:8px}

/* ---- Pills ---- */
.pill{border-radius:999px;letter-spacing:0}

/* ---- Forms / modal ---- */
.form-grid{gap:14px 16px}
.field input,.field select,.field textarea{min-height:42px}
.modal{border:1px solid var(--line)}
.modal-body{padding:22px 24px}

/* ---- Area cards ---- */
.area-grid{gap:18px}
.area-card{padding:20px;gap:14px;border-radius:16px;position:relative;overflow:hidden}
.area-card:before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),#e8d3a0)}
.area-card.is-closed:before{background:linear-gradient(90deg,#94a3b8,#cbd5e1)}
.area-head h3{font-size:16.5px}
.area-price{display:inline-block;align-self:flex-start;background:var(--gold-soft);padding:4px 12px;border-radius:999px;font-size:15px}

/* ---- Client row + masked phone chip ---- */
.area-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,#fcfcfe,#f6f8fc)}
.area-client-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:none}
.area-client-ico .ico{width:17px;height:17px}
.area-client-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.area-client-label{font-size:12px;font-weight:700;color:var(--muted)}
.area-client-hint{font-size:11px;color:var(--muted);flex-basis:100%;padding-inline-start:48px;margin-top:-6px}
.phone-chip{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;font:700 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;padding:9px 14px;border-radius:10px;border:1px solid transparent;text-decoration:none;direction:ltr;unicode-bidi:plaintext}
.phone-chip.masked{background:#fff;border:1px dashed #cbd3e1;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.phone-chip.masked:hover{border-color:var(--gold);background:var(--gold-soft);color:#7a5c22}
.phone-chip.masked:focus-visible{outline:0;box-shadow:var(--ring)}
.phone-chip.open{background:var(--green-soft);color:var(--green);border-color:rgba(18,128,92,.2)}

/* ---- Notifications ---- */
.bell-btn{position:relative;width:40px;padding:0;display:inline-grid;place-items:center}
.bell-count,.notif-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.bell-count{position:absolute;top:-5px;inset-inline-end:-5px;border:2px solid #fff}
.bell-count[hidden],.notif-badge[hidden]{display:none}
.nav-badge.notif-badge{background:var(--red);color:#fff}
.notif-list{padding:6px}
.notif{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid transparent;transition:background .15s}
.notif+.notif{margin-top:2px}
.notif:hover{background:#f8f9fc}
.notif.unread{background:linear-gradient(90deg,rgba(201,164,92,.12),rgba(201,164,92,.03));border-color:rgba(201,164,92,.28)}
.notif-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:none}
.notif.unread .notif-ico{background:var(--gold-soft);color:#8a6a2c}
.notif-body{flex:1;min-width:0}
.notif-title{font-weight:800;font-size:14px}
.notif-text{white-space:pre-line;font-size:13px;margin-top:2px;line-height:1.65}
.notif-time{font-size:11.5px;margin-top:4px}
.notif-actions{display:flex;gap:6px;flex-wrap:wrap}
.notif-actions .btn{height:32px;font-size:12px}

/* ---- Dark mode ---- */
body.theme-dark{--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28)}
body.theme-dark .page-head{border-color:var(--line)}
body.theme-dark .stat-icon{background:linear-gradient(135deg,#2a2516,#1f1b10)}
body.theme-dark tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
body.theme-dark .filters .btn-soft{background:transparent}
body.theme-dark .filters .btn-soft:hover{background:#17233a}
body.theme-dark .area-client{background:linear-gradient(180deg,#121b2e,#0f1829);border-color:var(--line)}
body.theme-dark .phone-chip.masked{background:#0b1322;border-color:#33425f;color:#b6c2d8}
body.theme-dark .phone-chip.masked:hover{background:var(--gold-soft);color:var(--gold2)}
body.theme-dark .phone-chip.open{color:#5fd6a8}
body.theme-dark .notif:hover{background:#17233a}
body.theme-dark .notif.unread{background:linear-gradient(90deg,rgba(201,164,92,.14),rgba(201,164,92,.03))}
body.theme-dark .bell-count{border-color:#0e1526}
body.theme-dark .area-price{background:var(--gold-soft)}

/* ---- Mobile ---- */
@media(max-width:760px){
  .content{padding:14px 12px 40px}
  .page-head{align-items:stretch;flex-direction:column;padding-bottom:14px}
  .page-head .actions .btn{flex:1 1 auto}
  .notif{flex-wrap:wrap}.notif-actions{flex-basis:100%;padding-inline-start:54px}
  .search,.filters select{min-width:0;flex:1 1 100%}
  .area-client-hint{padding-inline-start:0;margin-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Shared employee sales leaderboard */
.honor-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 28px;margin:0 0 18px;border:1px solid rgba(213,173,99,.45);border-radius:22px;background:radial-gradient(circle at 12% 10%,rgba(213,173,99,.20),transparent 34%),linear-gradient(120deg,rgba(17,35,62,.98),rgba(24,43,69,.94));color:#fff;box-shadow:0 14px 35px rgba(13,27,48,.16)}
.honor-cup{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:rgba(213,173,99,.15);border:1px solid rgba(213,173,99,.42);font-size:38px}.honor-eyebrow{color:#e4c783;font-size:12px;font-weight:800;margin-bottom:5px}.honor-hero h2{margin:0 0 5px;font-size:25px}.honor-hero p{margin:0;color:#d0d9e7;font-size:13px}.honor-value{margin-inline-start:auto;color:#f0d69b;font-size:clamp(20px,3vw,30px);font-weight:900}.honor-panel{overflow:hidden}.honor-list{display:flex;flex-direction:column}.honor-row{display:flex;align-items:center;gap:15px;padding:16px 20px;border-top:1px solid var(--line)}.honor-row:first-child{border-top:0}.honor-row.first-place{background:linear-gradient(90deg,rgba(213,173,99,.12),transparent)}.honor-rank{width:42px;min-width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2,rgba(100,116,139,.10));font-size:20px;font-weight:800}.honor-person{display:flex;flex:1;min-width:120px;flex-direction:column;gap:4px}.honor-person strong{font-size:14px}.honor-person span,.honor-count span,.honor-sales span{font-size:11px;color:var(--muted)}.honor-count,.honor-sales{display:flex;flex-direction:column;gap:4px;text-align:end}.honor-count strong{font-size:18px}.honor-sales strong{font-size:15px;color:var(--gold2,#b88c3e)}
@media(max-width:600px){.honor-hero{padding:20px 16px;gap:12px}.honor-cup{width:54px;height:54px;font-size:28px;border-radius:16px}.honor-hero h2{font-size:20px}.honor-value{width:100%;margin-inline-start:0}.honor-row{gap:9px;padding:13px 10px}.honor-rank{width:34px;min-width:34px;height:36px}.honor-person strong{font-size:12px}.honor-count strong,.honor-sales strong{font-size:12px}.honor-count span,.honor-sales span{font-size:10px}}