:root {
    /* neutrals — cool, faintly green-biased so the brand color feels native to the page */
    --sd-bg:        #F4F7F5;
    --sd-surface:   #FFFFFF;
    --sd-ink:       #16221D;
    --sd-ink-soft:  #62716A;
    --sd-ink-faint: #9AA6A0;
    --sd-border:    #E5EBE7;
    --sd-border-soft: #EFF3F1;

    /* brand */
    --sd-green:       #0E9473;
    --sd-green-dark:  #0A7A5E;
    --sd-green-tint:  #DEF5EC;
    --sd-green-ink:   #0A6B52;

    /* accents — semantic, used for stat tiles / pills / highlights */
    --sd-blue:       #2E68DE;
    --sd-blue-tint:  #E6EEFD;
    --sd-blue-ink:   #1E4FB8;

    --sd-amber:      #C1790E;
    --sd-amber-tint: #FBF0DB;
    --sd-amber-ink:  #8A5709;

    --sd-violet:      #6E4FD6;
    --sd-violet-tint: #EDE8FC;
    --sd-violet-ink:  #5638B5;

    --sd-red:      #D1435B;
    --sd-red-tint: #FBEAEE;
    --sd-red-ink:  #991B1B;

    --sd-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sd-shadow-card: 0 1px 2px rgba(22,34,29,0.04), 0 1px 8px rgba(22,34,29,0.04);
    --sd-shadow-pop:  0 8px 24px rgba(22,34,29,0.10);
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0; padding: 0; height: 100%;
    background: var(--sd-bg);
    color: var(--sd-ink);
}

:focus-visible { outline: 2px solid var(--sd-green); outline-offset: 3px; border-radius: 4px; }
.login-tagline h1:focus { outline: none; }

/* ── Shell ── */
.sd-shell { display: flex; height: 100vh; overflow: hidden; }
.sd-main  { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--sd-bg); }

