/* =================================================================
   Deposit Slip - macOS / iOS theme (loaded after style.css).
   System font, system blue, grouped-grey surfaces, translucent
   sidebar and toolbar, iOS-style switches, segmented pagination,
   inset form fields with the blue focus ring.
   No external fonts or scripts. Light appearance.
   The deposit slip itself stays a clean white A5 document.
   ================================================================= */
:root{
  --sys-blue:#007aff; --sys-blue-press:#0062cc; --sys-blue-tint:rgba(0,122,255,.12);
  --sys-green:#34c759; --sys-red:#ff3b30; --sys-orange:#ff9500;
  --fill:rgba(120,120,128,.12); --fill-strong:rgba(120,120,128,.20);
  --sep:rgba(60,60,67,.14); --sep-strong:rgba(60,60,67,.29);
  --surface:#f5f5f7; --card-line:rgba(60,60,67,.12);
  --card-shadow:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04),0 10px 28px -16px rgba(0,0,0,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html,body{background:var(--surface)!important;background-image:none!important;}
body{font-size:14px;line-height:1.45;letter-spacing:-.006em;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
::selection{background:rgba(0,122,255,.28);}
.icon{color:currentColor;}
a{color:inherit;}
.muted a,.panel a:not(.btn):not(.row-link){color:var(--sys-blue);}
.panel a:not(.btn):hover{text-decoration:underline;}

/* ---------- Window chrome: translucent sidebar + toolbar ---------- */
.sidebar{
  background:rgba(246,246,248,.78)!important;
  -webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
  border-right:.5px solid var(--sep-strong)!important;box-shadow:none!important;
}
.sidebar-brand{border-bottom:none!important;padding:22px 18px 10px;}
.brand-logo{border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.brand-name{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.brand-sub{font-size:11.5px;color:var(--ink-soft);}
.sidebar-nav{padding:10px 10px;gap:1px;}
.sidebar-nav a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--ink);transform:none!important;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.sidebar-nav a .ico{width:20px;display:inline-flex;justify-content:center;opacity:1;}
.sidebar-nav a .icon{color:var(--sys-blue);}
.sidebar-nav a:hover{background:rgba(0,0,0,.05);color:var(--ink);}
.sidebar-nav a.active{background:var(--sys-blue)!important;color:#fff!important;font-weight:600;box-shadow:none!important;}
.sidebar-nav a.active .icon{color:#fff;}
.sidebar-foot{border-top:.5px solid var(--sep)!important;padding:12px 12px 14px;}
.user-chip{padding:2px 4px;margin-bottom:8px;}
.user-avatar{background:linear-gradient(180deg,#a2a2a8,#7c7c82)!important;color:#fff;font-weight:600;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);}
.user-name{font-size:13px;font-weight:600;color:var(--ink);}
.user-role{font-size:11.5px;color:var(--ink-soft);}
.logout-link{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;
  padding:7px 10px;border:0!important;border-radius:8px;background:transparent;
  font-size:13px;font-weight:500;color:var(--ink);transition:background .15s var(--ease);
}
.logout-link:hover{background:rgba(0,0,0,.05)!important;}
.logout-link .icon{color:var(--ink-soft);}
button.logout-link{text-align:left;}

.topbar{
  background:rgba(250,250,252,.8)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:.5px solid var(--sep-strong)!important;
  padding-top:14px;padding-bottom:14px;
}
.page-title{font-size:20px;font-weight:700;letter-spacing:-.022em;color:var(--ink);}
.menu-toggle{color:var(--sys-blue);border-radius:8px;}
.menu-toggle:hover{background:var(--fill);}

/* ---------- Surfaces ---------- */
.panel,.stat-card,.chart-card{
  background:#fff!important;border:0!important;border-radius:14px!important;
  box-shadow:var(--card-shadow)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.panel{padding:22px;}
.panel-head h2{font-size:17px;font-weight:700;letter-spacing:-.018em;color:var(--ink);}
.form-section h3{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.form-section{border-bottom:.5px solid var(--sep);}
.muted{color:var(--ink-soft);}

/* ---------- Buttons (macOS push buttons / iOS capsules) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:6px 14px;border-radius:8px;border:0!important;
  font-family:var(--font-ui);font-size:13.5px;font-weight:500;letter-spacing:-.008em;line-height:1.2;
  transition:background .15s var(--ease),transform .12s var(--ease),box-shadow .15s var(--ease),opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:none;}
.btn:active{transform:scale(.97);}
.btn .icon{color:currentColor;}
.btn-sm{min-height:28px;padding:4px 11px;font-size:13px;border-radius:7px;}
.btn-primary{background:var(--sys-blue)!important;color:#fff!important;font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.08),inset 0 .5px 0 rgba(255,255,255,.25);}
.btn-primary:hover{background:#1a85ff!important;box-shadow:0 1px 1px rgba(0,0,0,.08),inset 0 .5px 0 rgba(255,255,255,.25);}
.btn-primary:active{background:var(--sys-blue-press)!important;}
.btn-secondary{background:#fff!important;color:var(--ink)!important;box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.08);}
.btn-secondary:hover{background:#fafafa!important;}
.btn-secondary:active{background:#ececef!important;}
.btn-secondary .icon{color:var(--sys-blue);}
.btn-ghost{background:transparent!important;color:var(--sys-blue)!important;}
.btn-ghost:hover{background:var(--sys-blue-tint)!important;}
.btn-ghost .icon{color:var(--sys-blue);}
.btn-danger{background:rgba(255,59,48,.12)!important;color:#d70015!important;}
.btn-danger:hover{background:rgba(255,59,48,.2)!important;}
.btn[disabled],.btn:disabled{opacity:.45;cursor:default;transform:none;}
.btn-block{width:100%;}

/* ---------- iOS switches ---------- */
/* Master-data Active / Disabled buttons become a switch with the state written beside it */
.btn-toggle{
  position:relative;min-height:28px;padding:0 4px 0 52px!important;border-radius:14px;gap:0;
  background:transparent!important;color:var(--ink)!important;box-shadow:none!important;font-weight:500;
}
.btn-toggle .icon{display:none;}
.btn-toggle::before{
  content:"";position:absolute;left:0;top:50%;width:44px;height:26px;margin-top:-13px;border-radius:13px;
  background:var(--sys-green);transition:background .2s var(--ease);
}
.btn-toggle::after{
  content:"";position:absolute;left:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.06);transition:left .2s var(--ease);
}
.btn-toggle.is-inactive::before{background:rgba(120,120,128,.32);}
.btn-toggle.is-inactive::after{left:2px;}
.btn-toggle.is-active,.btn-toggle.is-inactive,.btn-toggle.is-active:hover,.btn-toggle.is-inactive:hover{
  background:transparent!important;color:var(--ink)!important;border:0!important;
}
/* checkboxes / radios */
input[type=checkbox]{
  -webkit-appearance:none;appearance:none;position:relative;flex-shrink:0;cursor:pointer;
  width:44px;height:26px;margin:0;border-radius:13px;background:rgba(120,120,128,.32);
  transition:background .2s var(--ease);vertical-align:middle;
}
input[type=checkbox]::after{
  content:"";position:absolute;left:2px;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.06);transition:left .2s var(--ease);
}
input[type=checkbox]:checked{background:var(--sys-green);}
input[type=checkbox]:checked::after{left:20px;}
input[type=checkbox]:focus-visible{outline:3px solid rgba(0,122,255,.5);outline-offset:2px;}
input[type=radio]{accent-color:var(--sys-blue);width:16px;height:16px;}

/* ---------- Fields (inset rounded rectangles) ---------- */
.field span{font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:0;}
.field span em{color:var(--sys-red);}
.field input[type="text"],.field input[type="date"],.field input[type="number"],.field input[type="password"],
.field input[type="file"],.field select,.filter-bar input,.filter-bar select,.inline-add-form input,
.option-row-address input,.reset-pw-form input,.manage-grid input,.manage-grid select,.ss-trigger,.field .ss-search{
  min-height:34px;padding:7px 11px;border:0!important;border-radius:8px;background:#fff;color:var(--ink);
  font-family:var(--font-ui);font-size:14px;letter-spacing:-.006em;
  box-shadow:0 0 0 .5px rgba(60,60,67,.30),inset 0 1px 1px rgba(0,0,0,.04);
  transition:box-shadow .15s var(--ease);
}
.field input::placeholder,.filter-bar input::placeholder{color:rgba(60,60,67,.42);}
input:focus,select:focus,textarea:focus,.ss-trigger:focus,.ss-open .ss-trigger,.field .ss-search:focus{
  outline:none!important;border:0!important;
  box-shadow:0 0 0 .5px var(--sys-blue),0 0 0 4px rgba(0,122,255,.28)!important;
}
.field input[readonly]{background:#f2f2f7;color:var(--ink-soft);}
select,.field select,.filter-bar select,.manage-grid select{
  -webkit-appearance:none;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5.2L5 2l3 3.2M2 8.8L5 12l3-3.2' fill='none' stroke='%23636366' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-color:#fff;
}
.ss-trigger{padding-right:30px;background-repeat:no-repeat;background-size:10px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5.2L5 2l3 3.2M2 8.8L5 12l3-3.2' fill='none' stroke='%23636366' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 10px center;}
.ss-panel{border:0;border-radius:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 12px 36px -8px rgba(0,0,0,.28);padding:6px;}
.ss-option,.ss-empty{border-radius:6px;padding:6px 10px;}
.ss-option:hover,.ss-option.ss-active{background:var(--sys-blue);color:#fff;}
.option-row{border:0;background:#fff;box-shadow:0 0 0 .5px var(--sep-strong);border-radius:10px;}

/* ---------- Tables (grouped list look) ---------- */
.data-table th,.data-table thead th{
  background:transparent;color:var(--ink-soft);font-size:11.5px;font-weight:600;letter-spacing:.02em;
  text-transform:none;padding:9px 12px;border-bottom:.5px solid var(--sep-strong);
}
.data-table td{border-bottom:.5px solid var(--sep);padding:11px 12px;}
.data-table tbody tr:last-child td{border-bottom:0;}
.data-table tbody tr:hover{background:rgba(0,122,255,.045);}
.manage-row{background:#f5f5f7;}
.mono{font-feature-settings:"tnum";}

/* ---------- Badges, alerts ---------- */
.badge{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:0;}
.badge-confirmed{background:rgba(52,199,89,.16);color:#248a3d;}
.badge-draft{background:rgba(255,149,0,.16);color:#a05a00;}
.badge-cancelled{background:rgba(255,59,48,.14);color:#d70015;}
.alert{border:0;border-radius:12px;padding:12px 16px;font-size:13.5px;box-shadow:0 0 0 .5px rgba(0,0,0,.05);}
.alert-success{background:#e8f8ed;color:#1e7a34;}
.alert-error{background:#ffebed;color:#b4001a;}
.alert-warning{background:#fff4e0;color:#8a4b00;}
.notice-box{border:0;border-radius:12px;background:#fff4e0;color:#8a4b00;}
.secret-box,.recovery-grid{background:#f5f5f7;border:0;border-radius:10px;}

/* ---------- Pagination: segmented control ---------- */
.pagination{display:inline-flex;gap:0;padding:2px;border-radius:9px;background:var(--fill);}
.pagination a{border:0;border-radius:7px;padding:5px 12px;font-size:13px;font-weight:500;color:var(--ink);}
.pagination a:hover{background:rgba(255,255,255,.55);}
.pagination a.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04);}

/* ---------- Dashboard ---------- */
.stat-card{display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;padding:18px 64px 18px 18px;}
.stat-card:hover{transform:none;box-shadow:var(--card-shadow)!important;}
.stat-label{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
.stat-value{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-feature-settings:"tnum";}
.stat-card .stat-ico{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:10px;background:var(--sys-blue);border:0;color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,122,255,.35);transition:transform .2s var(--ease);}
.stat-card .stat-ico .icon{color:#fff;}
.stat-card:hover .stat-ico{transform:scale(1.06);background:var(--sys-blue);}
.stat-grid .stat-card:nth-child(2) .stat-ico{background:var(--sys-green);box-shadow:0 2px 6px rgba(52,199,89,.35);}
.stat-grid .stat-card:nth-child(3) .stat-ico{background:var(--sys-orange);box-shadow:0 2px 6px rgba(255,149,0,.35);}
.stat-grid .stat-card:nth-child(4) .stat-ico{background:#af52de;box-shadow:0 2px 6px rgba(175,82,222,.35);}
.stat-card.accent-navy{background:linear-gradient(160deg,#2c2c2e,#1c1c1e)!important;}
.stat-card.accent-navy .stat-label{color:rgba(255,255,255,.62);}
.stat-card.accent-navy .stat-value{color:#fff;}
.stat-card.accent-gold{background:#eaf3ff!important;}
.stat-card.accent-gold .stat-value{color:var(--sys-blue-press);}
.chart-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);margin-bottom:clamp(12px,1.4vw,20px);}
.chart-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.chart-card{padding:clamp(14px,1.4vw,22px);min-width:0;}
.chart-card h2{font-size:15px;font-weight:600;margin:0 0 12px;color:var(--ink);}
.chart-box{position:relative;height:clamp(240px,34vh,440px);}
.report-bar{background:var(--fill-strong);}
.report-bar>span{background:var(--sys-blue);}
@media(max-width:960px){.chart-grid,.chart-grid.two{grid-template-columns:minmax(0,1fr);}}
@media(max-width:560px){.chart-box{height:240px;}.stat-card{padding-right:60px;}}

/* ---------- Deposit slip document: clean white A5 ---------- */
.invoice-sheet{background:#fff!important;margin:0 auto;border-radius:6px;border:0;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 18px 48px -18px rgba(0,0,0,.28);}
.invoice-sheet::before{display:none!important;}
.inv-header{border-bottom:2px solid #1d1d1f!important;}
.inv-doc-title{color:#1d1d1f;letter-spacing:-.01em;}
.inv-company{color:#1d1d1f;}
.inv-meta{background:#f5f5f7;}
.inv-meta-label,.inv-section-title{color:#6e6e73;}
.inv-amount-panel{background:#f5f9ff!important;border:1px solid #b9d6ff!important;border-radius:10px;}
.inv-amount-panel label{color:#0062cc;}
.inv-amount{color:#1d1d1f;}
.inv-declaration{background:#f5f5f7;border-left:3px solid var(--sys-blue);}
.preview-overlay{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.preview-overlay-bar{background:rgba(30,30,32,.86);}

/* ---------- Deposit slip: always the A5 layout, scaled down on small screens ----------
   The sheet keeps a fixed A5 width (559 px) so its layout never reflows on a phone;
   invoice-export.js then scales the whole sheet to fit the screen. */
@media screen{
  .invoice-stage{display:block;overflow-x:auto;overflow-y:hidden;}
  .invoice-sheet{width:559px!important;min-width:559px;max-width:none!important;flex:none;margin:0 auto;}
  .preview-overlay-sheet{max-width:559px;width:100%;overflow:hidden;}
  .preview-overlay-sheet .invoice-sheet{margin:0;}
}

/* Header title and meta values must never wrap (prevents "Deposit / Slip" overlapping "Cash Receipt"). */
.inv-doc-tag{flex:none;white-space:nowrap;}
.inv-doc-title,.inv-doc-sub,.inv-meta-value{white-space:nowrap;}
.inv-meta>div{flex:none;min-width:0;}
.inv-brand{min-width:0;}

/* ---------- Sign-in screen ---------- */
html:has(.auth-body),.auth-body{background:#fff!important;}
.auth-title{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);}
.auth-sub{color:var(--ink-soft);}
.auth-brand-text{color:var(--ink);font-weight:700;letter-spacing:-.01em;}
.auth-brand img{filter:none;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.auth-panel .field input{min-height:44px;border-radius:12px;padding:.7rem .95rem;font-size:15px;}
.auth-panel .field input:focus{box-shadow:0 0 0 .5px var(--sys-blue),0 0 0 4px rgba(0,122,255,.28)!important;}
.auth-submit{min-height:46px;border-radius:12px;font-size:15px;font-weight:600;background:var(--sys-blue)!important;box-shadow:0 1px 2px rgba(0,0,0,.12)!important;}
.auth-submit:hover{background:#1a85ff!important;}
.auth-remember{justify-content:space-between;flex-direction:row-reverse;font-size:14px;}
.auth-photo-side{border-top-left-radius:24px;border-bottom-left-radius:24px;}

/* ---------- Print: keep the document exactly as before ---------- */
@media print{
  @page{size:A5 portrait;margin:0;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html,body{background:#fff!important;width:148mm;margin:0!important;padding:0!important;}
  .panel,.chart-card{box-shadow:none!important;}
  /* One exact A5 page: 148 x 210 mm, nothing spills onto a second sheet. */
  .invoice-sheet{width:148mm!important;min-width:0!important;max-width:none!important;height:209.5mm!important;margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:hidden;page-break-inside:avoid;break-inside:avoid;page-break-after:avoid;break-after:avoid;}
  .inv-grid,.inv-field-row,.inv-declaration,.inv-signoff-row{page-break-inside:avoid;break-inside:avoid;}
}

/* ---------- Small screens: iOS-style sheet sidebar ---------- */
@media (max-width:860px){
  .sidebar{background:rgba(246,246,248,.92)!important;border-right:0!important;border-radius:0 16px 16px 0;}
  .btn{min-height:40px;}
  .btn-sm{min-height:34px;}
  .field input[type="text"],.field input[type="date"],.field input[type="number"],.field input[type="password"],.field select,.ss-trigger{min-height:42px;font-size:16px;}
}
.panel .pagination a{color:var(--ink);}.panel .pagination a.active{color:var(--ink);}

/* ===== Login screen: premium corporate finish ===== */
html:has(.auth-body),.auth-body{background:#fff!important;}
.auth-form-side{position:relative;overflow:hidden;
  background:
    radial-gradient(60% 45% at 0% 0%,rgba(0,87,184,.09),transparent 70%),
    radial-gradient(50% 40% at 100% 100%,rgba(229,32,42,.06),transparent 70%),
    linear-gradient(180deg,#fbfcff 0%,#f3f6fc 100%);}
.auth-form-side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(0,87,184,.16) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,transparent 35%,#000 100%);mask-image:radial-gradient(70% 60% at 50% 45%,transparent 35%,#000 100%);}
.auth-panel{position:relative;z-index:1;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(0,87,184,.10);border-radius:24px;padding:2.25rem 2rem 1.75rem;
  box-shadow:0 1px 2px rgba(10,30,80,.05),0 24px 60px -24px rgba(10,40,120,.28);}
.auth-submit{background:linear-gradient(180deg,#1a7bff,#0057b8)!important;box-shadow:0 10px 22px -10px rgba(0,87,184,.7)!important;}
.auth-submit:hover{background:linear-gradient(180deg,#3a8fff,#0a64cc)!important;}
.auth-photo-side{background:#030c28;border-top-left-radius:32px;border-bottom-left-radius:32px;
  box-shadow:-18px 0 50px -30px rgba(3,12,40,.6);isolation:isolate;}
.auth-photo-side img{object-position:50% 38%;transform:scale(1.02);}
.auth-photo-side::after{content:"";position:absolute;inset:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.auth-photo-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2rem clamp(1.5rem,4vw,3.25rem) clamp(1.75rem,4vh,3rem);color:#fff;}
.auth-photo-kicker{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#ffd27a;margin-bottom:.7rem;}
.auth-photo-caption strong{display:block;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.18;font-weight:700;letter-spacing:-.02em;max-width:24ch;text-wrap:balance;}
.auth-photo-caption p{margin:.7rem 0 0;max-width:46ch;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.78);}
.auth-photo-points{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.auth-photo-points li{font-size:.76rem;font-weight:500;padding:.38rem .8rem;border-radius:999px;color:#e9f2ff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
@media (max-width:900px){.auth-panel{padding:1.75rem 1.4rem 1.4rem;border-radius:20px;}}
@media (prefers-reduced-motion:reduce){.auth-panel{animation:none;}}

/* ===== Sidebar "Settings" group (Company settings, Change password, Two-factor, System health) ===== */
.nav-group{margin:0;}
.nav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--ink);user-select:none;transition:background .15s var(--ease);}
.nav-group>summary::-webkit-details-marker{display:none;}
.nav-group>summary:hover{background:rgba(0,0,0,.05);}
.nav-group>summary:focus-visible{outline:2px solid var(--sys-blue);outline-offset:-2px;}
.nav-group>summary .ico{width:20px;display:inline-flex;justify-content:center;}
.nav-group>summary .icon{color:var(--sys-blue);}
.nav-group>summary .nav-group-label{flex:1;}
.nav-group>summary::after{content:"";width:7px;height:7px;margin-right:4px;border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);
  transform:rotate(-45deg);transition:transform .2s var(--ease);}
.nav-group[open]>summary::after{transform:rotate(45deg);}
.nav-group-toggle.has-active .nav-group-label{font-weight:600;}
.nav-group-items{display:flex;flex-direction:column;gap:1px;margin:2px 0 4px 18px;padding-left:8px;border-left:1.5px solid rgba(0,0,0,.08);}
.nav-group-items a{padding:6px 10px;font-size:13px;}

/* Searchable dropdown: the arrow must be drawn once (an earlier "background:" shorthand had reset it to repeat). */
.ss-trigger{background-repeat:no-repeat!important;background-size:10px 14px!important;background-position:right 10px center!important;}
select,.field select,.filter-bar select,.manage-grid select{background-repeat:no-repeat!important;background-size:10px 14px!important;}

/* ===== Profile photo ===== */
a.user-avatar{text-decoration:none;overflow:hidden;flex:0 0 34px;}
.user-avatar.has-photo{background:#e9e9ee!important;}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.profile-photo-box{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;padding:4px 20px 20px;}
.profile-photo-preview{width:140px;height:140px;border-radius:50%;overflow:hidden;flex:0 0 140px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#a2a2a8,#7c7c82);color:#fff;font-size:56px;font-weight:600;box-shadow:0 0 0 4px #fff,0 8px 24px -8px rgba(0,0,0,.35);}
.profile-photo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-photo-form{flex:1 1 280px;max-width:460px;}
.profile-photo-remove{margin-top:10px;}