:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #172033;
    --heading: #0f172a;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #e6eaf0;
    --line-strong: #d7dde6;
    --sidebar: #0f172a;
    --sidebar-2: #111c32;
    --accent: #12b8a6;
    --accent-dark: #078b7f;
    --accent-soft: #e9fbf8;
    --blue: #3977f6;
    --danger: #d64545;
    --success: #168a62;
    --warning: #c78b24;
    --shadow-sm: 0 5px 18px rgba(15, 23, 42, .05);
    --shadow: 0 18px 50px rgba(15, 23, 42, .09);
    --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[lang="bn"] body {
    font-family: "Noto Sans Bengali", "Nirmala UI", "SolaimanLipi", "Vrinda", "Segoe UI", sans-serif;
    line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { display: block; }
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 252px;
    background:
        radial-gradient(circle at 40% 0%, rgba(18,184,166,.10), transparent 28%),
        linear-gradient(180deg, var(--sidebar) 0%, #0b1220 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 20;
    border-right: 1px solid rgba(255,255,255,.04);
}
.brand {
    display: flex; gap: 12px; align-items: center;
    min-height: 88px; padding: 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-copy { min-width: 0; }
.brand-mark {
    width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #1ed3bf, #0b8f83);
    color: #fff; font-weight: 900; letter-spacing: -.5px;
    box-shadow: 0 10px 28px rgba(18,184,166,.30);
    flex: 0 0 auto;
}
.brand-mark.large { width: 54px; height: 54px; border-radius: 16px; font-size: 18px; }
.brand-title { font-weight: 850; font-size: 15px; letter-spacing: -.2px; }
.brand-subtitle {
    color: #9aa9bc; font-size: 11px; margin-top: 3px; max-width: 150px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav { padding: 18px 12px; flex: 1; }
.nav-section {
    color: #637188; font-size: 10px; font-weight: 850; letter-spacing: .12em;
    text-transform: uppercase; margin: 5px 11px 10px;
}
.nav-group { margin: 0; }
.nav-section-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; cursor: pointer; padding: 0;
    color: #637188; font-size: 10px; font-weight: 850; letter-spacing: .12em;
    text-transform: uppercase; margin: 5px 11px 10px; text-align: left;
}
.nav-section-toggle:hover { color: #8a9bb0; }
.nav-chevron {
    display: inline-block; font-size: 8px; transition: transform .25s ease;
    line-height: 1; margin-right: 14px; color: #4e5d6e;
}
.nav-chevron::after { content: '▾'; }
.nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group-body {
    overflow: hidden; transition: max-height .28s ease-out, opacity .22s ease;
    opacity: 1;
}
.nav-group.collapsed .nav-group-body {
    max-height: 0 !important; opacity: 0; pointer-events: none;
}
.nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; margin: 5px 0;
    border-radius: 11px; color: #c4cedc;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    font-weight: 600;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(1px); }
.nav-link.active {
    background: linear-gradient(90deg, rgba(18,184,166,.18), rgba(18,184,166,.08));
    color: #7cf0e2;
    box-shadow: inset 0 0 0 1px rgba(18,184,166,.08);
}
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; color: currentColor; }
.nav-icon svg, .logout-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon svg path:first-child[fill] { fill: currentColor; }

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.07); padding: 15px 16px 17px; }
.user-mini { display: flex; gap: 10px; align-items: center; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #21304a; color: #84eee2; font-weight: 850; flex: 0 0 auto;
}
.avatar.small { width: 34px; height: 34px; font-size: 12px; }
.user-mini-text { min-width: 0; display: flex; flex-direction: column; }
.user-mini-text strong { font-size: 12px; color: #f8fafc; }
.user-mini-text span { color: #8290a4; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.logout-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 13px; color: #99a8bb; font-size: 11px; font-weight: 650;
}
.logout-link:hover { color: #fff; }
.logout-icon { width: 16px; height: 16px; }




.main { grid-column: 2; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    min-height: 88px; padding: 18px 30px;
    background: rgba(255,255,255,.93);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(14px);
}
.page-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.55px; color: var(--heading); }
.page-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11.5px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.user-pill {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px 6px 7px;
    background: #fff;
}
.user-pill > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.user-pill strong { font-size: 11px; color: var(--heading); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pill span { font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }

.language-switcher {
    position: relative;
    display: inline-flex; align-items: center;
    min-width: 116px; height: 42px;
    border: 1px solid var(--line);
    background: #fff; border-radius: 11px;
}
.language-switcher .language-icon {
    position: absolute; left: 10px; width: 17px; height: 17px; color: #667085; pointer-events: none;
}
.language-switcher .language-icon svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.language-switcher select {
    width: 100%; height: 100%; border: 0; outline: 0;
    appearance: none; background: transparent;
    padding: 0 27px 0 34px; cursor: pointer;
    color: var(--text); font-size: 11px; font-weight: 700;
}
.language-switcher::after {
    content: ""; position: absolute; right: 11px; width: 6px; height: 6px;
    border-right: 1.5px solid #667085; border-bottom: 1.5px solid #667085;
    transform: rotate(45deg) translateY(-2px); pointer-events: none;
}

.content { padding: 26px 30px 40px; flex: 1; }
.footer {
    padding: 17px 30px; border-top: 1px solid var(--line);
    color: var(--muted-2); display: flex; justify-content: space-between; gap: 20px; font-size: 10.5px;
}

/* ─── Generic Card ─── */
.card {
    background: #fff; border-radius: 14px; padding: 20px 24px;
    border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
/* ─── SaaS page styles ─── */
.saas-filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.saas-filter .field { flex: 1; min-width: 160px; }
.saas-filter .field label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.saas-filter .field input,
.saas-filter .field select { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.saas-actions { display: flex; gap: 8px; align-items: center; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.badge.success { background: #dcfce7; color: #166534; }
.badge.warning { background: #fef9c3; color: #854d0e; }
.badge.danger { background: #fee2e2; color: #991b1b; }
.btn.danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn.danger:hover { background: #dc2626; }
.deploy-step { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.deploy-step h4 { margin: 0 0 10px; font-size: 13px; color: var(--heading); }
.deploy-step pre { background: #0f172a; color: #e2e8f0; padding: 12px 16px; border-radius: 8px; font-size: 11px; overflow-x: auto; margin: 8px 0 0; white-space: pre-wrap; word-break: break-all; }
.copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 10px; cursor: pointer; }
.copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.eyebrow {
    font-size: 9.5px; font-weight: 900; letter-spacing: .13em;
    color: var(--accent-dark); text-transform: uppercase;
}
html[lang="bn"] .eyebrow { letter-spacing: .03em; text-transform: none; }

.welcome-card {
    position: relative; overflow: hidden;
    border-radius: 20px; padding: 28px 30px; color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.14), transparent 24%),
        radial-gradient(circle at 72% 120%, rgba(18,184,166,.35), transparent 36%),
        linear-gradient(135deg, #142137 0%, #173653 54%, #0a776e 140%);
    box-shadow: var(--shadow);
    display: flex; justify-content: space-between; gap: 28px; align-items: center;
}
.welcome-card .eyebrow { color: #82f1e5; }
.welcome-copy h2 { margin: 6px 0 8px; font-size: 29px; letter-spacing: -.7px; }
.welcome-copy p { color: #c7d4e1; margin: 0; max-width: 780px; line-height: 1.65; }
.welcome-shop {
    display: flex; flex-direction: column; align-items: flex-end; min-width: 170px;
    padding: 12px 14px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08); border-radius: 14px;
}
.welcome-shop span { color: #bcd0df; font-size: 10px; }
.welcome-shop strong { margin-top: 5px; font-size: 13px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.metric-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 18px;
    box-shadow: var(--shadow-sm);
}
.metric-top { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.metric-icon {
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    font-size: 14px; font-weight: 900;
}
.metric-icon.sales { background: #e9f9f3; color: #168a62; }
.metric-icon.purchase { background: #eef4ff; color: #3977f6; }
.metric-icon.expense { background: #fff2f2; color: #d64545; }
.metric-icon.due { background: #fff7e7; color: #b77915; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.metric-card strong { font-size: 21px; display: block; letter-spacing: -.35px; color: var(--heading); }
.metric-card small { display: block; color: var(--muted-2); margin-top: 7px; font-size: 10px; line-height: 1.4; }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 16px; }
.panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 21px; box-shadow: var(--shadow-sm);
}
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 17px; }
.panel-head.compact { margin-top: 4px; }
.panel-head h3 { margin: 5px 0 0; font-size: 18px; color: var(--heading); letter-spacing: -.25px; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.quick-card {
    display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 14px; padding: 15px;
    background: #fbfcfe; transition: .18s ease;
}
.quick-card:hover { transform: translateY(-1px); border-color: #cfd7e3; box-shadow: 0 10px 24px rgba(15,23,42,.06); background: #fff; }
.quick-icon {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-dark); font-size: 18px; font-weight: 900;
}
.quick-card strong { display: block; color: var(--heading); font-size: 12px; }
.quick-card span { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; margin-top: 4px; }
.quick-card b { color: var(--muted-2); font-size: 22px; font-weight: 400; }

.activity-list { display: grid; gap: 2px; }
.activity-row { display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #eef1f5; }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.activity-row strong { display: block; font-size: 11px; color: var(--heading); }
.activity-row span { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 3px; }
.empty-state { color: var(--muted); font-size: 11px; padding: 18px 2px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.field > span { font-size: 10.5px; font-weight: 750; color: #536078; }
.field input, .field textarea, .field select {
    width: 100%; border: 1px solid var(--line-strong); background: #fff;
    border-radius: 11px; padding: 11px 12px; outline: none;
    color: var(--text); transition: .18s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,184,166,.10);
}
.field-help { color: var(--muted-2); font-size: 9.5px; margin-top: -2px; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.section-divider { height: 1px; background: var(--line); margin: 17px 0 22px; }

.btn {
    border: 0; border-radius: 11px; padding: 11px 17px;
    cursor: pointer; font-weight: 800; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: .16s ease;
}
.btn.primary {
    color: #fff; background: linear-gradient(135deg, #16c4b1, var(--accent-dark));
    box-shadow: 0 9px 22px rgba(18,184,166,.20);
}
.btn.primary:hover { transform: translateY(-1px); filter: brightness(.99); }
.btn.primary:active { transform: translateY(0); }
.btn.full { width: 100%; }

.alert { border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; font-size: 11px; line-height: 1.5; }
.alert.danger { background: #fff2f2; color: #a33333; border: 1px solid #ffd7d7; }
.alert.success { background: #ecfbf5; color: #167752; border: 1px solid #c8f0df; }

.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.health-card {
    background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 17px;
    display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-sm);
}
.health-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.health-dot.ok { background: #27b982; box-shadow: 0 0 0 5px #e9f9f3; }
.health-dot.warn { background: #e6a72f; box-shadow: 0 0 0 5px #fff7e5; }
.health-card div { min-width: 0; }
.health-card small, .health-card span { display: block; color: var(--muted); font-size: 9.5px; }
.health-card strong { display: block; margin: 6px 0; overflow-wrap: anywhere; color: var(--heading); font-size: 13px; }
.info-table { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.info-table > div { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.info-table > div:last-child { border-bottom: 0; }
.info-table span { color: var(--muted); font-size: 11px; }
.info-table strong { color: var(--heading); font-size: 11px; }

.login-body { min-height: 100vh; background: #0e1726; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr); }
.login-visual {
    color: #fff; padding: 42px clamp(32px, 5vw, 72px);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(18,184,166,.24), transparent 27%),
        radial-gradient(circle at 83% 72%, rgba(67,120,194,.26), transparent 30%),
        linear-gradient(145deg, #0f1a2d 0%, #142b42 58%, #0a665f 145%);
}
.login-visual::after {
    content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.07); right: -160px; top: 18%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.018), 0 0 0 110px rgba(255,255,255,.012);
}
.login-topline, .login-copy, .login-visual-footer { position: relative; z-index: 1; }
.login-topline { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand-name { font-size: 17px; font-weight: 900; letter-spacing: -.2px; }
.login-brand-shop { color: #a4b6c8; margin-top: 4px; font-size: 11px; }
.login-language {
    border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08);
}
.login-language select { color: #eef6fb; }
.login-language option { color: #172033; }
.login-language .language-icon { color: #cfdae5; }
.login-language::after { border-color: #cfdae5; }

.login-copy { margin: auto 0; max-width: 690px; padding: 30px 0; }
.login-copy .eyebrow { color: #80eee2; }
.login-copy h1 {
    font-size: clamp(38px, 4.1vw, 64px); letter-spacing: -.055em; line-height: 1.04;
    margin: 12px 0 18px; max-width: 760px;
}
html[lang="bn"] .login-copy h1 { letter-spacing: -.025em; line-height: 1.18; }
.login-copy p { color: #b1c2d1; max-width: 620px; line-height: 1.75; font-size: 14px; margin: 0; }
.login-feature-list { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 28px; }
.login-feature-list div { display: flex; align-items: center; gap: 7px; color: #cfdae5; font-size: 11px; }
.login-feature-list span {
    width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(18,184,166,.15); color: #7cf0e2; font-weight: 900;
}
.login-visual-footer { display: flex; justify-content: space-between; gap: 18px; color: #8da1b5; font-size: 9.5px; }

.login-panel {
    background:
        radial-gradient(circle at 85% 10%, rgba(18,184,166,.06), transparent 24%),
        #f6f8fb;
    display: grid; place-items: center; padding: 42px;
}
.login-panel-inner { width: min(438px, 100%); }
.login-card {
    width: 100%; background: #fff; border: 1px solid var(--line);
    border-radius: 22px; padding: 34px; box-shadow: 0 24px 70px rgba(15,23,42,.10);
}
.login-card-badge {
    display: inline-flex; align-items: center; gap: 7px;
    color: #536078; background: #f7f9fc; border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 9px; font-size: 9.5px; margin-bottom: 21px;
}
.login-card-badge span { width: 7px; height: 7px; border-radius: 50%; background: #25b982; box-shadow: 0 0 0 4px #eaf9f4; }
.login-card-head { margin-bottom: 24px; }
.login-card-head h2 { font-size: 30px; margin: 7px 0 7px; letter-spacing: -.7px; color: var(--heading); }
html[lang="bn"] .login-card-head h2 { letter-spacing: -.02em; }
.login-card-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.password-toggle {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 9px; background: transparent; color: #7b8798; cursor: pointer;
}
.password-toggle:hover { background: #f3f6fa; color: #344054; }
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-submit { margin-top: 4px; min-height: 44px; }

/* ─── SR Studio Ad: Pricing Plans ─── */
.login-plans {
    display: flex; gap: 10px; margin-top: 28px;
}
.login-plan-card {
    flex: 1; padding: 14px 16px; border-radius: 14px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px); text-align: center;
    transition: transform .2s ease, border-color .2s ease;
}
.login-plan-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); }
.login-plan-card.featured {
    background: rgba(18,184,166,.15); border-color: rgba(18,184,166,.35);
    position: relative;
}
.login-plan-card.featured::before {
    content: "⭐ BEST VALUE"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #14b8a6, #0ea5e9); color: #fff;
    font-size: 7px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px;
    border-radius: 99px; white-space: nowrap;
}
.plan-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #80eee2; margin-bottom: 6px;
}
.plan-price {
    font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.plan-price small { font-size: 12px; font-weight: 600; color: #a4b6c8; }
.plan-note { font-size: 9px; color: #8da1b5; margin-top: 5px; }

/* ─── SR Studio Ad: Contact Section ─── */
.login-ad-contact {
    margin-top: 0; padding: 16px 20px; border-radius: 14px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(4px); position: relative; z-index: 1;
}
.ad-contact-title {
    font-size: 12px; font-weight: 800; color: #80eee2;
    margin-bottom: 8px; letter-spacing: .02em;
}
.ad-contact-grid {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 10.5px; color: #cfdae5; line-height: 1.5;
}
.ad-contact-grid div { display: flex; align-items: center; gap: 6px; }


.setup-body { min-height: 100vh; background: #f3f6fa; padding: 38px 18px; }
.setup-wrap { width: min(980px, 100%); margin: 0 auto; }
.setup-header { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.setup-header h1 { margin: 4px 0; font-size: 29px; }
.setup-header p { margin: 0; color: var(--muted); }
.setup-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.setup-section h2 { margin: 5px 0 7px; }
.setup-section > p { margin: 0 0 19px; color: var(--muted); line-height: 1.55; }
.success-card { text-align: center; padding: 52px 28px; }
.success-icon { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: #e7fbf4; color: #148e63; font-size: 30px; font-weight: 900; }
.success-card p { color: var(--muted); margin-bottom: 20px; }

@media (max-width: 1080px) {
    .metric-grid, .health-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: 100%; min-height: auto; }
    .brand { min-height: auto; padding: 14px 16px; }
    .nav { display: flex; overflow-x: auto; padding: 8px 10px 10px; }
    .nav-section, .sidebar-footer { display: none; }
    .nav-link { white-space: nowrap; margin: 0 3px; }
    .main { display: block; }
    .topbar { position: static; padding: 16px 18px; }
    .user-pill { display: none; }
    .content { padding: 18px; }
    .footer { padding: 16px 18px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { min-height: 48vh; padding: 28px 25px; }
    .login-copy { padding: 72px 0 58px; }
    .login-panel { padding: 28px 18px; }
}
@media (max-width: 620px) {
    .metric-grid, .health-grid, .form-grid.two, .form-grid.three, .quick-grid { grid-template-columns: 1fr; }
    .welcome-card { align-items: flex-start; flex-direction: column; padding: 23px; }
    .welcome-shop { align-items: flex-start; min-width: 0; }
    .topbar { align-items: flex-start; gap: 12px; flex-direction: column; }
    .topbar-actions { width: 100%; }
    .topbar-language { width: 100%; }
    .info-table > div { grid-template-columns: 1fr; gap: 5px; }
    .login-topline { align-items: flex-start; }
    .login-language { min-width: 105px; }
    .login-copy h1 { font-size: 37px; }
    .login-card { padding: 26px 22px; border-radius: 18px; }
    .login-visual-footer { flex-direction: column; gap: 4px; }
}


/* =========================================================
   SR Studio POS v0.4.0 — Professional UI / responsive layer
   ========================================================= */

:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --heading: #0b1220;
    --text: #253047;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #e5eaf1;
    --line-strong: #d5dce7;
    --accent: #0db7a5;
    --accent-dark: #087f76;
    --accent-soft: #e8fbf8;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 4px 18px rgba(15, 23, 42, .045);
    --shadow: 0 18px 48px rgba(15, 23, 42, .085);
    --shadow-hover: 0 20px 42px rgba(15, 23, 42, .10);
    --ease-premium: cubic-bezier(.2,.72,.22,1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, "Noto Sans Bengali", "Nirmala UI", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.006em;
}

html[lang="bn"] body {
    font-family: "Noto Sans Bengali", "Nirmala UI", "Hind Siliguri", "SolaimanLipi", "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(13, 183, 165, .22);
    outline-offset: 2px;
}

.app-shell {
    grid-template-columns: 264px minmax(0,1fr);
}

.sidebar {
    width: 264px;
    box-shadow: 16px 0 42px rgba(7, 16, 31, .08);
    transition: transform .32s var(--ease-premium), box-shadow .32s ease;
}

.brand {
    min-height: 82px;
    padding: 17px 18px;
}

.brand-mark {
    background: linear-gradient(145deg, #1cd5c1 0%, #0ba899 48%, #08756e 100%);
    box-shadow: 0 12px 30px rgba(13,183,165,.28);
}

.nav-link {
    min-height: 46px;
    border-radius: 13px;
    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s var(--ease-premium),
        box-shadow .22s ease;
}

.nav-link:hover {
    transform: translateX(3px);
}

html[lang="bn"] .nav-link:hover {
    transform: translateX(0);
}

.nav-link.active {
    box-shadow:
        inset 0 0 0 1px rgba(117,240,225,.08),
        0 8px 20px rgba(0,0,0,.08);
}

.sidebar-close,
.sidebar-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: none;
    place-items: center;
}

.sidebar-close {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #b8c4d4;
}

.sidebar-close:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.sidebar-close svg,
.sidebar-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 29;
    border: 0;
    padding: 0;
    background: rgba(8,15,27,.46);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

.main {
    grid-column: 2;
}

.topbar {
    min-height: 82px;
    padding: 15px clamp(20px, 2.35vw, 34px);
    border-bottom-color: rgba(224,230,238,.92);
    box-shadow: 0 1px 0 rgba(15,23,42,.018);
}

.topbar-leading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-heading {
    min-width: 0;
}

.page-heading h1 {
    font-size: clamp(22px, 1.75vw, 27px);
    font-weight: 820;
    letter-spacing: -.045em;
}

html[lang="bn"] .page-heading h1 {
    letter-spacing: -.015em;
}

.page-heading p {
    font-size: 11.5px;
    line-height: 1.45;
}

.content {
    width: 100%;
    padding: clamp(18px, 2vw, 30px) clamp(18px, 2.35vw, 34px) 42px;
}

.footer {
    padding-inline: clamp(18px, 2.35vw, 34px);
}

.language-switcher {
    min-width: 124px;
    min-height: 44px;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(15,23,42,.025);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-premium);
}

.language-switcher:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.user-pill {
    min-height: 44px;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(15,23,42,.025);
}

.welcome-card {
    min-height: 174px;
    border-radius: 22px;
    padding: clamp(24px, 2.4vw, 34px);
    box-shadow: 0 24px 60px rgba(13, 31, 53, .14);
    isolation: isolate;
}

.welcome-card::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.11), rgba(255,255,255,0) 68%);
    z-index: -1;
    animation: softFloat 8s ease-in-out infinite alternate;
}

.welcome-copy h2 {
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.15;
    letter-spacing: -.045em;
}

html[lang="bn"] .welcome-copy h2 {
    letter-spacing: -.012em;
    line-height: 1.28;
}

.welcome-copy p {
    font-size: 12px;
    max-width: 830px;
}

.welcome-shop {
    min-width: 184px;
    border-radius: 16px;
    backdrop-filter: blur(9px);
}

.metric-grid {
    gap: 15px;
    margin-top: 18px;
}

.metric-card {
    min-height: 124px;
    border-radius: 17px;
    padding: 19px;
    position: relative;
    overflow: hidden;
    transition:
        transform .24s var(--ease-premium),
        box-shadow .24s ease,
        border-color .24s ease;
}

.metric-card::after {
    content: "";
    position: absolute;
    inset: auto -34px -46px auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,183,165,.07), transparent 70%);
    pointer-events: none;
}

.metric-card:hover {
    transform: translateY(-3px);
    border-color: #d9e1ea;
    box-shadow: var(--shadow-hover);
}

.metric-card strong {
    font-size: clamp(20px, 1.8vw, 25px);
    font-variant-numeric: tabular-nums;
}

html[lang="bn"] .metric-card strong {
    letter-spacing: 0;
}

.panel {
    border-radius: 19px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .24s ease, transform .24s var(--ease-premium);
}

.panel:hover {
    box-shadow: 0 12px 34px rgba(15,23,42,.065);
}

.quick-card {
    min-height: 82px;
    transition:
        transform .24s var(--ease-premium),
        border-color .24s ease,
        box-shadow .24s ease,
        background .24s ease;
}

.quick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(15,23,42,.075);
}

.activity-row {
    transition: background-color .18s ease, transform .18s ease;
    border-radius: 10px;
    padding-inline: 7px;
}

.activity-row:hover {
    background: #f9fbfd;
    transform: translateX(2px);
}

html[lang="bn"] .activity-row:hover {
    transform: none;
}

.field input,
.field textarea,
.field select {
    min-height: 44px;
    border-radius: 12px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.btn {
    min-height: 44px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition:
        transform .18s var(--ease-premium),
        box-shadow .18s ease,
        filter .18s ease;
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(13,183,165,.24);
}

.btn.primary:active {
    transform: translateY(0) scale(.985);
}

.health-card {
    min-height: 116px;
    border-radius: 17px;
    transition:
        transform .23s var(--ease-premium),
        box-shadow .23s ease,
        border-color .23s ease;
}

.health-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.info-table > div {
    min-height: 50px;
    align-items: center;
}

/* Generic tables used by upcoming POS modules */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.data-table th {
    background: #f8fafc;
    color: #526078;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.data-table td {
    font-size: 11.5px;
}

.data-table tbody tr {
    transition: background-color .18s ease;
}

.data-table tbody tr:hover {
    background: #fbfcfe;
}

/* Login refinement */
.login-shell {
    grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
}

.login-visual {
    background:
        radial-gradient(circle at 14% 10%, rgba(18,184,166,.28), transparent 26%),
        radial-gradient(circle at 82% 72%, rgba(61,117,190,.24), transparent 31%),
        linear-gradient(145deg, #0b1525 0%, #13283e 55%, #086960 145%);
}

.login-visual::before {
    content: "";
    position: absolute;
    inset: auto auto -140px -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 0 0 70px rgba(255,255,255,.018),
        0 0 0 140px rgba(255,255,255,.012);
    animation: slowOrbit 14s linear infinite;
}

.login-copy h1 {
    max-width: 800px;
}

.login-card {
    border-radius: 24px;
    border-color: #e3e8ef;
    box-shadow:
        0 32px 90px rgba(15,23,42,.12),
        0 2px 8px rgba(15,23,42,.035);
    transform: translateY(0);
    transition: transform .35s var(--ease-premium), box-shadow .35s ease;
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 36px 96px rgba(15,23,42,.14),
        0 4px 10px rgba(15,23,42,.04);
}

.page-enter {
    animation: pageEnter .42s var(--ease-premium) both;
}

body.language-changing .main,
body.language-changing .login-shell {
    opacity: .65;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes softFloat {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-18px,14px,0) scale(1.04); }
}

@keyframes slowOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tablet and mobile: genuine off-canvas navigation rather than a squeezed desktop bar */
@media (max-width: 1080px) {
    .app-shell {
        grid-template-columns: 236px minmax(0,1fr);
    }

    .sidebar {
        width: 236px;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .health-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 960px) {
    .app-shell {
        display: block;
    }

    .main {
        display: flex;
        grid-column: auto;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 292px);
        min-height: 100dvh;
        transform: translateX(-105%);
        z-index: 30;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 24px 0 64px rgba(3,10,20,.28);
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-close,
    .sidebar-toggle {
        display: grid;
    }

    .sidebar-toggle {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 13px;
        color: #344054;
        background: #fff;
        box-shadow: 0 3px 10px rgba(15,23,42,.04);
    }

    .sidebar-toggle:hover {
        background: #f8fafc;
        border-color: #d3dbe6;
    }

    .brand {
        min-height: 76px;
    }

    .nav {
        display: block;
        overflow: visible;
        padding: 16px 12px;
    }

    .nav-section,
    .sidebar-footer {
        display: block;
    }

    .nav-link {
        white-space: normal;
        margin: 5px 0;
    }

    .topbar {
        position: sticky;
        top: 0;
        min-height: 74px;
        padding: 12px 16px;
    }

    .content {
        padding: 18px 16px 34px;
    }

    .footer {
        padding: 15px 16px;
    }

    .welcome-card {
        min-height: auto;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-visual {
        min-height: auto;
        padding: 28px clamp(22px,5vw,46px);
    }

    .login-copy {
        padding: clamp(54px,10vw,92px) 0 clamp(48px,8vw,72px);
    }

    .login-panel {
        padding: 32px 18px 44px;
    }
}

@media (max-width: 680px) {
    .topbar {
        align-items: center;
        flex-direction: row;
        gap: 10px;
    }

    .topbar-leading {
        min-width: 0;
        flex: 1;
    }

    .topbar-actions {
        width: auto;
        flex: 0 0 auto;
    }

    .page-heading h1 {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }

    .page-heading p {
        display: none;
    }

    .user-pill {
        display: none;
    }

    .topbar-language {
        width: auto;
        min-width: 110px;
    }

    .metric-grid,
    .health-grid,
    .form-grid.two,
    .form-grid.three,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 112px;
    }

    .welcome-card {
        align-items: stretch;
        flex-direction: column;
        padding: 23px 20px;
        border-radius: 19px;
    }

    .welcome-shop {
        align-items: flex-start;
        min-width: 0;
        width: fit-content;
    }

    .dashboard-grid {
        gap: 14px;
    }

    .panel {
        padding: 18px;
    }

    .info-table > div {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 12px;
    }

    .form-actions {
        justify-content: stretch;
    }

    .form-actions .btn {
        width: 100%;
    }

    .footer {
        flex-direction: column;
        gap: 4px;
    }

    .login-topline {
        align-items: center;
    }

    .login-brand-name {
        font-size: 15px;
    }

    .brand-mark.large {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .login-language {
        min-width: 104px;
    }

    .login-copy h1 {
        font-size: clamp(34px,10vw,44px);
    }

    .login-copy p {
        font-size: 13px;
    }

    .login-feature-list {
        display: grid;
        gap: 9px;
    }

    .login-card {
        padding: 26px 21px;
        border-radius: 20px;
    }

    .login-card:hover {
        transform: none;
    }
}

@media (max-width: 420px) {
    .topbar {
        padding-inline: 12px;
    }

    .sidebar-toggle {
        width: 42px;
        height: 42px;
    }

    .page-heading h1 {
        max-width: 35vw;
        font-size: 18px;
    }

    .language-switcher {
        min-height: 42px;
        min-width: 102px;
    }

    .language-switcher select {
        padding-left: 31px;
        padding-right: 23px;
        font-size: 10.5px;
    }

    .content {
        padding-inline: 12px;
    }

    .welcome-copy h2 {
        font-size: 25px;
    }

    .metric-card,
    .panel {
        border-radius: 16px;
    }

    .login-visual {
        padding-inline: 18px;
    }

    .login-panel {
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* =========================================================
   SR Studio POS v0.5.0 — premium header, profile, typography
   and adaptive interaction layer
   ========================================================= */

:root {
    --surface-glass: rgba(255,255,255,.88);
    --shadow-float: 0 24px 64px rgba(15,23,42,.13);
}

html[lang="bn"] body {
    line-height: 1.58;
}

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] strong,
html[lang="bn"] .nav-link,
html[lang="bn"] .btn {
    line-height: 1.35;
}

.topbar {
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.topbar-actions {
    gap: 9px;
    min-width: 0;
}

.profile-menu {
    position: relative;
    flex: 0 0 auto;
}

.profile-trigger {
    min-height: 44px;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 5px 10px 5px 6px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,.025);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-premium);
}

.profile-trigger:hover,
.profile-menu.is-open .profile-trigger {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
}

.profile-trigger:active {
    transform: scale(.985);
}

.profile-trigger-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.profile-trigger-copy strong {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--heading);
    font-size: 11px;
    font-weight: 800;
}

.profile-trigger-copy small {
    margin-top: 1px;
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 650;
}

.profile-chevron {
    width: 16px;
    height: 16px;
    color: #98a2b3;
    transition: transform .2s var(--ease-premium);
}

.profile-chevron svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-menu.is-open .profile-chevron {
    transform: rotate(180deg);
}

.profile-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 310px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    border: 1px solid rgba(216,224,234,.95);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity .18s ease, transform .22s var(--ease-premium);
}

.profile-popover[hidden] {
    display: none;
}

.profile-popover.is-visible,
.profile-menu.is-open .profile-popover {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.profile-popover-head {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 10px;
}

.profile-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(145deg, #17334d, #0c756d);
    color: #d8fffa;
}

.profile-popover-head div {
    min-width: 0;
}

.profile-popover-head strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-popover-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 6px 8px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #eefaf7;
    color: #167752;
    font-size: 10px;
    font-weight: 750;
}

.profile-secure > span:first-child {
    width: 17px;
    height: 17px;
}

.profile-secure svg,
.profile-nav svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-nav {
    display: grid;
    gap: 3px;
    border-top: 1px solid #eef1f5;
    padding-top: 7px;
}

.profile-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #475467;
    font-size: 10.5px;
    font-weight: 700;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.profile-nav a:hover {
    background: #f7f9fc;
    color: var(--heading);
    transform: translateX(2px);
}

html[lang="bn"] .profile-nav a:hover {
    transform: none;
}

.profile-nav .profile-signout {
    color: #b23d3d;
}

.profile-nav .profile-signout:hover {
    background: #fff3f3;
    color: #9b2f2f;
}

.welcome-card {
    border: 1px solid rgba(255,255,255,.04);
}

.welcome-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
    pointer-events: none;
}

.welcome-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #d8fffa !important;
    font-weight: 750;
}

.welcome-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #68e3bc;
    box-shadow: 0 0 0 4px rgba(104,227,188,.13);
}

.metric-card {
    border-top-width: 2px;
}

.metric-card.sales-metric { border-top-color: #58cba0; }
.metric-card.purchase-metric { border-top-color: #7ba4ff; }
.metric-card.expense-metric { border-top-color: #ef8f8f; }
.metric-card.due-metric { border-top-color: #e8bf6d; }

.metric-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.metric-card strong {
    line-height: 1.15;
}

html[lang="bn"] .metric-card strong {
    line-height: 1.3;
}

.panel-head h3 {
    line-height: 1.25;
}

html[lang="bn"] .panel-head h3 {
    line-height: 1.45;
}

.quick-card {
    background: linear-gradient(180deg, #fcfdff, #f9fbfd);
}

.activity-row {
    min-height: 54px;
    align-items: start;
}

.activity-row strong {
    line-height: 1.4;
}

html[lang="bn"] .activity-row strong {
    line-height: 1.55;
}

/* Motion is enabled only after JS initializes, so content remains visible if JS is unavailable. */
.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .48s ease var(--reveal-delay, 0ms),
        transform .58s var(--ease-premium) var(--reveal-delay, 0ms);
}

/* Login polish */
.login-card {
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #0db7a5, #5dd8c8, #5089d9);
}

.login-card-badge {
    font-weight: 700;
}

.login-feature-list div {
    padding: 7px 10px 7px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(4px);
}

html[lang="bn"] .login-copy p,
html[lang="bn"] .login-feature-list div,
html[lang="bn"] .login-card-head p,
html[lang="bn"] .field > span {
    line-height: 1.65;
}

@media (max-width: 1180px) {
    .profile-trigger {
        max-width: 185px;
    }

    .profile-trigger-copy strong {
        max-width: 96px;
    }
}

@media (max-width: 960px) {
    .topbar {
        box-shadow: 0 8px 30px rgba(15,23,42,.045);
    }

    .profile-popover {
        position: fixed;
        top: 70px;
        right: 14px;
        transform-origin: top right;
    }
}

@media (max-width: 720px) {
    .topbar {
        min-height: 68px;
        padding: 10px 12px;
    }

    .topbar-leading {
        gap: 9px;
    }

    .sidebar-toggle,
    .profile-trigger {
        min-width: 42px;
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 4px;
        justify-content: center;
        border-radius: 12px;
    }

    .profile-trigger-copy,
    .profile-chevron {
        display: none;
    }

    .profile-trigger .avatar.small {
        width: 32px;
        height: 32px;
    }

    .language-switcher {
        min-height: 42px;
        height: 42px;
        min-width: 106px;
    }

    .page-heading h1 {
        max-width: 38vw;
        font-size: 19px;
    }

    .welcome-copy p {
        font-size: 11.5px;
    }

    .metric-card {
        padding: 17px;
    }

    .metric-card strong {
        font-size: 23px;
    }
}

@media (max-width: 480px) {
    .topbar-actions {
        gap: 6px;
    }

    .language-switcher {
        min-width: 96px;
    }

    .language-switcher select {
        padding-left: 30px;
        padding-right: 20px;
        font-size: 10px;
    }

    .page-heading h1 {
        max-width: 28vw;
        font-size: 17px;
    }

    .profile-popover {
        top: 64px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: none;
    }

    .welcome-shop {
        width: 100%;
    }

    .welcome-copy h2 {
        font-size: 24px;
    }

    .quick-card {
        grid-template-columns: 40px minmax(0,1fr) 16px;
        padding: 13px;
    }

    .quick-icon {
        width: 40px;
        height: 40px;
    }

    .login-topline {
        gap: 10px;
    }

    .login-brand-shop {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-ready [data-reveal],
    .motion-ready [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   SR Studio POS v0.6.0 — Phase 2 RBAC administration
   ========================================================= */

.nav-section-spaced {
    margin-top: 19px;
}

.quick-icon svg,
.access-denied-icon svg,
.role-shield svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 15px;
    padding: 24px 26px;
    border: 1px solid #dce4ee;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 18%, rgba(24,182,168,.12), transparent 28%),
        linear-gradient(135deg, #fff, #f8fbfd);
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

.admin-hero h2 {
    margin: 5px 0 5px;
    color: var(--heading);
    font-size: 25px;
    letter-spacing: -.025em;
}

.admin-hero p {
    max-width: 690px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

.admin-hero-stats {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.admin-hero-stats > div {
    min-width: 100px;
    padding: 12px 13px;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: rgba(255,255,255,.86);
}

.admin-hero-stats strong {
    display: block;
    color: var(--heading);
    font-size: 20px;
    line-height: 1;
}

.admin-hero-stats span {
    display: block;
    margin-top: 6px;
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 700;
}

.compact-admin-panel {
    margin-bottom: 15px;
}

.form-actions.left {
    justify-content: flex-start;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.role-card {
    display: flex;
    flex-direction: column;
    min-height: 215px;
    padding: 18px;
    border: 1px solid #dce4ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15,23,42,.035);
    transition: transform .22s var(--ease-premium), box-shadow .22s ease, border-color .22s ease;
}

.role-card:hover {
    transform: translateY(-2px);
    border-color: #cbd8e6;
    box-shadow: 0 15px 34px rgba(15,23,42,.07);
}

.role-card.system-role {
    background:
        linear-gradient(180deg, rgba(238,250,247,.7), #fff 45%);
}

.role-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-shield {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #e8faf6;
    color: #0c8e7f;
}

.role-title {
    min-width: 0;
}

.role-title strong {
    display: block;
    color: var(--heading);
    font-size: 14px;
    line-height: 1.35;
}

.role-title span {
    display: block;
    margin-top: 3px;
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 700;
}

.role-card > p {
    min-height: 48px;
    margin: 14px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

.role-meta {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.role-meta span,
.role-user-pill {
    padding: 7px 9px;
    border-radius: 9px;
    background: #f5f8fb;
    color: #6c7889;
    font-size: 9px;
    font-weight: 650;
}

.role-meta b {
    color: var(--heading);
}

.role-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
}

.role-actions form,
.table-actions form {
    margin: 0;
}

.small-btn {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 9.5px;
}

.tiny-btn {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 9px;
    white-space: nowrap;
}

.btn.danger-ghost {
    border: 1px solid #f1c6c6;
    background: #fff;
    color: #b24343;
}

.btn.danger-ghost:hover {
    background: #fff3f3;
    border-color: #e6aaaa;
}

.btn.ghost {
    border: 1px solid #d9e1ea;
    background: #fff;
    color: #576579;
}

.btn.ghost:hover {
    background: #f8fafc;
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.toolbar-title {
    min-width: 0;
    text-align: right;
}

.toolbar-title strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
}

.toolbar-title span {
    display: block;
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 9px;
}

.role-editor {
    display: grid;
    gap: 15px;
}

.permission-panel {
    margin-bottom: 0;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.permission-group {
    overflow: hidden;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    background: #fbfcfe;
}

.permission-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 13px;
    border-bottom: 1px solid #e6ecf2;
    background: #fff;
}

.permission-group-head > strong {
    color: var(--heading);
    font-size: 11px;
}

.permission-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #6b7789;
    font-size: 8.5px;
    font-weight: 700;
}

.permission-select-all input,
.permission-item input {
    accent-color: #0fae9c;
}

.permission-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1px;
    background: #edf1f5;
}

.permission-item {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 8px;
    align-items: start;
    min-height: 62px;
    padding: 11px;
    background: #fff;
    cursor: pointer;
    transition: background-color .16s ease;
}

.permission-item:hover {
    background: #f8fbfb;
}

.permission-item input {
    margin-top: 2px;
}

.permission-item strong {
    display: block;
    color: #344054;
    font-size: 9.5px;
    line-height: 1.45;
}

.permission-item small {
    display: block;
    margin-top: 4px;
    color: #98a2b3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 7.6px;
    line-height: 1.35;
    word-break: break-all;
}

.admin-table-panel {
    padding-bottom: 4px;
}

.responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0e6ed;
    border-radius: 13px;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

.admin-table th {
    padding: 11px 12px;
    border-bottom: 1px solid #dfe6ee;
    background: #f7f9fb;
    color: #667085;
    text-align: left;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f4;
    color: #667085;
    font-size: 9.5px;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr {
    transition: background-color .15s ease;
}

.admin-table tbody tr:hover {
    background: #fbfcfd;
}

.table-user {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 9px;
    align-items: center;
}

.table-avatar {
    width: 34px;
    height: 34px;
    font-size: 10px;
    background: #e7f8f5;
    color: #0d8275;
}

.table-user div {
    min-width: 0;
}

.table-user strong {
    display: block;
    color: #344054;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-user span {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 8.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 750;
}

.role-badge {
    background: #eef5ff;
    color: #486b9b;
}

.status-badge {
    border: 1px solid transparent;
}

.status-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.is-active {
    background: #edf9f5;
    border-color: #d5eee5;
    color: #28795f;
}

.status-badge.is-active i {
    background: #24b47e;
}

.status-badge.is-inactive {
    background: #f8f4f4;
    border-color: #ecdddd;
    color: #8b5f5f;
}

.status-badge.is-inactive i {
    background: #c18787;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.user-editor {
    max-width: 1180px;
}

.access-denied-card {
    max-width: 600px;
    margin: 50px auto;
    padding: 40px;
    border: 1px solid #dbe3ec;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
}

.access-denied-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: #fff0f0;
    color: #b84c4c;
}

.access-denied-icon svg {
    width: 28px;
    height: 28px;
}

.access-denied-card h2 {
    margin: 7px 0 7px;
    color: var(--heading);
    font-size: 25px;
}

.access-denied-card p {
    max-width: 470px;
    margin: 0 auto 18px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.access-denied-card code {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f6f8fa;
    color: #778195;
    font-size: 9px;
    overflow-wrap: anywhere;
}

.alert.info {
    border-color: #cfe1f3;
    background: #f2f8fe;
    color: #466a90;
}

@media (max-width: 1180px) {
    .roles-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .permission-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .admin-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-hero-stats {
        width: 100%;
    }

    .admin-hero-stats > div {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }

    .page-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar-title {
        width: 100%;
        text-align: left;
    }

    .permission-list {
        grid-template-columns: 1fr;
    }

    .admin-hero {
        padding: 18px;
    }

    .admin-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-hero-stats > div {
        padding: 10px;
    }

    .admin-hero-stats strong {
        font-size: 17px;
    }

    .admin-hero-stats span {
        font-size: 7.8px;
    }

    .responsive-table {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-table {
        min-width: 0;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tr {
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid #e0e6ed;
        border-radius: 13px;
        background: #fff;
    }

    .admin-table td {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        gap: 10px;
        align-items: center;
        min-height: 44px;
        border-bottom: 1px solid #edf0f4;
    }

    .admin-table td::before {
        content: attr(data-label);
        color: #98a2b3;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .admin-table td:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 460px) {
    .admin-hero-stats {
        grid-template-columns: 1fr;
    }

    .admin-table td {
        grid-template-columns: 88px minmax(0,1fr);
    }

    .role-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .role-actions .btn,
    .role-actions form,
    .role-actions form .btn {
        width: 100%;
    }

    .access-denied-card {
        margin: 24px auto;
        padding: 28px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .role-card,
    .permission-item,
    .admin-table tbody tr {
        transition: none !important;
    }

    .role-card:hover {
        transform: none;
    }
}


/* =========================================================
   Phase 3 — Product & Inventory Foundation
   ========================================================= */

.inventory-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 146px;
    margin-bottom: 16px;
    padding: 26px 28px;
    border: 1px solid rgba(20, 184, 166, .16);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 18%, rgba(98, 226, 211, .18), transparent 24%),
        linear-gradient(128deg, #101d31 0%, #173a50 57%, #0a7f75 135%);
    box-shadow: 0 18px 48px rgba(15, 31, 48, .10);
}

.inventory-hero::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -76px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(255,255,255,.025),
        0 0 0 68px rgba(255,255,255,.018);
    pointer-events: none;
}

.inventory-hero > * {
    position: relative;
    z-index: 1;
}

.inventory-hero .eyebrow {
    color: #74eadf;
}

.inventory-hero h2 {
    margin: 7px 0 7px;
    color: #fff;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.18;
    letter-spacing: -.035em;
}

html[lang="bn"] .inventory-hero h2 {
    letter-spacing: -.015em;
    line-height: 1.35;
}

.inventory-hero p {
    max-width: 760px;
    margin: 0;
    color: #c6d4df;
    font-size: 11.5px;
    line-height: 1.7;
}

.inventory-hero.compact-hero {
    min-height: 122px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.inventory-hero .btn.secondary {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.09);
    color: #f5fbff;
    backdrop-filter: blur(8px);
}

.inventory-hero .btn.secondary:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
}

.btn-icon {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    margin-right: 7px;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.inventory-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.inventory-stat-grid.five {
    grid-template-columns: repeat(5, minmax(0,1fr));
}

.inventory-stat-grid article {
    min-height: 90px;
    padding: 16px 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,253,.98));
    box-shadow: var(--shadow-sm);
    transition:
        transform .22s var(--ease-premium),
        box-shadow .22s ease,
        border-color .22s ease;
}

.inventory-stat-grid article:hover {
    transform: translateY(-2px);
    border-color: #d5dde7;
    box-shadow: var(--shadow-hover);
}

.inventory-stat-grid span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.35;
}

.inventory-stat-grid strong {
    display: block;
    margin-top: 9px;
    color: var(--heading);
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.product-filter-panel {
    margin-bottom: 16px;
    padding: 18px;
}

.inventory-filter-grid {
    display: grid;
    grid-template-columns: minmax(210px,1.4fr) repeat(4, minmax(140px,.8fr)) auto;
    gap: 10px;
    align-items: end;
}

.inventory-filter-grid.stock-filter-grid {
    grid-template-columns: minmax(240px,1.5fr) minmax(180px,.9fr) minmax(170px,.85fr) auto;
}

.inventory-filter-grid.history-filter-grid {
    grid-template-columns: minmax(220px,1.25fr) minmax(180px,.9fr) repeat(2, minmax(160px,.8fr)) auto;
}

.inventory-filter-grid .field {
    margin-bottom: 0;
}

.filter-actions {
    display: flex;
    gap: 7px;
    padding-bottom: 1px;
}

.inventory-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15,23,42,.035);
}

.inventory-tabs a {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 10px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    transition: .18s ease;
}

.inventory-tabs a:hover {
    background: #f7f9fb;
    color: #344054;
}

.inventory-tabs a.active {
    color: #087b70;
    background: #eaf9f6;
    box-shadow: inset 0 0 0 1px #d7f0eb;
}

.inventory-hero-kpis {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.inventory-hero-kpis > div {
    min-width: 108px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
}

.inventory-hero-kpis strong,
.inventory-hero-kpis span {
    display: block;
}

.inventory-hero-kpis strong {
    color: #fff;
    font-size: 18px;
}

.inventory-hero-kpis span {
    margin-top: 2px;
    color: #bcd0dc;
    font-size: 8px;
}

.inventory-split {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
    gap: 16px;
    align-items: start;
}

.inventory-form-card,
.inventory-list-card {
    min-width: 0;
}

.inventory-list-card.full-width {
    grid-column: 1 / -1;
}

.inventory-form-actions {
    gap: 8px;
}

.inventory-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.soft-count {
    min-width: 38px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #0d7f73;
    background: #eaf9f6;
    font-size: 10px;
    font-weight: 850;
}

.reference-list {
    display: grid;
    gap: 8px;
}

.reference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 66px;
    padding: 10px 11px;
    border: 1px solid #e4e9ef;
    border-radius: 13px;
    background: #fbfcfd;
    transition:
        transform .18s var(--ease-premium),
        border-color .18s ease,
        background .18s ease;
}

.reference-row:hover {
    transform: translateY(-1px);
    border-color: #d5dde6;
    background: #fff;
}

.reference-row.is-inactive {
    opacity: .67;
}

.reference-main {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.reference-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #138d80;
    background: #eaf9f6;
}

.reference-icon svg {
    width: 18px;
    height: 18px;
}

.reference-main strong,
.reference-main span,
.reference-main small {
    display: block;
}

.reference-main strong {
    color: #344054;
    font-size: 11px;
}

.reference-main span {
    margin-top: 2px;
    color: #8a94a4;
    font-size: 8.5px;
}

.reference-main small {
    margin-top: 4px;
    color: #667085;
    font-size: 8px;
}

.reference-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.icon-action {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    color: #667085;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: .16s ease;
}

.icon-action:hover {
    border-color: #bddfd9;
    color: #087a6f;
    background: #f3fbf9;
}

.empty-inventory-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px 18px;
    border: 1px dashed #dce3ea;
    border-radius: 15px;
    background: #fbfcfd;
}

.empty-inventory-state.large {
    min-height: 240px;
}

.empty-inventory-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 15px;
    color: #139486;
    background: #eaf9f6;
}

.empty-inventory-icon svg {
    width: 24px;
    height: 24px;
}

.empty-inventory-state strong {
    color: #344054;
    font-size: 12px;
}

.empty-inventory-state span {
    max-width: 420px;
    margin: 5px 0 14px;
    color: #8a94a4;
    font-size: 9.5px;
    line-height: 1.55;
}

.product-list-panel {
    min-width: 0;
}

.inventory-product-table {
    min-width: 1120px;
}

.stock-table {
    min-width: 1080px;
}

.movement-table {
    min-width: 1180px;
}

.product-cell {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    min-width: 190px;
}

.product-cell.simple {
    display: block;
    min-width: 150px;
}

.product-cell > div:last-child,
.product-cell.simple > div {
    min-width: 0;
}

.product-cell strong,
.product-cell span {
    display: block;
}

.product-cell strong {
    color: #344054;
    font-size: 10.5px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.product-cell span {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 8.5px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.product-thumb {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 11px;
    color: #118f81;
    background:
        linear-gradient(145deg, #ecfaf7, #f7fbfc);
    font-size: 14px;
    font-weight: 900;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sku-code {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 7px;
    color: #526078;
    background: #f5f7fa;
    font-size: 8.5px;
}

.barcode-line {
    display: block;
    margin-top: 4px;
    color: #98a2b3;
    font-size: 7.5px;
}

.stock-cell strong,
.stock-cell span {
    display: block;
}

.stock-cell strong,
.stock-number {
    color: #344054;
    font-size: 10.5px;
    font-weight: 850;
}

.stock-status {
    margin-top: 4px;
    font-size: 8px;
    font-weight: 750;
}

.stock-status.stock-ok,
.stock-pill.stock-ok {
    color: #24765e;
}

.stock-status.stock-low,
.stock-pill.stock-low {
    color: #a1690b;
}

.stock-status.stock-out,
.stock-pill.stock-out {
    color: #b04444;
}

.stock-status.stock-untracked,
.stock-pill.stock-untracked {
    color: #7b8492;
}

.stock-pill,
.movement-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border: 1px solid #e0e6ed;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 8.5px;
    font-weight: 800;
}

.stock-pill.stock-ok {
    border-color: #d2eee5;
    background: #eefaf6;
}

.stock-pill.stock-low {
    border-color: #f1e2bd;
    background: #fff9e9;
}

.stock-pill.stock-out {
    border-color: #f0d0d0;
    background: #fff2f2;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.pagination a,
.pagination span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.pagination a:hover {
    border-color: #c5ded9;
    color: #0c7c71;
    background: #f6fbfa;
}

.pagination a.disabled {
    pointer-events: none;
    opacity: .45;
}

.product-editor {
    max-width: 1480px;
}

.product-editor-grid {
    display: grid;
    grid-template-columns: minmax(0,1.48fr) minmax(310px,.52fr);
    gap: 16px;
    align-items: start;
}

.product-main-panel {
    min-width: 0;
}

.product-side-stack {
    display: grid;
    gap: 16px;
}

.product-editor-hero {
    min-height: 130px;
}

.product-editor-balance {
    min-width: 176px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

.product-editor-balance span,
.product-editor-balance strong,
.product-editor-balance small {
    display: block;
}

.product-editor-balance span {
    color: #b7cbd7;
    font-size: 8px;
    font-weight: 750;
}

.product-editor-balance strong {
    margin: 5px 0 3px;
    color: #fff;
    font-size: 20px;
}

.product-editor-balance small {
    color: #78eadf;
    font-size: 8.5px;
}

.input-action-wrap {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
}

.input-action-wrap input {
    border-radius: 11px 0 0 11px;
}

.input-action-wrap button {
    min-width: 76px;
    border: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 0 11px 11px 0;
    color: #087c70;
    background: #f0faf8;
    cursor: pointer;
    font-size: 8.5px;
    font-weight: 800;
    transition: .15s ease;
}

.input-action-wrap button:hover {
    background: #e6f7f3;
}

.money-input {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    transition: .18s ease;
}

.money-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(18,184,166,.10);
}

.money-input > span {
    align-self: stretch;
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 0 10px;
    border-right: 1px solid #e5e9ee;
    color: #6d7788;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 800;
}

.money-input input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.switch-field {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 11px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #e1e7ed;
    border-radius: 13px;
    background: #fbfcfd;
    cursor: pointer;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #d6dde5;
    transition: .18s ease;
}

.switch-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.18);
    transition: .18s ease;
}

.switch-field input:checked + .switch-control {
    background: #12b8a6;
}

.switch-field input:checked + .switch-control::after {
    transform: translateX(16px);
}

.switch-field strong,
.switch-field small {
    display: block;
}

.switch-field strong {
    color: #344054;
    font-size: 9.5px;
}

.switch-field small {
    margin-top: 3px;
    color: #8a94a4;
    font-size: 8px;
    line-height: 1.4;
}

.product-image-uploader {
    text-align: center;
}

.product-image-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px dashed #ccd6df;
    border-radius: 14px;
    color: #9aa6b3;
    background:
        radial-gradient(circle at 35% 30%, #f0faf8, transparent 35%),
        #f8fafc;
}

.product-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-preview svg {
    width: 34px;
    height: 34px;
}

.file-field {
    display: block;
    cursor: pointer;
}

.file-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.file-field span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    color: #4f6174;
    background: #fff;
    font-size: 9px;
    font-weight: 800;
}

.product-image-uploader > small {
    display: block;
    margin-top: 7px;
    color: #98a2b3;
    font-size: 8px;
    line-height: 1.45;
}

.check-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #667085;
    font-size: 8.5px;
}

.stock-adjust-grid {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    gap: 16px;
    align-items: start;
}

.product-context-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.product-context-card > div {
    padding: 11px;
    border: 1px solid #e1e7ed;
    border-radius: 11px;
    background: #f9fbfc;
}

.product-context-card span,
.product-context-card strong {
    display: block;
}

.product-context-card span {
    color: #98a2b3;
    font-size: 7.8px;
}

.product-context-card strong {
    margin-top: 4px;
    color: #344054;
    font-size: 9.5px;
    overflow-wrap: anywhere;
}

.movement-timeline {
    display: grid;
}

.movement-row {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f4;
}

.movement-row:last-child {
    border-bottom: 0;
}

.movement-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
}

.movement-dot.positive {
    background: #1eb885;
    box-shadow: 0 0 0 4px #e9f8f2;
}

.movement-dot.negative {
    background: #dc6a6a;
    box-shadow: 0 0 0 4px #fff0f0;
}

.movement-copy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.movement-copy strong {
    color: #344054;
    font-size: 10px;
}

.movement-copy span {
    font-size: 9px;
    font-weight: 850;
}

.movement-copy .positive,
.movement-value.positive {
    color: #1b8863;
}

.movement-copy .negative,
.movement-value.negative {
    color: #b54d4d;
}

.movement-copy p {
    margin: 5px 0 3px;
    color: #667085;
    font-size: 8.8px;
    line-height: 1.45;
}

.movement-copy small {
    color: #98a2b3;
    font-size: 7.8px;
}

.movement-type-pill {
    border-color: #dce6ec;
    color: #506174;
    background: #f8fafc;
}

.movement-value {
    font-size: 10px;
}

.movement-note {
    display: block;
    max-width: 280px;
    white-space: normal;
    line-height: 1.45;
    color: #667085;
}

.dashboard-inventory-strip {
    display: grid;
    grid-template-columns: minmax(230px,.65fr) minmax(0,1.35fr);
    gap: 14px;
    align-items: stretch;
    margin: 0 0 16px;
    padding: 15px;
    border: 1px solid #dfe7ec;
    border-radius: 17px;
    background:
        linear-gradient(130deg, #f9fcfd, #f1faf8);
    box-shadow: 0 8px 24px rgba(15,23,42,.035);
}

.dashboard-inventory-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 7px;
}

.dashboard-inventory-head strong {
    display: block;
    margin-top: 5px;
    color: #344054;
    font-size: 12px;
}

.dashboard-inventory-head a {
    width: fit-content;
    margin-top: 8px;
    color: #0b8578;
    font-size: 8.5px;
    font-weight: 800;
}

.dashboard-inventory-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.dashboard-inventory-kpis > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(208,224,229,.9);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
}

.dashboard-inventory-kpis span,
.dashboard-inventory-kpis strong {
    display: block;
}

.dashboard-inventory-kpis span {
    color: #8a94a4;
    font-size: 7.6px;
}

.dashboard-inventory-kpis strong {
    margin-top: 4px;
    color: #344054;
    font-size: 13px;
    overflow-wrap: anywhere;
}

@media (max-width: 1260px) {
    .inventory-filter-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .inventory-filter-grid .filter-search {
        grid-column: span 2;
    }

    .inventory-filter-grid .filter-actions {
        grid-column: 1 / -1;
    }

    .inventory-stat-grid.five {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .product-editor-grid {
        grid-template-columns: minmax(0,1.22fr) minmax(300px,.78fr);
    }
}

@media (max-width: 980px) {
    .inventory-split,
    .product-editor-grid,
    .stock-adjust-grid {
        grid-template-columns: 1fr;
    }

    .product-side-stack {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .product-side-stack > section:last-child {
        grid-column: 1 / -1;
    }

    .inventory-stat-grid,
    .inventory-stat-grid.five {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dashboard-inventory-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .inventory-hero {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        min-height: 0;
        padding: 22px 20px;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .inventory-hero-kpis {
        width: 100%;
    }

    .inventory-hero-kpis > div {
        flex: 1 1 0;
    }

    .inventory-filter-grid,
    .inventory-filter-grid.stock-filter-grid,
    .inventory-filter-grid.history-filter-grid {
        grid-template-columns: 1fr;
    }

    .inventory-filter-grid .filter-search,
    .inventory-filter-grid .filter-actions {
        grid-column: auto;
    }

    .filter-actions {
        width: 100%;
    }

    .filter-actions .btn {
        flex: 1 1 0;
    }

    .product-side-stack {
        grid-template-columns: 1fr;
    }

    .product-side-stack > section:last-child {
        grid-column: auto;
    }

    .dashboard-inventory-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .product-context-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .inventory-stat-grid,
    .inventory-stat-grid.five {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-stat-grid article {
        min-height: 84px;
        padding: 14px;
    }

    .inventory-stat-grid strong {
        font-size: 17px;
    }

    .reference-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .product-editor-balance {
        width: 100%;
    }

    .product-main-panel .form-grid.two,
    .product-main-panel .form-grid.three {
        grid-template-columns: 1fr;
    }

    .inventory-product-table-wrap {
        overflow: visible;
    }

    .inventory-product-table,
    .stock-table,
    .movement-table {
        min-width: 0;
    }

    .inventory-product-table .product-cell,
    .stock-table .product-cell,
    .movement-table .product-cell {
        min-width: 0;
    }

    .movement-note {
        max-width: none;
    }
}

@media (max-width: 460px) {
    .inventory-stat-grid,
    .inventory-stat-grid.five,
    .dashboard-inventory-kpis {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .inventory-tabs {
        width: 100%;
    }

    .inventory-tabs a {
        flex: 1 0 auto;
        text-align: center;
    }

    .inventory-hero-kpis {
        display: grid;
        grid-template-columns: 1fr;
    }

    .input-action-wrap {
        grid-template-columns: minmax(0,1fr);
    }

    .input-action-wrap input {
        border-radius: 11px 11px 0 0;
    }

    .input-action-wrap button {
        min-height: 34px;
        border: 1px solid var(--line-strong);
        border-top: 0;
        border-radius: 0 0 11px 11px;
    }

    .pagination {
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inventory-hero::after,
    .inventory-stat-grid article,
    .reference-row {
        transition: none !important;
        animation: none !important;
    }

    .inventory-stat-grid article:hover,
    .reference-row:hover {
        transform: none;
    }
}

.field.is-disabled { opacity: .5; }
.field.is-disabled input { background: #f4f6f8; }


/* Phase 3 — Product multi-unit / pack conversion */
.product-unit-layout {
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
    align-items: start;
}

.product-unit-list .reference-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto auto;
    gap: 18px;
    align-items: center;
}

.base-unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, .08), transparent 62%),
        var(--surface);
}

.base-unit-row .reference-main small,
.product-unit-list .reference-main small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.conversion-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 8px;
    min-width: 250px;
}

.conversion-prices > div {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.conversion-prices span,
.conversion-prices strong {
    display: block;
}

.conversion-prices span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: .72rem;
}

.conversion-prices strong {
    font-size: .88rem;
    white-space: nowrap;
}

.unit-empty {
    margin-top: 10px;
}

@media (max-width: 980px) {
    .product-unit-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .product-unit-list .reference-row {
        grid-template-columns: 1fr;
    }

    .conversion-prices {
        width: 100%;
        min-width: 0;
    }

    .base-unit-row {
        align-items: flex-start;
    }
}

@media (max-width: 460px) {
    .conversion-prices {
        grid-template-columns: 1fr;
    }

    .base-unit-row {
        flex-direction: column;
    }
}


/* Phase 3.1 — unit relationships and compound quantity entry */
.unit-relation-builder {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfefd 0%, #f7fbfb 100%);
}
.unit-relation-builder .panel-head { margin-bottom: 12px; }
.unit-equation-preview,
.unit-relation-summary {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 750;
    border: 1px solid rgba(18,184,166,.14);
}
.unit-relation-summary.compact { display: inline-flex; margin-top: 9px; }
.unit-relation-chip {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 9.5px;
    font-weight: 800;
}
.unit-relation-chip.is-base {
    background: #f2f4f7;
    color: var(--muted);
}
.unit-quantity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.unit-quantity-grid > [hidden] { display: none !important; }
.unit-quantity-input {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.unit-quantity-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(18,184,166,.09);
}
.unit-quantity-input input {
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-right: 8px;
}
.unit-quantity-input > span {
    display: grid;
    place-items: center;
    min-width: 58px;
    padding: 0 11px;
    background: #f7fafc;
    border-left: 1px solid var(--line);
    color: #475467;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}
html[lang="bn"] .unit-quantity-input > span {
    font-size: 11px;
}
.pricing-unit-note {
    margin: -4px 0 12px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}
.field.is-disabled,
[data-relation-multiplier-field].is-disabled {
    opacity: .62;
}
@media (max-width: 640px) {
    .unit-quantity-grid { grid-template-columns: 1fr; }
    .unit-relation-builder { padding: 13px; }
}


/* =========================================================
   Phase 3.2 — Catalog width + destructive product actions
   ========================================================= */

.product-list-panel {
    width: 100%;
    max-width: none;
}

.inventory-product-table-wrap {
    width: 100%;
    max-width: none;
}

.inventory-product-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
}

.inventory-product-table col.col-product  { width: 21%; }
.inventory-product-table col.col-category { width: 9%; }
.inventory-product-table col.col-sku      { width: 12%; }
.inventory-product-table col.col-purchase { width: 10%; }
.inventory-product-table col.col-sale     { width: 10%; }
.inventory-product-table col.col-stock    { width: 12%; }
.inventory-product-table col.col-status   { width: 8%; }
.inventory-product-table col.col-actions  { width: 18%; }

.inventory-product-table th,
.inventory-product-table td {
    min-width: 0;
}

.inventory-product-table .product-cell {
    min-width: 0;
}

.inventory-product-table .table-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.inventory-product-table .table-actions > a,
.inventory-product-table .table-actions > form,
.inventory-product-table .table-actions > form > button {
    width: 100%;
    min-width: 0;
}

.inventory-product-table .table-actions .btn {
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
}

.btn.danger-solid {
    border: 1px solid #e8b2b2;
    background: #b54747;
    color: #fff;
    box-shadow: 0 7px 18px rgba(181, 71, 71, .13);
}

.btn.danger-solid:hover {
    border-color: #a63e3e;
    background: #a63e3e;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 1240px) {
    .inventory-product-table {
        min-width: 1040px;
    }

    .inventory-product-table col.col-product  { width: 20%; }
    .inventory-product-table col.col-actions  { width: 19%; }
}

@media (max-width: 680px) {
    .inventory-product-table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .inventory-product-table colgroup {
        display: none;
    }

    .inventory-product-table .table-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .inventory-product-table .table-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Phase 3.3 — Product tools, compact row menus, desktop fold
   ========================================================= */

.sidebar-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: #344054;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15,23,42,.035);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sidebar-toggle:hover {
    background: #f8fafc;
    border-color: #cfd8e5;
    box-shadow: 0 7px 18px rgba(15,23,42,.06);
    transform: translateY(-1px);
}

.product-actions-cell {
    text-align: right;
    overflow: visible;
}

.inventory-product-table col.col-product  { width: 24%; }
.inventory-product-table col.col-category { width: 10%; }
.inventory-product-table col.col-sku      { width: 14%; }
.inventory-product-table col.col-purchase { width: 10%; }
.inventory-product-table col.col-sale     { width: 10%; }
.inventory-product-table col.col-stock    { width: 14%; }
.inventory-product-table col.col-status   { width: 10%; }
.inventory-product-table col.col-actions  { width: 8%; }

.row-action-menu {
    display: inline-flex;
    position: relative;
    justify-content: flex-end;
}

.row-action-trigger {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    cursor: pointer;
    transition: .18s ease;
}

.row-action-trigger:hover,
.row-action-menu.is-open .row-action-trigger {
    color: #087e74;
    border-color: rgba(18,184,166,.45);
    background: #eefbf9;
    box-shadow: 0 8px 20px rgba(15,23,42,.07);
}

.row-action-trigger svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.row-action-popover {
    position: fixed;
    z-index: 80;
    width: min(270px, calc(100vw - 24px));
    overflow-y: auto;
    padding: 7px;
    border: 1px solid #e1e7ee;
    border-radius: 14px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 24px 60px rgba(15,23,42,.17), 0 4px 14px rgba(15,23,42,.07);
    backdrop-filter: blur(14px);
    transform-origin: top right;
    animation: rowMenuIn .16s ease both;
}

.row-action-popover[hidden] {
    display: none !important;
}

.row-action-item {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 22px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #344054;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}

html[lang="bn"] .row-action-item {
    text-align: left;
}

.row-action-item:hover {
    background: #f3f7fa;
    color: #0f766e;
    transform: translateX(1px);
}

.row-action-item.warning {
    color: #9a6700;
}

.row-action-item.danger {
    color: #b42318;
}

.row-action-item.danger:hover {
    background: #fff1f0;
    color: #9f1c13;
}

.row-action-item > span:first-child {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
}

.row-action-item svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.row-action-form {
    margin: 0;
}

.row-action-separator {
    height: 1px;
    margin: 6px 5px;
    background: #edf0f4;
}

body.modal-open {
    overflow: hidden;
}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .17s ease, visibility .17s ease;
}

.app-modal[hidden] {
    display: none !important;
}

.app-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9,18,32,.54);
    backdrop-filter: blur(5px);
}

.app-modal-card {
    position: relative;
    width: min(720px, 100%);
    max-height: min(84vh, 820px);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(4,12,24,.28);
    padding: 22px;
    transform: translateY(12px) scale(.985);
    transition: transform .2s ease;
}

.app-modal.is-open .app-modal-card {
    transform: translateY(0) scale(1);
}

.app-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 17px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf0f4;
}

.app-modal-head.compact {
    margin-bottom: 14px;
}

.app-modal-head h3 {
    margin: 4px 0 0;
    color: var(--heading);
    font-size: 22px;
    letter-spacing: -.035em;
}

.app-modal-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.modal-close-button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #e3e8ef;
    border-radius: 11px;
    background: #fff;
    color: #667085;
    cursor: pointer;
}

.modal-close-button:hover {
    background: #f8fafc;
    color: #111827;
}

.modal-close-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.product-overview-body {
    display: grid;
    grid-template-columns: 210px minmax(0,1fr);
    gap: 22px;
}

.product-overview-visual {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overview-image {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e5eaf0;
    border-radius: 17px;
    background: #f7f9fb;
    color: #9aa5b3;
}

.overview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overview-image > span {
    width: 48px;
    height: 48px;
}

.overview-image svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.overview-price {
    padding: 14px;
    border: 1px solid #dff3ef;
    border-radius: 14px;
    background: #f1fbf9;
}

.overview-price span {
    display: block;
    color: #667085;
    font-size: 10px;
}

.overview-price strong {
    display: block;
    margin-top: 4px;
    color: #0b756c;
    font-size: 19px;
}

.overview-details {
    min-width: 0;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin: 0;
}

.overview-grid > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    background: #fbfcfd;
}

.overview-grid dt {
    color: #98a2b3;
    font-size: 9.5px;
    font-weight: 700;
}

.overview-grid dd {
    margin: 5px 0 0;
    color: #1d2939;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.overview-description {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e9edf2;
    border-radius: 12px;
}

.overview-description > span {
    color: #98a2b3;
    font-size: 9.5px;
    font-weight: 700;
}

.overview-description p {
    margin: 7px 0 0;
    color: #475467;
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.code-modal-card {
    width: min(440px, 100%);
}

.print-label-preview {
    width: min(320px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 16px;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.label-shop {
    font-size: 11px;
    line-height: 1.2;
}

.label-code {
    color: #667085;
    font-size: 11px;
    letter-spacing: .04em;
}

.label-product {
    max-width: 270px;
    color: #172033;
    font-size: 14px;
    line-height: 1.3;
}

.label-price {
    color: #0f172a;
    font-size: 17px;
}

.barcode-svg {
    width: min(280px, 100%);
    max-height: 88px;
}

.qr-render {
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.qr-render img,
.qr-render canvas {
    width: 220px !important;
    height: 220px !important;
    display: block;
}

.code-modal-note {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #ffd9d4;
    border-radius: 10px;
    background: #fff5f3;
    color: #b42318;
    font-size: 10.5px;
    line-height: 1.45;
}

.app-modal-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.app-modal-actions .btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.sales-history-filter-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) auto;
}

@keyframes rowMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Desktop compact/folded sidebar */
@media (min-width: 961px) {
    .app-shell,
    .sidebar,
    .main {
        transition: width .24s ease, grid-template-columns .24s ease, margin .24s ease;
    }

    body.sidebar-collapsed .app-shell {
        grid-template-columns: 78px minmax(0,1fr);
    }

    body.sidebar-collapsed .sidebar {
        width: 78px;
    }

    body.sidebar-collapsed .brand {
        justify-content: center;
        padding-inline: 12px;
    }

    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .sidebar-footer .user-mini-text,
    body.sidebar-collapsed .sidebar-footer .logout-link > span:last-child,
    body.sidebar-collapsed .nav-link > span:last-child,
    body.sidebar-collapsed .nav-section {
        display: none;
    }

    body.sidebar-collapsed .brand-mark {
        width: 42px;
        height: 42px;
        margin: 0;
    }

    body.sidebar-collapsed .brand-logo-image {
        width: 42px;
        height: 42px;
        margin: 0;
        flex-basis: 42px;
    }

    body.sidebar-collapsed .nav {
        padding-inline: 10px;
    }

    body.sidebar-collapsed .nav-link {
        position: relative;
        justify-content: center;
        padding-inline: 0;
    }

    body.sidebar-collapsed .nav-icon {
        width: 22px;
        height: 22px;
    }

    body.sidebar-collapsed .sidebar-footer {
        padding-inline: 12px;
    }

    body.sidebar-collapsed .sidebar-footer .user-mini {
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-footer .logout-link {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    body.sidebar-collapsed .nav-link[data-nav-label]::after {
        content: attr(data-nav-label);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 90;
        transform: translateY(-50%) translateX(-4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        white-space: nowrap;
        padding: 8px 10px;
        border-radius: 9px;
        background: #111827;
        color: #fff;
        font-size: 10.5px;
        font-weight: 650;
        box-shadow: 0 10px 28px rgba(0,0,0,.18);
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    }

    body.sidebar-collapsed .nav-link[data-nav-label]:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }

    .sidebar-close {
        display: none !important;
    }
}

@media (max-width: 960px) {
    .sidebar-toggle {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 680px) {
    .product-overview-body {
        grid-template-columns: 1fr;
    }

    .product-overview-visual {
        display: grid;
        grid-template-columns: 120px minmax(0,1fr);
        align-items: center;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .sales-history-filter-grid {
        grid-template-columns: 1fr;
    }

    .row-action-popover {
        width: min(286px, calc(100vw - 20px));
    }

    .app-modal {
        padding: 10px;
        align-items: end;
    }

    .app-modal-card {
        width: 100%;
        max-height: 88dvh;
        border-radius: 20px 20px 12px 12px;
    }

    .code-modal-card {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .product-overview-visual {
        grid-template-columns: 96px minmax(0,1fr);
    }

    .app-modal-actions {
        flex-direction: column;
    }

    .app-modal-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .row-action-popover,
    .app-modal,
    .app-modal-card,
    .sidebar-toggle {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   Phase 3.4 — table legibility + anchored action popovers
   ========================================================= */

.brand {
    gap: 8px;
}

.brand-home {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    outline: 0;
}

.brand-home:hover .brand-title,
.brand-home:focus-visible .brand-title {
    color: #ffffff;
}

.brand-home:hover .brand-mark,
.brand-home:focus-visible .brand-mark {
    transform: translateY(-1px);
    box-shadow: 0 13px 32px rgba(18,184,166,.38);
}

.brand-home:focus-visible {
    box-shadow: 0 0 0 3px rgba(124,240,226,.16);
}

.brand-mark {
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Floating action popovers are portalled to body so tables/panels cannot clip them. */
.row-action-popover[data-floating-row-action="true"] {
    position: fixed !important;
    z-index: 1000 !important;
    margin: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform-origin: top right;
}

.row-action-popover[data-placement="top"] {
    transform-origin: bottom right;
}

.row-action-popover[data-placement="bottom"] {
    transform-origin: top right;
}

/* Improve readability across list/table screens without making the UI bulky. */
.admin-table th {
    font-size: 9.75px;
    line-height: 1.35;
}

.admin-table td {
    font-size: 11px;
    line-height: 1.45;
}

.data-table th {
    font-size: 11px;
    line-height: 1.35;
}

.data-table td {
    font-size: 12px;
    line-height: 1.45;
}

.product-cell strong,
.table-user strong,
.stock-number,
.stock-cell strong {
    font-size: 11.5px;
}

.product-cell span,
.table-user span,
.stock-cell span {
    font-size: 9.5px;
}

.sku-code,
.barcode-line {
    font-size: 9.25px;
}

.role-badge,
.status-badge,
.stock-pill {
    font-size: 9.25px;
}

.row-action-item {
    font-size: 12px;
}

html[lang="bn"] .admin-table td,
html[lang="bn"] .data-table td {
    font-size: 11.5px;
}

html[lang="bn"] .admin-table th,
html[lang="bn"] .data-table th {
    font-size: 10.25px;
}

@media (max-width: 760px) {
    .admin-table td::before {
        font-size: 9px;
    }

    .admin-table td {
        font-size: 11.5px;
    }

    .product-cell strong,
    .stock-number,
    .stock-cell strong {
        font-size: 12px;
    }
}

@media (max-width: 460px) {
    .admin-table td::before {
        font-size: 8.75px;
    }
}


/* =========================================================
   v0.7.4.1 sidebar regression hotfix
   ========================================================= */
.sidebar .nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
}

@media (min-width: 981px) {
    .sidebar-toggle {
        display: inline-flex !important;
    }
}


/* =========================================================
   v0.7.4.2 — sidebar/i18n/click-response corrective patch
   ========================================================= */

.sidebar {
    overflow: hidden;
}

.sidebar .nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-link,
.sidebar-toggle,
.sidebar-close,
.brand-home,
.profile-trigger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-link:active,
.nav-link.is-pressed {
    transform: translateX(1px) scale(.992);
}

.sidebar-toggle:active,
.profile-trigger:active {
    transform: scale(.96);
}

.brand-home {
    text-decoration: none;
    color: inherit;
}

@media (min-width: 961px) {
    .sidebar-toggle {
        display: inline-grid !important;
        place-items: center;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 2;
    }

    body.sidebar-collapsed .brand-home {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 960px) {
    .sidebar-toggle {
        display: inline-grid !important;
        place-items: center;
        pointer-events: auto;
    }

    .sidebar {
        overflow: visible;
    }

    .sidebar .nav {
        overflow-y: auto;
    }
}


/* =========================================================
   Phase 4 — Procurement / Suppliers / Purchase workflow
   ========================================================= */

.procurement-hero {
    position: relative;
    overflow: hidden;
}

.procurement-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -75px;
    top: -90px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 68px rgba(255,255,255,.025);
    pointer-events: none;
}

.procurement-metrics {
    margin-top: 14px;
}

.procurement-metrics .metric-card {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.procurement-metrics .metric-card > span {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}

.procurement-metrics .metric-card > strong {
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.procurement-filter-panel {
    margin-top: 14px;
    padding: 16px;
}

.procurement-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, .85fr)) auto;
    gap: 12px;
    align-items: end;
}

.payment-filter-grid {
    grid-template-columns: minmax(210px, 1.3fr) minmax(180px, 1fr) minmax(145px, .75fr) minmax(145px, .75fr) minmax(145px, .75fr) auto;
}

.procurement-filter-grid .field,
.purchase-header-grid .field,
.purchase-item-row .field,
.procurement-form-panel .field,
.ledger-filter-form .field {
    margin: 0;
}

.procurement-filter-grid .filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
}

.procurement-list-panel {
    margin-top: 14px;
}

.procurement-table th,
.procurement-table td,
.ledger-table th,
.ledger-table td {
    font-size: .84rem;
    line-height: 1.45;
    vertical-align: middle;
}

.procurement-table td strong,
.ledger-table td strong {
    font-size: .88rem;
}

.table-subtext {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .74rem;
}

.table-action-link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.table-action-link:hover {
    text-decoration: underline;
}

.procurement-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(285px, .55fr);
    gap: 16px;
    align-items: start;
}

.procurement-form-panel {
    padding: 18px;
}

.procurement-form-panel .panel-head.compact {
    margin-bottom: 14px;
}

.procurement-balance-card {
    position: sticky;
    top: 92px;
    padding: 22px;
    min-height: 230px;
    background:
        radial-gradient(circle at 100% 0%, rgba(16,185,171,.10), transparent 42%),
        var(--surface);
}

.procurement-balance-card > strong {
    display: block;
    margin: 12px 0 20px;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    letter-spacing: -.04em;
}

.procurement-balance-card dl {
    margin: 0;
    display: grid;
    gap: 0;
}

.procurement-balance-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.procurement-balance-card dt {
    color: var(--muted);
}

.procurement-balance-card dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.purchase-editor {
    display: grid;
    gap: 14px;
}

.purchase-header-panel {
    padding: 16px;
}

.purchase-header-grid {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr) minmax(180px, .55fr);
    gap: 12px;
    align-items: end;
}

.field-inline-action {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.purchase-items-panel {
    padding: 0;
    overflow: visible;
}

.purchase-items-panel > .panel-head {
    padding: 18px 18px 12px;
}

.purchase-item-list {
    display: grid;
    gap: 10px;
    padding: 0 16px 16px;
}

.purchase-item-row {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(240px, 1.75fr) minmax(120px, .72fr) minmax(120px, .72fr) minmax(145px, .86fr) minmax(150px, .78fr) 38px;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.purchase-item-row:focus-within {
    border-color: rgba(20,184,166,.55);
    box-shadow: 0 10px 26px rgba(15,23,42,.07);
}

.purchase-line-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    align-self: center;
    border-radius: 10px;
    background: rgba(20,184,166,.10);
    color: var(--primary);
    font-weight: 800;
    font-size: .82rem;
}

.purchase-product-field {
    min-width: 0;
}

.purchase-related-field.is-hidden {
    display: none;
}

.purchase-line-total {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15,23,42,.035);
}

.purchase-line-total > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.purchase-line-total strong {
    margin-top: 2px;
    font-size: .92rem;
}

.purchase-line-total small {
    margin-top: 2px;
    color: var(--primary);
    font-size: .68rem;
}

.purchase-remove-line {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(239,68,68,.18);
    border-radius: 11px;
    color: #dc2626;
    background: rgba(254,242,242,.9);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.purchase-remove-line:hover:not(:disabled) {
    background: #fee2e2;
    transform: translateY(-1px);
}

.purchase-remove-line:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.purchase-remove-line svg {
    width: 17px;
    height: 17px;
}

.purchase-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .55fr);
    gap: 14px;
    align-items: start;
}

.purchase-edit-payment-note {
    display: flex;
    align-items: center;
    min-height: 45px;
    padding: 10px 12px;
    border: 1px solid rgba(14,165,233,.16);
    border-radius: 12px;
    color: #075985;
    background: #f0f9ff;
    font-weight: 700;
}

.purchase-summary-card {
    position: sticky;
    top: 92px;
    padding: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.11), transparent 46%),
        var(--surface);
}

.purchase-summary-card h3 {
    margin: 5px 0 14px;
}

.purchase-summary-card dl {
    margin: 0 0 16px;
}

.purchase-summary-card dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.purchase-summary-card dt {
    color: var(--muted);
}

.purchase-summary-card dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.purchase-summary-card .summary-total {
    margin-top: 5px;
    border-bottom: 0;
}

.purchase-summary-card .summary-total dt,
.purchase-summary-card .summary-total dd {
    color: var(--text);
    font-size: 1.08rem;
}

.purchase-summary-card .summary-due dd {
    color: #b45309;
}

.purchase-save-button {
    width: 100%;
    min-height: 46px;
}

.receipt-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.receipt-toolbar > div,
.receipt-toolbar > form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.procurement-receipt {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 34px);
}

.receipt-brand-row {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-start;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.receipt-brand-row h2 {
    margin: 5px 0 4px;
}

.receipt-brand-row p {
    margin: 0;
    color: var(--muted);
}

.receipt-number-card {
    min-width: 230px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(248,250,252,.78);
}

.receipt-number-card span,
.receipt-number-card small {
    display: block;
    color: var(--muted);
    font-size: .76rem;
}

.receipt-number-card strong {
    display: block;
    margin: 4px 0;
    font-size: 1.04rem;
}

.receipt-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.receipt-party-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(248,250,252,.62);
}

.receipt-party-card > span,
.receipt-party-card small {
    display: block;
    color: var(--muted);
    font-size: .76rem;
}

.receipt-party-card strong {
    display: block;
    margin: 4px 0;
    font-size: .96rem;
}

.receipt-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(248,250,252,.76);
    border: 1px solid var(--border);
}

.receipt-note p {
    margin: 6px 0 0;
    color: var(--muted);
}

.receipt-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
}

.payment-receipt-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 22px 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(20,184,166,.18), transparent 55%),
        linear-gradient(145deg, #0f2438, #0f766e);
    color: #fff;
}

.payment-receipt-amount span {
    opacity: .78;
    font-weight: 700;
}

.payment-receipt-amount strong {
    margin-top: 7px;
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: -.04em;
}

.receipt-summary {
    width: min(470px, 100%);
    margin-left: auto;
    display: grid;
    gap: 0;
}

.receipt-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.receipt-summary > div span {
    color: var(--muted);
}

.receipt-summary > div strong {
    text-align: right;
}

.receipt-summary > .grand {
    font-size: 1.06rem;
    border-bottom: 0;
}

.ledger-filter-form {
    flex-wrap: wrap;
}

.ledger-filter-form .field {
    min-width: 160px;
}

.supplier-ledger-card .responsive-table {
    margin-top: 18px;
}

.ledger-opening-row {
    background: rgba(20,184,166,.055);
}

.ledger-opening-row td {
    font-weight: 700;
}

.empty-cell {
    padding: 30px !important;
    text-align: center;
    color: var(--muted);
}

.status-badge.active {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    font-size: .72rem;
    font-weight: 800;
}

/* Give operational tables a more comfortable type scale. */
.data-table.admin-table th {
    font-size: .76rem;
}

.data-table.admin-table td {
    font-size: .84rem;
}

@media (max-width: 1280px) {
    .procurement-filter-grid,
    .payment-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .purchase-item-row {
        grid-template-columns: 32px minmax(220px, 1.5fr) minmax(110px, .7fr) minmax(110px, .7fr);
    }

    .purchase-line-total {
        grid-column: 2 / 4;
    }

    .purchase-remove-line {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
    }
}

@media (max-width: 980px) {
    .procurement-form-layout,
    .purchase-bottom-grid {
        grid-template-columns: 1fr;
    }

    .procurement-balance-card,
    .purchase-summary-card {
        position: static;
    }

    .purchase-header-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-header-grid .field-inline-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .procurement-filter-grid,
    .payment-filter-grid,
    .purchase-header-grid {
        grid-template-columns: 1fr;
    }

    .procurement-filter-grid .filter-actions {
        width: 100%;
    }

    .procurement-filter-grid .filter-actions .btn {
        flex: 1;
    }

    .purchase-items-panel > .panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .purchase-items-panel > .panel-head .btn {
        width: 100%;
    }

    .purchase-item-list {
        padding: 0 10px 12px;
    }

    .purchase-item-row {
        grid-template-columns: 34px minmax(0, 1fr) 38px;
        padding: 12px;
    }

    .purchase-line-number {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        margin-top: 24px;
    }

    .purchase-product-field {
        grid-column: 2;
    }

    .purchase-remove-line {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        margin-top: 24px;
    }

    .purchase-item-row > .field:not(.purchase-product-field),
    .purchase-related-field {
        grid-column: 2 / -1;
    }

    .purchase-line-total {
        grid-column: 2 / -1;
    }

    .receipt-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .receipt-toolbar > div,
    .receipt-toolbar > form {
        width: 100%;
    }

    .receipt-toolbar .btn {
        flex: 1;
    }

    .receipt-brand-row {
        flex-direction: column;
    }

    .receipt-number-card {
        min-width: 0;
        width: 100%;
    }

    .receipt-party-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .procurement-form-panel {
        padding: 14px;
    }

    .purchase-item-row {
        grid-template-columns: 1fr;
    }

    .purchase-line-number,
    .purchase-product-field,
    .purchase-remove-line,
    .purchase-item-row > .field:not(.purchase-product-field),
    .purchase-related-field,
    .purchase-line-total {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }

    .purchase-line-number {
        width: 30px;
        margin: 0;
    }

    .purchase-remove-line {
        width: 100%;
        margin: 0;
        height: 38px;
    }

    .payment-receipt-amount {
        min-height: 125px;
    }
}

@media print {
    .no-print,
    .sidebar,
    .topbar,
    .footer,
    .sidebar-backdrop {
        display: none !important;
    }

    body,
    .app-shell,
    .main,
    .content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .procurement-receipt {
        max-width: none;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .procurement-receipt,
    .procurement-receipt * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .responsive-table {
        overflow: visible !important;
    }

    .responsive-table table {
        min-width: 0 !important;
        width: 100% !important;
    }
}


.supplier-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.supplier-form-grid .full {
    grid-column: 1 / -1;
}

.purchase-receipt {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 34px);
}

.purchase-receipt-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.purchase-receipt-head > div:first-child {
    display: flex;
    gap: 14px;
    align-items: center;
}

.receipt-brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(145deg, #14b8a6, #0f766e);
    color: #fff;
    font-weight: 900;
    letter-spacing: -.04em;
    box-shadow: 0 10px 24px rgba(15,118,110,.18);
}

.purchase-receipt-head h2 {
    margin: 5px 0 3px;
}

.purchase-receipt-head p {
    margin: 0;
    color: var(--muted);
}

.receipt-status-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.receipt-status-block > span:last-child {
    color: var(--muted);
    font-size: .78rem;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
}

.payment-paid {
    background: #ecfdf5;
    color: #047857;
}

.payment-partial {
    background: #fff7ed;
    color: #c2410c;
}

.payment-due {
    background: #fef2f2;
    color: #b91c1c;
}

.purchase-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.purchase-party-grid > div {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(248,250,252,.62);
}

.purchase-party-grid span,
.purchase-party-grid small {
    display: block;
    color: var(--muted);
    font-size: .76rem;
}

.purchase-party-grid strong {
    display: block;
    margin: 4px 0;
    font-size: .96rem;
}

.receipt-table-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.purchase-receipt-table {
    min-width: 720px;
}

.purchase-receipt-table th {
    background: #f8fafc;
    font-size: .75rem;
}

.purchase-receipt-table td {
    font-size: .84rem;
}

.purchase-receipt-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.receipt-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .58fr);
    gap: 24px;
    margin-top: 20px;
    align-items: start;
}

.receipt-notes > span,
.receipt-payment-history > span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.receipt-notes p {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}

.receipt-payment-history {
    margin-top: 18px;
}

.receipt-payment-history > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.receipt-payment-history small {
    color: var(--muted);
    text-align: right;
}

.receipt-totals {
    margin: 0;
}

.receipt-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.receipt-totals dt {
    color: var(--muted);
}

.receipt-totals dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.receipt-totals .summary-total {
    font-size: 1.05rem;
    color: var(--text);
}

.receipt-totals .summary-due dd {
    color: #b45309;
}

.receipt-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 760px) {
    .supplier-form-grid,
    .purchase-party-grid,
    .receipt-bottom-grid {
        grid-template-columns: 1fr;
    }

    .supplier-form-grid .full {
        grid-column: auto;
    }

    .purchase-receipt-head {
        flex-direction: column;
    }

    .receipt-status-block {
        align-items: flex-start;
        text-align: left;
    }

    .receipt-payment-history > div {
        flex-direction: column;
        gap: 3px;
    }

    .receipt-payment-history small {
        text-align: left;
    }
}

@media print {
    .purchase-receipt {
        max-width: none;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .purchase-receipt-table {
        min-width: 0 !important;
        width: 100% !important;
    }
}


.procurement-stat-grid {
    margin-top: 14px;
}

.supplier-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) minmax(180px, .7fr) auto;
    gap: 12px;
    align-items: end;
}

.supplier-filter-grid .field {
    margin: 0;
}

.supplier-filter-grid .filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 760px) {
    .supplier-filter-grid {
        grid-template-columns: 1fr;
    }

    .supplier-filter-grid .filter-actions .btn {
        flex: 1;
    }
}


/* Phase 4.1 — procurement interaction polish */
.btn > svg,
.procurement-submit-button > svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    min-height: 17px;
    max-width: 17px;
    max-height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn {
    gap: 8px;
}

.procurement-submit-button {
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 18px !important;
    gap: 9px;
    overflow: hidden;
    white-space: normal;
}

.procurement-submit-button > span {
    line-height: 1.2;
}

.purchase-save-button {
    width: 100%;
    min-height: 48px !important;
}

.purchase-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.08), transparent 34%),
        rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(15,23,42,.045);
}

.purchase-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.purchase-action-copy .eyebrow {
    margin-bottom: 2px;
}

.purchase-action-copy > strong {
    color: var(--heading);
    font-size: .94rem;
    line-height: 1.25;
}

.purchase-action-copy > small {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
}

.purchase-action-buttons {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.purchase-action-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.purchase-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(20,184,166,.34);
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
    background: #fbfffe;
}

.purchase-action-btn.accent {
    color: #075e56;
    border-color: rgba(20,184,166,.22);
    background: rgba(20,184,166,.08);
}

.purchase-action-btn.print-action {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #16c4b1, var(--accent-dark));
    box-shadow: 0 8px 18px rgba(18,184,166,.16);
}

.purchase-action-btn > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.15;
}

.purchase-action-btn > span:last-child small {
    color: currentColor;
    opacity: .72;
    font-size: .66rem;
    font-weight: 750;
}

.purchase-action-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    background: rgba(15,23,42,.045);
}

.purchase-action-btn.accent .purchase-action-icon {
    background: rgba(20,184,166,.12);
}

.purchase-action-btn.print-action .purchase-action-icon {
    background: rgba(255,255,255,.15);
}

.purchase-action-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.purchase-action-btn:first-child .purchase-action-icon svg {
    transform: rotate(90deg);
}

.procurement-balance-card {
    min-height: 0;
}

.procurement-form-panel .btn.full {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .purchase-action-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .purchase-action-buttons {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .purchase-action-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-action-btn {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 390px) {
    .purchase-action-buttons {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.8.3 — Executive dashboard experience
   ========================================================= */

.dashboard-welcome {
    margin-bottom: 0;
}

.dashboard-primary-metrics {
    margin-bottom: 18px;
}

.dashboard-analytics-grid,
.dashboard-command-grid,
.dashboard-bottom-grid {
    display: grid;
    gap: 16px;
}

.dashboard-analytics-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(310px, .82fr);
    margin-bottom: 16px;
}

.dashboard-command-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
    margin-bottom: 16px;
}

.dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
}

.dashboard-analytics-card,
.dashboard-command-card,
.dashboard-data-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 9px 30px rgba(15,23,42,.045);
    overflow: hidden;
    transition:
        transform .24s var(--ease-premium),
        box-shadow .24s ease,
        border-color .24s ease;
}

.dashboard-analytics-card:hover,
.dashboard-command-card:hover,
.dashboard-data-card:hover {
    transform: translateY(-2px);
    border-color: #d9e2ea;
    box-shadow: 0 16px 42px rgba(15,23,42,.07);
}

.dashboard-analytics-card,
.dashboard-command-card,
.dashboard-data-card {
    padding: 21px;
}

.dashboard-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-card-head h3 {
    margin: 5px 0 0;
    color: var(--heading);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.22;
    letter-spacing: -.025em;
}

html[lang="bn"] .dashboard-card-head h3 {
    letter-spacing: 0;
    line-height: 1.42;
}

.dashboard-card-head p {
    max-width: 690px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.55;
}

html[lang="bn"] .dashboard-card-head p {
    line-height: 1.72;
}

.dashboard-period-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    color: #516076;
    background: #f8fafc;
    font-size: 9px;
    font-weight: 800;
}

.dashboard-inline-link {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--accent-dark);
    font-size: 9.5px;
    font-weight: 850;
    white-space: nowrap;
}

.dashboard-inline-link:hover {
    color: #056a62;
}

.procurement-chart-card {
    position: relative;
    isolation: isolate;
}

.procurement-chart-card::before {
    content: "";
    position: absolute;
    inset: auto auto -130px -100px;
    z-index: -1;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91,141,246,.07), transparent 70%);
    pointer-events: none;
}

.chart-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 7px;
}

.chart-summary-row > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.chart-summary-row small,
.chart-summary-row strong {
    display: block;
}

.chart-summary-row small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.chart-summary-row strong {
    margin-top: 3px;
    color: var(--heading);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.chart-summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(15,23,42,.035);
}

.chart-summary-dot.purchase {
    background: #5d8df6;
}

.chart-summary-dot.payment {
    background: #17b99f;
}

.procurement-chart {
    width: 100%;
    height: 235px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 14px;
}

.procurement-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid-line {
    stroke: #e8edf3;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-axis-value,
.chart-axis-date {
    fill: #98a2b3;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
}

.chart-purchase-area {
    fill: url(#purchaseAreaGradient);
}

.chart-series {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.chart-series-purchase {
    stroke: #5d8df6;
}

.chart-series-payment {
    stroke: #17b99f;
    stroke-dasharray: 5 4;
}

.chart-point {
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: r .16s ease;
}

.chart-point.purchase {
    fill: #5d8df6;
}

.chart-point.payment {
    fill: #17b99f;
}

.chart-point:hover {
    r: 5.6px;
}

.motion-ready .chart-series {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
    animation: dashboardLineDraw .95s var(--ease-premium) .18s forwards;
}

.motion-ready .chart-series-payment {
    animation-delay: .31s;
}

.inventory-health-card {
    background:
        radial-gradient(circle at 95% 10%, rgba(18,184,166,.07), transparent 28%),
        #fff;
}

.inventory-health-layout {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 174px;
}

.inventory-donut {
    position: relative;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background:
        conic-gradient(
            #22b989 0 var(--healthy),
            #f2b64c var(--healthy) var(--low-stop),
            #e65d66 var(--low-stop) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(15,23,42,.03),
        0 16px 34px rgba(15,23,42,.08);
    animation: dashboardDonutIn .7s var(--ease-premium) both;
}

.inventory-donut::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf1f5;
}

.inventory-donut-core {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    text-align: center;
}

.inventory-donut-core strong {
    color: var(--heading);
    font-size: 27px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.inventory-donut-core span {
    margin-top: 7px;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 700;
}

.inventory-health-legend {
    display: grid;
    gap: 7px;
}

.inventory-health-legend a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background .18s ease, border-color .18s ease;
}

.inventory-health-legend a:hover {
    border-color: #e2e8ef;
    background: #f8fafc;
}

.inventory-health-legend span:not(.legend-dot) {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.inventory-health-legend strong {
    color: var(--heading);
    font-size: 11px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.healthy { background: #22b989; }
.legend-dot.low { background: #f2b64c; }
.legend-dot.out { background: #e65d66; }

.inventory-value-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.inventory-value-row > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: rgba(248,250,252,.78);
}

.inventory-value-row span,
.inventory-value-row strong {
    display: block;
}

.inventory-value-row span {
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 700;
}

.inventory-value-row strong {
    margin-top: 5px;
    color: var(--heading);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-action-card {
    min-width: 0;
    min-height: 93px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid #e2e7ee;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    transition:
        transform .18s var(--ease-premium),
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.dashboard-action-card:hover {
    transform: translateY(-2px);
    border-color: #cfdbe5;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15,23,42,.065);
}

.dashboard-action-card.primary-action {
    border-color: rgba(18,184,166,.24);
    background:
        linear-gradient(135deg, rgba(18,184,166,.08), transparent 68%),
        #fff;
}

.dashboard-action-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.dashboard-action-icon svg,
.attention-icon svg,
.recent-purchase-mark svg,
.dashboard-empty-state svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-action-card > span:nth-child(2) {
    min-width: 0;
}

.dashboard-action-card strong,
.dashboard-action-card small {
    display: block;
}

.dashboard-action-card strong {
    color: var(--heading);
    font-size: 10.5px;
    line-height: 1.35;
}

.dashboard-action-card small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8.4px;
    line-height: 1.45;
}

.dashboard-action-card > b,
.attention-row > b,
.recent-purchase-row > b {
    color: #a0aaba;
    font-size: 18px;
    font-weight: 400;
}

.attention-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(248,181,65,.055), transparent 28%),
        #fff;
}

.attention-list {
    display: grid;
    gap: 8px;
}

.attention-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid #e5eaf0;
    border-radius: 13px;
    background: #fbfcfe;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.attention-row:hover {
    transform: translateX(2px);
    border-color: #d6dee8;
    background: #fff;
}

html[lang="bn"] .attention-row:hover {
    transform: none;
}

.attention-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #5d6b80;
    background: #eef2f6;
}

.attention-row.warning .attention-icon {
    color: #a86f13;
    background: #fff7e6;
}

.attention-row.danger .attention-icon {
    color: #b94e56;
    background: #fff0f1;
}

.attention-row.success .attention-icon {
    color: #198b66;
    background: #eaf8f2;
}

.attention-row.neutral .attention-icon {
    color: #4975cb;
    background: #eef4ff;
}

.attention-row small,
.attention-row strong {
    display: block;
}

.attention-row small {
    color: var(--muted);
    font-size: 8.8px;
    font-weight: 700;
}

.attention-row strong {
    margin-top: 4px;
    color: var(--heading);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.recent-purchase-list {
    display: grid;
    gap: 7px;
}

.recent-purchase-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.recent-purchase-row:hover {
    transform: translateX(2px);
    border-color: #e3e9ef;
    background: #f9fbfd;
}

html[lang="bn"] .recent-purchase-row:hover {
    transform: none;
}

.recent-purchase-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #3977f6;
    background: #eef4ff;
}

.recent-purchase-copy,
.recent-purchase-amount {
    min-width: 0;
}

.recent-purchase-copy strong,
.recent-purchase-copy small,
.recent-purchase-amount strong,
.recent-purchase-amount small {
    display: block;
}

.recent-purchase-copy strong {
    color: var(--heading);
    font-size: 10.5px;
}

.recent-purchase-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.35;
}

.recent-purchase-amount {
    text-align: right;
}

.recent-purchase-amount strong {
    color: var(--heading);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.dashboard-status-text {
    margin-top: 3px;
    font-size: 8px !important;
    font-weight: 850;
}

.dashboard-status-text.success { color: #168a62; }
.dashboard-status-text.warning { color: #b77915; }
.dashboard-status-text.danger { color: #c14848; }

.dashboard-empty-state {
    min-height: 180px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    color: var(--muted);
    text-align: center;
}

.dashboard-empty-state > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #637188;
    background: #f1f4f8;
}

.dashboard-empty-state strong {
    font-size: 10.5px;
}

.dashboard-activity-list .activity-row {
    min-height: 56px;
    padding-block: 9px;
}

@keyframes dashboardLineDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes dashboardDonutIn {
    from { opacity: .3; transform: scale(.88) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 1260px) {
    .dashboard-analytics-grid,
    .dashboard-command-grid,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    .inventory-health-layout {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .dashboard-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .procurement-chart {
        height: 218px;
    }
}

@media (max-width: 620px) {
    .dashboard-analytics-card,
    .dashboard-command-card,
    .dashboard-data-card {
        padding: 16px;
        border-radius: 17px;
    }

    .dashboard-card-head {
        gap: 10px;
        margin-bottom: 15px;
    }

    .dashboard-card-head p {
        font-size: 10px;
    }

    .dashboard-period-chip {
        font-size: 8.5px;
    }

    .chart-summary-row {
        gap: 14px;
    }

    .procurement-chart {
        height: 195px;
        margin-inline: -5px;
        width: calc(100% + 10px);
    }

    .inventory-health-layout {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 14px;
        min-height: 145px;
    }

    .inventory-donut {
        width: 112px;
        height: 112px;
    }

    .inventory-donut::after {
        inset: 13px;
    }

    .inventory-donut-core strong {
        font-size: 22px;
    }

    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-action-card {
        min-height: 74px;
    }

    .inventory-value-row {
        grid-template-columns: 1fr;
    }

    .recent-purchase-row {
        grid-template-columns: 34px minmax(0, 1fr) 10px;
    }

    .recent-purchase-amount {
        grid-column: 2;
        text-align: left;
        margin-top: -5px;
    }

    .recent-purchase-row > b {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 430px) {
    .dashboard-card-head {
        flex-direction: column;
    }

    .dashboard-inline-link,
    .dashboard-period-chip {
        margin-top: 0;
    }

    .inventory-health-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .inventory-health-legend {
        width: 100%;
    }

    .chart-axis-value {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-ready .chart-series {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }

    .inventory-donut {
        animation: none !important;
    }

    .dashboard-analytics-card:hover,
    .dashboard-command-card:hover,
    .dashboard-data-card:hover,
    .dashboard-action-card:hover,
    .attention-row:hover,
    .recent-purchase-row:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   Phase 5 — Retail / POS / Customers
   ========================================================================== */

.pos-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 20%, rgba(75,226,208,.18), transparent 28%),
        linear-gradient(120deg, #10253d 0%, #123b54 58%, #087a78 100%);
    box-shadow: 0 14px 34px rgba(15, 35, 55, .12);
}

.pos-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(255,255,255,.025),
        0 0 0 70px rgba(255,255,255,.018);
    pointer-events: none;
}

.pos-hero > div:first-child {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.pos-hero .eyebrow {
    color: #6cf4e2;
}

.pos-hero h2 {
    margin: 5px 0 7px;
    color: #fff;
    font-size: clamp(24px, 2.4vw, 36px);
    letter-spacing: -.035em;
}

.pos-hero p {
    margin: 0;
    max-width: 660px;
    color: rgba(255,255,255,.76);
    font-size: 12.5px;
    line-height: 1.65;
}

.pos-hero-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.pos-hero-badge > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.pos-hero-badge span,
.pos-hero-badge strong,
.pos-hero-badge small {
    display: block;
}

.pos-hero-badge strong {
    font-size: 11px;
}

.pos-hero-badge small {
    margin-top: 2px;
    color: rgba(255,255,255,.68);
    font-size: 9px;
}

.pos-workspace {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(460px, 1.15fr);
    align-items: start;
    gap: 14px;
}

.pos-catalog-panel,
.pos-cart-panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.045);
}

.pos-catalog-panel {
    min-width: 0;
    padding: 16px;
}

.pos-cart-panel {
    position: sticky;
    top: 86px;
    overflow: hidden;
}

.pos-cart-panel form {
    padding: 16px;
}

.pos-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: 10px;
}

.pos-search-field,
.pos-scan-field {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid #dce5ed;
    border-radius: 13px;
    background: #f9fbfd;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.pos-search-field:focus-within,
.pos-scan-field:focus-within {
    border-color: rgba(20,184,166,.48);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20,184,166,.08);
}

.pos-search-field > svg,
.pos-scan-field > svg {
    width: 17px;
    height: 17px;
    color: #6f7d90;
    flex: 0 0 17px;
}

.pos-search-field input,
.pos-scan-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--heading);
    font: inherit;
    font-size: 12px;
}

.pos-category-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px -2px 0;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pos-category-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #dfe7ee;
    border-radius: 999px;
    background: #fff;
    color: #536174;
    font: inherit;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.pos-category-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(20,184,166,.38);
}

.pos-category-chip.active {
    border-color: rgba(20,184,166,.16);
    color: #08736b;
    background: #eafbf8;
}

.pos-catalog-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 17px 2px 11px;
}

.pos-catalog-head h3 {
    margin: 3px 0 0;
    font-size: 16px;
}

.pos-result-count {
    min-width: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: #08736b;
    background: #eafbf8;
    font-size: 10px;
    font-weight: 850;
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.pos-product-card {
    min-width: 0;
}

.pos-product-card[hidden] {
    display: none !important;
}

.pos-product-add {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px 10px;
    overflow: hidden;
    border: 1px solid #e0e7ee;
    border-radius: 15px;
    background: #fff;
    color: inherit;
    text-align: center;
    font: inherit;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.pos-product-add:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(20,184,166,.34);
    box-shadow: 0 12px 24px rgba(15,23,42,.075);
}

.pos-product-add:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.pos-product-media {
    position: absolute;
    width: 0;
    height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f7fafc, #eef3f7);
}

.pos-product-thumb {
    width: 60px; height: 60px;
    margin-bottom: 8px;
    border-radius: 50%; overflow: hidden;
    background: #f3f6f9;
    display: grid; place-items: center;
}
.pos-product-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.pos-product-thumb svg { width: 28px; height: 28px; color: #8a98aa; }

.pos-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-product-placeholder {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #8a98aa;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15,23,42,.05);
}

.pos-product-placeholder svg {
    width: 21px;
    height: 21px;
}

.pos-stock-badge {
    display: none;
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 900;
}

.pos-stock-badge.out {
    color: #a73434;
    background: #fff0f0;
}

.pos-product-copy,
.pos-product-foot {
    width: 100%;
    display: block;
    text-align: center;
}

.pos-product-copy {
    padding-top: 2px;
}

.pos-product-copy strong,
.pos-product-copy small,
.pos-product-foot strong,
.pos-product-foot small {
    display: block;
}

.pos-product-copy strong {
    color: var(--heading);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
}

.pos-product-copy small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.3;
    word-break: break-all;
}

.pos-product-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #edf1f5;
}

.pos-product-foot strong {
    color: #08786f;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-product-foot small {
    margin-top: 3px;
    color: #6b7889;
    font-size: 7.5px;
}

.pos-no-results {
    min-height: 260px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    color: var(--muted);
}

.pos-no-results[hidden] {
    display: none !important;
}

.pos-no-results svg {
    width: 30px;
    height: 30px;
}

.pos-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f5;
}

.pos-cart-head h3 {
    margin: 3px 0 2px;
    font-size: 18px;
}

.pos-cart-head small {
    color: var(--muted);
    font-size: 11px;
}

.pos-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    color: #b33e3e;
    background: #fff3f3;
    font: inherit;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
}

.pos-clear-btn svg {
    width: 13px;
    height: 13px;
}

.pos-cart-lines {
    max-height: 50vh;
    margin: 10px -4px 12px;
    padding: 0 4px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.pos-cart-empty {
    min-height: 120px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: #8794a5;
    text-align: center;
}

.pos-cart-empty > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f3f6f9;
}

.pos-cart-empty strong {
    font-size: 10px;
}

.pos-cart-row {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid #e4eaf0;
    border-radius: 13px;
    background: #fbfcfd;
    transition: border-color .16s ease, background .16s ease;
}

.pos-cart-row.has-stock-error {
    border-color: #efb5b5;
    background: #fff8f8;
}

.pos-cart-row-top,
.pos-cart-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pos-cart-row-identity {
    min-width: 0;
}

.pos-cart-row-identity strong,
.pos-cart-row-identity small {
    display: block;
}

.pos-cart-row-identity strong {
    overflow: hidden;
    color: var(--heading);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-cart-row-identity small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.pos-cart-remove {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border: 0;
    border-radius: 8px;
    color: #b94343;
    background: #fff0f0;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s ease;
}
.pos-cart-remove:hover { background: #ffe0e0; }

.pos-cart-controls {
    display: grid;
    grid-template-columns: minmax(65px, .8fr) auto minmax(65px, .8fr);
    gap: 8px;
    margin-top: 10px;
}

.pos-mini-field {
    min-width: 0;
}

.pos-mini-field > span {
    display: block;
    margin-bottom: 4px;
    color: #5a6b7e;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.pos-mini-field input,
.pos-mini-field select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 5px 8px;
    border: 1px solid #dce4ec;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: var(--heading);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.pos-mini-field input:focus,
.pos-mini-field select:focus {
    border-color: rgba(20,184,166,.48);
    box-shadow: 0 0 0 2px rgba(20,184,166,.07);
}

.pos-qty-controls {
    display: flex; align-items: center; gap: 0;
    border: 1px solid #dce4ec; border-radius: 9px; overflow: hidden;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pos-qty-controls input {
    width: 52px; min-width: 0; height: 38px;
    padding: 4px 2px; border: 0; border-left: 1px solid #e8edf2; border-right: 1px solid #e8edf2;
    outline: 0; background: #fff; color: var(--heading); font: inherit; font-size: 15px;
    font-weight: 800; text-align: center;
}
.pos-qty-controls input:focus { background: #f0faf9; }
.pos-qty-btn {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    border: 0; background: #f4f7fa;
    color: #3a4d5e; font-size: 18px; font-weight: 700;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pos-qty-btn:hover { background: #e8f5f3; color: #08786f; }
.pos-qty-minus:active { background: #fde8e8; color: #b33e3e; }
.pos-qty-plus:active { background: #d5f5f1; color: #06665e; }

.pos-cart-row-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e8edf2;
}

.pos-cart-row-foot small {
    color: #7a8798;
    font-size: 10px;
}

.pos-cart-row-foot strong {
    margin-left: auto;
    color: #08786f;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.pos-line-warning {
    color: #c74444 !important;
    font-weight: 800;
}

.pos-customer-block {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid #edf1f5;
}
.pos-customer-block > .field { min-width: 0; margin-bottom: 0 !important; }
.pos-customer-block > .field > span:first-child { display: none; }
.pos-customer-block > .pos-inline-action { align-self: end; white-space: nowrap; }

.pos-inline-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(20,184,166,.2);
    border-radius: 10px;
    color: #08776e;
    background: #ecfbf9;
    text-decoration: none;
    font-size: 10px;
    font-weight: 850;
}

.pos-inline-action svg {
    width: 13px;
    height: 13px;
}

.pos-adjustment-grid,
.pos-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.pos-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pos-payment-grid .full {
    grid-column: 1 / -1;
}

.pos-total-card {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid #e4eaf0;
    border-radius: 13px;
    background: #f8fafc;
}

.pos-total-card > div,
.pos-payment-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.pos-total-card span,
.pos-payment-summary span {
    color: #6f7c8e;
    font-size: 12px;
}

.pos-total-card strong,
.pos-payment-summary strong {
    color: var(--heading);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pos-total-card .grand {
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px dashed #d8e1e9;
}

.pos-total-card .grand span {
    color: var(--heading);
    font-weight: 850;
}

.pos-total-card .grand strong {
    color: #08786f;
    font-size: 22px;
}

.pos-payment-summary {
    margin: 9px 0;
    padding: 9px 11px;
    border-radius: 11px;
    color: #885d0c;
    background: #fff8e8;
}

.pos-payment-summary small {
    display: block;
    margin-top: 2px;
    color: #997530;
    font-size: 7.5px;
}

.pos-checkout-button {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding: 10px 13px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #13b9a7, #07887e);
    box-shadow: 0 10px 24px rgba(12,151,138,.2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.pos-checkout-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(12,151,138,.26);
}

.pos-checkout-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.pos-checkout-button > span:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
}

.pos-checkout-button svg {
    width: 17px;
    height: 17px;
}

.pos-checkout-button small,
.pos-checkout-button strong {
    display: block;
}

.pos-checkout-button small {
    color: rgba(255,255,255,.72);
    font-size: 7.5px;
}

.pos-checkout-button strong {
    margin-top: 2px;
    font-size: 10.5px;
}

.pos-checkout-button > b {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.sale-editor-layout,
.sale-return-layout {
    align-items: start;
}

.sale-line-row {
    grid-template-columns: 34px minmax(230px, 1.55fr) minmax(105px, .68fr) minmax(105px, .68fr) minmax(115px, .72fr) minmax(105px, .65fr) 34px;
}

.sale-summary-card {
    top: 86px;
}

.return-item-list {
    display: grid;
    gap: 9px;
}

.return-item-card {
    padding: 12px;
    border: 1px solid #e1e8ee;
    border-radius: 14px;
    background: #fbfcfd;
    transition: border-color .16s ease, background .16s ease;
}

.return-item-card.has-return-error {
    border-color: #efb5b5;
    background: #fff8f8;
}

.return-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1f5;
}

.return-item-index {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    border-radius: 9px;
    color: #08766e;
    background: #e9faf7;
    font-size: 9px;
    font-weight: 900;
}

.return-item-info strong,
.return-item-info small {
    display: block;
}

.return-item-info strong {
    color: var(--heading);
    font-size: 11px;
}

.return-item-info small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8.5px;
}

.return-quantity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, .7fr)) minmax(130px, .8fr);
    align-items: end;
    gap: 9px;
    margin-top: 10px;
}

.return-line-value {
    min-height: 39px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f0f6f8;
}

.return-line-value span {
    color: var(--muted);
    font-size: 7.5px;
}

.return-line-value strong {
    margin-top: 2px;
    color: #08786f;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.receipt-payment-list {
    display: grid;
    gap: 7px;
}

.receipt-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #e6ebf0;
    border-radius: 10px;
    background: #fafcfd;
}

.receipt-payment-row strong {
    font-size: 9.5px;
}

.receipt-payment-row small {
    color: var(--muted);
    font-size: 8px;
}

.customer-balance-due {
    color: #c44b42 !important;
}

.customer-balance-credit {
    color: #12805f !important;
}

@media (max-width: 1380px) {
    .pos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-workspace {
        grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr);
    }
}

@media (max-width: 1120px) {
    .pos-workspace {
        grid-template-columns: 1fr;
    }

    .pos-cart-panel {
        position: relative;
        top: auto;
    }

    .pos-cart-lines {
        max-height: 420px;
    }

    .pos-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sale-line-row {
        grid-template-columns: 34px repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .pos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .pos-hero-badge {
        width: 100%;
    }

    .sale-line-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .sale-line-row .purchase-product-field,
    .sale-line-row .purchase-line-total {
        grid-column: 2;
    }

    .return-quantity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .return-line-value {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .pos-hero {
        padding: 18px;
        border-radius: 18px;
    }

    .pos-search-bar {
        grid-template-columns: 1fr;
    }

    .pos-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-product-add {
        min-height: 190px;
    }

    .pos-product-media {
        height: 92px;
    }

    .pos-catalog-panel,
    .pos-cart-panel {
        border-radius: 16px;
    }

    .pos-cart-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-customer-block {
        grid-template-columns: 1fr;
    }

    .pos-inline-action {
        width: 100%;
    }

    .pos-adjustment-grid,
    .pos-payment-grid {
        grid-template-columns: 1fr;
    }

    .return-quantity-grid {
        grid-template-columns: 1fr;
    }

    .return-line-value {
        grid-column: auto;
    }
}

@media (max-width: 410px) {
    .pos-product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .pos-catalog-panel {
        padding: 11px;
    }

    .pos-product-copy,
    .pos-product-foot {
        padding-inline: 9px;
    }

    .pos-cart-panel form {
        padding: 12px;
    }
}

@media print {
    .pos-hero,
    .pos-workspace,
    .sale-editor-layout,
    .sale-return-layout {
        box-shadow: none !important;
    }
}



/* =====================================================================
   v0.9.1 — POS Pro / Sales UX
   ===================================================================== */

.pos-search-bar-pro {
    position: relative;
    z-index: 12;
}

.pos-live-search {
    position: relative;
    min-width: 0;
}

.pos-search-field kbd,
.pos-scan-field kbd {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid #dce5ed;
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #728094;
    background: #fff;
    font: 700 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pos-suggestion-panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(460px, 58vh);
    overflow: auto;
    padding: 6px;
    border: 1px solid #dce5ed;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 48px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
}

.pos-suggestion-panel[hidden] {
    display: none !important;
}

.pos-suggestion-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .14s ease, transform .14s ease;
}

.pos-suggestion-item:hover,
.pos-suggestion-item:focus-visible {
    outline: 0;
    background: #eefbf9;
    transform: translateX(2px);
}

.pos-suggestion-identity {
    min-width: 0;
}

.pos-suggestion-identity strong,
.pos-suggestion-identity small,
.pos-suggestion-meta strong,
.pos-suggestion-meta small {
    display: block;
}

.pos-suggestion-identity strong {
    overflow: hidden;
    color: var(--heading);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-suggestion-identity small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-suggestion-meta {
    text-align: right;
}

.pos-suggestion-meta strong {
    color: #08786f;
    font-size: 10px;
    white-space: nowrap;
}

.pos-suggestion-meta small {
    margin-top: 2px;
    color: #768396;
    font-size: 7.5px;
    white-space: nowrap;
}

.pos-suggestion-add {
    padding: 5px 8px;
    border-radius: 8px;
    color: #08776e;
    background: #e4f9f6;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.pos-suggestion-empty {
    padding: 14px;
    color: var(--muted);
    text-align: center;
    font-size: 9px;
}

.pos-workspace {
    grid-template-columns: minmax(0, 1.25fr) minmax(470px, .88fr);
}

.pos-cart-panel {
    top: 78px;
}

.pos-cart-panel form {
    padding: 14px;
}

.pos-cart-table-head {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(200px,1.1fr) minmax(90px,.55fr) minmax(95px,.6fr) 34px;
    gap: 8px;
    margin: 10px 0 5px;
    padding: 8px 10px;
    color: #fff;
    background: #14b8a6;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pos-cart-lines-pro {
    max-height: clamp(280px, 42vh, 500px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-width: thin;
}

.pos-toast-warning {
    position: fixed;
    top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px);
    z-index: 9999;
    padding: 12px 22px;
    border-radius: 12px;
    background: #d97706; color: #fff;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
}
.pos-toast-warning.pos-toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1; pointer-events: auto;
}

@keyframes posRowFlash {
    0% { background: #fef3c7; }
    100% { background: #fff; }
}
.pos-cart-row.pos-row-flash {
    animation: posRowFlash 1.5s ease-out;
}

.pos-cart-row {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(200px,1.1fr) minmax(90px,.55fr) minmax(95px,.6fr) 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #edf1f5;
    background: #fff;
    transition: border-color .15s ease;
}
.pos-cart-row:hover { border-color: #d0dae4; }

.pos-cart-row-top {
    min-width: 0;
    display: block;
    grid-column: 1;
}

.pos-cart-row-identity strong {
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.pos-cart-row-identity small {
    font-size: 10px;
    white-space: normal;
    word-break: break-all;
}

.pos-cart-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    grid-column: 2;
}

.pos-cart-controls .pos-unit-field { flex: 0 0 auto; }
.pos-cart-controls .pos-qty-field { flex: 1 1 auto; }

.pos-price-field {
    grid-column: 3;
    margin: 0;
}

.pos-mini-field > span {
    display: none;
}

.pos-mini-field input,
.pos-mini-field select {
    height: 38px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 400;
}

.pos-qty-controls input {
    width: 48px; height: 38px;
    font-size: 14px; font-weight: 800;
}
.pos-qty-btn {
    width: 36px; height: 38px; flex: 0 0 36px;
    font-size: 18px;
}

.pos-cart-row-foot {
    display: contents;
}

.pos-cart-row-foot small:first-child,
.pos-line-warning {
    display: none;
}

.pos-cart-row-foot strong {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    grid-column: 4;
}

.pos-cart-remove {
    grid-column: 5;
    grid-row: 1;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: 18px;
}

.pos-customer-block {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 8px;
    margin-top: 10px;
}
.pos-customer-block > .field > span { display: none; }
.pos-customer-block > .pos-inline-action { height: 38px; }

.pos-adjustment-grid {
    margin-top: 8px;
}

.pos-total-card {
    margin: 8px 0;
}

.pos-note-field textarea {
    min-height: 46px;
    resize: vertical;
}

.pos-due-preview {
    margin-bottom: 8px;
}

.pos-modal-open {
    overflow: hidden;
}

.pos-payment-modal {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.pos-payment-modal[hidden] {
    display: none !important;
}

.pos-payment-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(8, 18, 33, .62);
    backdrop-filter: blur(4px);
    cursor: default;
}

.pos-payment-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(2,8,23,.32);
    animation: posModalEnter .18s ease-out both;
}

@keyframes posModalEnter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pos-payment-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid #e8edf2;
}

.pos-payment-dialog-head h3 {
    margin: 3px 0 4px;
    font-size: 21px;
}

.pos-payment-dialog-head p {
    margin: 0;
    color: var(--muted);
    font-size: 9.5px;
}

.pos-modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid #e2e8ef;
    border-radius: 10px;
    color: #647184;
    background: #f8fafc;
    font-size: 20px;
    cursor: pointer;
}

.pos-payment-kpis {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    padding: 14px 20px 0;
}

.pos-payment-kpis > div {
    padding: 12px 13px;
    border: 1px solid #e1e8ee;
    border-radius: 13px;
    background: #f8fafc;
}

.pos-payment-kpis span,
.pos-payment-kpis strong {
    display: block;
}

.pos-payment-kpis span {
    color: #718094;
    font-size: 8px;
    font-weight: 750;
}

.pos-payment-kpis strong {
    margin-top: 4px;
    color: var(--heading);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.pos-payment-kpis > div:last-child strong {
    color: #b46b12;
}

.pos-payment-grid-modal {
    padding: 14px 20px 4px;
}

.input-with-action {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
}

.input-with-action input {
    border-radius: 10px 0 0 10px !important;
}

.input-with-action button {
    border: 1px solid #cfdbe4;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    padding: 0 12px;
    color: #08776e;
    background: #edfafa;
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}

.pos-paid-field small {
    display: block;
    margin-top: 4px;
    color: #7a8798;
    font-size: 8px;
}

.pos-payment-customer-note {
    margin: 6px 20px 12px;
    padding: 9px 11px;
    border: 1px solid #f3d7a2;
    border-radius: 10px;
    color: #8a631d;
    background: #fff8e9;
    font-size: 8.5px;
    font-weight: 700;
}

.pos-payment-customer-note[hidden] {
    display: none !important;
}

.pos-payment-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 20px;
    border-top: 1px solid #edf1f4;
}

.pos-confirm-sale {
    min-width: 220px;
    justify-content: center;
}

.pos-confirm-sale strong {
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.25);
}

/* Compact professional sales filter toolbar */
.sales-filter-panel-pro {
    padding: 10px 12px;
}

.sales-filter-grid-pro {
    display: grid;
    grid-template-columns: minmax(180px,1.25fr) minmax(170px,1fr) minmax(135px,.7fr) minmax(135px,.72fr) minmax(135px,.72fr) auto;
    gap: 8px;
    align-items: end;
}

.sales-filter-grid-pro .field > span {
    margin-bottom: 4px;
    font-size: 7.5px;
}

.sales-filter-grid-pro .field input,
.sales-filter-grid-pro .field select {
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 9px;
}

.sales-filter-grid-pro .filter-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.sales-filter-grid-pro .btn {
    min-height: 36px;
    padding: 8px 11px;
}

/* Sale detail: payment history is operational, not read-only decoration */
.receipt-payment-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
}

.receipt-payment-main {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.receipt-payment-delete button {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid #f0caca;
    border-radius: 8px;
    color: #b43f3f;
    background: #fff3f3;
    cursor: pointer;
}

.receipt-payment-delete svg {
    width: 13px;
    height: 13px;
}

/* Invoice / sale view polish */
.sale-receipt-card {
    max-width: 1060px;
    margin-inline: auto;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(15,23,42,.07);
}

.sale-receipt-card .receipt-head {
    padding-bottom: 16px;
    border-bottom: 2px solid #12263c;
}

.sale-receipt-card .receipt-logo {
    box-shadow: 0 8px 22px rgba(13,148,136,.18);
}

.sale-receipt-card .receipt-meta {
    border-radius: 12px;
}

.sale-receipt-card .receipt-items-table th {
    background: #12263c;
    color: #fff;
}

.sale-receipt-card .receipt-items-table td {
    padding-top: 11px;
    padding-bottom: 11px;
}

.sale-receipt-card .receipt-totals .total {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid #dfe6ed;
}

.sale-receipt-card .receipt-totals .total dd {
    color: #08786f;
    font-size: 17px;
}

@media (max-width: 1280px) {
    .pos-workspace {
        grid-template-columns: minmax(0,1fr) minmax(420px,.82fr);
    }
    .pos-product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .sales-filter-grid-pro {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .sales-filter-grid-pro .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 980px) {
    .pos-workspace {
        display: block;
    }
    .pos-cart-panel {
        position: static;
        margin-top: 14px;
    }
    .pos-cart-lines-pro {
        max-height: 390px;
    }
    .pos-search-bar-pro {
        grid-template-columns: 1fr;
    }
    .pos-product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .pos-product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .pos-product-add {
        min-height: 170px;
    }
    .pos-cart-table-head {
        display: none;
    }
    .pos-cart-row {
        display: grid;
        grid-template-columns: minmax(0,1fr) 30px;
        gap: 7px;
        padding: 9px;
    }
    .pos-cart-row-top {
        grid-column: 1;
    }
    .pos-cart-remove {
        grid-column: 2;
    }
    .pos-cart-controls {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
    .pos-cart-row-foot {
        display: flex;
        grid-column: 1 / -1;
    }
    .pos-cart-row-foot small:first-child {
        display: block;
    }
    .pos-cart-row-foot strong {
        margin-left: auto;
    }
    .pos-payment-kpis {
        grid-template-columns: 1fr;
    }
    .pos-payment-grid-modal {
        grid-template-columns: 1fr;
    }
    .pos-payment-dialog-foot {
        display: grid;
        grid-template-columns: 1fr;
    }
    .pos-confirm-sale {
        min-width: 0;
    }
    .sales-filter-grid-pro {
        grid-template-columns: 1fr;
    }
    .sales-filter-grid-pro .filter-actions {
        grid-column: auto;
        justify-content: stretch;
    }
    .sales-filter-grid-pro .filter-actions > * {
        flex: 1;
    }
}

@media print {
    .sale-receipt-card {
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .sale-receipt-card .receipt-items-table th {
        color: #000 !important;
        background: #eee !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pos-payment-dialog {
        animation: none;
    }
}


/* =====================================================================
   v0.9.2 — sales spacing, edit workflow, view/payment controls, POS split
   ===================================================================== */

.sales-metric-grid-pro {
    margin-bottom: 14px !important;
}

.sales-filter-panel-pro {
    margin-top: 12px !important;
    padding: 14px 14px !important;
    border-radius: 20px !important;
}

.sales-filter-grid-pro {
    gap: 10px !important;
}

.sales-filter-grid-pro .field {
    min-width: 0;
}

.sales-filter-grid-pro .field input,
.sales-filter-grid-pro .field select {
    background: #fbfdfe;
}

.sales-filter-grid-pro .filter-actions {
    gap: 8px;
    align-self: end;
}

.table-panel {
    margin-top: 14px;
}

.sales-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sales-show-button {
    min-height: 38px;
    padding-inline: 12px;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(2, 132, 199, .09);
}

.sales-show-button span:last-child {
    font-weight: 800;
}

.row-action-menu .row-action-trigger {
    min-height: 38px;
    border-radius: 11px;
}

/* Sale detail management */
.receipt-mini-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mini-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid #cfe5e1;
    border-radius: 10px;
    color: #08786f;
    background: #eefaf8;
    font-size: 8.5px;
    font-weight: 800;
    text-decoration: none;
}

.purchase-action-btn.accent {
    border-color: rgba(13, 148, 136, .22);
    color: #fff;
    background: linear-gradient(135deg,#10b981,#0f766e);
    box-shadow: 0 10px 24px rgba(16,185,129,.24);
}

/* Sales update page */
.sale-edit-topbar {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(290px,.9fr) auto;
    align-items: start;
    gap: 18px;
    margin-bottom: 14px;
    padding: 18px 20px;
}

.sale-edit-topbar h3 {
    margin: 4px 0 6px;
    font-size: 20px;
}

.sale-edit-topbar p {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.7;
}

.sale-edit-topbar-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.sale-edit-topbar-metrics > div {
    padding: 10px 12px;
    border: 1px solid #dfe8ee;
    border-radius: 12px;
    background: #f8fafc;
}

.sale-edit-topbar-metrics span,
.sale-edit-topbar-metrics strong {
    display: block;
}

.sale-edit-topbar-metrics span {
    color: #738196;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sale-edit-topbar-metrics strong {
    margin-top: 3px;
    color: var(--heading);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sale-edit-topbar-metrics .warning {
    background: #fff8eb;
    border-color: #f2ddb0;
}

.sale-edit-topbar-metrics .warning strong {
    color: #a16207;
}

.sale-edit-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.sale-editor-layout-v2 {
    grid-template-columns: minmax(0,1fr) minmax(315px,.35fr) !important;
    gap: 16px !important;
    align-items: start;
}

.sale-lines-panel {
    overflow: hidden;
}

.sale-edit-product-search {
    margin: 4px 0 12px;
    border-radius: 14px;
    background: #fbfcfe;
}

.sale-edit-lines-pro {
    max-height: min(64vh, 860px);
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
}

.sale-edit-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,253,.96));
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.sale-line-row {
    padding: 10px 12px !important;
    border-radius: 14px;
    background: #fbfdfe;
    box-shadow: 0 10px 26px rgba(15,23,42,.04);
}

.sale-line-row + .sale-line-row {
    margin-top: 10px;
}

.sale-line-row .field input,
.sale-line-row .field select {
    background: #fff;
}

.sale-editor-layout-v2 > aside {
    position: sticky;
    top: 84px;
}

.sale-editor-layout-v2 .procurement-summary-card {
    box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

/* POS: stronger split view with dedicated side cart */
.pos-workspace-pro-split {
    grid-template-columns: minmax(0,1.48fr) minmax(410px,.82fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.pos-catalog-panel-pro {
    min-height: calc(100vh - 210px);
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(15,23,42,.06);
}

.pos-cart-panel-pro {
    position: sticky !important;
    top: 78px !important;
    max-height: calc(100vh - 92px);
    border-radius: 22px;
    box-shadow: 0 20px 54px rgba(15,23,42,.10);
    overflow: hidden;
}

.pos-cart-panel-pro form {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 92px);
}

.pos-cart-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f6;
}

.pos-cart-lines-pro {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 6px;
}

.pos-total-card {
    margin-top: 10px;
}

.pos-checkout-button {
    margin-top: 8px;
    min-height: 62px;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(16,185,129,.18);
}

.pos-payment-modal .btn,
.pos-payment-modal button {
    font-weight: 800;
}

@media (max-width: 1380px) {
    .sale-edit-topbar {
        grid-template-columns: 1fr;
    }
    .sale-edit-topbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1280px) {
    .sales-filter-grid-pro {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
    .sales-filter-grid-pro .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .sale-editor-layout-v2 {
        grid-template-columns: 1fr !important;
    }
    .sale-editor-layout-v2 > aside {
        position: static;
    }
    .pos-workspace-pro-split {
        grid-template-columns: 1fr !important;
    }
    .pos-cart-panel-pro {
        position: static !important;
        max-height: none;
    }
    .pos-cart-panel-pro form {
        min-height: auto;
    }
}

@media (max-width: 780px) {
    .sales-filter-grid-pro {
        grid-template-columns: 1fr !important;
    }
    .sales-filter-grid-pro .filter-actions {
        justify-content: stretch;
    }
    .sales-filter-grid-pro .filter-actions > * {
        flex: 1 1 auto;
    }
    .sale-edit-topbar-metrics {
        grid-template-columns: 1fr;
    }
    .sale-edit-topbar-actions {
        width: 100%;
    }
    .sale-edit-topbar-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* =====================================================================
   v0.9.3 — unified list UI, minimal show/edit surfaces
   ===================================================================== */

/* Unified list filter theme */
.unified-filter-panel-pro {
    margin-top: 12px !important;
    padding: 16px 16px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,253,.98));
}

.unified-filter-grid-pro,
.return-filter-grid,
.customer-filter-grid,
.payment-filter-grid,
.purchase-filter-grid {
    display: grid;
    gap: 10px 12px;
    align-items: end;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.return-filter-grid .field,
.customer-filter-grid .field,
.payment-filter-grid .field,
.purchase-filter-grid .field,
.unified-filter-grid-pro .field {
    min-width: 0;
}

.return-filter-grid .field input,
.return-filter-grid .field select,
.customer-filter-grid .field input,
.customer-filter-grid .field select,
.payment-filter-grid .field input,
.payment-filter-grid .field select,
.purchase-filter-grid .field input,
.purchase-filter-grid .field select,
.unified-filter-grid-pro .field input,
.unified-filter-grid-pro .field select {
    min-height: 46px;
    border-radius: 14px;
    background: #fbfdfe;
}

.return-filter-grid .filter-actions,
.customer-filter-grid .filter-actions,
.payment-filter-grid .filter-actions,
.purchase-filter-grid .filter-actions,
.unified-filter-grid-pro .filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    align-self: end;
}

.return-filter-grid .filter-actions .btn,
.customer-filter-grid .filter-actions .btn,
.payment-filter-grid .filter-actions .btn,
.purchase-filter-grid .filter-actions .btn,
.unified-filter-grid-pro .filter-actions .btn {
    min-height: 46px;
    border-radius: 14px;
}

.product-list-panel,
.inventory-list-panel,
.table-panel {
    margin-top: 14px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05);
}

/* Sales action area */
.sales-row-actions-minimal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.table-inline-show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #d9e6ec;
    border-radius: 11px;
    background: #fff;
    color: #4b5563;
    text-decoration: none;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .01em;
    transition: all .18s ease;
}

.table-inline-show:hover {
    color: #0f766e;
    border-color: rgba(15, 118, 110, .25);
    background: #effcf9;
}

.sales-row-actions-minimal .row-action-trigger {
    min-width: 38px;
    min-height: 36px;
    border-radius: 11px;
}

.row-action-popover {
    min-width: 210px;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.row-action-item.danger {
    color: #b91c1c;
}

.row-action-item.danger:hover {
    background: #fff5f5;
}

/* Minimal sale edit summary bar */
.sale-edit-topbar {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.05) !important;
}

.sale-edit-topbar-copy .eyebrow,
.sale-edit-topbar-copy p {
    display: none !important;
}

.sale-edit-topbar-copy h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.25;
}

.sale-edit-topbar-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.sale-edit-topbar-metrics > div {
    padding: 9px 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.sale-edit-topbar-actions {
    justify-content: flex-end !important;
    align-items: center !important;
    align-self: start;
}

.sale-edit-topbar-actions .btn {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 11px;
}

.sale-editor-layout-v2 {
    gap: 14px !important;
}

.sale-editor-layout-v2 .procurement-summary-card,
.sale-editor-layout-v2 .panel {
    border-radius: 20px;
}

/* Minimal show page / sale detail */
.purchase-action-bar {
    padding: 10px 14px !important;
    gap: 12px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
}

.purchase-action-copy .eyebrow {
    display: none !important;
}

.purchase-action-copy strong {
    font-size: 15px !important;
}

.purchase-action-copy small {
    color: #6b7280;
}

.purchase-action-buttons {
    gap: 8px !important;
}

.purchase-action-btn {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    background: #fff !important;
    color: var(--heading) !important;
}

.purchase-action-btn.accent {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border-color: rgba(15,118,110,.18) !important;
}

.purchase-action-btn .purchase-action-icon {
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
}

.receipt-shell,
.receipt-print-shell {
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05);
    border-radius: 22px;
}

.receipt-mini-card {
    border-radius: 16px !important;
    box-shadow: none !important;
    background: #fcfeff !important;
}

.receipt-mini-card-head {
    margin-bottom: 6px !important;
}

.mini-inline-action {
    min-height: 30px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: #fff !important;
}

/* Purchase page uses same list theme */
.purchase-filter-grid.unified-filter-grid-pro {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 0.9fr auto;
}

@media (max-width: 1380px) {
    .unified-filter-grid-pro,
    .return-filter-grid,
    .customer-filter-grid,
    .payment-filter-grid,
    .purchase-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .return-filter-grid .filter-actions,
    .customer-filter-grid .filter-actions,
    .payment-filter-grid .filter-actions,
    .purchase-filter-grid .filter-actions,
    .unified-filter-grid-pro .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .sale-edit-topbar {
        grid-template-columns: 1fr !important;
    }
    .sale-edit-topbar-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 780px) {
    .unified-filter-grid-pro,
    .return-filter-grid,
    .customer-filter-grid,
    .payment-filter-grid,
    .purchase-filter-grid,
    .purchase-filter-grid.unified-filter-grid-pro {
        grid-template-columns: 1fr !important;
    }
    .return-filter-grid .filter-actions,
    .customer-filter-grid .filter-actions,
    .payment-filter-grid .filter-actions,
    .purchase-filter-grid .filter-actions,
    .unified-filter-grid-pro .filter-actions {
        justify-content: stretch;
        width: 100%;
    }
    .return-filter-grid .filter-actions > *,
    .customer-filter-grid .filter-actions > *,
    .payment-filter-grid .filter-actions > *,
    .purchase-filter-grid .filter-actions > *,
    .unified-filter-grid-pro .filter-actions > * {
        flex: 1 1 auto;
    }
    .sales-row-actions-minimal {
        justify-content: space-between;
    }
}


/* =====================================================================
   v0.9.4 — product-style list polish + professional sale show page
   ===================================================================== */

/* Product-like list UI across modules */
.list-filter-panel-pro,
.sales-filter-panel-pro.list-filter-panel-pro,
.unified-filter-panel-pro.list-filter-panel-pro,
.product-filter-panel.list-filter-panel-pro {
    padding: 18px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,253,.98));
}

.inventory-filter-grid.inventory-filter-grid-list,
.inventory-filter-grid.inventory-filter-grid-list.return-filter-grid,
.inventory-filter-grid.inventory-filter-grid-list.customer-filter-grid,
.inventory-filter-grid.inventory-filter-grid-list.payment-filter-grid,
.inventory-filter-grid.inventory-filter-grid-list.purchase-filter-grid,
.inventory-filter-grid.inventory-filter-grid-list.sales-filter-grid {
    grid-template-columns: minmax(220px,1.4fr) repeat(4, minmax(150px,.9fr)) auto;
    gap: 12px;
    align-items: end;
}

.inventory-filter-grid.inventory-filter-grid-list .field > span,
.inventory-filter-grid.inventory-filter-grid-list .filter-actions {
    margin-bottom: 4px;
}

.inventory-filter-grid.inventory-filter-grid-list .field input,
.inventory-filter-grid.inventory-filter-grid-list .field select {
    min-height: 46px !important;
    border-radius: 15px !important;
    background: #fbfdfe;
    border-color: #dbe5ec;
    font-size: 12px;
    padding: 12px 14px;
}

.inventory-filter-grid.inventory-filter-grid-list .filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-self: end;
}

.inventory-filter-grid.inventory-filter-grid-list .filter-actions .btn {
    min-height: 46px;
    border-radius: 14px;
    min-width: 82px;
}

.list-panel-pro,
.table-panel.product-list-panel,
.table-panel.list-panel-pro {
    margin-top: 16px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .05) !important;
    overflow: hidden;
}

.list-panel-pro > .panel-head,
.product-list-panel > .panel-head,
.table-panel > .panel-head.inventory-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 20px 14px;
}

.list-panel-pro > .panel-head h3,
.product-list-panel > .panel-head h3,
.table-panel > .panel-head.inventory-list-head h3 {
    margin: 3px 0 0;
    font-size: 15px;
}

.list-panel-pro > .panel-head p,
.product-list-panel > .panel-head p,
.table-panel > .panel-head.inventory-list-head p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.list-panel-pro .soft-count,
.product-list-panel .soft-count {
    flex: 0 0 auto;
}

.list-panel-pro .table-responsive,
.product-list-panel .table-responsive,
.table-panel.list-panel-pro .table-responsive {
    padding: 0 18px 18px;
}

.list-panel-pro .empty-state,
.product-list-panel .empty-state {
    margin: 0 20px 20px;
    border-radius: 18px;
    background: #fbfdfe;
}

.list-panel-pro .data-table,
.product-list-panel .data-table {
    border-radius: 18px;
    overflow: hidden;
}

.list-panel-pro .data-table thead th,
.product-list-panel .data-table thead th {
    background: #f7fafc;
    color: #6b7280;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.list-panel-pro .data-table tbody tr:hover,
.product-list-panel .data-table tbody tr:hover {
    background: #fbfeff;
}

.list-panel-pro .data-table td,
.product-list-panel .data-table td {
    vertical-align: middle;
}

.list-panel-pro .row-action-trigger,
.product-list-panel .row-action-trigger {
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
}

.list-panel-pro .table-inline-show {
    min-height: 36px;
    padding-inline: 12px;
    border-radius: 12px;
    font-size: 11px;
}

/* Fine tune specific grids */
.inventory-filter-grid.inventory-filter-grid-list.return-filter-grid {
    grid-template-columns: minmax(280px,1.6fr) repeat(2, minmax(170px,.9fr)) auto;
}
.inventory-filter-grid.inventory-filter-grid-list.customer-filter-grid {
    grid-template-columns: minmax(220px,1.4fr) minmax(180px,.9fr) minmax(180px,.9fr) auto;
}
.inventory-filter-grid.inventory-filter-grid-list.payment-filter-grid {
    grid-template-columns: minmax(220px,1.25fr) minmax(180px,.9fr) minmax(180px,.9fr) minmax(180px,.9fr) auto;
}
.inventory-filter-grid.inventory-filter-grid-list.purchase-filter-grid {
    grid-template-columns: minmax(220px,1.3fr) repeat(4, minmax(155px,.9fr)) auto;
}

/* Professional sale show page */
.sale-receipt-card-v2 {
    max-width: 1080px;
    margin-inline: auto;
    border-radius: 24px !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.07) !important;
}

.sale-receipt-card-v2 .receipt-head {
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.sale-view-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: 18px;
    align-items: start;
}

.sale-view-info-card,
.sale-view-summary-card {
    border: 1px solid #e5edf2;
    border-radius: 20px;
    padding: 18px;
    background: #fbfdff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.sale-view-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sale-view-card-head h4 {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--heading);
}

.sale-view-note-block {
    padding: 14px 14px 12px;
    border: 1px solid #e7eef4;
    border-radius: 16px;
    background: #fff;
}

.sale-view-note-block > span {
    display: block;
    color: #0f766e;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 8px;
}

.sale-view-note-block p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
    font-size: 12px;
}

.sale-view-subsection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #dbe5ec;
}

.sale-view-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sale-view-subsection-head span {
    font-weight: 700;
    color: var(--heading);
    font-size: 12px;
}

.sale-view-subsection-head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff8ff;
    color: #0369a1;
    font-size: 11px;
}

.payment-history-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e7eef4;
    border-radius: 16px;
    background: #fff;
}

.payment-history-item + .payment-history-item {
    margin-top: 10px;
}

.receipt-delete-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
    font-weight: 700;
    cursor: pointer;
}

.receipt-delete-text-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.receipt-delete-text-btn span:first-child {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.sale-view-summary-card .receipt-totals {
    display: grid;
    gap: 10px;
}

.sale-view-summary-card .receipt-totals > div {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e7eef4;
}

.sale-view-summary-card .receipt-totals > div.total {
    background: linear-gradient(135deg, #0f172a, #0f766e);
    color: #fff;
    border-color: transparent;
}

.sale-view-summary-card .receipt-totals > div.due {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.sale-view-summary-card .receipt-totals dt {
    color: #64748b;
    font-size: 12px;
    margin: 0;
}

.sale-view-summary-card .receipt-totals dd {
    margin: 0;
    font-weight: 800;
    color: var(--heading);
}

.sale-view-summary-card .receipt-totals > div.total dt,
.sale-view-summary-card .receipt-totals > div.total dd {
    color: #fff;
}

.receipt-insight-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 18px;
}

.receipt-insight-row > div {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #e5edf2;
    background: #fff;
}

.receipt-insight-row span {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-bottom: 6px;
}

.receipt-insight-row strong {
    display: block;
    font-size: 16px;
    color: var(--heading);
}

@media (max-width: 1280px) {
    .inventory-filter-grid.inventory-filter-grid-list,
    .inventory-filter-grid.inventory-filter-grid-list.sales-filter-grid,
    .inventory-filter-grid.inventory-filter-grid-list.purchase-filter-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .inventory-filter-grid.inventory-filter-grid-list .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 940px) {
    .sale-view-summary-layout,
    .receipt-insight-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .inventory-filter-grid.inventory-filter-grid-list,
    .inventory-filter-grid.inventory-filter-grid-list.return-filter-grid,
    .inventory-filter-grid.inventory-filter-grid-list.customer-filter-grid,
    .inventory-filter-grid.inventory-filter-grid-list.payment-filter-grid,
    .inventory-filter-grid.inventory-filter-grid-list.purchase-filter-grid,
    .inventory-filter-grid.inventory-filter-grid-list.sales-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-filter-grid.inventory-filter-grid-list .filter-actions {
        width: 100%;
        justify-content: stretch;
    }

    .inventory-filter-grid.inventory-filter-grid-list .filter-actions > * {
        flex: 1 1 auto;
    }

    .list-panel-pro > .panel-head,
    .product-list-panel > .panel-head,
    .table-panel > .panel-head.inventory-list-head {
        flex-direction: column;
        align-items: stretch;
    }

    .payment-history-item {
        grid-template-columns: 1fr;
    }

    .receipt-delete-text-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================================
   v0.9.5 — action placement, live due sync, sale summary refinement
   ===================================================================== */

/* Keep action menus visually anchored to the trigger. JS now places them
   exactly 4px away; these rules make the floating panel compact and calm. */
.row-action-popover[data-floating-row-action="true"] {
    width: min(248px, calc(100vw - 20px));
    padding: 6px;
    border-radius: 13px;
    box-shadow: 0 18px 46px rgba(15,23,42,.14), 0 3px 10px rgba(15,23,42,.06);
}

.row-action-popover[data-placement="top"] {
    transform-origin: bottom right;
}

.row-action-popover[data-placement="bottom"] {
    transform-origin: top right;
}

.row-action-popover .row-action-item {
    min-height: 38px;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 11px;
}

/* Sales edit summary — make every amount read on one line with strong hierarchy. */
.sale-summary-card {
    padding: 20px !important;
    border-radius: 22px !important;
    border: 1px solid #e4ebf1 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.07), transparent 34%),
        #fff !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.075) !important;
}

.sale-summary-card > .eyebrow {
    display: block;
    margin-bottom: 7px;
}

.sale-summary-card > h3 {
    margin: 0 0 16px !important;
    color: var(--heading);
    font-size: 17px !important;
    letter-spacing: -.02em;
}

.sale-summary-card dl {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.sale-summary-card dl > div {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e8eef3;
    border-radius: 13px;
    background: #fbfdfe;
}

.sale-summary-card dl dt {
    margin: 0 !important;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.sale-summary-card dl dd {
    margin: 0 !important;
    color: #243247;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sale-summary-card dl > div.total {
    min-height: 54px;
    border-color: transparent;
    background: linear-gradient(135deg, #12263c 0%, #0f766e 100%);
}

.sale-summary-card dl > div.total dt,
.sale-summary-card dl > div.total dd {
    color: #fff !important;
}

.sale-summary-card dl > div.total dd {
    font-size: 16px;
}

.sale-summary-card dl > div.due {
    border-color: #fde3b0;
    background: #fffaf0;
}

.sale-summary-card dl > div.due dt {
    color: #9a6700;
}

.sale-summary-card dl > div.due dd {
    color: #b45309;
    font-size: 14px;
}

.sale-summary-card .procurement-submit-button {
    min-height: 50px !important;
    border-radius: 14px !important;
    margin-top: 4px;
}

/* Sale show: payment history action should be obvious without looking destructive. */
.payment-history-item {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.payment-history-item .receipt-payment-main {
    padding: 2px 0;
}

.payment-history-item .receipt-payment-main small {
    color: #667085;
    font-size: 10px;
}

.payment-history-item .receipt-payment-main strong {
    color: #243247;
    font-size: 12px;
    white-space: nowrap;
}

.receipt-payment-delete {
    margin: 0;
}

.receipt-delete-text-btn {
    min-height: 34px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    border: 1px solid #f2b8b5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #b42318 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.receipt-delete-text-btn:hover {
    border-color: #e98984 !important;
    background: #fff7f6 !important;
}

.receipt-delete-text-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Make the show-page invoice summary tighter and more executive-looking. */
.sale-view-summary-card {
    padding: 18px !important;
    background: #fff !important;
}

.sale-view-summary-card .sale-view-card-head {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f5;
}

.sale-view-summary-card .receipt-totals {
    gap: 7px !important;
}

.sale-view-summary-card .receipt-totals > div {
    min-height: 42px;
    padding: 9px 11px !important;
    border-radius: 12px !important;
}

.sale-view-summary-card .receipt-totals > div.total {
    min-height: 52px;
}

.sale-view-summary-card .receipt-totals > div.total dd {
    font-size: 16px;
}

@media (max-width: 1280px) {
    .sale-summary-card {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .sale-summary-card dl > div {
        grid-template-columns: 1fr auto;
    }

    .receipt-delete-text-btn {
        width: auto !important;
    }
}


/* =====================================================================
   v0.9.6 — sales actions, edit summary v3, invoice workflow
   ===================================================================== */

/* Sales actions now mirror the Product list: one compact 3-dot control
   centered directly under the Actions column. */
.sales-actions-cell {
    text-align: center !important;
    width: 74px;
    white-space: nowrap;
}

.sales-actions-cell .sales-action-menu {
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
}

.sales-actions-cell .row-action-trigger {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 12px;
}

/* The floating menu should feel physically attached to the trigger. */
.row-action-popover[data-floating-row-action="true"] {
    width: min(248px, calc(100vw - 20px));
    max-width: 248px;
}

/* Edit Sale — deliberately structural, not a dt/dd skin. */
.sale-summary-card-v3 {
    padding: 18px !important;
    border: 1px solid #e1e8ee !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.07), transparent 35%),
        #fff !important;
    box-shadow: 0 18px 48px rgba(15,23,42,.075) !important;
    overflow: hidden;
}

.sale-summary-head-v3 {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.sale-summary-head-v3 .eyebrow {
    display:block;
    margin:0 0 5px;
}

.sale-summary-head-v3 h3 {
    margin:0 !important;
    color:var(--heading);
    font-size:17px !important;
    line-height:1.2;
    letter-spacing:-.02em;
}

.sale-summary-invoice-pill {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 9px;
    border:1px solid #dfe8ee;
    border-radius:999px;
    background:#f8fafc;
    color:#64748b;
    font-size:9px;
    font-weight:850;
    letter-spacing:.02em;
}

.sale-summary-sheet-v3 {
    padding:5px;
    border:1px solid #e5ebf0;
    border-radius:16px;
    background:#f8fafc;
}

.sale-summary-row-v3 {
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:8px 10px;
    border-radius:11px;
}

.sale-summary-row-v3 + .sale-summary-row-v3 {
    margin-top:2px;
}

.sale-summary-row-v3 > span {
    color:#667085;
    font-size:10.5px;
    font-weight:650;
    line-height:1.25;
}

.sale-summary-row-v3 > strong {
    color:#26364d;
    font-size:11.5px;
    font-weight:850;
    line-height:1.25;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.sale-summary-divider-v3 {
    height:1px;
    margin:6px 8px;
    background:#dfe6ec;
}

.sale-summary-row-v3.grand {
    min-height:52px;
    padding:10px 12px;
    background:linear-gradient(135deg,#15314b 0%,#0d7d74 100%);
    box-shadow:0 10px 24px rgba(15,118,110,.12);
}

.sale-summary-row-v3.grand > span,
.sale-summary-row-v3.grand > strong {
    color:#fff;
    font-weight:900;
}

.sale-summary-row-v3.grand > strong {
    font-size:15px;
}

.sale-summary-row-v3.paid {
    margin-top:6px;
    background:#effaf6;
}

.sale-summary-row-v3.paid > span {
    color:#427066;
}

.sale-summary-row-v3.paid > strong {
    color:#087a68;
}

.sale-summary-row-v3.due {
    background:#fff7eb;
}

.sale-summary-row-v3.due > span {
    color:#9a6700;
    font-weight:800;
}

.sale-summary-row-v3.due > strong {
    color:#b45309;
    font-size:13px;
    font-weight:900;
}

.sale-summary-help-v3 {
    margin:11px 2px 0;
    color:#7a8797;
    font-size:9.5px;
    line-height:1.55;
}

.sale-summary-save-v3 {
    margin-top:13px;
    min-height:50px !important;
    border-radius:14px !important;
    box-shadow:0 12px 26px rgba(15,143,131,.17) !important;
}

@media (max-width:720px) {
    .sale-summary-card-v3 {
        padding:14px !important;
    }

    .sale-summary-head-v3 {
        align-items:center;
    }

    .sale-summary-row-v3 {
        min-height:40px;
    }
}


/* =====================================================================
   v0.9.8 — professional server-side pagination + customer ledger summary
   ===================================================================== */

.list-pagination {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(160px, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #e3eaf0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
}

.list-pagination-summary {
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
}

.list-pagination-pages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.list-pagination-pages a,
.list-pagination-pages span {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
}

.list-pagination-pages .page-number,
.list-pagination-pages .page-nav {
    border: 1px solid #dce5ec;
    background: #fff;
    color: #475467;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.list-pagination-pages .page-number:hover,
.list-pagination-pages .page-nav:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, .24);
    background: #f0fdfa;
    color: #0f766e;
}

.list-pagination-pages .page-number.active {
    border-color: transparent;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
}

.list-pagination-pages .page-nav.disabled {
    pointer-events: none;
    opacity: .38;
}

.list-pagination-pages .page-ellipsis {
    min-width: 24px;
    color: #98a2b3;
}

.list-pagination-size {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.list-pagination-size > span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.list-pagination-size select {
    min-width: 76px;
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1px solid #dce5ec;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
}

/* The customer ledger is a commercial profile, not merely a transaction table. */
.ledger-commerce-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 12px;
}

.ledger-commerce-grid article {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #e4ebf1;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

.ledger-commerce-grid article > span,
.ledger-commerce-grid article > strong,
.ledger-commerce-grid article > small {
    display: block;
}

.ledger-commerce-grid article > span {
    color: #667085;
    font-size: 9.5px;
    font-weight: 750;
}

.ledger-commerce-grid article > strong {
    margin-top: 6px;
    color: #1f2a3d;
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ledger-commerce-grid article > small {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8.5px;
    line-height: 1.35;
}

.ledger-commerce-grid article.primary {
    border-color: rgba(15, 118, 110, .18);
    background: linear-gradient(145deg, #ecfdf8, #f7fffd);
}

.ledger-commerce-grid article.primary > span,
.ledger-commerce-grid article.primary > strong {
    color: #0f766e;
}

.ledger-commerce-grid article.warning {
    border-color: #f5d7a0;
    background: #fffaf0;
}

.ledger-commerce-grid article.warning > span,
.ledger-commerce-grid article.warning > strong {
    color: #a15c00;
}

.ledger-commerce-grid article.success {
    border-color: #bfe8d8;
    background: #f0fdf7;
}

.ledger-commerce-grid article.success > span,
.ledger-commerce-grid article.success > strong {
    color: #087a68;
}

.ledger-opening-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 10px 13px;
    border: 1px dashed #d6e0e7;
    border-radius: 13px;
    background: #fbfcfe;
}

.ledger-opening-strip span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.ledger-opening-strip strong {
    color: #344054;
    font-size: 11.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
    .ledger-commerce-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .list-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .list-pagination-summary,
    .list-pagination-size {
        justify-content: center;
        text-align: center;
    }

    .ledger-commerce-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .list-pagination {
        padding: 12px 10px;
        gap: 11px;
    }

    .list-pagination-pages {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .list-pagination-pages a,
    .list-pagination-pages span {
        min-width: 32px;
        height: 32px;
    }

    .ledger-commerce-grid {
        grid-template-columns: 1fr;
    }

    .ledger-commerce-grid article {
        padding: 13px 14px;
    }
}

@media print {
    .list-pagination {
        display: none !important;
    }

    .ledger-commerce-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .ledger-commerce-grid article {
        padding: 8px;
        box-shadow: none;
    }

    .ledger-commerce-grid article > strong {
        font-size: 11px;
    }

    .ledger-commerce-grid article > small {
        display: none;
    }

    .ledger-opening-strip {
        padding: 7px 9px;
    }
}


.roles-grid > .list-pagination {
    grid-column: 1 / -1;
    width: 100%;
}

@media (max-width: 560px) {
    .list-pagination-size {
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================================
   Phase 6 — Financial Core
   ===================================================================== */

.accounting-metrics {
    margin-top: 14px;
    margin-bottom: 14px;
}

.accounting-entry-panel,
.account-form-panel {
    margin-top: 14px;
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .055);
}

.account-default-check {
    align-self: end;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #dfe7ee;
    border-radius: 14px;
    background: #fbfdfe;
}

.account-default-check input {
    width: 17px;
    height: 17px;
}

.account-default-check span {
    color: #475467;
    font-size: 10.5px;
    font-weight: 750;
}

.positive-text {
    color: #07845f !important;
}

.negative-text {
    color: #b42318 !important;
}

.compact-reference-panel {
    margin-top: 14px;
    border-radius: 22px;
}

.compact-inline-form {
    padding: 0 18px 18px;
    align-items: end;
}

.account-ledger-panel .panel-head {
    align-items: center;
}

.cashbook-filter-grid {
    grid-template-columns: minmax(190px,1fr) minmax(190px,1fr) minmax(150px,.8fr) minmax(150px,.8fr) auto !important;
}

.dashboard-financial-strip {
    display: grid;
    grid-template-columns: minmax(210px,.8fr) minmax(0,2fr) auto;
    gap: 16px;
    align-items: center;
    margin: 14px 0 18px;
    padding: 15px 17px;
    border: 1px solid #dfe9ee;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.08), transparent 32%),
        linear-gradient(180deg,#fff,#fbfdfe);
    box-shadow: 0 14px 34px rgba(15,23,42,.045);
}

.dashboard-financial-copy {
    min-width: 0;
}

.dashboard-financial-copy > span,
.dashboard-financial-copy > strong {
    display: block;
}

.dashboard-financial-copy > strong {
    margin-top: 3px;
    color: var(--heading);
    font-size: 13px;
}

.dashboard-financial-values {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.dashboard-financial-values > div {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #e5ecf1;
    border-radius: 12px;
    background: #fff;
}

.dashboard-financial-values span,
.dashboard-financial-values strong {
    display: block;
}

.dashboard-financial-values span {
    color: #7b8798;
    font-size: 8.5px;
    font-weight: 750;
}

.dashboard-financial-values strong {
    margin-top: 4px;
    color: #26364d;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-financial-values .total {
    border-color: rgba(15,118,110,.16);
    background: #effcf8;
}

.dashboard-financial-values .total span,
.dashboard-financial-values .total strong {
    color: #0f766e;
}

.dashboard-financial-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #d9e6e4;
    border-radius: 11px;
    background: #fff;
    color: #0f766e;
    font-size: 9.5px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-financial-link:hover {
    background: #f0fdfa;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 1180px) {
    .dashboard-financial-strip {
        grid-template-columns: 1fr;
    }

    .dashboard-financial-values {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .dashboard-financial-link {
        justify-self: start;
    }

    .cashbook-filter-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }
}

@media (max-width: 780px) {
    .dashboard-financial-values {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .cashbook-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .account-default-check {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .dashboard-financial-values {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   Phase 6B — Daily Closing & Financial Reports
   ===================================================================== */

.report-range-filter {
    grid-template-columns: minmax(180px,.8fr) minmax(180px,.8fr) auto !important;
}

.pnl-metric-grid .metric-card small,
.closing-metrics .metric-card small {
    display: block;
    margin-top: 6px;
    color: #8290a3;
    font-size: 9px;
    font-weight: 700;
}

.pnl-net-profit-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.08), transparent 40%),
        #fff;
}

.report-two-column-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr);
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.report-statement-panel,
.report-cash-panel,
.closing-summary-panel,
.closing-cash-panel,
.closing-action-panel {
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(15,23,42,.055);
}

.financial-statement {
    border: 1px solid #e4ebf1;
    border-radius: 16px;
    overflow: hidden;
}

.statement-section-title {
    padding: 9px 12px;
    border-top: 1px solid #e7edf2;
    border-bottom: 1px solid #e7edf2;
    background: #f7f9fb;
    color: #667085;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.statement-section-title:first-child {
    border-top: 0;
}

.statement-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 42px;
    padding: 9px 12px;
    border-bottom: 1px solid #edf1f4;
    background: #fff;
}

.statement-row > span {
    color: #5f6c7e;
    font-size: 10.5px;
    font-weight: 650;
}

.statement-row > strong {
    color: #26364d;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.statement-row.deduction > strong {
    color: #a55b00;
}

.statement-row.total {
    background: #f8fafc;
}

.statement-row.total > span,
.statement-row.total > strong {
    color: #344054;
    font-weight: 900;
}

.statement-row.highlight {
    margin: 7px;
    border: 0;
    border-radius: 12px;
    background: #edfdf8;
}

.statement-row.highlight > span,
.statement-row.highlight > strong {
    color: #0f766e;
    font-weight: 900;
}

.statement-row.grand {
    min-height: 56px;
    border-bottom: 0;
    background: linear-gradient(135deg,#15314b,#0f766e);
}

.statement-row.grand > span,
.statement-row.grand > strong {
    color: #fff;
    font-weight: 900;
}

.statement-row.grand > strong {
    font-size: 15px;
}

.statement-row.grand.loss {
    background: linear-gradient(135deg,#4b1d1d,#a63a31);
}

.report-footnote {
    display: grid;
    gap: 4px;
    margin-top: 11px;
    padding: 11px 12px;
    border: 1px dashed #dce5ec;
    border-radius: 13px;
    background: #fbfcfe;
}

.report-footnote strong {
    color: #475467;
    font-size: 9.5px;
}

.report-footnote span {
    color: #7b8796;
    font-size: 9px;
    line-height: 1.5;
}

.cash-flow-stack {
    overflow: hidden;
    border: 1px solid #e5ebf0;
    border-radius: 15px;
    background: #fff;
}

.cash-flow-stack > div {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 43px;
    padding: 9px 12px;
    border-top: 1px solid #edf1f4;
}

.cash-flow-stack > div:first-child {
    border-top: 0;
}

.cash-flow-stack span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.cash-flow-stack strong {
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}

.cash-flow-stack .total {
    background: #f6fafb;
}

.cash-flow-stack .total span,
.cash-flow-stack .total strong {
    color: #344054;
    font-weight: 900;
}

.cash-flow-meta {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 10px;
}

.cash-flow-meta > div {
    padding: 9px 10px;
    border: 1px solid #e6ecf1;
    border-radius: 12px;
    background: #fbfcfd;
}

.cash-flow-meta span,
.cash-flow-meta strong {
    display: block;
}

.cash-flow-meta span {
    color: #8490a0;
    font-size: 8px;
    font-weight: 750;
}

.cash-flow-meta strong {
    margin-top: 4px;
    color: #344054;
    font-size: 9.5px;
    white-space: nowrap;
}

.funds-position-box {
    margin-top: 11px;
    padding: 13px;
    border-radius: 15px;
    background: linear-gradient(145deg,#142c43,#0e746c);
    color: #fff;
}

.funds-position-box > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 32px;
}

.funds-position-box span {
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 700;
}

.funds-position-box strong {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.funds-position-box .fund-split {
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.funds-position-box small {
    color: rgba(255,255,255,.72);
    font-size: 8.5px;
}

/* Daily closing */
.closing-date-form {
    display: flex;
    align-items: end;
    gap: 8px;
}

.closing-date-form .field {
    min-width: 180px;
    margin: 0;
}

.closing-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0;
    padding: 12px 15px;
    border: 1px solid #dfe7ed;
    border-radius: 16px;
    background: #fff;
}

.closing-status-bar > div > span,
.closing-status-bar > div > strong {
    display: block;
}

.closing-status-bar > div > span {
    color: #7b8796;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.closing-status-bar > div > strong {
    margin-top: 3px;
    color: #344054;
    font-size: 12px;
}

.closing-status-bar > small {
    color: #7b8796;
    font-size: 9px;
}

.closing-status-bar.closed {
    border-color: #bde6d8;
    background: #f1fcf8;
}

.closing-status-bar.closed strong {
    color: #087a68;
}

.closing-status-bar.stale {
    border-color: #f0d19a;
    background: #fff9ec;
}

.closing-status-bar.stale strong {
    color: #9a5b00;
}

.closing-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(340px,.78fr);
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.closing-summary-list {
    overflow: hidden;
    border: 1px solid #e4ebf0;
    border-radius: 15px;
}

.closing-summary-list > div {
    min-height: 41px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 8px 11px;
    border-top: 1px solid #edf1f4;
}

.closing-summary-list > div:first-child {
    border-top: 0;
}

.closing-summary-list span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.closing-summary-list strong {
    color: #344054;
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}

.closing-summary-list .total {
    background: #f0fcf8;
}

.closing-summary-list .total span,
.closing-summary-list .total strong {
    color: #0f766e;
}

.closing-summary-list .grand {
    min-height: 53px;
    background: linear-gradient(135deg,#143047,#0f766e);
}

.closing-summary-list .grand span,
.closing-summary-list .grand strong {
    color: #fff;
    font-weight: 900;
}

.closing-summary-list .grand strong {
    font-size: 14px;
}

.closing-summary-list .grand.loss {
    background: linear-gradient(135deg,#4b2020,#9f342c);
}

.closing-fund-hero {
    padding: 14px;
    border-radius: 15px;
    background: linear-gradient(145deg,#142c43,#0c7169);
    color: #fff;
}

.closing-fund-hero span,
.closing-fund-hero strong {
    display: block;
}

.closing-fund-hero span {
    color: rgba(255,255,255,.68);
    font-size: 9px;
}

.closing-fund-hero strong {
    margin-top: 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.025em;
}

.closing-account-split {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 9px;
}

.closing-account-split > div,
.closing-cash-flow > div {
    padding: 9px 10px;
    border: 1px solid #e5ebf0;
    border-radius: 12px;
    background: #fbfcfd;
}

.closing-account-split span,
.closing-account-split strong,
.closing-cash-flow span,
.closing-cash-flow strong {
    display: block;
}

.closing-account-split span,
.closing-cash-flow span {
    color: #7b8796;
    font-size: 8px;
    font-weight: 750;
}

.closing-account-split strong,
.closing-cash-flow strong {
    margin-top: 4px;
    color: #344054;
    font-size: 9.5px;
    font-weight: 900;
    white-space: nowrap;
}

.closing-cash-flow {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 9px;
}

.closing-action-panel {
    margin-top: 14px;
}

.closing-action-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: end;
}

.closing-action-form .field {
    margin: 0;
}

@media (max-width: 1120px) {
    .report-two-column-grid,
    .closing-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .report-range-filter {
        grid-template-columns: 1fr !important;
    }

    .cash-flow-meta,
    .closing-account-split {
        grid-template-columns: 1fr;
    }

    .closing-date-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .closing-date-form .field {
        width: 100%;
        min-width: 0;
    }

    .closing-status-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .closing-action-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .closing-cash-flow {
        grid-template-columns: 1fr;
    }

    .statement-row {
        gap: 10px;
    }

    .statement-row > span {
        font-size: 9.5px;
    }

    .statement-row > strong {
        font-size: 10px;
    }
}

@media print {
    .report-two-column-grid {
        grid-template-columns: 1fr 340px;
        gap: 8px;
    }

    .report-statement-panel,
    .report-cash-panel {
        box-shadow: none !important;
        break-inside: avoid;
    }
}


/* =====================================================================
   v1.1.1 — Daily Closing controls + universal summary printing
   ===================================================================== */

.topbar-print-summary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid #dce6ed;
    border-radius: 13px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.topbar-print-summary:hover {
    transform: translateY(-1px);
    border-color: rgba(15,118,110,.24);
    background: #f0fdfa;
    color: #0f766e;
}

.topbar-print-summary svg {
    width: 15px;
    height: 15px;
}

.print-summary-header {
    display: none;
}

.closing-control-panel {
    padding: 17px 18px;
    border-radius: 20px;
    border: 1px solid #e3eaf0;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.06), transparent 34%),
        #fff;
}

.closing-control-copy {
    display: grid;
    gap: 5px;
    margin-bottom: 13px;
}

.closing-control-copy > strong {
    max-width: 900px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.55;
}

.closing-action-form-pro {
    display: grid;
    grid-template-columns: minmax(260px,1fr) auto;
    gap: 12px;
    align-items: end;
}

.closing-note-field {
    margin: 0;
}

.closing-control-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.closing-control-actions .btn {
    min-height: 44px;
    border-radius: 12px;
}

@media (max-width: 900px) {
    .closing-action-form-pro {
        grid-template-columns: 1fr;
    }

    .closing-control-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .topbar-print-summary {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .topbar-print-label {
        display: none;
    }

    .closing-control-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .closing-control-actions .btn {
        width: 100%;
    }
}

@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    html,
    body {
        background: #fff !important;
    }

    body {
        color: #172033 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar,
    .topbar,
    .sidebar-backdrop,
    .app-footer,
    .no-print,
    .product-filter-panel,
    .list-filter-panel-pro,
    .list-pagination,
    .row-action-menu,
    .actions-col,
    .filter-actions,
    a.btn,
    button {
        display: none !important;
    }

    .app-shell,
    .main,
    .content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .print-summary-header {
        display: grid !important;
        grid-template-columns: minmax(170px,.8fr) minmax(0,1.5fr) auto;
        gap: 18px;
        align-items: end;
        margin: 0 0 14px;
        padding: 0 0 12px;
        border-bottom: 2px solid #163248;
        break-inside: avoid;
    }

    .print-summary-header > div > strong,
    .print-summary-header > div > span {
        display: block;
    }

    .print-summary-header > div:first-child > strong {
        font-size: 15px;
        font-weight: 900;
    }

    .print-summary-header > div:first-child > span,
    .print-summary-meta span {
        margin-top: 3px;
        color: #667085;
        font-size: 8.5px;
    }

    .print-summary-title {
        text-align: center;
    }

    .print-summary-title h1 {
        margin: 0;
        font-size: 17px;
        line-height: 1.2;
    }

    .print-summary-title p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 8.5px;
    }

    .print-summary-meta {
        text-align: right;
    }

    .print-summary-meta strong {
        margin-top: 3px;
        font-size: 9px;
        white-space: nowrap;
    }

    .inventory-hero,
    .procurement-hero,
    .panel,
    .metric-card,
    .dashboard-financial-strip,
    .closing-status-bar {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .inventory-hero,
    .procurement-hero {
        margin-top: 0 !important;
    }

    .metric-grid {
        break-inside: avoid;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .data-table {
        width: 100% !important;
        font-size: 8px !important;
    }

    .data-table th,
    .data-table td {
        padding: 6px 7px !important;
    }

    .data-table th.actions-col,
    .data-table td.actions-col {
        display: none !important;
    }

    .panel,
    .product-list-panel,
    .table-panel,
    .report-statement-panel,
    .report-cash-panel,
    .closing-summary-panel,
    .closing-cash-panel {
        border: 1px solid #dfe5ea !important;
        background: #fff !important;
    }

    .page-enter {
        animation: none !important;
    }
}


/* =====================================================================
   Phase 7 — Business Reports & Analytics
   ===================================================================== */

.report-hub-hero {
    margin-bottom: 14px;
}

.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.report-hub-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 106px;
    padding: 15px 16px;
    border: 1px solid #e1e8ee;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.055), transparent 34%),
        linear-gradient(180deg,#fff,#fbfcfd);
    color: #243247;
    text-decoration: none;
    box-shadow: 0 14px 36px rgba(15,23,42,.045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.report-hub-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15,118,110,.22);
    box-shadow: 0 18px 42px rgba(15,23,42,.075);
}

.report-hub-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #effaf8;
    color: #0f766e;
}

.report-hub-icon svg {
    width: 21px;
    height: 21px;
}

.report-hub-copy {
    min-width: 0;
}

.report-hub-copy strong,
.report-hub-copy small {
    display: block;
}

.report-hub-copy strong {
    color: #203047;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.report-hub-copy small {
    margin-top: 5px;
    color: #778395;
    font-size: 9.5px;
    line-height: 1.45;
}

.report-hub-arrow {
    color: #9aa6b6;
    font-size: 18px;
    transition: transform .18s ease, color .18s ease;
}

.report-hub-card:hover .report-hub-arrow {
    transform: translateX(2px);
    color: #0f766e;
}

.report-page-hero {
    margin-bottom: 13px;
}

.report-metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 14px;
}

.report-metric-grid .metric-card {
    min-height: 92px;
}

.primary-metric {
    border-color: rgba(15,118,110,.18) !important;
    background: linear-gradient(145deg,#effcf8,#fff) !important;
}

.primary-metric span,
.primary-metric strong {
    color: #0f766e !important;
}

.success-metric {
    border-color: #c4e8da !important;
    background: #f4fdf9 !important;
}

.success-metric strong {
    color: #087a68 !important;
}

.warning-metric {
    border-color: #f2d7a2 !important;
    background: #fffaf1 !important;
}

.warning-metric strong {
    color: #a55b00 !important;
}

.danger-metric {
    border-color: #f0c0bc !important;
    background: #fff7f6 !important;
}

.danger-metric strong {
    color: #b42318 !important;
}

.warning-text {
    color: #a55b00 !important;
}

.report-filter-grid {
    grid-template-columns: minmax(180px,1.2fr) minmax(170px,1fr) minmax(145px,.8fr) minmax(145px,.8fr) auto !important;
}

.report-table a {
    color: #0f766e;
    text-decoration: none;
}

.report-table a:hover {
    text-decoration: underline;
}

.report-insight-strip {
    margin-bottom: 14px;
    border-radius: 20px;
}

.report-chip-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    padding: 0 16px 16px;
}

.report-chip {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e5ebf0;
    border-radius: 13px;
    background: #fbfcfd;
}

.report-chip span,
.report-chip strong,
.report-chip small {
    display: block;
}

.report-chip span {
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.report-chip strong {
    margin-top: 5px;
    color: #27364b;
    font-size: 11.5px;
    white-space: nowrap;
}

.report-chip small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 8.5px;
}

.report-money-type-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.report-money-type-card {
    padding: 15px;
    border-radius: 20px;
}

.report-money-numbers {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
    margin-top: 11px;
}

.report-money-numbers > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e6ebf0;
    border-radius: 11px;
    background: #fbfcfd;
}

.report-money-numbers small,
.report-money-numbers strong {
    display: block;
}

.report-money-numbers small {
    color: #8a96a6;
    font-size: 8px;
}

.report-money-numbers strong {
    margin-top: 4px;
    color: #28374c;
    font-size: 10.5px;
    white-space: nowrap;
}

.report-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.analytics-rank-panel {
    border-radius: 20px;
}

.analytics-rank-list {
    display: grid;
    gap: 7px;
    padding: 0 15px 15px;
}

.analytics-rank-list article {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #e7ecf0;
    border-radius: 12px;
    background: #fbfcfd;
}

.rank-no {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef7f5;
    color: #0f766e;
    font-size: 9px;
    font-weight: 900;
}

.rank-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
}

.rank-main > div:first-child strong,
.rank-main > div:first-child small,
.rank-value strong,
.rank-value small {
    display: block;
}

.rank-main > div:first-child strong {
    color: #27364b;
    font-size: 10.5px;
}

.rank-main > div:first-child small,
.rank-value small {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 8px;
}

.rank-value {
    text-align: right;
}

.rank-value strong {
    color: #344054;
    font-size: 10px;
    white-space: nowrap;
}

.rank-bar {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eaf0f3;
}

.rank-bar span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg,#14b8a6,#0f766e);
}

.category-rank-panel {
    margin-bottom: 14px;
}

.category-performance-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    padding: 0 15px 15px;
}

.category-performance-grid article {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e6ebf0;
    border-radius: 13px;
    background: #fbfcfd;
}

.category-performance-grid article > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.category-performance-grid strong,
.category-performance-grid small {
    display: block;
}

.category-performance-grid strong {
    color: #2c3b50;
    font-size: 9.8px;
}

.category-performance-grid small {
    color: #98a2b3;
    font-size: 7.8px;
}

.category-performance-grid .rank-bar {
    margin-top: 8px;
}

@media (max-width: 1350px) {
    .report-hub-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .report-metric-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .report-chip-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .category-performance-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .report-money-numbers {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .report-filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .report-money-type-grid,
    .report-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .report-hub-grid,
    .report-metric-grid,
    .report-chip-grid,
    .category-performance-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .report-hub-card {
        min-height: 92px;
    }

    .rank-main {
        grid-template-columns: 1fr;
    }

    .rank-value {
        text-align: left;
    }
}

@media print {
    .report-hub-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 6px;
    }

    .report-hub-card {
        min-height: auto;
        padding: 8px;
        box-shadow: none;
    }

    .report-hub-arrow {
        display: none;
    }

    .report-metric-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 6px;
    }

    .report-money-type-grid,
    .report-analytics-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 6px;
    }

    .report-chip-grid,
    .category-performance-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 5px;
    }

    .analytics-rank-list,
    .category-performance-grid,
    .report-chip-grid {
        padding: 0 8px 8px;
    }
}


/* =====================================================================
   v1.2.1 — Report icon + owner-ready print polish
   ===================================================================== */

/* app_icon() SVGs are line icons. Report cards did not inherit the
   sidebar stroke rules, which made some icons appear blank/solid. */
.report-hub-icon svg,
.topbar-print-summary svg,
.report-page-actions .btn svg,
.report-print-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.report-hub-icon svg {
    width: 21px;
    height: 21px;
}

.report-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.report-page-actions .btn {
    min-height: 42px;
    border-radius: 12px;
    white-space: nowrap;
}

.report-print-button {
    box-shadow: 0 9px 22px rgba(15,118,110,.14);
}

.closing-hero-side {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.report-print-context,
.report-print-signoff,
.report-print-footnote {
    display: none;
}

@media (max-width: 900px) {
    .report-page-actions {
        justify-content: flex-start;
    }

    .closing-hero-side {
        width: 100%;
        justify-items: stretch;
    }

    .closing-hero-side .report-page-actions {
        justify-content: stretch;
    }

    .closing-hero-side .report-page-actions .btn {
        flex: 1 1 0;
    }
}

@media (max-width: 560px) {
    .report-page-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .report-page-actions .btn {
        width: 100%;
    }
}

@media print {
    .report-print-context {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
        gap: 0;
        margin: 0 0 10px;
        border: 1px solid #cfd8df;
        border-radius: 0;
        background: #fff;
        break-inside: avoid;
    }

    .report-print-context > div {
        min-width: 0;
        padding: 7px 9px;
        border-right: 1px solid #dfe5ea;
    }

    .report-print-context > div:last-child {
        border-right: 0;
    }

    .report-print-context span,
    .report-print-context strong {
        display: block;
    }

    .report-print-context span {
        color: #667085;
        font-size: 7.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .report-print-context strong {
        margin-top: 3px;
        color: #172033;
        font-size: 9px;
        font-weight: 800;
    }

    .report-print-signoff {
        display: grid !important;
        grid-template-columns: repeat(3,1fr);
        gap: 24px;
        margin-top: 25mm;
        padding-top: 7mm;
        break-inside: avoid;
    }

    .report-print-signoff > div {
        text-align: center;
    }

    .report-print-signoff span {
        display: block;
        min-height: 10mm;
        border-bottom: 1px solid #6b7280;
    }

    .report-print-signoff strong {
        display: block;
        margin-top: 4px;
        color: #344054;
        font-size: 8px;
        font-weight: 750;
    }

    .report-print-footnote {
        display: block !important;
        margin-top: 8mm;
        padding-top: 3mm;
        border-top: 1px solid #e1e6ea;
        color: #7b8794;
        font-size: 7px;
        text-align: center;
    }

    .report-page-actions,
    .closing-hero-side .report-page-actions {
        display: none !important;
    }

    .report-page-hero,
    .report-hero,
    .closing-hero {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border: 1px solid #dbe3e8 !important;
        background: #fff !important;
        color: #172033 !important;
    }

    .report-page-hero *,
    .report-hero *,
    .closing-hero * {
        color: #172033 !important;
    }

    .report-page-hero .eyebrow,
    .report-hero .eyebrow,
    .closing-hero .eyebrow {
        color: #0f766e !important;
    }

    .report-metric-grid,
    .pnl-metric-grid,
    .closing-metrics {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .report-metric-grid .metric-card,
    .pnl-metric-grid .metric-card,
    .closing-metrics .metric-card {
        min-height: auto !important;
        padding: 7px 8px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .report-metric-grid .metric-card span,
    .pnl-metric-grid .metric-card span,
    .closing-metrics .metric-card span {
        font-size: 7px !important;
    }

    .report-metric-grid .metric-card strong,
    .pnl-metric-grid .metric-card strong,
    .closing-metrics .metric-card strong {
        margin-top: 3px !important;
        font-size: 10px !important;
    }

    .report-table {
        border-collapse: collapse !important;
    }

    .report-table thead {
        display: table-header-group;
    }

    .report-table tr {
        break-inside: avoid;
    }

    .report-table th {
        background: #f3f6f8 !important;
        color: #344054 !important;
        border: 1px solid #dfe5ea !important;
        font-size: 7px !important;
        font-weight: 800 !important;
    }

    .report-table td {
        border: 1px solid #e6ebef !important;
        color: #344054 !important;
        font-size: 7.5px !important;
    }

    .report-table small {
        color: #7b8794 !important;
        font-size: 6.5px !important;
    }

    .report-insight-strip,
    .analytics-rank-panel,
    .category-rank-panel,
    .report-money-type-card {
        break-inside: avoid;
        box-shadow: none !important;
    }

    .positive-text {
        color: #116a53 !important;
    }

    .negative-text {
        color: #9f2f28 !important;
    }

    .warning-text {
        color: #8a5700 !important;
    }

    /* The print copy is for handover/review, so interactive links look like text. */
    .report-table a {
        color: inherit !important;
        text-decoration: none !important;
    }
}


/* =====================================================================
   Phase 8A — Estimates + Damage/Wastage
   ===================================================================== */

.operation-document-form {
    display: grid;
    gap: 14px;
}

.operation-no-effect-card {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid #d9e9e5;
    border-radius: 15px;
    background: #f4fbf9;
    color: #0f766e;
}

.operation-no-effect-card.loss {
    border-color: #f0d1ce;
    background: #fff7f6;
    color: #b42318;
}

.operation-no-effect-card > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.76);
}

.operation-no-effect-card svg {
    width: 18px;
    height: 18px;
}

.operation-no-effect-card strong,
.operation-no-effect-card small {
    display: block;
}

.operation-no-effect-card strong {
    font-size: 10.5px;
    font-weight: 850;
}

.operation-no-effect-card small {
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.35;
    opacity: .75;
}

.operation-lines-panel,
.operation-summary-panel {
    border-radius: 22px;
    overflow: hidden;
}

.operation-lines-head,
.operation-line {
    display: grid;
    grid-template-columns: minmax(210px, 1.55fr) minmax(150px, .9fr) minmax(200px, 1.15fr) minmax(125px, .72fr) minmax(130px, .72fr) 38px;
    gap: 9px;
    align-items: end;
}

.operation-lines-head {
    padding: 8px 16px;
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #e5eaee;
    background: #f8fafb;
    color: #778395;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.damage-lines-head,
.damage-operation-line {
    grid-template-columns: minmax(210px, 1.55fr) minmax(150px, .9fr) minmax(200px, 1.15fr) minmax(120px, .72fr) minmax(130px, .76fr) 38px;
}

.operation-lines {
    display: grid;
}

.operation-line {
    padding: 11px 16px;
    border-bottom: 1px solid #edf1f4;
    background: #fff;
}

.operation-line:last-child {
    border-bottom: 0;
}

.operation-line .field {
    margin: 0;
}

.operation-line .field > span {
    font-size: 8px;
}

.operation-line .field small {
    display: block;
    margin-top: 4px;
    color: #8a96a6;
    font-size: 7.8px;
}

.operation-qty-pair {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
}

.operation-line-value {
    min-height: 43px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4px;
}

.operation-line-value strong {
    color: #26364b;
    font-size: 10.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.operation-remove {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #f0d4d1;
    border-radius: 10px;
    background: #fff;
    color: #b42318;
    cursor: pointer;
}

.operation-remove:hover {
    background: #fff5f4;
}

.operation-remove svg {
    width: 15px;
    height: 15px;
}

.mobile-field-label {
    display: none !important;
}

.operation-summary-grid {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(280px,.7fr);
    gap: 18px;
    padding: 0 17px 10px;
}

.damage-summary-grid {
    grid-template-columns: minmax(0,1.5fr) minmax(270px,.65fr);
}

.operation-adjustments {
    display: grid;
    gap: 11px;
}

.operation-totals {
    align-self: start;
    overflow: hidden;
    border: 1px solid #e3e9ee;
    border-radius: 15px;
    background: #fbfcfd;
}

.operation-totals > div {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 12px;
    border-bottom: 1px solid #e8edf1;
}

.operation-totals > div:last-of-type {
    border-bottom: 0;
}

.operation-totals span {
    color: #667085;
    font-size: 9px;
    font-weight: 700;
}

.operation-totals strong {
    color: #27364b;
    font-size: 10.5px;
    white-space: nowrap;
}

.operation-totals .grand {
    min-height: 52px;
    background: #effaf8;
}

.operation-totals .grand span,
.operation-totals .grand strong {
    color: #0f766e;
    font-weight: 900;
}

.operation-totals .loss-grand {
    background: #fff6f5;
}

.operation-totals .loss-grand span,
.operation-totals .loss-grand strong {
    color: #b42318;
}

.operation-totals > small {
    display: block;
    padding: 9px 12px;
    color: #8b96a5;
    font-size: 8px;
    line-height: 1.4;
}

.full-span {
    grid-column: 1 / -1;
}

.estimate-document {
    padding: 20px;
    border-radius: 22px;
}

.estimate-document-head {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(280px,.7fr);
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5eaee;
}

.estimate-kicker {
    color: #0f766e;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.estimate-document-head h2 {
    margin: 5px 0 0;
    color: #1f2e42;
    font-size: 24px;
    letter-spacing: -.035em;
}

.estimate-document-head p {
    max-width: 650px;
    margin: 7px 0 0;
    color: #7c8796;
    font-size: 9px;
    line-height: 1.5;
}

.estimate-meta {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
}

.estimate-meta > div {
    padding: 9px 10px;
    border: 1px solid #e5eaee;
    border-radius: 11px;
    background: #fbfcfd;
}

.estimate-meta span,
.estimate-meta strong {
    display: block;
}

.estimate-meta span {
    color: #8a96a6;
    font-size: 7.5px;
}

.estimate-meta strong {
    margin-top: 4px;
    color: #344054;
    font-size: 9px;
}

.estimate-customer-card {
    margin: 15px 0;
    padding: 12px 14px;
    border: 1px solid #e1e8ed;
    border-left: 3px solid #0f766e;
    border-radius: 13px;
    background: #fbfdfd;
}

.estimate-customer-card span,
.estimate-customer-card strong,
.estimate-customer-card small {
    display: block;
}

.estimate-customer-card span {
    color: #8a96a6;
    font-size: 7.5px;
    font-weight: 750;
    text-transform: uppercase;
}

.estimate-customer-card strong {
    margin-top: 4px;
    color: #243348;
    font-size: 12px;
}

.estimate-customer-card small {
    margin-top: 3px;
    color: #667085;
    font-size: 8.5px;
}

.estimate-items-table {
    margin-top: 2px;
}

.estimate-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.65fr);
    gap: 24px;
    margin-top: 16px;
}

.estimate-notes {
    padding: 12px 14px;
    border: 1px solid #e6ebef;
    border-radius: 13px;
    background: #fbfcfd;
}

.estimate-notes span {
    color: #8b96a5;
    font-size: 8px;
    font-weight: 800;
}

.estimate-notes p {
    margin: 7px 0 0;
    color: #475467;
    font-size: 9px;
    line-height: 1.55;
}

.estimate-totals {
    display: grid;
    align-self: start;
}

.estimate-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    min-height: 34px;
    align-items: center;
    padding: 0 7px;
    border-bottom: 1px solid #edf1f4;
}

.estimate-totals span {
    color: #667085;
    font-size: 8.5px;
}

.estimate-totals strong {
    color: #344054;
    font-size: 9.5px;
}

.estimate-totals .grand {
    min-height: 46px;
    margin-top: 4px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    background: #0f766e;
}

.estimate-totals .grand span,
.estimate-totals .grand strong {
    color: #fff;
    font-weight: 900;
}

.estimate-signature-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 80px;
    max-width: 700px;
    margin: 38px auto 5px;
}

.estimate-signature-row > div {
    text-align: center;
}

.estimate-signature-row span {
    display: block;
    height: 28px;
    border-bottom: 1px solid #8e99a7;
}

.estimate-signature-row strong {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 8px;
}

.estimate-convert-panel {
    margin-top: 14px;
    padding: 0 16px 16px;
    border-radius: 22px;
    border-color: #cee6df;
    background: linear-gradient(180deg,#fff,#f8fcfb);
}

.estimate-management-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.estimate-management-bar form {
    margin: 0;
}

.damage-detail-hero {
    align-items: center;
}

.damage-hero-value {
    min-width: 210px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

.damage-hero-value span,
.damage-hero-value strong {
    display: block;
    color: #fff;
}

.damage-hero-value span {
    font-size: 8px;
    opacity: .72;
}

.damage-hero-value strong {
    margin-top: 4px;
    font-size: 17px;
}

.damage-note-panel {
    margin-top: 14px;
    padding-bottom: 14px;
    border-radius: 20px;
}

.damage-note-panel > p {
    margin: 0;
    padding: 0 16px;
    color: #526074;
    font-size: 9.5px;
    line-height: 1.6;
}

.damage-accounting-note {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #ead9c3;
    border-radius: 15px;
    background: #fffaf3;
    color: #80520b;
}

.damage-accounting-note > svg {
    width: 22px;
    height: 22px;
}

.damage-accounting-note strong,
.damage-accounting-note span {
    display: block;
}

.damage-accounting-note strong {
    font-size: 10px;
}

.damage-accounting-note span {
    margin-top: 4px;
    color: #7f6a48;
    font-size: 8.5px;
    line-height: 1.45;
}

.inventory-loss-row {
    background: #fff8f7;
}

@media (max-width: 1180px) {
    .operation-lines-head {
        display: none;
    }

    .operation-line,
    .damage-operation-line {
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: start;
    }

    .operation-line-value {
        min-height: auto;
        padding: 5px 0;
    }

    .mobile-field-label {
        display: block !important;
        margin-bottom: 4px;
        color: #8a96a6;
        font-size: 7.5px;
        font-weight: 800;
    }

    .operation-remove {
        align-self: end;
    }
}

@media (max-width: 820px) {
    .operation-summary-grid,
    .damage-summary-grid,
    .estimate-document-head,
    .estimate-bottom-grid {
        grid-template-columns: 1fr;
    }

    .estimate-meta {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .estimate-signature-row {
        gap: 30px;
    }
}

@media (max-width: 620px) {
    .operation-line,
    .damage-operation-line {
        grid-template-columns: 1fr;
    }

    .operation-qty-pair {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .operation-remove {
        width: 100%;
    }

    .estimate-meta {
        grid-template-columns: 1fr;
    }

    .estimate-signature-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .estimate-document {
        padding: 14px;
    }
}

@media print {
    .estimate-document,
    .damage-note-panel {
        box-shadow: none !important;
        border: 1px solid #dce3e8 !important;
    }

    .estimate-document-head {
        grid-template-columns: 1.35fr .65fr;
    }

    .estimate-meta {
        grid-template-columns: repeat(3,1fr);
    }

    .estimate-signature-row {
        margin-top: 18mm;
    }

    .damage-accounting-note {
        break-inside: avoid;
        border-color: #d9d9d9 !important;
        background: #fff !important;
        color: #344054 !important;
    }

    .damage-accounting-note span {
        color: #667085 !important;
    }
}


/* Phase 8B financial KPI alignment */
.pnl-metric-grid,
.closing-metrics {
    grid-template-columns: repeat(6, minmax(0,1fr));
}

@media (max-width: 1250px) {
    .pnl-metric-grid,
    .closing-metrics {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .pnl-metric-grid,
    .closing-metrics {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   Phase 8B — Employee & Payroll
   ===================================================================== */

.payroll-hero {
    margin-bottom: 14px;
}

.hero-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.payroll-generate-panel,
.employee-form-card,
.salary-edit-card,
.employee-contact-panel {
    border-radius: 22px;
}

.payroll-generate-panel {
    margin-bottom: 14px;
    padding: 0 16px 16px;
    border-color: #d8e7e3;
    background: linear-gradient(180deg,#fff,#f9fcfb);
}

.payroll-check-field .checkbox-line {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #dfe6eb;
    border-radius: 11px;
    background: #fbfcfd;
    color: #536176;
    font-size: 9px;
}

.payroll-check-field .checkbox-line input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.payroll-expense-metric {
    border-color: #d8d2ef !important;
    background: #faf8ff !important;
}

.payroll-expense-metric span,
.payroll-expense-metric strong {
    color: #6750a4 !important;
}

.employee-profile-hero {
    align-items: center;
}

.employee-salary-badge {
    min-width: 230px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
}

.employee-salary-badge span,
.employee-salary-badge strong {
    display: block;
    color: #fff;
}

.employee-salary-badge span {
    font-size: 8px;
    opacity: .72;
}

.employee-salary-badge strong {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 900;
}

.employee-contact-panel {
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.employee-profile-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 0 16px;
}

.employee-profile-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e5eaee;
    border-radius: 12px;
    background: #fbfcfd;
}

.employee-profile-grid span,
.employee-profile-grid strong {
    display: block;
}

.employee-profile-grid span {
    color: #8a96a6;
    font-size: 7.8px;
    font-weight: 750;
}

.employee-profile-grid strong {
    margin-top: 4px;
    color: #344054;
    font-size: 10px;
    word-break: break-word;
}

.salary-edit-summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 14px;
}

.salary-edit-summary > div {
    padding: 11px 12px;
    border: 1px solid #e3e9ee;
    border-radius: 12px;
    background: #fbfcfd;
}

.salary-edit-summary span,
.salary-edit-summary strong {
    display: block;
}

.salary-edit-summary span {
    color: #7b8796;
    font-size: 8px;
}

.salary-edit-summary strong {
    margin-top: 4px;
    color: #27364b;
    font-size: 11px;
}

.salary-expense-row {
    background: #fbf9ff;
}

@media (max-width: 1100px) {
    .employee-profile-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .hero-action-row {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .hero-action-row,
    .salary-edit-summary,
    .employee-profile-grid {
        grid-template-columns: 1fr;
    }

    .hero-action-row {
        display: grid;
        width: 100%;
    }

    .hero-action-row .btn {
        width: 100%;
    }

    .employee-salary-badge {
        width: 100%;
        min-width: 0;
    }
}

@media print {
    .employee-contact-panel,
    .salary-edit-summary {
        box-shadow: none !important;
    }

    .employee-profile-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .payroll-expense-metric {
        background: #fff !important;
    }
}


.salary-slip-document {
    padding: 20px;
    border-radius: 22px;
}

.salary-slip-head {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4eaee;
}

.salary-slip-head h2 {
    margin: 5px 0 0;
    color: #213147;
    font-size: 22px;
}

.salary-slip-head p {
    margin: 6px 0 0;
    color: #7b8795;
    font-size: 9px;
}

.salary-slip-employee {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0;
}

.salary-slip-employee > div {
    padding: 11px 12px;
    border: 1px solid #e3e9ed;
    border-radius: 12px;
    background: #fbfcfd;
}

.salary-slip-employee span,
.salary-slip-employee strong,
.salary-slip-employee small {
    display: block;
}

.salary-slip-employee span {
    color: #8a96a6;
    font-size: 7.5px;
    font-weight: 750;
}

.salary-slip-employee strong {
    margin-top: 4px;
    color: #27364b;
    font-size: 11px;
}

.salary-slip-employee small {
    margin-top: 3px;
    color: #7b8795;
    font-size: 8px;
}

.salary-component-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 7px;
    margin: 14px 0;
}

.salary-component-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e4e9ed;
    border-radius: 11px;
    background: #fbfcfd;
}

.salary-component-grid span,
.salary-component-grid strong {
    display: block;
}

.salary-component-grid span {
    color: #7d8998;
    font-size: 7.5px;
}

.salary-component-grid strong {
    margin-top: 4px;
    color: #2d3b4f;
    font-size: 10px;
    white-space: nowrap;
}

.salary-component-grid .primary {
    border-color: #d7d1ef;
    background: #faf8ff;
}

.salary-component-grid .primary strong {
    color: #6750a4;
}

.salary-component-grid .success {
    border-color: #cce7dd;
    background: #f5fcf9;
}

.salary-component-grid .success strong {
    color: #087a68;
}

.salary-component-grid .warning {
    border-color: #efd5a7;
    background: #fffaf1;
}

.salary-component-grid .warning strong {
    color: #9b5d00;
}

.salary-slip-payments {
    margin: 15px 0;
}

.salary-slip-payments h3 {
    margin: 0 0 7px;
    color: #334155;
    font-size: 10px;
}

.salary-slip-signoff {
    display: grid;
    margin-top: 30px;
    padding-top: 8px;
}

@media (max-width: 900px) {
    .salary-slip-head {
        grid-template-columns: 1fr;
    }

    .salary-component-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .salary-slip-employee,
    .salary-component-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .salary-slip-document {
        padding: 10px !important;
        box-shadow: none !important;
        border: 1px solid #d9e1e6 !important;
    }

    .salary-slip-head {
        grid-template-columns: 1.3fr .7fr;
    }

    .salary-component-grid {
        grid-template-columns: repeat(5,1fr);
        gap: 4px;
    }

    .salary-component-grid > div {
        padding: 7px 8px;
        border-radius: 0;
    }

    .salary-slip-signoff {
        display: grid !important;
        grid-template-columns: repeat(3,1fr);
    }
}


/* =====================================================================
   Phase 9 — Fixed Assets + Backup/Restore + System Hardening
   ===================================================================== */

.asset-hero,
.backup-hero,
.health-pro-hero {
    margin-bottom: 14px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.asset-metrics {
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.asset-form .asset-account-disabled {
    opacity: .55;
}

.asset-form .asset-account-disabled select {
    pointer-events: none;
}

.asset-detail-hero {
    align-items: center;
}

.asset-detail-panel,
.asset-accounting-note,
.asset-depreciation-note {
    margin-top: 14px;
}

.asset-info-table {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.asset-category-layout {
    display: grid;
    grid-template-columns: minmax(280px,.75fr) minmax(0,1.7fr);
    gap: 14px;
    align-items: start;
}

.backup-hero-badge {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    color: #fff;
}

.backup-hero-badge > svg {
    width: 23px;
    height: 23px;
}

.backup-hero-badge strong,
.backup-hero-badge small {
    display: block;
}

.backup-hero-badge strong {
    font-size: 11px;
    font-weight: 900;
}

.backup-hero-badge small {
    margin-top: 3px;
    font-size: 8px;
    opacity: .72;
}

.backup-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.backup-action-card {
    padding: 0 16px 16px;
    border-radius: 22px;
}

.backup-action-card.restore-card {
    border-color: #ecd2cf;
    background: linear-gradient(180deg,#fff,#fffafa);
}

.backup-form {
    display: grid;
    gap: 10px;
}

.backup-warning,
.backup-danger-note {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr);
    gap: 8px;
    align-items: start;
    padding: 10px 11px;
    border-radius: 11px;
    font-size: 8.5px;
    line-height: 1.45;
}

.backup-warning {
    border: 1px solid #d9e9e5;
    background: #f3fbf9;
    color: #286a61;
}

.backup-danger-note {
    border: 1px solid #f0d0cd;
    background: #fff6f5;
    color: #9f3b33;
}

.backup-warning svg,
.backup-danger-note svg {
    width: 17px;
    height: 17px;
}

.danger-field input {
    border-color: #e9b9b4 !important;
}

.backup-table td strong,
.backup-table td small {
    display: block;
}

.backup-table td small {
    margin-top: 3px;
    color: #8b96a5;
    font-size: 7.5px;
}

.backup-inline-restore {
    display: grid;
    gap: 5px;
    padding: 7px;
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #edf1f4;
}

.backup-inline-restore input {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid #dfe5ea;
    border-radius: 8px;
    font: inherit;
    font-size: 8px;
}

.backup-technical-panel {
    margin-top: 14px;
    border-radius: 22px;
}

.backup-safety-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 0 16px 14px;
}

.backup-safety-grid > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5eaef;
    border-radius: 12px;
    background: #fbfcfd;
}

.backup-safety-grid svg {
    width: 18px;
    height: 18px;
    color: #0f766e;
}

.backup-safety-grid strong,
.backup-safety-grid small {
    display: block;
}

.backup-safety-grid strong {
    color: #344054;
    font-size: 9px;
}

.backup-safety-grid small {
    margin-top: 3px;
    color: #7e8998;
    font-size: 7.5px;
    line-height: 1.4;
}

.backup-schema-hash {
    display: block;
    padding: 0 16px 14px;
    color: #98a2b3;
    font-size: 7.5px;
}

.health-security-panel {
    margin-top: 14px;
    border-radius: 22px;
}

.health-check-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    padding: 0 16px 16px;
}

.health-check-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid #e3e9ee;
    border-radius: 13px;
    background: #fbfcfd;
}

.health-check-card.ok {
    border-color: #d7e9e2;
    background: #f7fcfa;
}

.health-check-card.warn {
    border-color: #f0d5b1;
    background: #fffaf2;
}

.health-check-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: #0f766e;
}

.health-check-card.warn .health-check-icon {
    color: #a45d00;
}

.health-check-icon svg {
    width: 18px;
    height: 18px;
}

.health-check-card small,
.health-check-card strong {
    display: block;
}

.health-check-card small {
    color: #7f8a99;
    font-size: 7.8px;
    font-weight: 800;
    text-transform: uppercase;
}

.health-check-card strong {
    margin-top: 4px;
    color: #28374c;
    font-size: 10.5px;
}

.health-check-card p {
    margin: 5px 0 0;
    color: #778395;
    font-size: 7.8px;
    line-height: 1.45;
}

.health-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 14px;
}

.health-error-panel {
    margin-top: 14px;
    border-color: #efc9c5;
    background: #fffafa;
}

.health-error-list {
    display: grid;
    gap: 7px;
    padding: 0 16px 16px;
}

.health-error-list > div {
    padding: 9px 10px;
    border: 1px solid #efd8d5;
    border-radius: 10px;
    background: #fff;
}

.health-error-list strong,
.health-error-list span {
    display: block;
}

.health-error-list strong {
    color: #9f342c;
    font-size: 8.5px;
}

.health-error-list span {
    margin-top: 4px;
    color: #7a554f;
    font-size: 8px;
    line-height: 1.45;
}

@media (max-width: 1200px) {
    .asset-metrics {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .backup-safety-grid,
    .health-check-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .asset-category-layout,
    .backup-grid,
    .health-detail-grid {
        grid-template-columns: 1fr;
    }

    .asset-info-table {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .asset-metrics,
    .backup-safety-grid,
    .health-check-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .hero-actions .btn {
        flex: 1 1 0;
    }

    .backup-hero-badge {
        min-width: 0;
        width: 100%;
    }
}

@media print {
    .asset-accounting-note,
    .asset-depreciation-note,
    .asset-detail-panel {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .backup-grid,
    .backup-technical-panel,
    .health-security-panel,
    .health-error-panel {
        break-inside: avoid;
    }
}


/* =====================================================================
   Phase 10 — Customer Engagement + Promotional SMS
   ===================================================================== */

.customer-engagement-fields {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid #dce8e5;
    border-radius: 16px;
    background: linear-gradient(180deg,#fbfefd,#f6fbf9);
}

.customer-engagement-field-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.customer-engagement-field-head strong {
    color: #35445a;
    font-size: 9.5px;
}

.marketing-consent-card {
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid #eadfca;
    border-radius: 13px;
    background: #fffaf2;
    cursor: pointer;
}

.marketing-consent-card.opted-in {
    border-color: #cfe6df;
    background: #f4fbf8;
}

.marketing-consent-card input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.marketing-consent-card span,
.marketing-consent-card strong,
.marketing-consent-card small,
.marketing-consent-card em {
    display: block;
}

.marketing-consent-card strong {
    color: #344054;
    font-size: 9px;
    font-weight: 850;
}

.marketing-consent-card small {
    margin-top: 4px;
    color: #7b8795;
    font-size: 7.8px;
    line-height: 1.4;
}

.marketing-consent-card em {
    margin-top: 5px;
    color: #9a6b18;
    font-size: 7.5px;
    font-style: normal;
    font-weight: 750;
}

.engagement-hero,
.sms-campaign-hero,
.sms-gateway-hero {
    margin-bottom: 14px;
}

.engagement-metrics {
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.engagement-segment-panel,
.sms-builder-panel,
.sms-campaign-message-panel,
.sms-send-control {
    border-radius: 22px;
    margin-bottom: 14px;
}

.engagement-segment-panel {
    padding: 0 16px 16px;
}

.engagement-filter-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(150px,1fr));
    gap: 9px;
    align-items: end;
}

.engagement-count-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sms-preview-strip {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.sms-preview-strip > span {
    min-width: 120px;
    padding: 8px 10px;
    border: 1px solid #e2e8ed;
    border-radius: 10px;
    background: #fbfcfd;
    color: #344054;
    font-size: 8.5px;
    font-weight: 800;
}

.sms-preview-strip small {
    display: block;
    margin-top: 3px;
    color: #8b96a5;
    font-size: 7.2px;
    font-weight: 600;
}

.sms-builder-note {
    display: block;
    margin-top: 8px;
    color: #8a96a6;
    font-size: 7.8px;
    line-height: 1.45;
}

.sms-campaign-builder {
    display: grid;
    gap: 14px;
}

.sms-builder-panel {
    padding: 0 16px 16px;
}

.sms-builder-filters {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.sms-message-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
}

.sms-consent-callout {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #d6e7e2;
    border-radius: 13px;
    background: #f5fbf9;
    color: #315f58;
}

.sms-consent-callout > svg {
    width: 19px;
    height: 19px;
    margin-top: 2px;
}

.sms-consent-callout strong,
.sms-consent-callout span {
    display: block;
}

.sms-consent-callout strong {
    color: #245e55;
    font-size: 9px;
}

.sms-consent-callout span {
    margin-top: 3px;
    color: #6c817d;
    font-size: 7.8px;
    line-height: 1.45;
}

.campaign-builder-actions {
    justify-content: flex-end;
}

.campaign-delivery-mini {
    min-width: 130px;
}

.campaign-delivery-mini > span {
    color: #344054;
    font-size: 8.5px;
    font-weight: 850;
}

.campaign-delivery-mini > div {
    height: 5px;
    overflow: hidden;
    margin: 5px 0 4px;
    border-radius: 999px;
    background: #edf1f4;
}

.campaign-delivery-mini i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f766e;
}

.campaign-delivery-mini small {
    color: #8b96a5;
    font-size: 7.2px;
}

.status-badge.draft,
.status-badge.queued {
    background: #f2f4f7;
    color: #475467;
}

.status-badge.processing {
    background: #fff5df;
    color: #946200;
}

.status-badge.completed,
.status-badge.sent {
    background: #eaf8f2;
    color: #167454;
}

.status-badge.cancelled,
.status-badge.failed {
    background: #fff0ee;
    color: #b13e35;
}

.status-badge.skipped {
    background: #f5f1fb;
    color: #6e4da5;
}

.sms-campaign-detail-hero {
    align-items: center;
}

.campaign-message-readonly {
    padding: 0 16px 16px;
}

.campaign-message-readonly > div {
    padding: 12px 13px;
    border: 1px solid #e5eaef;
    border-radius: 12px;
    background: #fbfcfd;
}

.campaign-message-readonly span {
    display: block;
    color: #7f8a99;
    font-size: 7.5px;
    font-weight: 850;
    text-transform: uppercase;
}

.campaign-message-readonly p {
    margin: 7px 0 0;
    color: #3e4b5f;
    font-size: 9px;
    line-height: 1.55;
    white-space: normal;
}

.sms-send-control {
    padding: 0 16px 16px;
}

.sms-progress-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid #dfe7eb;
    border-radius: 14px;
    background: #fbfcfd;
}

.sms-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef2;
}

.sms-progress-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#0f766e,#2f9c8a);
    transition: width .25s ease;
}

.sms-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sms-progress-copy strong {
    color: #344054;
    font-size: 10px;
}

.sms-progress-copy span {
    color: #7d8998;
    font-size: 8.5px;
}

.sms-progress-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.sms-progress-actions form {
    margin: 0;
}

.sms-message-cell {
    min-width: 260px;
    max-width: 480px;
    white-space: normal !important;
    line-height: 1.45;
}

.sms-template-layout {
    display: grid;
    grid-template-columns: minmax(320px,.78fr) minmax(0,1.7fr);
    gap: 14px;
    align-items: start;
}

.sms-template-form {
    position: sticky;
    top: 72px;
}

.sms-template-variable-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 5px 0 12px;
}

.sms-template-variable-list code {
    padding: 5px 7px;
    border: 1px solid #dfe7eb;
    border-radius: 8px;
    background: #f7f9fa;
    color: #536174;
    font-size: 7.5px;
}

.sms-template-preview {
    min-width: 240px;
    max-width: 430px;
    white-space: normal !important;
    line-height: 1.4;
}

.sms-gateway-layout {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.65fr);
    gap: 14px;
    align-items: start;
}

.sms-gateway-form,
.sms-gateway-test {
    border-radius: 22px;
}

.sms-gateway-test {
    position: sticky;
    top: 72px;
}

.sms-gateway-test form {
    display: grid;
    gap: 10px;
}

.sms-single-form {
    max-width: 920px;
    margin-inline: auto;
}

@media (max-width: 1220px) {
    .engagement-metrics {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .engagement-filter-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .sms-template-layout,
    .sms-gateway-layout {
        grid-template-columns: 1fr;
    }

    .sms-template-form,
    .sms-gateway-test {
        position: static;
    }
}

@media (max-width: 820px) {
    .engagement-metrics,
    .engagement-filter-grid,
    .sms-builder-filters {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sms-message-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .engagement-metrics,
    .engagement-filter-grid,
    .sms-builder-filters {
        grid-template-columns: 1fr;
    }

    .engagement-count-actions,
    .sms-progress-actions,
    .campaign-builder-actions {
        width: 100%;
    }

    .engagement-count-actions .btn,
    .sms-progress-actions .btn,
    .campaign-builder-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .sms-progress-copy {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    .sms-send-control,
    .sms-campaign-message-panel .panel-head p {
        display: none !important;
    }

    .campaign-message-readonly {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .sms-message-cell {
        min-width: 0 !important;
        max-width: none !important;
    }

    .status-badge {
        border: 1px solid #d8dee4 !important;
        background: #fff !important;
        color: #344054 !important;
    }
}


.sms-delivery-semantics {
    display: grid;
    gap: 3px;
    margin: 0 16px 12px;
    padding: 10px 12px;
    border: 1px solid #dce6eb;
    border-radius: 11px;
    background: #f8fafb;
}

.sms-delivery-semantics strong {
    color: #344054;
    font-size: 8.5px;
}

.sms-delivery-semantics span {
    color: #7b8795;
    font-size: 7.7px;
    line-height: 1.45;
}


.sms-gateway-security-note {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 13px;
    border: 1px solid #ead7b8;
    border-radius: 13px;
    background: #fffaf1;
    color: #80520b;
}
.sms-gateway-security-note > svg {
    width: 19px;
    height: 19px;
    margin-top: 1px;
}
.sms-gateway-security-note strong,
.sms-gateway-security-note span {
    display: block;
}
.sms-gateway-security-note strong {
    font-size: 9px;
    font-weight: 850;
}
.sms-gateway-security-note span {
    margin-top: 4px;
    color: #7e6a4b;
    font-size: 8px;
    line-height: 1.45;
}


/* =====================================================================
   v1.6.1 — Account Security, Branding, Profile Photo & Password Recovery
   ===================================================================== */

.brand-logo-image {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.14);
    background: #fff;
}
.brand-logo-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 3px;
}
.brand-logo-image.large {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 15px;
}
.avatar {
    overflow: hidden;
}
.avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.login-brand-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 54px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.15);
}
.login-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 4px;
}

.password-label-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.password-label-row > a {
    font-size: 9px;
    font-weight: 800;
    color: var(--accent-dark);
    text-decoration: none;
}
.password-label-row > a:hover {
    text-decoration: underline;
}

.global-print-brand {
    display: none;
}

.profile-hero {
    align-items: center;
}
.profile-hero-avatar {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 92px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}
.profile-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-security-grid {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: 14px;
    margin-top: 14px;
}
.profile-photo-panel,
.profile-password-panel {
    border-radius: 22px;
}
.profile-photo-form {
    display: grid;
    gap: 12px;
}
.profile-photo-preview,
.user-edit-avatar-preview {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dfe6ec;
    border-radius: 24px;
    background: #f5f8fa;
    color: #64748b;
    font-size: 32px;
    font-weight: 900;
}
.profile-photo-preview img,
.user-edit-avatar-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.profile-security-note,
.smtp-security-note {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 9px;
    align-items: start;
    padding: 10px 11px;
    border: 1px solid #d9e8e3;
    border-radius: 12px;
    background: #f5fbf9;
    color: #35675f;
    font-size: 8.5px;
    line-height: 1.5;
}
.profile-security-note svg,
.smtp-security-note svg {
    width: 18px;
    height: 18px;
}
.user-edit-avatar-row {
    display: grid;
    grid-template-columns: 124px minmax(0,1fr);
    gap: 16px;
    align-items: center;
    padding: 13px;
    margin-bottom: 16px;
    border: 1px solid #e4e9ee;
    border-radius: 15px;
    background: #fbfcfd;
}
.user-edit-avatar-controls {
    display: grid;
    gap: 6px;
}
.user-edit-avatar-controls > strong {
    color: #2d3b50;
    font-size: 11px;
}
.user-edit-avatar-controls > span {
    color: #7d8898;
    font-size: 8.5px;
}
.user-edit-avatar-controls input[type=file] {
    max-width: 430px;
}
.profile-self-password-link {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #dfe6ec;
    border-radius: 12px;
    background: #fafcfd;
}
.profile-self-password-link > svg {
    width: 18px;
    height: 18px;
    color: #0f766e;
}
.profile-self-password-link span {
    color: #667085;
    font-size: 8.5px;
    line-height: 1.4;
}
.profile-self-password-link a {
    color: #0f766e;
    font-size: 8.5px;
    font-weight: 850;
    text-decoration: none;
}

.settings-brand-hero {
    align-items: center;
}
.settings-logo-hero {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    flex: 0 0 112px;
    padding: 6px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.16);
    background: #fff;
    overflow: hidden;
}
.settings-logo-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.settings-logo-row {
    display: grid;
    grid-template-columns: 130px minmax(0,1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #e3e9ee;
    border-radius: 15px;
    background: #fbfcfd;
}
.settings-logo-preview {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dfe6ec;
    border-radius: 22px;
    background: #fff;
    color: #0f766e;
    font-size: 27px;
    font-weight: 900;
}
.settings-logo-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 5px;
}
.settings-logo-controls {
    display: grid;
    gap: 8px;
}

.smtp-settings-panel {
    margin-top: 14px;
    border-radius: 22px;
}
.smtp-settings-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(270px,.55fr);
    gap: 16px;
}
.smtp-form {
    display: grid;
    gap: 12px;
}
.smtp-enable {
    padding: 10px 11px;
    border: 1px solid #dce8e4;
    border-radius: 12px;
    background: #f7fbfa;
}
.smtp-enable span strong,
.smtp-enable span small {
    display: block;
}
.smtp-enable span strong {
    color: #344054;
    font-size: 9px;
}
.smtp-enable span small {
    margin-top: 3px;
    color: #7b8795;
    font-size: 7.8px;
}
.smtp-test-card {
    align-self: start;
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e2e8ed;
    border-radius: 16px;
    background: #fbfcfd;
}
.smtp-test-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf7f4;
    color: #0f766e;
}
.smtp-test-icon svg {
    width: 20px;
    height: 20px;
}
.smtp-test-card h4 {
    margin: 0;
    color: #26364b;
    font-size: 14px;
}
.smtp-test-card p {
    margin: 0;
    color: #778395;
    font-size: 8.5px;
    line-height: 1.5;
}

.account-recovery-body {
    min-height: 100vh;
}
.recovery-shell {
    width: min(520px,calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 30px 0;
}
.recovery-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    justify-content: center;
}
.recovery-brand > img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    padding: 4px;
    border: 1px solid #dfe6ec;
    border-radius: 14px;
    background: #fff;
}
.recovery-brand > div:last-child strong,
.recovery-brand > div:last-child span {
    display: block;
}
.recovery-brand > div:last-child strong {
    color: #1e2d42;
    font-size: 13px;
}
.recovery-brand > div:last-child span {
    margin-top: 2px;
    color: #7b8795;
    font-size: 9px;
}
.recovery-card {
    width: 100%;
}
.recovery-back {
    display: block;
    margin-top: 12px;
    color: #667085;
    font-size: 9px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}
.recovery-back:hover {
    color: #0f766e;
}

.receipt-brand-logo {
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #dfe6ec;
}
.receipt-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 3px;
}

@media (max-width: 900px) {
    .profile-security-grid,
    .smtp-settings-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .settings-logo-row,
    .user-edit-avatar-row {
        grid-template-columns: 1fr;
    }
    .profile-hero-avatar {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }
    .profile-self-password-link {
        grid-template-columns: 28px 1fr;
    }
    .profile-self-password-link a {
        grid-column: 2;
    }
}

@media print {
    .global-print-brand {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 8mm;
        padding: 0 0 4mm;
        border-bottom: 1px solid #cfd8df;
        break-inside: avoid;
    }
    .global-print-brand-main {
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .global-print-brand-main > img,
    .global-print-brand-main > span {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        object-fit: contain;
        border: 1px solid #dbe3e8;
        border-radius: 8px;
        background: #fff;
        color: #0f766e;
        font-size: 12px;
        font-weight: 900;
    }
    .global-print-brand-main strong,
    .global-print-brand-main small,
    .global-print-brand-meta strong,
    .global-print-brand-meta span {
        display: block;
    }
    .global-print-brand-main strong {
        color: #172033;
        font-size: 11px;
    }
    .global-print-brand-main small {
        margin-top: 2px;
        color: #667085;
        font-size: 7px;
    }
    .global-print-brand-meta {
        text-align: right;
    }
    .global-print-brand-meta strong {
        color: #172033;
        font-size: 10px;
    }
    .global-print-brand-meta span {
        margin-top: 3px;
        color: #667085;
        font-size: 7px;
    }
}


/* =====================================================================
   Phase 10.2 — Deployment & Managed Mail Hardening
   ===================================================================== */

.managed-mail-status-panel,
.system-mail-status-panel,
.service-access-panel,
.system-mail-config-form,
.system-mail-test-card,
.system-mail-lock-card {
    border-radius: 22px;
}

.managed-mail-status-grid,
.system-mail-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 0 16px 16px;
}

.managed-mail-status-card {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid #e4e9ee;
    border-radius: 13px;
    background: linear-gradient(180deg,#fff,#fbfcfd);
}

.managed-mail-status-card > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf8f5;
    color: #0f766e;
}

.managed-mail-status-card > span svg {
    width: 18px;
    height: 18px;
}

.managed-mail-status-card small,
.managed-mail-status-card strong,
.managed-mail-status-card p {
    display: block;
}

.managed-mail-status-card small {
    color: #8a95a4;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.managed-mail-status-card strong {
    margin-top: 4px;
    color: #26364b;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.managed-mail-status-card p {
    margin: 4px 0 0;
    color: #7b8797;
    font-size: 7.7px;
    line-height: 1.45;
}

.managed-mail-lock-note {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    margin: 0 16px 16px;
    padding: 11px 12px;
    border: 1px solid #d7e9e2;
    border-radius: 12px;
    background: #f5fbf9;
    color: #27695f;
}

.managed-mail-lock-note > svg {
    width: 19px;
    height: 19px;
    margin-top: 1px;
}

.managed-mail-lock-note strong,
.managed-mail-lock-note span {
    display: block;
}

.managed-mail-lock-note strong {
    font-size: 9px;
}

.managed-mail-lock-note span {
    margin-top: 3px;
    color: #66827c;
    font-size: 7.8px;
    line-height: 1.45;
}

.system-mail-hero {
    margin-bottom: 14px;
}

.system-mail-lock-state {
    min-width: 210px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    color: #fff;
}

.system-mail-lock-state > svg {
    width: 21px;
    height: 21px;
}

.system-mail-lock-state strong,
.system-mail-lock-state small {
    display: block;
}

.system-mail-lock-state strong {
    font-size: 9px;
    font-weight: 900;
}

.system-mail-lock-state small {
    margin-top: 3px;
    font-size: 7.5px;
    opacity: .75;
}

.system-mail-lock-state.is-unlocked {
    background: rgba(16,185,129,.16);
}

.service-access-form {
    padding: 0 16px 16px;
}

.service-access-form .managed-mail-lock-note {
    margin: 10px 0 0;
}

.system-mail-summary-grid > div {
    padding: 11px 12px;
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    background: #fbfcfd;
}

.system-mail-summary-grid span,
.system-mail-summary-grid strong {
    display: block;
}

.system-mail-summary-grid span {
    color: #8c97a6;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.system-mail-summary-grid strong {
    margin-top: 4px;
    color: #26364b;
    font-size: 9.5px;
    overflow-wrap: anywhere;
}

.system-mail-config-form {
    margin-top: 14px;
}

.system-mail-mode-panel {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #e2e8ed;
    border-radius: 14px;
    background: #fbfcfd;
}

.system-mail-mode-panel[hidden] {
    display: none !important;
}

.system-mail-mode-head {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 12px;
}

.system-mail-mode-head > svg {
    width: 20px;
    height: 20px;
    color: #0f766e;
}

.system-mail-mode-head strong,
.system-mail-mode-head span {
    display: block;
}

.system-mail-mode-head strong {
    color: #2b3b4f;
    font-size: 10px;
}

.system-mail-mode-head span {
    margin-top: 3px;
    color: #7b8797;
    font-size: 7.8px;
    line-height: 1.45;
}

.system-mail-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 14px;
}

.system-mail-test-card,
.system-mail-lock-card {
    padding: 16px;
}

.system-mail-test-card h3,
.system-mail-lock-card h3 {
    margin: 10px 0 5px;
    color: #27364b;
    font-size: 12px;
}

.system-mail-test-card p,
.system-mail-lock-card p {
    margin: 0 0 11px;
    color: #7c8796;
    font-size: 8px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .managed-mail-status-grid,
    .system-mail-summary-grid {
        grid-template-columns: 1fr;
    }

    .system-mail-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .system-mail-lock-state {
        width: 100%;
        min-width: 0;
    }
}