/* ── Sidebar ── */
.sd-sidebar { width: 218px; background: linear-gradient(165deg, #0B7A5D 0%, #0E9473 55%, #12A883 100%);
              display: flex; flex-direction: column; flex-shrink: 0; position: relative; overflow: hidden; }
.sd-sidebar::before { content: ''; position: absolute; top: -90px; right: -70px; width: 220px; height: 220px;
                       border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; }
.sd-logo { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.12); position: relative; z-index: 1; }
.sd-logo-name { font-family: var(--sd-font-display); font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.sd-logo-sub  { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.sd-nav { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.sd-ni { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
         font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.62); text-decoration: none;
         transition: background 0.15s ease, color 0.15s ease; }
.sd-ni:hover { background: rgba(255,255,255,0.10); color: #fff; }
.sd-ni.active { background: #fff; color: var(--sd-green-ink); box-shadow: var(--sd-shadow-card); }
.sd-ni svg { width: 15px; height: 15px; flex-shrink: 0; }
.sd-ni.active svg path, .sd-ni.active svg circle, .sd-ni.active svg rect { stroke: var(--sd-green-ink); }
.sd-ni.active svg rect[fill] { fill: var(--sd-green-ink); }
.sd-footer { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,0.12); position: relative; z-index: 1;
             display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sd-footer-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
.sd-footer-role { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.sd-logout-btn { background: none; border: none; cursor: pointer; padding: 5px;
                 border-radius: 6px; display: flex; align-items: center;
                 opacity: 0.6; transition: opacity 0.15s; flex-shrink: 0; }
.sd-logout-btn:hover { opacity: 1; background: rgba(255,255,255,0.14); }

/* ── Topbar ── */
.sd-topbar { padding: 14px 20px; border-bottom: 1px solid var(--sd-border); display: flex;
             align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--sd-surface); }
.sd-topbar-title { font-family: var(--sd-font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.sd-topbar-right { display: flex; align-items: center; gap: 8px; }
.sd-dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-green { background: var(--sd-green); box-shadow: 0 0 0 3px var(--sd-green-tint); } .dot-grey { background: #b7bfba; }
.sd-conn { font-size: 12px; color: var(--sd-ink-soft); font-weight: 500; }

/* ── Stats bar ── */
.sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px;
            padding: 14px 20px; border-bottom: 1px solid var(--sd-border); flex-shrink: 0; background: var(--sd-bg); }
.sd-stat { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
           background: var(--sd-surface); border: 1px solid var(--sd-border-soft); box-shadow: var(--sd-shadow-card); }
.sd-stat-top { display: flex; align-items: center; justify-content: space-between; }
.sd-stat-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-stat-l { font-size: 11px; color: var(--sd-ink-soft); font-weight: 600; }
.sd-stat-v { font-family: var(--sd-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.3px;
             font-variant-numeric: tabular-nums; color: var(--sd-ink); }

.sd-stat-blue   .sd-stat-icon { background: var(--sd-blue-tint);   color: var(--sd-blue-ink); }
.sd-stat-amber  .sd-stat-icon { background: var(--sd-amber-tint);  color: var(--sd-amber-ink); }
.sd-stat-green  .sd-stat-icon { background: var(--sd-green-tint);  color: var(--sd-green-ink); }
.sd-stat-violet .sd-stat-icon { background: var(--sd-violet-tint); color: var(--sd-violet-ink); }
.sd-stat-v.green  { color: var(--sd-green-ink); }
.sd-stat-v.amber  { color: var(--sd-amber-ink); }
.sd-stat-v.purple { color: var(--sd-violet-ink); }

/* ── Body ── */
.sd-body { display: flex; flex: 1; overflow: hidden; }

/* ── Queue ── */
.sd-queue { width: 240px; border-right: 1px solid var(--sd-border); overflow-y: auto; flex-shrink: 0; background: var(--sd-surface); }
.sd-qh { padding: 12px 14px 6px; font-size: 10.5px; font-weight: 700; color: var(--sd-ink-faint);
         text-transform: uppercase; letter-spacing: .6px; }
.sd-oc { padding: 12px 14px; border-bottom: 1px solid var(--sd-border-soft); cursor: pointer;
         border-left: 2.5px solid transparent; transition: background 0.15s ease; }
.sd-oc:hover { background: #FAFBFA; }
.sd-oc.sel  { background: var(--sd-green-tint); border-left-color: var(--sd-green); }
.sd-on { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.sd-om { font-size: 10.5px; color: var(--sd-ink-faint); margin-bottom: 6px; }
.sd-ot { font-size: 10.5px; color: var(--sd-ink-faint); float: right; margin-top: -16px; }

/* ── Pills ── */
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
        letter-spacing: 0.2px; }
.pill-new { background: var(--sd-blue-tint);   color: var(--sd-blue-ink); }
.pill-rev { background: var(--sd-amber-tint);  color: var(--sd-amber-ink); }
.pill-rdy { background: var(--sd-green-tint);  color: var(--sd-green-ink); }
.pill-del { background: var(--sd-violet-tint); color: var(--sd-violet-ink); }
.pill-col { background: var(--sd-border-soft); color: var(--sd-ink-soft); }

/* ── Detail panel ── */
/* ── Empty states ── */
.sd-empty { padding: 10px 13px; font-size: 11px; color: var(--sd-ink-faint); font-style: italic; }
.sd-detail-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
                   color: var(--sd-ink-faint); font-size: 12px; margin-top: 60px; }

.sd-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--sd-surface); }
.sd-chat-header { padding: 16px 20px; border-bottom: 1px solid var(--sd-border); flex-shrink: 0; background: var(--sd-surface); }
.sd-chat-status { padding: 12px 20px; border-bottom: 1px solid var(--sd-border); flex-shrink: 0; background: var(--sd-surface); }
.sd-chat-messages { flex: 1; overflow-y: auto; padding: 14px 18px; background: #EAF1EC; display: flex; flex-direction: column; gap: 4px; }
.sd-chat-compose { border-top: 1px solid var(--sd-border); padding: 8px 18px; flex-shrink: 0; background: var(--sd-bg); display: flex; gap: 8px; align-items: center; }
.sd-dh { display: flex; align-items: flex-start; justify-content: space-between; }
.sd-dn { font-family: var(--sd-font-display); font-size: 16px; font-weight: 700; }
.sd-dm { font-size: 11px; color: var(--sd-ink-soft); margin-top: 3px; }

.sd-script-box { border: 1px solid var(--sd-border); border-radius: 12px; background: var(--sd-bg);
                 padding: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.sd-thumb { width: 46px; height: 60px; background: var(--sd-surface); border: 1px solid var(--sd-border);
            border-radius: 6px; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 4px; flex-shrink: 0; }
.tl { height: 3px; background: var(--sd-border); border-radius: 2px; }
.sd-si { flex: 1; }
.sd-st { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.sd-sd { font-size: 11px; color: var(--sd-ink-soft); line-height: 1.5; }
.sd-vb { font-size: 11px; font-weight: 600; color: var(--sd-green-ink); border: 1px solid var(--sd-green); border-radius: 20px;
         padding: 4px 12px; text-decoration: none; white-space: nowrap; }

.sd-sl { font-size: 10.5px; font-weight: 700; color: var(--sd-ink-faint); text-transform: uppercase;
         letter-spacing: .6px; margin-bottom: 7px; }

.sd-status-rail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sd-sb { flex: 1; min-width: 60px; padding: 9px 6px; border-radius: 9px; font-size: 11px;
         font-weight: 600; cursor: pointer; border: 1px solid var(--sd-border);
         background: var(--sd-surface); color: var(--sd-ink-soft); text-align: center; transition: all 0.15s; }
.sd-sb:hover:not(:disabled) { background: var(--sd-bg); color: var(--sd-ink); border-color: #c9d3ce; }
.sd-sb.act  { background: var(--sd-green); color: #fff; border-color: var(--sd-green); box-shadow: 0 2px 8px rgba(14,148,115,0.25); }
.sd-sb:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Error toasts ── */
.sd-toast-stack {
    position: fixed; bottom: 20px; right: 20px; z-index: 10000;
    display: flex; flex-direction: column; gap: 8px; max-width: 360px;
}
.sd-toast {
    background: var(--sd-surface); border: 1px solid #F5C4CE; border-left: 4px solid var(--sd-red);
    border-radius: 10px; padding: 12px 14px; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px;
    box-shadow: var(--sd-shadow-pop);
    animation: toast-in 0.2s ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sd-toast-body { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.sd-toast-msg { font-size: 13px; font-weight: 500; color: #1a1a1a; }
.sd-toast-detail { font-size: 11px; color: #666; margin-top: 2px; word-break: break-word; }
.sd-toast-close { background: none; border: none; cursor: pointer; color: #999;
                  font-size: 13px; padding: 0; line-height: 1; flex-shrink: 0; }
.sd-toast-close:hover { color: #333; }

/* ── Chat date float + separators ── */
.chat-date-float {
    position: sticky; top: 8px; z-index: 10;
    align-self: center; pointer-events: none;
    background: rgba(0,0,0,0.38); color: #fff;
    font-size: 11px; font-weight: 500;
    padding: 3px 11px; border-radius: 10px;
    white-space: nowrap; margin-bottom: -4px;
}
.chat-date-sep {
    align-self: center;
    background: rgba(0,0,0,0.25); color: #fff;
    font-size: 11px; font-weight: 500;
    padding: 3px 11px; border-radius: 10px;
    margin: 10px 0 6px;
    pointer-events: none;
}

/* ── Chat search toolbar ── */
.chat-toolbar { display: flex; align-items: center; padding: 4px 14px; background: var(--sd-bg); border-bottom: 1px solid var(--sd-border); flex-shrink: 0; min-height: 32px; }
.chat-search-bar { flex: 1; display: flex; align-items: center; gap: 6px; }
.chat-search-input { flex: 1; border: 1px solid var(--sd-border); background: var(--sd-surface); border-radius: 14px; padding: 4px 12px; font-size: 12px; outline: none; }
.chat-search-input:focus { border-color: var(--sd-green); }
.chat-search-btn { margin-left: auto; background: none; border: none; cursor: pointer; padding: 4px; color: var(--sd-ink-soft); display: flex; align-items: center; border-radius: 50%; }
.chat-search-btn:hover { background: var(--sd-border-soft); color: var(--sd-ink); }
.chat-no-results { text-align: center; padding: 24px 0; font-size: 12px; color: var(--sd-ink-faint); }

/* ── Chat bubbles ── */
.chat-row { display: flex; flex-direction: column; max-width: 72%; }
.chat-row-in  { align-items: flex-start; align-self: flex-start; }
.chat-row-out { align-items: flex-end;   align-self: flex-end; }
.chat-bubble { padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
               word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.chat-bubble-in  { background: #fff; color: #1a1a1a; border-top-left-radius: 3px; }
.chat-bubble-out { background: #DCF8C6; color: #1a1a1a; border-top-right-radius: 3px; }
.chat-meta { display: flex; align-items: center; gap: 3px; margin-top: 2px; padding: 0 3px; }
.chat-time  { font-size: 10px; color: #999; }
.chat-ticks { display: flex; align-items: center; opacity: 0.7; }
.chat-img { max-width: 220px; max-height: 280px; border-radius: 8px; display: block; cursor: zoom-in; }

/* ── Lightbox ── */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999;
                    display: flex; align-items: center; justify-content: center; }
.lightbox-box { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: 8px; display: block;
                box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 30px; height: 30px;
                  border-radius: 50%; background: #fff; border: none; cursor: pointer;
                  font-size: 13px; font-weight: 600; display: flex; align-items: center;
                  justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* ── Message compose ── */
.sd-compose-input { flex: 1; border: 1px solid var(--sd-border); border-radius: 20px; padding: 9px 15px;
                    font-size: 13px; outline: none; font-family: inherit; background: var(--sd-surface); }
.sd-compose-input:focus { border-color: var(--sd-green); box-shadow: 0 0 0 3px var(--sd-green-tint); }
.sd-compose-input:disabled { background: var(--sd-bg); }
.sd-compose-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--sd-green); color: #fff;
                  border: none; cursor: pointer; display: flex; align-items: center;
                  justify-content: center; flex-shrink: 0; transition: background 0.15s ease; }
.sd-compose-btn:hover:not(:disabled) { background: var(--sd-green-dark); }
.sd-compose-btn:disabled { opacity: 0.45; cursor: default; }
.sd-compose-err { font-size: 11px; color: var(--sd-red-ink); padding: 4px 18px 6px; }

/* ── Login ── */
.login-shell { min-height: 100vh; display: flex; }

.login-left { width: 52%; background: linear-gradient(155deg, #085A45 0%, #0E9473 55%, #1BBE95 100%);
              display: flex; align-items: center; justify-content: center; padding: 60px 56px;
              position: relative; overflow: hidden; }
.login-left::before { content: ''; position: absolute; top: -120px; right: -120px;
                       width: 400px; height: 400px; border-radius: 50%;
                       background: rgba(255,255,255,0.05); }
.login-left::after  { content: ''; position: absolute; bottom: -80px; left: -80px;
                       width: 300px; height: 300px; border-radius: 50%;
                       background: rgba(255,255,255,0.05); }
.login-left-inner { position: relative; z-index: 1; max-width: 380px; }

.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 56px; }
.login-brand-icon { width: 44px; height: 44px; border-radius: 12px;
                    background: rgba(255,255,255,0.14); display: flex;
                    align-items: center; justify-content: center; }
.login-brand-name { font-family: var(--sd-font-display); font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }

.login-tagline h1 { font-family: var(--sd-font-display); font-size: 42px; font-weight: 800; color: #fff; line-height: 1.15;
                    letter-spacing: -1px; margin: 0 0 16px; }
.login-tagline p  { font-size: 15px; color: rgba(255,255,255,0.68); line-height: 1.6;
                    margin: 0 0 40px; }

.login-features { display: flex; flex-direction: column; gap: 12px; }
.login-feat { display: flex; align-items: center; gap: 10px;
              font-size: 13px; color: rgba(255,255,255,0.8); }
.login-feat-dot { width: 6px; height: 6px; border-radius: 50%;
                  background: rgba(255,255,255,0.55); flex-shrink: 0; }

.login-right { flex: 1; display: flex; align-items: center; justify-content: center;
               background: var(--sd-bg); padding: 60px 48px; }
.login-form-wrap { width: 100%; max-width: 360px; }

.login-form-header { margin-bottom: 32px; }
.login-form-header h2 { font-family: var(--sd-font-display); font-size: 26px; font-weight: 800; color: var(--sd-ink); margin: 0 0 6px;
                         letter-spacing: -0.5px; }
.login-form-header p  { font-size: 14px; color: var(--sd-ink-soft); margin: 0; }

.login-error { background: var(--sd-red-tint); color: var(--sd-red-ink); font-size: 13px; border: 1px solid #F5C4CE;
               padding: 10px 14px; border-radius: 10px; margin-bottom: 20px;
               display: flex; align-items: flex-start; gap: 8px; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 12px; font-weight: 600;
                     color: var(--sd-ink); margin-bottom: 6px; letter-spacing: 0.2px; }
.login-field input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--sd-border);
                     border-radius: 10px; font-size: 14px; outline: none;
                     box-sizing: border-box; background: var(--sd-surface); color: var(--sd-ink);
                     transition: border-color 0.15s; }
.login-field input:focus { border-color: var(--sd-green); box-shadow: 0 0 0 3px var(--sd-green-tint); }
.login-field input::placeholder { color: var(--sd-ink-faint); }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 42px; }
.login-password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                          background: none; border: none; cursor: pointer; padding: 4px;
                          color: var(--sd-ink-faint); display: flex; align-items: center; }
.login-password-toggle:hover { color: var(--sd-green); }
.login-btn { width: 100%; padding: 12px 20px; background: var(--sd-green); color: #fff;
             border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
             cursor: pointer; margin-top: 6px; display: flex; align-items: center;
             justify-content: center; gap: 8px; transition: background 0.15s, transform 0.1s; }
.login-btn:hover            { background: var(--sd-green-dark); }
.login-btn:active           { transform: scale(0.99); }
.login-btn:disabled         { background: var(--sd-green-dark); opacity: 0.75; cursor: not-allowed; }
.login-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35);
                 border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }

@media (max-width: 768px) {
    .login-left  { display: none; }
    .login-right { padding: 40px 24px; }
}

/* ── Filter tab bar ── */
.sd-tab-bar { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--sd-border);
              background: var(--sd-surface); flex-shrink: 0; }
.sd-tab { padding: 10px 12px; font-size: 12.5px; color: var(--sd-ink-soft); font-weight: 500; background: none; border: none;
          cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
          display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: color 0.15s ease; }
.sd-tab:hover { color: var(--sd-ink); }
.sd-tab.active { color: var(--sd-green-ink); border-bottom-color: var(--sd-green); font-weight: 700; }
.sd-tab-badge { font-size: 10px; background: var(--sd-border-soft); color: var(--sd-ink-soft); border-radius: 10px;
                padding: 1px 6px; font-weight: 600; }
.sd-tab.active .sd-tab-badge { background: var(--sd-green-tint); color: var(--sd-green-ink); }

/* ── Misc detail states ── */
.sd-no-asset { font-size: 12px; color: var(--sd-ink-faint); font-style: italic; margin-bottom: 14px; }
.sd-spinner { width: 20px; height: 20px; border: 2px solid var(--sd-border); border-top-color: var(--sd-green);
              border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Search bar ── */
.sd-search-bar { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px;
                 border-bottom: 1px solid var(--sd-border-soft); background: var(--sd-surface); }
.sd-search-input-wrap { position: relative; display: flex; align-items: center; }
.sd-search-icon { position: absolute; left: 12px; color: var(--sd-ink-faint); flex-shrink: 0;
                  pointer-events: none; }
.sd-search-input { flex: 1; padding: 11px 16px 11px 38px; border: 1.5px solid var(--sd-border);
                   border-radius: 10px; font-size: 14px; outline: none;
                   background: var(--sd-bg); color: var(--sd-ink); font-family: inherit;
                   transition: all 0.2s ease; }
.sd-search-input:focus { border-color: var(--sd-green); background: var(--sd-surface);
                        box-shadow: 0 0 0 3px var(--sd-green-tint); }
.sd-search-input::placeholder { color: var(--sd-ink-faint); }
.sd-search-clear { position: absolute; right: 12px; background: none; border: none;
                   cursor: pointer; padding: 4px; display: flex; align-items: center;
                   color: var(--sd-ink-faint); transition: color 0.2s ease; flex-shrink: 0; }
.sd-search-clear:hover { color: var(--sd-ink-soft); }
.sd-search-results { font-size: 12px; color: var(--sd-ink-soft); font-weight: 600; margin-left: 2px; }

/* ── Customers page ── */
.sd-cust-shell { flex: 1; overflow-y: auto; background: var(--sd-surface); }
.sd-cust-list { padding: 0; }
.sd-cust-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px;
               cursor: pointer; border-bottom: 1px solid var(--sd-border-soft); transition: all 0.15s ease;
               position: relative; }
.sd-cust-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
                       width: 3px; background: transparent; transition: background 0.15s ease; }
.sd-cust-row:hover { background: #FAFBFA; }
.sd-cust-row:hover::before { background: var(--sd-green); }
.sd-cust-row.expanded { background: #FAFBFA; }
.sd-cust-row.expanded::before { background: var(--sd-green); }
.sd-cust-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--sd-green), #1BBE95);
                  color: #fff; font-size: 13px; font-weight: 700;
                  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
                  box-shadow: 0 2px 8px rgba(14,148,115,0.2); }
.sd-cust-info { flex: 1; min-width: 0; }
.sd-cust-name { font-size: 14px; font-weight: 600; color: var(--sd-ink); }
.sd-cust-phone { font-size: 12px; color: var(--sd-ink-faint); margin-top: 2px; }
.sd-cust-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sd-cust-count { font-size: 12px; color: var(--sd-ink-soft); font-weight: 600; }
.sd-cust-time { font-size: 11px; color: var(--sd-ink-faint); min-width: 60px; text-align: right; }
.sd-cust-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: var(--sd-ink-faint);
                   display: flex; align-items: center; }
.sd-cust-chevron.open { transform: rotate(180deg); }
.sd-cust-orders { border-bottom: 1px solid var(--sd-border-soft); background: #FAFBFA; padding: 8px 20px 8px 76px; }
.sd-co-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
             border-bottom: 1px solid var(--sd-border-soft); }
.sd-co-row:last-child { border-bottom: none; }
.sd-co-date { font-size: 12px; color: var(--sd-ink-soft); flex: 1; }

/* ── Deliveries page ── */
.sd-del-shell { flex: 1; overflow-y: auto; padding: 18px 20px; background: var(--sd-bg); }
.sd-del-badge { background: var(--sd-violet-tint); color: var(--sd-violet-ink); font-size: 11px; font-weight: 700;
                padding: 3px 10px; border-radius: 10px; }
.sd-del-section-label { font-size: 10.5px; font-weight: 700; color: var(--sd-ink-faint);
                         text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.sd-del-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
               margin-bottom: 4px; }
.sd-del-card { background: var(--sd-surface); border: 1px solid var(--sd-border-soft); border-radius: 12px; padding: 14px;
               display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sd-shadow-card); }
.sd-del-card-done { opacity: 0.65; }
.sd-del-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sd-del-name { font-size: 14px; font-weight: 600; }
.sd-del-phone { font-size: 11px; color: var(--sd-ink-faint); margin-top: 2px; }
.sd-del-script { }
.sd-del-footer { display: flex; align-items: center; justify-content: space-between;
                 border-top: 1px solid var(--sd-border-soft); padding-top: 10px; }
.sd-del-time { font-size: 11px; color: var(--sd-ink-faint); }
.sd-del-collect-btn { display: flex; align-items: center; gap: 0; padding: 7px 13px;
                      background: var(--sd-green); color: #fff; border: none; border-radius: 8px;
                      font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; }
.sd-del-collect-btn:hover { background: var(--sd-green-dark); }
.sd-del-collect-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Mobile header (hamburger bar) ── */
.sd-mobile-header {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-border);
    flex-shrink: 0;
}
.sd-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--sd-ink-soft);
    display: flex;
    align-items: center;
    border-radius: 6px;
}
.sd-hamburger:hover { background: var(--sd-bg); }
.sd-mobile-brand { font-family: var(--sd-font-display); font-size: 15px; font-weight: 700; color: var(--sd-green-ink); }

/* ── Mobile nav overlay ── */
.sd-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}

/* ── Back button (mobile) ── */
.sd-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-green-ink);
    padding: 4px 0;
}
.sd-back-btn:hover { opacity: 0.75; }

/* ── Responsive ── */
@media (max-width: 767px) {
    /* Show mobile header bar */
    .sd-mobile-header { display: flex; }

    /* Sidebar: slide in as overlay */
    .sd-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 230px;
    }
    .sd-nav-open .sd-sidebar { transform: translateX(0); }
    .sd-nav-open .sd-nav-overlay { display: block; }

    /* Stats: 2x2 grid */
    .sd-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
        padding: 10px 12px;
        gap: 6px;
    }
    .sd-stat-v { font-size: 17px; }

    /* Tab bar: scrollable */
    .sd-tab-bar { overflow-x: auto; padding: 0 12px; }
    .sd-tab-bar::-webkit-scrollbar { display: none; }

    /* Body: stacked */
    .sd-body { flex-direction: column; }

    /* Queue: full width, visible by default */
    .sd-queue { width: 100%; border-right: none; border-bottom: 1px solid #e5e5e5; }

    /* When detail is showing on mobile, hide queue and show detail */
    .sd-body.mobile-detail .sd-queue { display: none; }
    .sd-body.mobile-detail .sd-detail { display: flex; }

    /* Hide detail by default on mobile (show queue) */
    .sd-detail { display: none; }

    /* Chat compose: more padding-friendly */
    .sd-chat-compose { padding: 8px 12px; }
    .sd-chat-header { padding: 12px 14px; }
    .sd-chat-status { padding: 8px 14px; }
    .sd-chat-messages { padding: 12px 12px; }

    /* Topbar adjustments */
    .sd-topbar { padding: 10px 14px; }

    /* Delivery grid: single column */
    .sd-del-grid { grid-template-columns: 1fr; }
    .sd-del-shell { padding: 12px 12px; }

    /* Customer orders indent less on mobile */
    .sd-cust-orders { padding-left: 16px; }

    /* Status rail buttons: wrap nicely */
    .sd-sb { min-width: 0; padding: 8px 4px; font-size: 10px; }

    /* Chat bubbles: wider on small screens */
    .chat-row { max-width: 88%; }

    /* Search bar padding */
    .sd-search-bar { padding: 12px 12px; }
}

