/* ════ LOGIN ════ */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; position:relative; }
.login-wrap { width:100%; max-width:420px; }
.login-brand { text-align:center; margin-bottom:32px; }
.login-brand-logo { width:56px; height:56px; border-radius:18px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; margin:0 auto 14px; }
.login-brand h1 { font-size:22px; font-weight:700; }
.login-brand p { font-size:14px; color:var(--fg-2); margin-top:4px; }
.login-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-lg); }
.login-hint { margin-top:14px; text-align:center; font-size:12px; color:var(--fg-3); }
.login-hint code { background:var(--bg-alt); padding:2px 6px; border-radius:4px; font-family:var(--font-mono); }

/* ════ LAYOUT ════ */
.a-layout { display:flex; min-height:100vh; }

/* ════ SIDEBAR ════ */
.a-sidebar { width:230px; flex-shrink:0; background:var(--bg-sidebar); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; border-right:1px solid rgba(255,255,255,0.05); transition:transform .28s; }
.a-sidebar-top { padding:18px 14px 14px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; }
.a-brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; color:#fff; text-decoration:none; }
.a-brand-icon { width:32px; height:32px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.a-brand img { height:32px; width:auto; border-radius:6px; }
.a-sidebar-close { display:none; width:30px; height:30px; border-radius:6px; background:transparent; border:none; color:rgba(255,255,255,.4); cursor:pointer; font-size:18px; align-items:center; justify-content:center; }
.a-sidebar-close:hover { background:rgba(255,255,255,.08); color:#fff; }

.a-nav { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.a-nav-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.25); padding:12px 10px 6px; }
.a-nav-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); font-size:13px; font-weight:500; cursor:pointer; color:rgba(255,255,255,.5); text-decoration:none; border:none; background:transparent; width:100%; text-align:left; font-family:var(--font); transition:all .14s; }
.a-nav-item i { font-size:17px; flex-shrink:0; }
.a-nav-item:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); }
.a-nav-item.active { background:rgba(96,165,250,.15); color:#60a5fa; }

.a-sidebar-foot { padding:10px 8px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:1px; }

/* ════ TOPBAR ════ */
.a-topbar { background:var(--bg-card); border-bottom:1px solid var(--border); padding:0 22px; height:58px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:50; }
#a-menu-btn { display:none; }
.a-topbar-title { font-size:15px; font-weight:600; flex:1; }

/* ════ CONTENT ════ */
.a-main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.a-content { flex:1; padding:24px; overflow-y:auto; }
.a-panel { display:none; } .a-panel.active { display:block; }

/* ════ SECTION HEADER ════ */
.a-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.a-header-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ════ FORM CARD ════ */
.a-form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:16px; }

/* ════ ORDER DETAIL SECTIONS ════ */
.od-section { padding-bottom:16px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.od-section:last-child { border-bottom:none; padding-bottom:0; }
.od-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-3); }

/* Status update panel */
.status-update { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; }
.status-update-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.status-update-row > .form-group { flex:1; min-width:140px; }
.status-update-row > .btn { flex-shrink:0; }

/* ════ STATUS GROUPS ════ */
.sg-list { display:flex; flex-direction:column; gap:10px; }
.sg-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.sg-card-head { padding:14px 18px; display:flex; align-items:center; gap:12px; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.sg-card-name { font-weight:600; font-size:15px; flex:1; }
.sg-default-badge { font-size:11px; font-weight:600; background:rgba(var(--accent-rgb),.1); color:var(--accent); border-radius:20px; padding:3px 9px; }
.sg-statuses { padding:14px 18px; display:flex; flex-wrap:wrap; gap:8px; }
.sg-status-pill { display:flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:20px; border:1px solid var(--border); background:var(--bg-card); font-weight:500; }

/* Status key editor rows */
.sk-row { display:grid; grid-template-columns:1fr 1fr 130px 100px auto; gap:8px; align-items:center; }
.sk-row .color-pick { display:flex; gap:4px; flex-wrap:wrap; }
.color-dot { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .14s; }
.color-dot.sel { border-color: var(--fg); transform:scale(1.15); }

/* ════ SETTINGS / LANDING CMS ════ */
.cms-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); margin-bottom:16px; overflow:hidden; }
.cms-section-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.cms-section-head i.ti-chevron-down { margin-left:auto; transition:transform .2s; color:var(--fg-3); }
.cms-section-head.open i.ti-chevron-down { transform:rotate(180deg); }
.cms-section-body { padding:20px 18px; display:none; flex-direction:column; gap:14px; }
.cms-section-body.open { display:flex; }
.cms-section-title { font-size:14px; font-weight:600; }

/* ════ SIDEBAR OVERLAY ════ */
.a-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99; backdrop-filter:blur(2px); display:none; }
.a-overlay.show { display:block; }

/* ════ RESPONSIVE ════ */
@media (max-width:900px) {
  .a-sidebar { position:fixed; z-index:100; top:0; left:0; height:100%; transform:translateX(-100%); }
  .a-sidebar.open { transform:translateX(0); }
  .a-sidebar-close { display:flex !important; }
  #a-menu-btn { display:flex !important; }
  .a-content { padding:16px; }
  .a-header { flex-direction:column; }
  .a-header-actions { width:100%; }
  .sk-row { grid-template-columns:1fr 1fr; }
  .sk-row .color-pick { grid-column:1/-1; }
}
@media (max-width:600px) {
  .a-form-card { padding:16px; }
  .status-update-row { flex-direction:column; }
  .tab-nav { gap:0; }
}