/* ── Prescriptions page: detail panel ── */
.px-detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--sd-border-soft); flex-shrink: 0; background: var(--sd-surface);
}

/* Scrollable top section: prescription card + status buttons */
.px-top-scroll {
    overflow-y: auto; padding: 16px 18px; display: flex;
    flex-direction: column; gap: 12px; background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-border-soft); flex-shrink: 0;
    max-height: 220px;
}

/* Chat section fills the remaining space */
.px-chat-section {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
    background: var(--sd-surface);
}
.px-chat-feed {
    flex: 1; overflow-y: auto; background: #EAF1EC;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.px-no-messages { font-size: 12px; color: var(--sd-ink-faint); font-style: italic; text-align: center; padding: 16px 0; }
.px-compose {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 16px; border-top: 1px solid var(--sd-border);
    background: var(--sd-bg); flex-shrink: 0;
}

/* Script card */
.px-script-card {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, var(--sd-green-tint), #EAFBF3);
    border: 1px solid #BEE9D9; border-radius: 12px; padding: 12px 14px;
}
.px-script-icon {
    width: 40px; height: 40px; background: var(--sd-surface); border-radius: 10px;
    border: 1px solid #C8ead9; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.px-script-info { flex: 1; }
.px-script-title { font-size: 13px; font-weight: 700; color: var(--sd-green-ink); margin-bottom: 2px; }
.px-script-sub   { font-size: 11px; color: #59a487; }
.px-view-btn {
    display: flex; align-items: center; gap: 5px;
    background: var(--sd-green); color: #fff; border: none; border-radius: 8px;
    padding: 7px 13px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
}
.px-view-btn:hover:not(:disabled) { background: var(--sd-green-dark); }
.px-view-btn:disabled { opacity: 0.7; cursor: default; }

.px-no-asset {
    display: flex; align-items: center; gap: 8px;
    color: var(--sd-ink-faint); font-size: 12px; padding: 4px 0;
}
.px-error-msg {
    font-size: 11px; color: var(--sd-red-ink); background: var(--sd-red-tint);
    border: 1px solid #F5C4CE; border-radius: 6px; padding: 6px 10px;
}

/* Section labels */
.px-section-label {
    font-size: 10px; font-weight: 700; color: var(--sd-ink-faint);
    text-transform: uppercase; letter-spacing: .7px;
}

/* Status buttons */
.px-status-rail { display: flex; gap: 6px; flex-wrap: wrap; }
.px-sb {
    flex: 1; min-width: 70px; padding: 9px 6px; border-radius: 9px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--sd-border); background: var(--sd-bg); color: var(--sd-ink-soft);
    text-align: center; transition: all 0.15s; display: flex;
    align-items: center; justify-content: center; gap: 4px;
}
.px-sb:hover:not(:disabled) { border-color: var(--sd-green); color: var(--sd-green-ink); background: var(--sd-green-tint); }
.px-sb-act  { background: var(--sd-green) !important; color: #fff !important; border-color: var(--sd-green) !important; }
.px-sb:disabled { cursor: default; opacity: 0.7; }

/* Chat bubbles override */
.chat-media-bubble { display: flex; align-items: center; font-style: italic; opacity: 0.85; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
    font-size: 13px;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Success toast variant ── */
.sd-toast-success { border-color: #bbf7d0; border-left-color: var(--sd-green); }

/* ── Add Customer button ── */
.sd-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sd-green); color: #fff; border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background 0.15s, transform 0.1s;
}
.sd-add-btn:hover  { background: var(--sd-green-dark); }
.sd-add-btn:active { transform: scale(0.98); }

/* ── Message customer button (row-level) ── */
.sd-msg-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--sd-green-tint); color: var(--sd-green-ink); border: 1px solid transparent;
    border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.sd-msg-btn:hover:not(:disabled) { background: var(--sd-green); color: #fff; }
.sd-msg-btn:disabled { opacity: 0.6; cursor: default; }
.sd-msg-btn svg { flex-shrink: 0; }

/* ── Add Customer drawer ── */
.sd-drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 9998; animation: sd-fade-in 0.2s ease;
}
@keyframes sd-fade-in { from { opacity: 0; } to { opacity: 1; } }

.sd-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999;
    width: 420px; max-width: 92vw; background: var(--sd-surface);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.16);
    animation: sd-drawer-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sd-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.sd-drawer-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--sd-border-soft); flex-shrink: 0;
}
.sd-drawer-title { font-family: var(--sd-font-display); font-size: 16px; font-weight: 700; color: var(--sd-ink); }
.sd-drawer-step  { font-size: 12px; color: var(--sd-ink-faint); margin-top: 3px; }
.sd-drawer-close {
    background: none; border: none; cursor: pointer; color: var(--sd-ink-faint); padding: 4px;
    display: flex; align-items: center; border-radius: 6px; transition: all 0.15s;
}
.sd-drawer-close:hover { color: var(--sd-ink); background: var(--sd-border-soft); }

.sd-step-track { display: flex; gap: 6px; padding: 4px 20px 0; flex-shrink: 0; }
.sd-step-seg {
    flex: 1; height: 3px; border-radius: 2px; background: var(--sd-border-soft);
    transition: background 0.3s ease;
}
.sd-step-seg.on { background: var(--sd-green); }

.sd-drawer-body { padding: 22px 20px; overflow-y: auto; flex: 1; }

/* Step transitions */
.sd-step { display: flex; flex-direction: column; }
.sd-step-fwd  { animation: sd-step-fwd 0.28s ease; }
.sd-step-back { animation: sd-step-back 0.28s ease; }
@keyframes sd-step-fwd {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sd-step-back {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Form fields */
.sd-form-field { margin-bottom: 18px; }
.sd-form-field label {
    display: block; font-size: 12px; font-weight: 600; color: var(--sd-ink);
    margin-bottom: 6px; letter-spacing: 0.2px;
}
.sd-form-opt { font-weight: 400; color: var(--sd-ink-faint); }
.sd-form-input {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--sd-border);
    border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;
    background: var(--sd-surface); color: var(--sd-ink); font-family: inherit; transition: border-color 0.15s;
}
.sd-form-input:focus { border-color: var(--sd-green); box-shadow: 0 0 0 3px var(--sd-green-tint); }
.sd-form-input::placeholder { color: var(--sd-ink-faint); }
.sd-form-textarea { resize: vertical; min-height: 68px; line-height: 1.5; }
.sd-form-input-err { border-color: var(--sd-red); }
.sd-form-input-err:focus { border-color: var(--sd-red); box-shadow: 0 0 0 3px var(--sd-red-tint); }
.sd-form-err  { font-size: 12px; color: var(--sd-red-ink); margin-top: 6px; }
.sd-form-hint { font-size: 11px; color: var(--sd-ink-faint); margin-top: 6px; }

/* Form actions */
.sd-form-actions { display: flex; gap: 10px; margin-top: 6px; }
.sd-btn {
    padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; border: 1.5px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.sd-btn-primary { background: var(--sd-green); color: #fff; border-color: var(--sd-green); flex: 1; }
.sd-btn-primary:hover:not(:disabled) { background: var(--sd-green-dark); border-color: var(--sd-green-dark); }
.sd-btn-primary:disabled { opacity: 0.7; cursor: default; }
.sd-btn-ghost { background: var(--sd-surface); color: var(--sd-ink-soft); border-color: var(--sd-border); }
.sd-btn-ghost:hover:not(:disabled) { background: var(--sd-bg); color: var(--sd-ink); }
.sd-btn-ghost:disabled { opacity: 0.5; cursor: default; }

/* Success state */
.sd-form-success {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 40px 0; animation: sd-fade-in 0.25s ease;
}
.sd-success-check {
    width: 60px; height: 60px; border-radius: 50%; background: var(--sd-green);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(14,148,115,0.3);
    animation: sd-check-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sd-check-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.sd-success-title { font-family: var(--sd-font-display); font-size: 15px; font-weight: 700; color: var(--sd-ink); }

@media (max-width: 767px) {
    .sd-drawer { width: 100%; max-width: 100vw; }
    .sd-add-btn { padding: 7px 11px; font-size: 12px; }
}

/* ── Customer erasure (danger) ── */
.sd-cust-danger {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid #f0e2e2;
}
.sd-cust-danger-text { font-size: 11.5px; color: #b91c1c; flex: 1 1 100%; }
.sd-btn-danger, .sd-btn-danger-ghost {
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
    font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 12px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sd-btn-danger { background: #b91c1c; color: #fff; border: 1px solid #b91c1c; }
.sd-btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.sd-btn-danger:disabled { opacity: 0.65; cursor: default; }
.sd-btn-danger-ghost { background: #fff; color: #b91c1c; border: 1px solid #f0c9c9; }
.sd-btn-danger-ghost:hover:not(:disabled) { background: #fdf3f3; border-color: #e6b3b3; }
.sd-btn-danger-ghost:disabled { opacity: 0.5; cursor: default; }
.sd-btn-danger .login-spinner { border-top-color: #fff; }