/* ================================================================
   Prabhat Book Depo ERP — Professional UI (Top Navbar, Full Width)
   ================================================================ */

:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", monospace;
    --radius: 6px;
    --bg: #f8fafc;
    --card: #ffffff;
    --foreground: #0f172a;
    --muted: #64748b;
    --muted-bg: #f1f5f9;
    --border: #e2e8f0;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-fg: #ffffff;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --ring: rgba(37,99,235,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --navbar-h: 56px;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--foreground);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}
body.modal-open{overflow:hidden}

h1{font-size:26px;line-height:1.2;font-weight:800;letter-spacing:0}
h2{font-size:20px;line-height:1.25;font-weight:750;letter-spacing:0}
h3{font-size:15px;line-height:1.35;font-weight:700;letter-spacing:0}
.skip-link{
    position:fixed;left:12px;top:8px;z-index:1000;
    transform:translateY(-140%);
    background:var(--foreground);color:#fff;
    padding:8px 12px;border-radius:var(--radius);
    font-weight:700;font-size:13px;
}
.skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:2px;}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar{
    position:sticky;top:0;z-index:100;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}
.navbar-inner{
    display:flex;
    align-items:center;
    height:var(--navbar-h);
    padding:0 20px;
    max-width:1600px;
    margin:0 auto;
    gap:8px;
}
.navbar-left{display:flex;align-items:center;gap:12px;}
.navbar-brand{
    display:flex;align-items:center;gap:8px;
    font-size:16px;font-weight:800;color:var(--foreground);
    letter-spacing:-0.02em;white-space:nowrap;
    margin-right:16px;
}
.brand-icon{
    width:28px;height:28px;
    background:#fff var(--brand-logo, url('/images/logo.jpeg')) center/cover no-repeat;
    border-radius:6px;flex-shrink:0;
    border:1px solid rgba(14,165,233,0.28);
    box-shadow:0 4px 12px rgba(14,165,233,0.16);
}
.navbar-nav{
    display:flex;align-items:center;gap:2px;
    flex:1;
}
.inline-form{display:inline;}
.inline-grid-form{
    display:grid;
    grid-template-columns:minmax(140px, 1fr) minmax(110px, auto) auto;
    gap:6px;
    align-items:center;
}
.inline-grid-form input,.inline-grid-form select{
    height:32px;
    padding:0 8px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
}
.navbar-right{
    display:flex;align-items:center;gap:10px;
    margin-left:auto;
}
.user-badge{
    font-size:12px;font-weight:600;
    background:var(--muted-bg);color:var(--muted);
    padding:4px 10px;border-radius:20px;
}

/* Nav Links */
.nav-link{
    display:inline-flex;align-items:center;gap:4px;
    padding:6px 12px;
    font-size:13px;font-weight:500;
    color:var(--muted);
    border-radius:var(--radius);
    border:none;background:none;cursor:pointer;
    transition:all .15s;white-space:nowrap;
}
.nav-link:hover,.nav-link.active{
    color:var(--foreground);background:var(--muted-bg);
}
.nav-link.active{font-weight:600;color:var(--primary);}

/* Dropdowns */
.nav-dropdown{position:relative;}
.nav-dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:12px;
}
.dropdown-toggle::after{
    content:"";display:inline-block;
    width:0;height:0;margin-left:4px;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid currentColor;
    opacity:.6;
}
.dropdown-menu{
    display:none;position:absolute;top:calc(100% + 8px);left:0;
    margin-top:0;
    min-width:180px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    padding:4px;
    z-index:200;
}
.nav-dropdown.open .dropdown-menu{display:block;}
.dropdown-menu a{
    display:block;
    padding:8px 12px;
    font-size:13px;font-weight:500;
    color:var(--foreground);
    border-radius:4px;
    transition:background .1s;
}
.dropdown-menu a:hover{background:var(--muted-bg);}
.dropdown-menu a.active{color:var(--primary);font-weight:600;background:rgba(37,99,235,0.06);}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{display:block;}

/* Mobile toggle */
.nav-toggle{
    display:none;align-items:center;justify-content:center;
    width:36px;height:36px;border:1px solid var(--border);
    border-radius:var(--radius);background:#fff;cursor:pointer;
}
.nav-toggle:hover{background:var(--muted-bg);}

/* ================================================================
   MAIN CONTENT (full width)
   ================================================================ */
.main-content{
    min-height:calc(100vh - var(--navbar-h));
    padding:20px;
}
.page-container{
    max-width:1600px;
    margin:0 auto;
    display:flex;flex-direction:column;gap:20px;
}
.footer{
    max-width:1600px;
    margin:0 auto;
    padding:12px 20px 24px;
    display:flex;justify-content:space-between;gap:12px;
    color:var(--muted);
    font-size:12px;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:36px;
    padding:8px 14px;font-size:13px;font-weight:700;
    border-radius:var(--radius);border:1px solid transparent;
    cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .08s;
    white-space:nowrap;line-height:1.35;
    text-decoration:none;
    box-shadow:var(--shadow-sm);
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.btn svg{color:inherit;}
.btn.btn-primary,.btn-primary:visited{background:#2563eb;color:#fff;border-color:#2563eb;}
.btn.btn-primary:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8;box-shadow:var(--shadow);}
.btn.btn-secondary,.btn-secondary:visited{background:#334155;color:#fff;border-color:#334155;}
.btn.btn-secondary:hover{background:#1f2937;color:#fff;border-color:#1f2937;}
.btn.btn-success,.btn-success:visited{background:#15803d;color:#fff;border-color:#15803d;}
.btn.btn-success:hover{background:#166534;color:#fff;border-color:#166534;}
.btn.btn-danger,.btn-danger:visited{background:#dc2626;color:#fff;border-color:#dc2626;}
.btn.btn-danger:hover{background:#b91c1c;color:#fff;border-color:#b91c1c;}
.btn.btn-outline,.btn-outline:visited{
    background:#fff;
    color:#334155;
    border-color:#cbd5e1;
    box-shadow:none;
}
.btn.btn-outline:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8;}
.btn.btn-ghost,.btn-ghost:visited{
    background:transparent;
    color:#475569;
    border-color:transparent;
    box-shadow:none;
    padding:6px 10px;
}
.btn.btn-ghost:hover{background:#f1f5f9;color:#0f172a;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-lg{padding:12px 20px;font-size:15px;}
.btn-block{width:100%;}
.btn.disabled,.btn[disabled],.btn[aria-disabled="true"]{
    opacity:.55;
    pointer-events:none;
    box-shadow:none;
    transform:none;
}
.spinner{
    width:14px;height:14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================================
   CARDS / PANELS
   ================================================================ */
.panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.panel-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    background:var(--muted-bg);
}
.panel-header h2{font-size:13px;font-weight:700;color:var(--foreground);}
.panel-header a,.panel-header span{font-size:12px;color:var(--muted);font-weight:500;}
.panel-header a:hover{color:var(--primary);text-decoration:underline;}
.panel-header .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.panel-header .actions .btn:hover{text-decoration:none;}

/* ================================================================
   METRIC CARDS
   ================================================================ */
.metric-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
}
.metric-card{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);padding:18px 16px;
    box-shadow:var(--shadow-sm);
    border-left:3px solid var(--primary);
    transition:box-shadow .2s;
}
.metric-card:hover{box-shadow:var(--shadow);}
.metric-card:nth-child(2){border-left-color:#8b5cf6;}
.metric-card:nth-child(3){border-left-color:var(--success);}
.metric-card:nth-child(4){border-left-color:var(--warning);}
.metric-card span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.metric-card strong{display:block;font-size:24px;font-weight:800;color:var(--primary);margin-top:6px;font-variant-numeric:tabular-nums;}
.metric-card:nth-child(2) strong{color:#7c3aed;}
.metric-card:nth-child(3) strong{color:var(--success);}
.metric-card:nth-child(4) strong{color:var(--warning);}
.metric-card small{display:block;font-size:11px;color:var(--muted);margin-top:4px;}
.metric-card .trend-up{color:var(--success);}
.metric-card .trend-down{color:var(--danger);}
.segmented-control{
    display:inline-flex;align-items:center;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:3px;
    gap:2px;
}
.segmented-control a{
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    border-radius:4px;
}
.segmented-control a.active{background:var(--primary);color:#fff;}

/* ================================================================
   TABLES (full width, professional)
   ================================================================ */
.table-scroll-shell{width:100%;}
.table-scroll-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:8px 0;
    background:#fff;
}
.table-scroll-controls[hidden]{display:none;}
.table-scroll-label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}
.table-scroll-btn{
    width:30px;
    height:30px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    color:var(--foreground);
    cursor:pointer;
    font-weight:800;
}
.table-scroll-btn:hover{background:var(--muted-bg);}
.table-scroll-btn:disabled{opacity:.4;cursor:not-allowed;}
.table-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    position:relative;
    max-width:100%;
    scrollbar-gutter:stable;
}
.table-wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:18px;
    pointer-events:none;
    background:linear-gradient(to left, rgba(15,23,42,.10), rgba(15,23,42,0));
    opacity:.45;
}

table{width:100%;font-size:13px;border-collapse:collapse;}
.table-wrap table{min-width:960px;}
.table-wrap.table-wide table{min-width:1240px;}
caption{
    text-align:left;
    padding:10px 14px;
    font-size:12px;
    color:var(--muted);
    background:#fff;
}
table thead{background:var(--muted-bg);position:sticky;top:0;z-index:1;}
table th{
    padding:10px 14px;
    font-size:11px;font-weight:700;
    color:var(--muted);text-align:left;
    text-transform:uppercase;letter-spacing:.04em;
    white-space:nowrap;
    border-bottom:2px solid var(--border);
    user-select:none;
}
table td{
    padding:9px 14px;
    border-bottom:1px solid #f1f5f9;
    color:var(--foreground);
    vertical-align:middle;
    white-space:nowrap;
}
table tbody tr{transition:background .1s;}
table tbody tr:hover{background:#f8fafc;}
table tbody tr:nth-child(even){background:#fcfcfd;}
table tbody tr:nth-child(even):hover{background:#f0f4f8;}
table tbody tr:last-child td{border-bottom:none;}

th.right,td.right{
    text-align:right;
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
    font-size:12px;
}
th.center,td.center{
    text-align:center;
}
td.empty{
    text-align:center;color:var(--muted);
    padding:40px 14px;font-style:italic;
    background:#fff !important;
}
.row-link{color:var(--primary);font-weight:600;}
.row-link:hover{text-decoration:underline;}

/* ================================================================
   TOOLBAR (search, filter, actions)
   ================================================================ */
.toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    padding:10px 16px;
    border-bottom:1px solid var(--border);
    background:#fff;
}
.toolbar input,.toolbar select{
    height:34px;padding:0 10px;font-size:13px;
    border:1px solid var(--border);border-radius:var(--radius);
    background:#fff;transition:border-color .15s,box-shadow .15s;
}
.toolbar input:focus,.toolbar select:focus{
    outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px var(--ring);
}
.toolbar input[type="search"]{min-width:min(280px,100%);}
.toolbar input[type="date"]{width:130px;}
.toolbar .separator{width:1px;height:24px;background:var(--border);margin:0 4px;}
.toolbar-scroll-slot{
    display:flex;
    align-items:center;
}
.toolbar-scroll-slot .table-scroll-controls{
    padding:0;
    background:transparent;
}
.user-create-form{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.ledger-account-field{min-width:min(260px,100%);}

/* ================================================================
   PAGINATION
   ================================================================ */
.pager{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 16px;
    border-top:1px solid var(--border);
    font-size:12px;color:var(--muted);
    background:#fff;
}
.pager div{display:flex;gap:4px;}
.pager-links,.pager-size{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.pager-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:28px;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    color:var(--foreground);
    font-weight:700;
}
.pager-link:hover{background:var(--muted-bg);}
.pager-link.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.pager-link.disabled{opacity:.45;pointer-events:none;}
.pager-current{
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 8px;
    color:var(--foreground);
    font-weight:700;
}
.pager [aria-current="page"]{
    color:var(--foreground);
    font-weight:700;
}

/* ================================================================
   FORMS
   ================================================================ */
.form-stack{display:flex;flex-direction:column;gap:4px;}
.form-stack label{font-size:13px;font-weight:600;color:var(--foreground);margin-top:12px;}
.form-stack label:first-of-type{margin-top:0;}
.form-stack input,.form-stack select{
    width:100%;height:40px;padding:0 12px;font-size:14px;
    border:1px solid var(--border);border-radius:var(--radius);
    background:#fff;transition:border-color .15s,box-shadow .15s;
}
.form-stack input:focus,.form-stack select:focus{
    outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);
}
.form-stack input::placeholder{color:#94a3b8;}
.form-stack .btn{margin-top:18px;height:42px;font-size:14px;}
.form-stack span{font-size:12px;color:var(--danger);}

.form-group{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:14px;
}
.form-field{display:flex;flex-direction:column;gap:4px;position:relative;}
.form-field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.form-field input,.form-field select{
    height:36px;padding:0 10px;font-size:13px;
    border:1px solid var(--border);border-radius:var(--radius);
    background:#fff;transition:border-color .15s,box-shadow .15s;
}
.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);}
.form-field input[readonly]{background:var(--muted-bg);color:var(--muted);}
.lookup-results{
    position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-md);max-height:220px;overflow:auto;
}
.lookup-results button{
    width:100%;border:0;background:#fff;text-align:left;
    padding:8px 10px;display:flex;flex-direction:column;gap:2px;
    border-bottom:1px solid var(--border);cursor:pointer;
}
.lookup-results button:last-child{border-bottom:0;}
.lookup-results button:hover{background:var(--muted-bg);}
.lookup-results button strong{font-size:12px;color:var(--foreground);}
.lookup-results button span{font-size:12px;color:var(--muted);}
.lookup-results small,.lookup-empty{font-size:11px;color:var(--muted);}
.lookup-empty{padding:9px 10px;}

.validation-summary{
    padding:10px 14px;border-radius:var(--radius);
    border:1px solid #fecaca;background:#fef2f2;color:#991b1b;font-size:13px;
}
.validation-summary:empty{display:none;}
.field-validation-error{font-size:12px;color:var(--danger);}
.field-error{font-size:12px;color:var(--danger);font-weight:600;}
.field-hint{font-size:11px;color:var(--muted);font-weight:600;}
.input-validation-error{border-color:var(--danger)!important;}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-body{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    padding:20px;
}
.login-card{
    background:#fff;border-radius:10px;
    box-shadow:var(--shadow-lg);
    width:100%;max-width:380px;padding:32px 28px;
}
.login-brand{text-align:center;margin-bottom:24px;}
.login-brand::before{
    content:"";display:block;width:40px;height:40px;
    background:#fff var(--brand-logo, url('/images/logo.jpeg')) center/cover no-repeat;
    border-radius:8px;margin:0 auto 12px;
    border:1px solid rgba(14,165,233,0.28);
    box-shadow:0 8px 18px rgba(14,165,233,0.16);
}
.login-brand h1{font-size:18px;font-weight:800;color:var(--foreground);}
.login-brand p{font-size:12px;color:var(--muted);margin-top:2px;}
.login-foot{
    text-align:center;font-size:11px;color:var(--muted);
    margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert{
    padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;
    border:1px solid #fecaca;background:#fef2f2;color:#991b1b;
}
.alert-warning{border-color:#fed7aa;background:#fffbeb;color:#92400e;}
.alert-info{border-color:#bfdbfe;background:#eff6ff;color:#1e40af;}
.alert-success{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}

/* ================================================================
   QUICK ACTIONS
   ================================================================ */
.quick-actions{display:flex;flex-wrap:wrap;gap:8px;}

/* ================================================================
   DASHBOARD GRID
   ================================================================ */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px;
}

.dashboard-overview{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:18px 20px 20px;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(249,115,22,0.08), transparent 32%),
        #fff;
}
.dashboard-overview-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}
.dashboard-overview-copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-width:560px;
}
.dashboard-eyebrow{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    min-height:24px;
    padding:2px 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.dashboard-overview-copy h3{
    font-size:26px;
    line-height:1.15;
    font-weight:800;
    color:var(--foreground);
}
.dashboard-overview-copy p{
    font-size:13px;
    color:var(--muted);
    max-width:460px;
}
.dashboard-overview-pulse{
    display:grid;
    grid-template-columns:repeat(2, minmax(180px, 1fr));
    gap:12px;
    flex:1;
    min-width:min(100%, 380px);
}
.pulse-stat{
    min-height:118px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(255,255,255,0.92);
    box-shadow:var(--shadow-sm);
}
.pulse-stat span{
    display:block;
    font-size:11px;
    font-weight:800;
    color:var(--muted);
    letter-spacing:.04em;
    text-transform:uppercase;
}
.pulse-stat strong{
    display:block;
    margin-top:8px;
    font-size:26px;
    line-height:1.1;
    color:var(--foreground);
}
.pulse-stat small{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}
.dashboard-overview-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.dashboard-action-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-top:4px;
}
.dashboard-action-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:118px;
    padding:16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.26);
    color:#fff;
    position:relative;
    overflow:hidden;
    box-shadow:0 18px 30px rgba(15,23,42,0.10);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.dashboard-action-card::after{
    content:"";
    position:absolute;
    right:-20px;
    bottom:-28px;
    width:92px;
    height:92px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
}
.dashboard-action-card:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 34px rgba(15,23,42,0.15);
    filter:saturate(1.04);
}
.dashboard-action-card strong,
.dashboard-action-card small{
    position:relative;
    z-index:1;
}
.dashboard-action-card strong{
    font-size:16px;
    font-weight:800;
    letter-spacing:0;
}
.dashboard-action-card small{
    color:rgba(255,255,255,0.88);
    font-size:12px;
    line-height:1.45;
    text-transform:none;
}
.dashboard-action-icon{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.action-sale{
    background:linear-gradient(135deg, #2563eb, #1d4ed8);
}
.action-purchase{
    background:linear-gradient(135deg, #7c3aed, #6d28d9);
}
.action-receipt{
    background:linear-gradient(135deg, #0891b2, #0f766e);
}
.action-payment{
    background:linear-gradient(135deg, #ea580c, #c2410c);
}

.dashboard-metric-grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.dashboard-metric-card{
    position:relative;
    min-height:164px;
    border-left:none;
    padding-top:20px;
    overflow:hidden;
    isolation:isolate;
    --metric-accent: var(--primary);
    --metric-tint: rgba(37,99,235,0.10);
    --metric-border: rgba(37,99,235,0.18);
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    box-shadow:0 10px 24px rgba(15,23,42,0.06);
    transition:transform .18s ease, box-shadow .18s ease;
}
.dashboard-metric-card::after{
    content:"";
    position:absolute;
    right:-32px;
    bottom:-32px;
    width:96px;
    height:96px;
    border-radius:50%;
    background:var(--metric-tint);
}
.dashboard-metric-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.24), transparent 48%);
    pointer-events:none;
}
.dashboard-metric-card:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 28px rgba(15,23,42,0.10);
}
.dashboard-metric-card strong{
    color:var(--metric-accent);
}
.dashboard-metric-card small{
    margin-top:8px;
}
.metric-card-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}
.metric-card-label{
    font-size:12px;
    font-weight:700;
    color:color-mix(in srgb, var(--metric-accent) 42%, #475569);
    text-transform:uppercase;
    letter-spacing:0.06em;
}
.metric-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:14px;
    color:var(--metric-accent);
    background:linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.62)), var(--metric-tint);
    border:1px solid var(--metric-border);
    box-shadow:0 8px 20px rgba(15,23,42,0.06);
    flex-shrink:0;
}
.metric-card-icon svg{
    width:18px;
    height:18px;
}
.metric-books{
    --metric-accent:#2563eb;
    --metric-tint:rgba(37,99,235,0.14);
    --metric-border:rgba(37,99,235,0.20);
}
.metric-accounts{
    --metric-accent:#7c3aed;
    --metric-tint:rgba(124,58,237,0.14);
    --metric-border:rgba(124,58,237,0.20);
}
.metric-sales{
    --metric-accent:#0f9db7;
    --metric-tint:rgba(15,157,183,0.14);
    --metric-border:rgba(15,157,183,0.20);
}
.metric-stock{
    --metric-accent:#d97706;
    --metric-tint:rgba(217,119,6,0.14);
    --metric-border:rgba(217,119,6,0.20);
}

.create-book-callout{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 20px;
    border:1px solid #bfdbfe;
    border-radius:20px;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.22), transparent 34%),
        linear-gradient(135deg, #eff6ff 0%, #f8fbff 55%, #ffffff 100%);
    color:#1e3a8a;
    box-shadow:0 18px 30px -26px rgba(37,99,235,0.65);
    margin-bottom:6px;
}
.create-book-callout strong{
    display:block;
    font-size:14px;
    font-weight:800;
    margin-bottom:4px;
}
.create-book-callout span{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:#4c5f8a;
}
.create-book-callout-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(135deg, #dbeafe, #bfdbfe);
    color:#1d4ed8;
    flex-shrink:0;
}
.create-book-header{
    align-items:flex-end;
}
.create-book-eyebrow{
    display:inline-flex;
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#2563eb;
}
.create-book-subtitle{
    max-width:760px;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.create-book-header-badge{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.create-book-form{
    gap:18px;
}
.create-book-feature-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}
.create-book-feature-card{
    padding:16px 18px;
    border:1px solid rgba(148,163,184,0.24);
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow:var(--shadow-sm);
}
.create-book-feature-card span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#2563eb;
}
.create-book-feature-card strong{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    line-height:1.35;
    color:var(--foreground);
}
.create-book-feature-card small{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
}
.create-account-callout{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 20px;
    border:1px solid #c7d2fe;
    border-radius:20px;
    background:
        radial-gradient(circle at top right, rgba(14,165,233,0.20), transparent 34%),
        linear-gradient(135deg, #eef2ff 0%, #f8fbff 58%, #ffffff 100%);
    color:#312e81;
    box-shadow:0 18px 30px -26px rgba(79,70,229,0.45);
    margin-bottom:6px;
}
.create-account-callout strong{
    display:block;
    font-size:14px;
    font-weight:800;
    margin-bottom:4px;
}
.create-account-callout span{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:#59608f;
}
.create-account-callout-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color:#4338ca;
    flex-shrink:0;
}
.create-account-header{
    align-items:flex-end;
}
.create-account-eyebrow{
    display:inline-flex;
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#4338ca;
}
.create-account-subtitle{
    max-width:760px;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.create-account-header-badge{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.create-account-form{
    gap:18px;
}
.create-account-feature-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}
.create-account-feature-card{
    padding:16px 18px;
    border:1px solid rgba(148,163,184,0.24);
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow:var(--shadow-sm);
}
.create-account-feature-card span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#4338ca;
}
.create-account-feature-card strong{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    line-height:1.35;
    color:var(--foreground);
}
.create-account-feature-card small{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
}

.dashboard-visual-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(320px, 1fr);
    gap:16px;
}
.dashboard-chart-panel,
.dashboard-stock-panel{
    min-height:360px;
}
.dashboard-chart-panel .panel-header,
.dashboard-stock-panel .panel-header{
    align-items:flex-start;
}
.dashboard-chart-frame{
    height:304px;
    padding:16px 18px 18px;
}
.dashboard-chart-frame canvas,
.dashboard-stock-chart-wrap canvas{
    width:100% !important;
    height:100% !important;
}
.dashboard-stock-health{
    display:grid;
    grid-template-columns:minmax(200px, 260px) minmax(0, 1fr);
    gap:18px;
    align-items:center;
    padding:18px;
}
.dashboard-stock-chart-wrap{
    height:240px;
}
.dashboard-stock-legend{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.stock-health-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
}
.stock-health-item .dot{
    width:12px;
    height:12px;
    border-radius:50%;
    flex-shrink:0;
}
.stock-health-item strong{
    display:block;
    font-size:18px;
    line-height:1.1;
    color:var(--foreground);
}
.stock-health-item small{
    display:block;
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
}
.stock-health-item.critical .dot{background:#dc2626;}
.stock-health-item.low .dot{background:#f59e0b;}
.stock-health-item.healthy .dot{background:#16a34a;}

/* ================================================================
   REPORT GRID
   ================================================================ */
.report-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px;
}
.link-list{display:flex;flex-direction:column;}
.link-list a{
    padding:10px 16px;font-size:13px;font-weight:500;color:var(--foreground);
    border-bottom:1px solid var(--border);transition:all .12s;
}
.link-list a:last-child{border-bottom:none;}
.link-list a:hover{background:var(--muted-bg);color:var(--primary);padding-left:20px;}

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.page-header h2{font-size:18px;font-weight:700;letter-spacing:-0.02em;}
.page-header .actions{display:flex;gap:8px;}
.module-list-shell{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.module-list-hero{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) auto;
    gap:18px;
    padding:22px 24px;
    border:1px solid rgba(148,163,184,0.20);
    border-radius:24px;
    background:linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef4ff 100%);
    box-shadow:0 24px 40px -34px rgba(15,23,42,0.28);
}
.module-list-hero::after{
    content:"";
    position:absolute;
    top:-54px;
    right:-24px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(59,130,246,0.18), rgba(59,130,246,0));
    pointer-events:none;
}
.module-page-books .module-list-hero{
    background:linear-gradient(135deg, #ffffff 0%, #f6fbff 50%, #edf7ff 100%);
}
.module-page-books .module-list-hero::after{
    background:radial-gradient(circle, rgba(14,165,233,0.20), rgba(14,165,233,0));
}
.module-page-accounts .module-list-hero{
    background:linear-gradient(135deg, #ffffff 0%, #f8f7ff 50%, #eef2ff 100%);
}
.module-page-accounts .module-list-hero::after{
    background:radial-gradient(circle, rgba(79,70,229,0.18), rgba(79,70,229,0));
}
.module-page-authors .module-list-hero{
    background:linear-gradient(135deg, #ffffff 0%, #f5fcf7 50%, #eaf8ef 100%);
}
.module-page-authors .module-list-hero::after{
    background:radial-gradient(circle, rgba(22,163,74,0.18), rgba(22,163,74,0));
}
.module-page-account-groups .module-list-hero{
    background:linear-gradient(135deg, #ffffff 0%, #fffaf1 50%, #ffefdb 100%);
}
.module-page-account-groups .module-list-hero::after{
    background:radial-gradient(circle, rgba(217,119,6,0.18), rgba(217,119,6,0));
}
.module-page-receipts .module-list-hero,
.module-page-payments .module-list-hero,
.module-page-vouchers .module-list-hero,
.module-page-journal .module-list-hero{
    padding:16px 18px;
    border-color:rgba(56,189,248,0.24);
    background:linear-gradient(135deg, #f3fbff 0%, #e0f2fe 52%, #dbeafe 100%);
    box-shadow:0 20px 34px -32px rgba(14,116,144,0.22);
}
.module-page-receipts .module-list-hero::after,
.module-page-payments .module-list-hero::after,
.module-page-vouchers .module-list-hero::after,
.module-page-journal .module-list-hero::after{
    background:radial-gradient(circle, rgba(14,165,233,0.20), rgba(14,165,233,0));
}
.module-list-hero-copy{
    position:relative;
    z-index:1;
}
.module-list-eyebrow{
    display:inline-flex;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#2563eb;
}
.module-page-accounts .module-list-eyebrow{color:#4338ca;}
.module-page-authors .module-list-eyebrow{color:#15803d;}
.module-page-account-groups .module-list-eyebrow{color:#b45309;}
.module-page-receipts .module-list-eyebrow,
.module-page-payments .module-list-eyebrow,
.module-page-vouchers .module-list-eyebrow,
.module-page-journal .module-list-eyebrow{color:#0369a1;}
.module-list-hero-copy h2{
    margin:0;
    font-size:26px;
    line-height:1.1;
    letter-spacing:-0.03em;
    color:#020617;
}
.module-list-hero-copy p{
    max-width:720px;
    margin:10px 0 0;
    font-size:13px;
    line-height:1.7;
    color:var(--muted);
}
.module-page-receipts .module-list-hero-copy p,
.module-page-payments .module-list-hero-copy p,
.module-page-vouchers .module-list-hero-copy p,
.module-page-journal .module-list-hero-copy p{
    color:#334155;
}
.module-list-hero-actions{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.module-list-stats{
    position:relative;
    z-index:1;
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}
.module-list-stat-card{
    padding:16px 18px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:18px;
    background:rgba(255,255,255,0.86);
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow-sm);
}
.module-list-stat-card span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#2563eb;
}
.module-page-accounts .module-list-stat-card span{color:#4338ca;}
.module-page-authors .module-list-stat-card span{color:#15803d;}
.module-page-account-groups .module-list-stat-card span{color:#b45309;}
.module-page-receipts .module-list-stat-card span{color:#15803d;}
.module-page-payments .module-list-stat-card span{color:#b45309;}
.module-page-vouchers .module-list-stat-card span{color:#6d28d9;}
.module-page-journal .module-list-stat-card span{color:#1d4ed8;}
.module-list-stat-card strong{
    display:block;
    margin-bottom:6px;
    font-size:22px;
    line-height:1.15;
    color:var(--foreground);
}
.module-list-stat-card small{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
}
.module-list-panel-enhanced{
    border-radius:22px;
    border-color:rgba(148,163,184,0.22);
    box-shadow:0 22px 38px -34px rgba(15,23,42,0.35);
}
.module-page-authors .module-list-panel-enhanced{
    border-color:rgba(34,197,94,0.18);
    box-shadow:0 22px 38px -34px rgba(21,128,61,0.26);
}
.module-page-account-groups .module-list-panel-enhanced{
    border-color:rgba(245,158,11,0.22);
    box-shadow:0 22px 38px -34px rgba(180,83,9,0.25);
}
.module-page-receipts .module-list-panel-enhanced{
    border-color:rgba(34,197,94,0.22);
    box-shadow:0 22px 38px -34px rgba(21,128,61,0.25);
}
.module-page-payments .module-list-panel-enhanced{
    border-color:rgba(249,115,22,0.20);
    box-shadow:0 22px 38px -34px rgba(194,65,12,0.22);
}
.module-page-vouchers .module-list-panel-enhanced{
    border-color:rgba(139,92,246,0.22);
    box-shadow:0 22px 38px -34px rgba(109,40,217,0.22);
}
.module-page-journal .module-list-panel-enhanced{
    border-color:rgba(96,165,250,0.22);
    box-shadow:0 22px 38px -34px rgba(29,78,216,0.20);
}
.module-list-toolbar{
    padding:14px 18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.module-page-authors .module-list-toolbar{
    background:linear-gradient(180deg, rgba(245,252,247,0.98), rgba(255,255,255,0.96));
}
.module-page-account-groups .module-list-toolbar{
    background:linear-gradient(180deg, rgba(255,250,241,0.98), rgba(255,255,255,0.96));
}
.module-page-receipts .module-list-toolbar{
    background:linear-gradient(180deg, rgba(243,251,247,0.98), rgba(255,255,255,0.96));
}
.module-page-payments .module-list-toolbar{
    background:linear-gradient(180deg, rgba(255,248,241,0.98), rgba(255,255,255,0.96));
}
.module-page-vouchers .module-list-toolbar{
    background:linear-gradient(180deg, rgba(247,247,255,0.98), rgba(255,255,255,0.96));
}
.module-page-journal .module-list-toolbar{
    background:linear-gradient(180deg, rgba(244,251,255,0.98), rgba(255,255,255,0.96));
}
.module-list-toolbar input[type="search"]{
    min-width:min(320px,100%);
    background:#fff;
}
.module-list-toolbar .btn{
    min-height:34px;
}
.module-list-table-wrap{
    background:linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96));
}
.module-list-table-wrap table{
    background:transparent;
}
.module-list-table-wrap caption{
    padding:12px 16px;
    color:#64748b;
}
.module-list-table-wrap table thead{
    background:#edf2f7;
}
.module-page-books .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #eaf7ff, #edf6fb);
}
.module-page-accounts .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #eff2ff, #eef2f7);
}
.module-page-authors .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #ecfdf3, #dcfce7);
}
.module-page-account-groups .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #fff7ed, #ffedd5);
}
.module-page-receipts .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #ecfdf3, #dcfce7);
}
.module-page-payments .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #fff7ed, #ffedd5);
}
.module-page-vouchers .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #f5f3ff, #ede9fe);
}
.module-page-journal .module-list-table-wrap table thead{
    background:linear-gradient(180deg, #eff6ff, #dbeafe);
}
.module-list-table-wrap table tbody tr:hover{
    background:#f7fbff;
}
.module-page-accounts .module-list-table-wrap table tbody tr:hover{
    background:#f7f7ff;
}
.module-page-authors .module-list-table-wrap table tbody tr:hover{
    background:#f0fdf4;
}
.module-page-account-groups .module-list-table-wrap table tbody tr:hover{
    background:#fff7ed;
}
.module-page-receipts .module-list-table-wrap table tbody tr:hover{
    background:#f0fdf4;
}
.module-page-payments .module-list-table-wrap table tbody tr:hover{
    background:#fff7ed;
}
.module-page-vouchers .module-list-table-wrap table tbody tr:hover{
    background:#faf5ff;
}
.module-page-journal .module-list-table-wrap table tbody tr:hover{
    background:#eff6ff;
}
.module-list-table-wrap .row-link{
    font-weight:700;
}
.module-page-authors .module-list-table-wrap .row-link{color:#166534;}
.module-page-account-groups .module-list-table-wrap .row-link{color:#b45309;}
.module-page-receipts .module-list-table-wrap .row-link{color:#166534;}
.module-page-payments .module-list-table-wrap .row-link{color:#c2410c;}
.module-page-vouchers .module-list-table-wrap .row-link{color:#6d28d9;}
.module-page-journal .module-list-table-wrap .row-link{color:#1d4ed8;}
.module-list-panel-enhanced .pager{
    padding:12px 18px 16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
}

/* ================================================================
   ACCOUNTING WORKSPACE
   ================================================================ */
.accounting-page{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.accounting-hero{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) auto;
    gap:18px;
    padding:14px 18px 16px;
    border:1px solid rgba(56,189,248,0.24);
    border-radius:20px;
    box-shadow:0 18px 30px -28px rgba(14,116,144,0.18);
}
.accounting-hero::after{
    content:"";
    position:absolute;
    top:-72px;
    right:-28px;
    width:240px;
    height:240px;
    border-radius:50%;
    pointer-events:none;
}
.accounting-hero-receipt,
.accounting-hero-payment,
.accounting-hero-voucher,
.accounting-hero-ledger{
    background:linear-gradient(135deg, #f3fbff 0%, #e0f2fe 55%, #dbeafe 100%);
}
.accounting-hero-receipt::after,
.accounting-hero-payment::after,
.accounting-hero-voucher::after,
.accounting-hero-ledger::after{
    background:radial-gradient(circle, rgba(14,165,233,0.18), rgba(14,165,233,0));
}
.accounting-hero-copy,
.accounting-hero-badges{
    position:relative;
    z-index:1;
}
.accounting-hero-eyebrow{
    display:inline-flex;
    margin-bottom:4px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#0369a1;
}
.accounting-hero-copy h2{
    margin:0;
    font-size:24px;
    line-height:1.08;
    letter-spacing:-0.03em;
    color:#020617;
}
.accounting-hero-copy p{
    max-width:760px;
    margin:6px 0 0;
    font-size:12px;
    line-height:1.55;
    color:#334155;
}
.accounting-hero-badges{
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}
.accounting-page{
    gap:12px;
}
.accounting-feature-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}
.accounting-feature-card{
    padding:18px;
    border:1px solid rgba(148,163,184,0.22);
    border-radius:20px;
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow:var(--shadow-sm);
}
.accounting-feature-card span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#0f766e;
}
.accounting-feature-card strong{
    display:block;
    margin-bottom:8px;
    font-size:15px;
    line-height:1.42;
    color:var(--foreground);
}
.accounting-feature-card small{
    display:block;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
}
.accounting-switchboard{
    padding:18px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:22px;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    box-shadow:0 20px 36px -34px rgba(15,23,42,0.36);
}
.accounting-switchboard-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.accounting-switchboard-eyebrow{
    display:inline-flex;
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:#1d4ed8;
}
.accounting-switchboard-head h3{
    margin:0;
    font-size:18px;
    letter-spacing:-0.02em;
}
.accounting-switchboard-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}
.accounting-link{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:100px;
    padding:16px;
    border:1px solid rgba(148,163,184,0.20);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.accounting-link:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 28px -28px rgba(15,23,42,0.42);
}
.accounting-link strong{
    font-size:14px;
    line-height:1.35;
    color:var(--foreground);
}
.accounting-link small{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
}
.accounting-link.active{
    border-color:rgba(37,99,235,0.32);
    background:linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow:0 20px 34px -30px rgba(37,99,235,0.38);
}
.accounting-link[data-tone="receipt-list"]{border-top:4px solid #16a34a;}
.accounting-link[data-tone="receipt-create"]{border-top:4px solid #22c55e;}
.accounting-link[data-tone="payment-list"]{border-top:4px solid #ea580c;}
.accounting-link[data-tone="payment-create"]{border-top:4px solid #f59e0b;}
.accounting-link[data-tone="voucher-list"]{border-top:4px solid #7c3aed;}
.accounting-link[data-tone="voucher-create"]{border-top:4px solid #a855f7;}
.accounting-link[data-tone="journal-list"]{border-top:4px solid #2563eb;}
.accounting-link[data-tone="ledger"]{border-top:4px solid #0f9db7;}
.accounting-form-layout{
    gap:10px;
}
.accounting-form-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    padding-top:2px;
}
.accounting-entry-section{
    border-radius:18px;
    border-color:rgba(56,189,248,0.18);
    box-shadow:0 18px 30px -30px rgba(14,116,144,0.16);
}
.accounting-entry-section-receipt,
.accounting-entry-section-payment,
.accounting-entry-section-voucher{
    border-top:3px solid #38bdf8;
}
.accounting-entry-section .bill-section-header{
    padding:10px 14px;
    align-items:flex-start;
    background:linear-gradient(180deg, rgba(243,251,255,0.98), rgba(255,255,255,0.94));
}
.accounting-entry-section .bill-section-header > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.accounting-entry-section .bill-section-header h3{
    color:#020617;
}
.accounting-entry-section .bill-section-header p{
    margin:0;
    font-size:11px;
    line-height:1.4;
    color:#475569;
}
.accounting-entry-section .bill-section-body{
    padding:12px 14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.accounting-search-panel{
    border-radius:18px;
    border-color:rgba(56,189,248,0.20);
    box-shadow:0 18px 30px -30px rgba(14,116,144,0.16);
    overflow:visible !important;
}
.accounting-toolbar{
    gap:10px;
    align-items:flex-end;
    overflow:visible !important;
}
.accounting-toolbar .form-field{
    min-width:180px;
}
.accounting-toolbar .ledger-account-field{
    min-width:min(360px,100%);
    overflow:visible !important;
    position:relative;
}
.accounting-toolbar-actions{
    display:flex;
    align-items:flex-end;
}
.accounting-ledger-account-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:12px;
    padding:12px 14px;
    border:1px solid rgba(56,189,248,0.20);
    border-radius:18px;
    background:linear-gradient(135deg, #ffffff, #eff6ff);
    box-shadow:0 18px 28px -28px rgba(14,116,144,0.16);
}
.accounting-ledger-label{
    display:inline-flex;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#1d4ed8;
}
.accounting-ledger-account-copy h3{
    margin:0;
    font-size:20px;
    line-height:1.2;
    color:#020617;
}
.accounting-ledger-account-copy p{
    margin:4px 0 0;
    font-size:12px;
    line-height:1.6;
    color:#475569;
}
.accounting-ledger-badge-wrap{
    display:flex;
    align-items:flex-start;
}
.accounting-metric-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}
.accounting-metric-card{
    padding:12px 14px;
    border:1px solid rgba(56,189,248,0.16);
    border-radius:16px;
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow:0 12px 20px -20px rgba(14,116,144,0.14);
}
.accounting-metric-card span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#0369a1;
}
.accounting-metric-card strong{
    display:block;
    margin-bottom:6px;
    font-size:20px;
    line-height:1.1;
    color:#020617;
}
.accounting-metric-card small{
    display:block;
    font-size:11px;
    line-height:1.55;
    color:#475569;
}
.accounting-metric-card-strong{
    background:linear-gradient(180deg, #eff6ff, #dbeafe);
    border-color:rgba(56,189,248,0.24);
}
.accounting-ledger-table-panel{
    border-radius:18px;
    border-color:rgba(56,189,248,0.20);
    box-shadow:0 18px 28px -28px rgba(14,116,144,0.14);
}
.accounting-opening-row{
    font-weight:600;
    background:#f8fafc;
}
.accounting-closing-row{
    font-weight:700;
    background:#eff6ff;
}
.accounting-balance-cell{
    font-weight:700;
}
.accounting-ledger-chart{
    border-radius:18px;
    border-color:rgba(56,189,248,0.20);
    box-shadow:0 18px 28px -28px rgba(14,116,144,0.14);
}
.accounting-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:56px 24px;
    border:1px dashed rgba(148,163,184,0.40);
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    color:#475569;
    text-align:center;
}
.accounting-empty-state strong{
    font-size:18px;
    color:#020617;
}
.accounting-empty-state p{
    max-width:520px;
    margin:0;
    font-size:13px;
    line-height:1.7;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb{
    display:flex;align-items:center;gap:6px;
    font-size:12px;color:var(--muted);margin-bottom:6px;
}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb span:last-child{color:var(--foreground);font-weight:600;}

/* ================================================================
   BADGE
   ================================================================ */
.badge{
    display:inline-flex;align-items:center;
    padding:2px 8px;font-size:11px;font-weight:600;
    border-radius:20px;background:var(--muted-bg);color:var(--muted);
}
.badge-primary{background:#dbeafe;color:#1e40af;}
.badge-success{background:#dcfce7;color:#166534;}
.badge-warning{background:#fef3c7;color:#92400e;}
.badge-danger{background:#fecaca;color:#991b1b;}

/* ================================================================
   BILL ENTRY FORM
   ================================================================ */
.bill-form{display:flex;flex-direction:column;gap:16px;}
.bill-section{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;
}
.bill-section-header{
    padding:10px 16px;border-bottom:1px solid var(--border);
    background:var(--muted-bg);display:flex;align-items:center;justify-content:space-between;
}
.bill-section-header h3{font-size:13px;font-weight:700;}
.create-book-section{
    border-radius:18px;
    border-color:rgba(148,163,184,0.22);
    box-shadow:0 24px 36px -32px rgba(15,23,42,0.28);
}
.create-book-section .bill-section-header{
    padding:14px 18px;
    background:linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.9));
    align-items:flex-start;
}
.create-book-section .bill-section-header > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.create-book-section .bill-section-header h3{
    font-size:14px;
}
.create-book-section .bill-section-header p{
    margin:0;
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
}
.create-book-section .bill-section-body{
    padding:18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.create-book-section-identity{
    border-top:4px solid #2563eb;
}
.create-book-section-pricing{
    border-top:4px solid #0f9db7;
}
.create-book-section-stock{
    border-top:4px solid #d97706;
}
.create-account-section{
    border-radius:18px;
    border-color:rgba(148,163,184,0.22);
    box-shadow:0 24px 36px -32px rgba(15,23,42,0.28);
}
.create-account-section .bill-section-header{
    padding:14px 18px;
    background:linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.9));
    align-items:flex-start;
}
.create-account-section .bill-section-header > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.create-account-section .bill-section-header h3{
    font-size:14px;
}
.create-account-section .bill-section-header p{
    margin:0;
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
}
.create-account-section .bill-section-body{
    padding:18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
}
.create-account-section-identity{
    border-top:4px solid #4338ca;
}
.create-account-section-contact{
    border-top:4px solid #0f9db7;
}
.create-account-section-credit{
    border-top:4px solid #d97706;
}
.bill-section-body{padding:16px;}
.bill-section.account-lookup-section{
    position:relative;
    overflow:visible;
}
.bill-section.account-lookup-section:focus-within{
    z-index:40;
}
.bill-section.account-lookup-section .bill-section-body{
    overflow:visible;
}
.bill-section.account-lookup-section .form-field{
    z-index:1;
}
.bill-section.account-lookup-section .form-field:focus-within{
    z-index:2;
}
.bill-section.account-lookup-section .lookup-results{
    z-index:80;
}
.bill-section.book-publisher-section{
    position:relative;
    overflow:visible;
}
.bill-section.book-publisher-section:focus-within{
    z-index:40;
}
.bill-section.book-publisher-section .bill-section-body{
    overflow:visible;
}
.publisher-lookup-field{
    position:relative;
    z-index:2;
    overflow:visible;
}
.publisher-lookup-field .lookup-results{
    z-index:80;
}
.create-book-field{
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 12px 24px -28px rgba(15,23,42,0.35);
    overflow:visible;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.create-book-field:hover{
    border-color:#cbd5e1;
    transform:translateY(-1px);
}
.create-book-field:focus-within{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(37,99,235,0.10);
    z-index:12;
}
.create-book-field label{
    margin-bottom:6px;
    color:#334155;
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
}
.create-book-field input,
.create-book-field select{
    background:#f8fafc;
    border-color:#dbe5f1;
}
.create-book-field input:focus,
.create-book-field select:focus{
    background:#fff;
}
.create-book-field-wide{
    background:linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.98));
}
.create-account-field{
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 12px 24px -28px rgba(15,23,42,0.35);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.create-account-field:hover{
    border-color:#cbd5e1;
    transform:translateY(-1px);
}
.create-account-field:focus-within{
    border-color:#a5b4fc;
    box-shadow:0 0 0 4px rgba(79,70,229,0.10);
}
.create-account-field label{
    margin-bottom:6px;
    color:#334155;
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
}
.create-account-field input,
.create-account-field select{
    background:#f8fafc;
    border-color:#dbe5f1;
}
.create-account-field input:focus,
.create-account-field select:focus{
    background:#fff;
}
.create-account-field-wide{
    background:linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.98));
}
.field-note{
    display:block;
    margin-top:2px;
    font-size:11px;
    line-height:1.5;
    color:#b45309;
    font-weight:600;
}
.bill-totals{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;color:var(--muted);}
.bill-totals .net{color:var(--success);font-size:14px;font-weight:800;}
.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:4px;
    flex-wrap:wrap;
}
.book-search-results{
    border:1px solid var(--border);border-radius:var(--radius);
    max-height:180px;overflow-y:auto;margin-top:10px;
}
.book-search-results tr.lookup-row{cursor:pointer;}
.book-search-results tr.lookup-row:hover,
.book-search-results tr.selected{background:#eff6ff;}
.stock-warning{color:var(--warning)!important;font-weight:800;}
.stock-danger{color:var(--danger)!important;font-weight:800;}
.btn-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;color:var(--muted);
    cursor:pointer;font-weight:800;
}

/* ================================================================
   SALE LEGACY WORKSPACE
   ================================================================ */
.sale-legacy-page{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#020617;
}
.sale-legacy-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:6px 2px 2px;
}
.sale-legacy-header h2{
    margin:0;
    font-size:20px;
    line-height:1.05;
    color:#020617;
}
.sale-legacy-header p{
    margin:3px 0 0;
    font-size:11px;
    line-height:1.35;
    color:#334155;
}
.sale-legacy-topband{
    display:grid;
    grid-template-columns:220px minmax(0, 1.1fr) minmax(0, 1fr) 170px;
    gap:8px;
}
.sale-legacy-panel{
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#ffffff;
    overflow:hidden;
}
.sale-legacy-panel-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#0f172a;
}
.sale-legacy-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 8px;
    border-bottom:1px solid #cfe8ff;
    background:linear-gradient(180deg, #e0f2fe, #f0f9ff);
}
.sale-legacy-meta > .sale-legacy-panel-title{
    display:block;
    padding:6px 8px;
    border-bottom:1px solid #cfe8ff;
    background:linear-gradient(180deg, #e0f2fe, #f0f9ff);
}
.sale-legacy-meta-grid{
    display:grid;
    grid-template-columns:86px minmax(0, 1fr);
    gap:4px 6px;
    padding:8px;
    align-items:center;
}
.sale-legacy-meta-grid label,
.sale-legacy-party-grid label{
    font-size:11px;
    font-weight:600;
    color:#0f172a;
}
.sale-legacy-meta-grid input,
.sale-legacy-meta-grid select,
.sale-legacy-party-grid input,
.sale-legacy-party-grid textarea{
    height:28px;
    padding:4px 7px;
    font-size:12px;
    color:#020617;
    border:1px solid #bfdbfe;
    border-radius:6px;
    background:#fff;
}
.sale-legacy-party-grid{
    display:grid;
    grid-template-columns:88px minmax(0, 1fr);
    gap:4px 6px;
    padding:8px;
    align-items:start;
}
.sale-legacy-party-grid textarea{
    min-height:48px;
    height:48px;
    resize:none;
}
.sale-legacy-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:8px;
    background:#f8fbff;
}
.sale-legacy-mini-totals{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-top:2px;
    font-size:11px;
    color:#0f172a;
}
.sale-legacy-mini-totals strong{
    font-size:13px;
    color:#020617;
}
.sale-legacy-lines{
    min-height:420px;
    display:flex;
    flex-direction:column;
}
.sale-legacy-grid-note{
    font-size:11px;
    color:#475569;
}
.sale-legacy-table-wrap{
    max-height:calc(100vh - 360px);
    min-height:320px;
    overflow:auto;
}
.sale-legacy-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}
.sale-legacy-table th,
.sale-legacy-table td{
    padding:5px 6px;
    border-bottom:1px solid #e2e8f0;
    vertical-align:middle;
}
.sale-legacy-table thead{
    position:sticky;
    top:0;
    z-index:1;
    background:#e0f2fe;
}
.sale-legacy-table th{
    font-size:11px;
    font-weight:700;
    color:#020617;
    white-space:nowrap;
}
.sale-legacy-table tbody tr{
    cursor:pointer;
}
.sale-legacy-table tbody tr:hover,
.sale-legacy-table tbody tr.selected{
    background:#f0f9ff;
}
.sale-legacy-table input{
    width:100%;
    min-width:56px;
    height:26px;
    padding:3px 6px;
    font-size:12px;
    border:1px solid #cbd5e1;
    border-radius:5px;
    color:#020617;
}
.sale-legacy-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#ffffff;
}
.sale-legacy-summary{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}
.sale-legacy-summary div{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:90px;
}
.sale-legacy-summary span{
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#475569;
}
.sale-legacy-summary strong{
    font-size:15px;
    line-height:1.1;
    color:#020617;
}
.sale-legacy-footer-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}
.sale-browser-backdrop{
    position:fixed;
    inset:0;
    z-index:470;
    background:rgba(15,23,42,0.32);
}
.sale-browser{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:480;
    width:min(1100px, calc(100vw - 40px));
    max-height:calc(100vh - 48px);
    display:flex;
    flex-direction:column;
    border:1px solid #94a3b8;
    border-radius:10px;
    background:#fff;
    box-shadow:0 30px 60px -30px rgba(15,23,42,0.5);
}
.sale-browser-book{
    width:min(1180px, calc(100vw - 40px));
}
.sale-browser-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-bottom:1px solid #cfe8ff;
    background:linear-gradient(180deg, #e0f2fe, #f0f9ff);
}
.sale-browser-head h3{
    margin:0;
    font-size:14px;
    color:#020617;
}
.sale-browser-close{
    position:relative;
    width:28px;
    height:28px;
    border:1px solid #cbd5e1;
    border-radius:6px;
    background:#fff;
    cursor:pointer;
}
.sale-browser-close::before,
.sale-browser-close::after{
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    top:13px;
    height:2px;
    background:#334155;
}
.sale-browser-close::before{transform:rotate(45deg);}
.sale-browser-close::after{transform:rotate(-45deg);}
.sale-browser-toolbar{
    display:flex;
    gap:8px;
    padding:8px 10px;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
}
.sale-browser-toolbar input{
    height:30px;
    padding:4px 8px;
    font-size:12px;
    border:1px solid #cbd5e1;
    border-radius:6px;
    color:#020617;
}
.sale-browser-toolbar-books{
    grid-template-columns:minmax(0, 1.7fr) minmax(0, 1.1fr) auto;
    display:grid;
    align-items:center;
}
.sale-browser-table-wrap{
    overflow:auto;
    max-height:calc(100vh - 220px);
}
.sale-browser-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}
.sale-browser-table th,
.sale-browser-table td{
    padding:6px 8px;
    border-bottom:1px solid #e2e8f0;
    vertical-align:top;
}
.sale-browser-table thead{
    position:sticky;
    top:0;
    z-index:1;
    background:#eff6ff;
}
.sale-browser-table th{
    font-size:11px;
    font-weight:700;
    color:#020617;
    white-space:nowrap;
}
.sale-browser-table tbody tr{
    cursor:pointer;
}
.sale-browser-table tbody tr:hover,
.sale-browser-table tbody tr.selected{
    background:#f0f9ff;
}
.sale-legacy-inline-actions{
    display:flex;
    gap:8px;
}
.sale-legacy-view-mode .sale-legacy-panel{
    box-shadow:inset 0 0 0 1px #bae6fd;
}
.sale-browser-qty{
    width:72px;
    text-align:right;
}
.sale-browser-add{
    min-width:56px;
}
.sale-browser-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:8px 10px;
    border-top:1px solid #e2e8f0;
    background:#f8fafc;
}
.sale-legacy-page .empty{
    color:#64748b;
    text-align:center;
}
.btn-icon:hover{background:#fef2f2;color:var(--danger);border-color:#fecaca;}

/* ================================================================
   SALE & LEDGER SPLIT LAYOUT SIDEBAR POPUPS
   ================================================================ */
.sale-split-layout,
.ledger-split-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}
.sale-split-layout .sale-main-content,
.ledger-split-layout .ledger-main-content {
    width: 100%;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sale-split-layout.popup-active .sale-main-content,
.ledger-split-layout.popup-active .ledger-main-content {
    width: 50%;
}

/* Disable backdrop overlay when in split layout */
.sale-split-layout .sale-browser-backdrop,
.ledger-split-layout .sale-browser-backdrop {
    display: none !important;
}

/* Prevent scroll freeze on body in split layout */
body.modal-open:has(.sale-split-layout),
body.modal-open:has(.ledger-split-layout) {
    overflow: auto !important;
}

/* Format active popup in split layout to look like sidebar */
.sale-split-layout.popup-active .sale-browser:not([hidden]),
.ledger-split-layout.popup-active .sale-browser:not([hidden]) {
    position: sticky !important;
    top: 16px !important;
    left: auto !important;
    transform: none !important;
    width: 50% !important;
    min-width: 520px !important;
    max-height: calc(100vh - 48px) !important;
    box-shadow: 0 10px 25px -5px rgba(15,23,42,0.12), 0 8px 10px -6px rgba(15,23,42,0.12) !important;
    border: 1px solid #cbd5e1 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
}

/* Browser table — fits in sidebar without horizontal scroll */
.sale-split-layout .sale-browser .sale-browser-table-wrap,
.ledger-split-layout .sale-browser .sale-browser-table-wrap {
    max-height: calc(100vh - 200px);
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
.sale-split-layout .sale-browser table.sale-browser-table,
.ledger-split-layout .sale-browser table.sale-browser-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
}
/* Column widths for Book browser */
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(1),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(1) { width: 52px; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(2),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(2) { width: auto; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(3),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(3) { width: 18%; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(4),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(4) { width: 44px; text-align:right; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(5),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(5) { width: 56px; text-align:right; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(6),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(6) { width: 44px; }
.sale-split-layout #bookPopup .sale-browser-table th:nth-child(7),
.sale-split-layout #bookPopup .sale-browser-table td:nth-child(7) { width: 62px; }

/* Column widths for Ledger Account sidebar */
.ledger-split-layout #ledgerAccountPopup .sale-browser-table th:nth-child(1),
.ledger-split-layout #ledgerAccountPopup .sale-browser-table td:nth-child(1) { width: 90px; }
.ledger-split-layout #ledgerAccountPopup .sale-browser-table th:nth-child(2),
.ledger-split-layout #ledgerAccountPopup .sale-browser-table td:nth-child(2) { width: auto; }
.ledger-split-layout #ledgerAccountPopup .sale-browser-table th:nth-child(3),
.ledger-split-layout #ledgerAccountPopup .sale-browser-table td:nth-child(3) { width: 90px; }
.ledger-split-layout #ledgerAccountPopup .sale-browser-table th:nth-child(4),
.ledger-split-layout #ledgerAccountPopup .sale-browser-table td:nth-child(4) { width: 100px; }
.ledger-split-layout #ledgerAccountPopup .sale-browser-table th:nth-child(5),
.ledger-split-layout #ledgerAccountPopup .sale-browser-table td:nth-child(5) { width: 100px; }

.sale-split-layout .sale-browser table.sale-browser-table th,
.sale-split-layout .sale-browser table.sale-browser-table td,
.ledger-split-layout .sale-browser table.sale-browser-table th,
.ledger-split-layout .sale-browser table.sale-browser-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Qty inline input — compact */
.sale-browser-qty-inline {
    width: 52px;
    height: 26px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: right;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #020617;
}
.sale-browser-qty-inline:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}
/* Keyboard shortcut badge */
.kb-hint {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #64748b;
}
.kb-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 3px;
    color: #334155;
    line-height: 1.5;
}

/* Toolbars wrapping behaviour */
.sale-split-layout .sale-browser-toolbar-books,
.ledger-split-layout .sale-browser-toolbar-books {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
}
.sale-split-layout .sale-browser-toolbar-books input,
.ledger-split-layout .sale-browser-toolbar-books input {
    flex: 1 1 130px !important;
}
.sale-split-layout .sale-browser-toolbar-books button,
.ledger-split-layout .sale-browser-toolbar-books button {
    flex: 0 0 auto !important;
}

.sale-split-layout .sale-browser-toolbar,
.ledger-split-layout .sale-browser-toolbar {
    display: flex !important;
    gap: 6px !important;
    padding: 8px 10px !important;
}
.sale-split-layout .sale-browser-toolbar input,
.ledger-split-layout .sale-browser-toolbar input {
    flex: 1 1 auto !important;
}
.sale-split-layout .sale-browser-toolbar button,
.ledger-split-layout .sale-browser-toolbar button {
    flex: 0 0 auto !important;
}

/* ================================================================
   PLACEHOLDER / EMPTY STATE
   ================================================================ */
.placeholder-section{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:60px 20px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
}
.placeholder-section .icon-circle{
    width:52px;height:52px;background:var(--muted-bg);border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.placeholder-section .icon-circle svg{width:22px;height:22px;color:var(--muted);}
.placeholder-section h3{font-size:15px;font-weight:700;margin-bottom:6px;}
.placeholder-section p{font-size:13px;color:var(--muted);max-width:340px;margin-bottom:16px;}
.empty-state{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:16px;
    color:var(--muted);
    font-style:normal;
}
.empty-state strong{font-size:14px;color:var(--foreground);}
.empty-state span{font-size:12px;}
.empty-icon{
    width:32px;height:32px;border-radius:50%;
    background:var(--muted-bg);
    border:1px solid var(--border);
    position:relative;
}
.empty-icon::before,.empty-icon::after{
    content:"";position:absolute;left:9px;right:9px;height:2px;
    background:#94a3b8;border-radius:2px;
}
.empty-icon::before{top:11px;}
.empty-icon::after{top:18px;}

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

/* ================================================================
   TOASTS / MODALS
   ================================================================ */
.toast-region{
    position:fixed;right:18px;top:18px;z-index:500;
    display:flex;flex-direction:column;gap:10px;
    width:min(360px, calc(100vw - 24px));
}
.toast{
    display:grid;grid-template-columns:18px 1fr 24px;gap:10px;align-items:start;
    padding:12px;
    background:#fff;
    border:1px solid var(--border);
    border-left:4px solid var(--primary);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    animation:toast-in .18s ease-out;
}
.toast.is-leaving{opacity:0;transform:translateY(8px);transition:all .18s ease-in;}
.toast-success{border-left-color:var(--success);}
.toast-error{border-left-color:var(--danger);}
.toast-warning{border-left-color:var(--warning);}
.toast-info{border-left-color:var(--primary);}
.toast-icon{
    width:12px;height:12px;border-radius:50%;
    margin-top:4px;background:var(--primary);
}
.toast-success .toast-icon{background:var(--success);}
.toast-error .toast-icon{background:var(--danger);}
.toast-warning .toast-icon{background:var(--warning);}
.toast-body{font-size:13px;font-weight:600;color:var(--foreground);}
.toast-close,.modal-close{
    width:24px;height:24px;border:0;background:transparent;
    border-radius:var(--radius);cursor:pointer;position:relative;
}
.toast-close:hover,.modal-close:hover{background:var(--muted-bg);}
.toast-close::before,.toast-close::after,.modal-close::before,.modal-close::after{
    content:"";position:absolute;left:7px;right:7px;top:11px;height:2px;
    background:var(--muted);border-radius:2px;
}
.toast-close::before,.modal-close::before{transform:rotate(45deg);}
.toast-close::after,.modal-close::after{transform:rotate(-45deg);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.modal-backdrop{
    position:fixed;inset:0;z-index:450;
    background:rgba(15,23,42,.45);
}
.modal-shell{
    position:fixed;inset:0;z-index:460;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.modal-panel{
    width:min(420px,100%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
}
.modal-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border-bottom:1px solid var(--border);
}
.modal-header h2{font-size:15px;}
.modal-message{padding:16px;color:var(--muted);font-size:14px;}
.modal-actions{
    padding:12px 16px;
    display:flex;justify-content:flex-end;gap:8px;
    border-top:1px solid var(--border);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:900px){
    .navbar-nav{
        display:none;position:absolute;
        top:var(--navbar-h);left:0;right:0;
        background:#fff;border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-md);
        flex-direction:column;padding:8px;
        z-index:200;
    }
    .navbar-nav.open{display:flex;}
    .nav-toggle{display:flex;}
    .nav-dropdown::after{display:none;}
    .nav-dropdown .dropdown-menu{
        position:static;box-shadow:none;border:none;
        padding-left:12px;margin-top:0;width:100%;
    }
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu{display:block;}
    .dropdown-toggle::after{display:none;}
    .navbar-right{margin-left:auto;}
    .user-badge{display:none;}
    .dashboard-grid{grid-template-columns:1fr;}
    .dashboard-action-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .metric-grid{grid-template-columns:repeat(2,1fr);}
    .create-book-feature-strip{grid-template-columns:1fr;}
    .create-account-feature-strip{grid-template-columns:1fr;}
    .accounting-feature-strip{grid-template-columns:1fr;}
    .accounting-switchboard-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .accounting-hero{grid-template-columns:1fr;}
    .accounting-hero-badges{justify-content:flex-start;}
    .accounting-metric-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .accounting-ledger-account-card{grid-template-columns:1fr;}
    .module-list-hero{grid-template-columns:1fr;}
    .module-list-stats{grid-template-columns:1fr;}
    .module-list-hero-actions{justify-content:flex-start;}
    .dashboard-visual-grid{grid-template-columns:1fr;}
    .dashboard-stock-health{grid-template-columns:1fr;}
    .create-book-header{align-items:flex-start;}
    .create-account-header{align-items:flex-start;}
}

@media(max-width:600px){
    .main-content{padding:12px;}
    .footer{padding:10px 12px 18px;flex-direction:column;}
    .metric-grid{grid-template-columns:1fr;}
    .dashboard-overview{padding:16px;}
    .dashboard-overview-copy h3{font-size:22px;}
    .dashboard-overview-pulse{grid-template-columns:1fr;}
    .dashboard-action-grid{grid-template-columns:1fr;}
    .form-actions{width:100%;justify-content:stretch;flex-direction:column;}
    .form-actions .btn{width:100%;}
    .dashboard-stock-chart-wrap{height:220px;}
    .toolbar{padding:8px 12px;}
    .toolbar input[type="search"]{min-width:100%;}
    table th,table td{padding:7px 10px;font-size:12px;}
    .pager{flex-direction:column;gap:8px;text-align:center;}
    .page-header{flex-direction:column;align-items:flex-start;}
    .module-list-hero{padding:18px 16px;}
    .module-list-toolbar{padding:12px 14px;}
    .module-list-toolbar input[type="search"]{min-width:100%;}
    .quick-actions{flex-direction:column;}
    .quick-actions .btn{width:100%;}
    .form-group{grid-template-columns:1fr;}
    .report-grid{grid-template-columns:1fr;}
    .sale-legacy-topband{grid-template-columns:1fr;}
    .sale-legacy-table-wrap{max-height:none;min-height:260px;}
    .sale-legacy-footer{flex-direction:column;align-items:stretch;}
    .sale-legacy-footer-actions{justify-content:stretch;}
    .sale-legacy-footer-actions .btn{width:100%;}
    .sale-browser{width:calc(100vw - 28px);max-height:calc(100vh - 28px);}
    .sale-browser-toolbar{flex-wrap:wrap;}
    .sale-browser-toolbar-books{grid-template-columns:1fr;}
    .accounting-switchboard{padding:16px;}
    .accounting-switchboard-head{flex-direction:column;align-items:flex-start;}
    .accounting-switchboard-grid{grid-template-columns:1fr;}
    .accounting-link{min-height:auto;}
    .accounting-metric-grid{grid-template-columns:1fr;}
    .accounting-form-footer{flex-direction:column;}
    .accounting-form-footer .btn{width:100%;}
    .accounting-toolbar{align-items:stretch;}
    .accounting-toolbar .form-field,
    .accounting-toolbar .ledger-account-field{min-width:100%;}
    .accounting-toolbar-actions{width:100%;}
    .accounting-toolbar-actions .btn{width:100%;}
    .record-profile{padding:14px 12px 16px;}
    .record-identity{flex-direction:column;}
    .record-field-wide{grid-column:auto;}
    .login-card{padding:24px 18px;}
    .toast-region{right:12px;top:12px;}
    .modal-shell{align-items:flex-end;padding:0;}
    .modal-panel{border-radius:var(--radius) var(--radius) 0 0;}
}

/* ================================================================
   TABS
   ================================================================ */
.tabs{
    display:flex;gap:0;border-bottom:2px solid var(--border);
    padding:0 16px;margin-bottom:0;
}
.tabs .tab{
    padding:10px 16px;font-size:13px;font-weight:600;
    background:none;border:none;cursor:pointer;
    color:var(--muted);border-bottom:2px solid transparent;
    margin-bottom:-2px;transition:all 0.15s;
}
.tabs .tab:hover{color:var(--foreground);}
.tabs .tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.tab-content{display:none;padding:20px 16px;}
.tab-content.active{display:block;}

/* ================================================================
   DETAIL GRID (Book Overview)
   ================================================================ */
.detail-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:12px;
}
.detail-card{
    padding:12px 14px;
    background:var(--muted-bg);border-radius:var(--radius);
    border:1px solid var(--border);
}
.detail-card label{
    display:block;font-size:11px;font-weight:600;
    color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;
    margin-bottom:4px;
}
.detail-card span{
    font-size:14px;font-weight:500;color:var(--foreground);
    word-break:break-word;
}
.text-bold{font-weight:700!important;}
.text-success{color:var(--success)!important;}
.text-warning{color:var(--warning)!important;}
.text-danger{color:var(--danger)!important;}

/* ================================================================
   SINGLE RECORD DETAIL
   ================================================================ */
.record-profile{
    padding:18px 20px 20px;
    background:#fff;
}
.record-identity{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.record-kicker{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.record-identity h3{
    font-size:20px;
    line-height:1.25;
    margin:0;
    color:var(--foreground);
}
.record-subtitle{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}
.record-subtitle span{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:2px 9px;
    background:var(--muted-bg);
    border:1px solid var(--border);
    border-radius:999px;
}
.record-metrics{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    margin:16px 0;
}
.record-metric{
    min-height:82px;
    padding:13px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#f8fafc;
}
.record-metric label,.record-field label{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.record-metric strong{
    display:block;
    color:var(--foreground);
    font-size:18px;
    line-height:1.25;
    word-break:break-word;
}
.record-section{
    padding-top:16px;
    border-top:1px solid var(--border);
}
.record-section + .record-section{margin-top:16px;}
.record-section h3{
    margin-bottom:10px;
    color:var(--foreground);
    font-size:13px;
}
.record-fields{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}
.record-field{
    min-height:68px;
    padding:12px 13px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
}
.record-field-wide{grid-column:span 2;}
.record-field span{
    display:block;
    color:var(--foreground);
    font-size:14px;
    font-weight:650;
    overflow-wrap:anywhere;
}

/* ================================================================
   STOCK BREAKDOWN
   ================================================================ */
.stock-breakdown{padding:20px 0;}
.stock-flow{
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:12px;padding:20px;
}
.stock-item{
    text-align:center;padding:16px 20px;
    background:var(--muted-bg);border-radius:var(--radius);
    border:1px solid var(--border);min-width:120px;
}
.stock-item.stock-positive{
    background:#f0fdf4;border-color:#bbf7d0;
}
.stock-item.stock-negative{
    background:#fef2f2;border-color:#fecaca;
}
.stock-item.stock-total{
    background:#eff6ff;border-color:#bfdbfe;
    box-shadow:var(--shadow-md);
}
.stock-label{
    font-size:11px;font-weight:600;color:var(--muted);
    text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;
}
.stock-value{font-size:24px;font-weight:800;color:var(--foreground);}
.stock-item.stock-positive .stock-value{color:var(--success);}
.stock-item.stock-negative .stock-value{color:var(--danger);}
.stock-item.stock-total .stock-value{color:var(--primary);}
.stock-operator{
    font-size:22px;font-weight:700;color:var(--muted);
    padding:0 4px;
}
.stock-formula{
    text-align:center;margin-top:16px;
    padding:10px 16px;background:var(--muted-bg);
    border-radius:var(--radius);display:inline-block;
    margin-left:auto;margin-right:auto;
    width:fit-content;
}
.stock-formula code{font-family:var(--font-mono);font-size:13px;color:var(--muted);}
.stock-breakdown{display:flex;flex-direction:column;align-items:center;}

/* ================================================================
   LEDGER CHARTS
   ================================================================ */
.ledger-chart-panel{margin-top:16px;}
.ledger-chart-frame{
    display:none;
    height:340px;
    padding:16px;
    background:#fff;
}
.ledger-chart-frame.active{display:block;}
.ledger-chart-frame canvas{
    width:100%!important;
    height:100%!important;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state{
    text-align:center;padding:60px 20px;color:var(--muted);
}
.empty-state p{font-size:14px;}

/* ================================================================
   ALERT SUCCESS
   ================================================================ */
.alert-success{
    background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;
    padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;
    font-size:13px;font-weight:500;
}

/* ================================================================
   BADGE VARIANTS
   ================================================================ */
.badge-success{background:#dcfce7;color:#166534;}
.badge-warning{background:#fef3c7;color:#92400e;}
.badge-info{background:#e0f2fe;color:#075985;}

/* ================================================================
   PRINT
   ================================================================ */
@media print{
    .navbar,.toolbar,.pager,.quick-actions,.nav-toggle{display:none!important;}
    .main-content{padding:0;}
    .panel{border:none;box-shadow:none;}
}

/* ================================================================

/* ================================================================
   CANCELLED BILL BANNER
   ================================================================ */
.cancelled-bill-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: var(--radius, 6px);
    margin-bottom: 14px;
    letter-spacing: .04em;
    animation: cancelPulse .5s ease;
}
@keyframes cancelPulse {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   AUTOCOMPLETE DROPDOWN FOR LEDGER SEARCH
   ================================================================ */
.account-search-wrapper {
    position: relative;
    width: 100%;
}
.account-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.12);
    max-height: 320px;
    overflow-y: auto;
}
.account-dropdown-menu[hidden] {
    display: none !important;
}
.account-dropdown-menu:not([hidden]) {
    display: block !important;
}
.account-dropdown-list {
    display: flex;
    flex-direction: column;
}
.account-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}
.account-dropdown-item:last-child {
    border-bottom: none;
}
.account-dropdown-item:hover,
.account-dropdown-item.selected {
    background: #eff6ff;
}
.account-dropdown-item .acc-id {
    font-weight: 700;
    font-size: 13px;
    color: var(--primary, #0284c7);
}
.account-dropdown-item .acc-name {
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
}
.account-dropdown-item .acc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.account-dropdown-empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

/* ==========================================================================
   VOUCHER SCREEN & LIVE RUNTIME PRINT PREVIEW (COMPACT SINGLE FRAME)
   ========================================================================== */
.voucher-screen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 6px;
}
.voucher-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.voucher-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.voucher-kind-badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 3px;
    color: #fff;
}
.receipt-badge { background: #15803d; }
.payment-badge { background: #0284c7; }
.voucher-main-heading {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.voucher-quick-actions {
    display: flex;
    gap: 6px;
}
.voucher-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 10px;
}
@media (max-width: 992px) {
    .voucher-grid-layout { grid-template-columns: 1fr; }
}

/* Green & Blue Voucher Entry Cards */
.voucher-entry-card {
    background: #ffffff;
    border: 1.5px solid #166534;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.voucher-entry-card.payment-card {
    border-color: #0284c7;
}
.voucher-card-header.green-header {
    background: linear-gradient(135deg, #15803d, #166534);
    color: #ffffff;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.03em;
}
.voucher-card-header.red-header,
.voucher-card-header.blue-header {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.03em;
}
.payment-card .voucher-card-body {
    background: #f0f9ff;
}
.payment-card .voucher-field label {
    color: #0369a1;
}
.payment-card .voucher-input,
.payment-card .voucher-select,
.payment-card .voucher-textarea {
    border-color: #7dd3fc;
}
.payment-card .voucher-input:focus,
.payment-card .voucher-select:focus,
.payment-card .voucher-textarea:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(2,132,199,0.2);
}
.payment-card .field-btn {
    background: #0284c7;
}
.payment-card .field-btn:hover {
    background: #0369a1;
}
.payment-card .voucher-words-box {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
.payment-card .words-label {
    color: #0369a1;
}
.payment-card .words-value {
    color: #075985;
}
.payment-card .amount-input {
    color: #0369a1;
}
.payment-card .voucher-card-footer {
    background: #e0f2fe;
    border-top: 1px solid #7dd3fc;
}
.card-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.btn-forwarding {
    background: #fef08a;
    color: #854d0e;
    border: 1px solid #eab308;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
}
.voucher-card-body {
    padding: 8px 12px;
    background: #f0fdf4;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.voucher-form-row {
    display: flex;
    gap: 8px;
    width: 100%;
}
.voucher-form-row.col-2 > .voucher-field {
    flex: 1;
}
.voucher-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.voucher-field label {
    font-size: 10px;
    font-weight: 700;
    color: #14532d;
    text-transform: uppercase;
}
.voucher-input, .voucher-select, .voucher-textarea {
    width: 100%;
    padding: 3px 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #86efac;
    border-radius: 3px;
    height: 26px;
}
.voucher-textarea { height: 38px; resize: none; }
.voucher-input:focus, .voucher-select:focus, .voucher-textarea:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22,163,74,0.2);
}
.readonly-input { background: #e2e8f0; color: #334155; }
.amount-input { font-size: 13px; font-weight: 800; color: #166534; }
.input-with-btn { display: flex; gap: 3px; }
.input-with-btn input { flex: 1; }
.field-btn {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0 8px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.field-btn:hover { background: #15803d; }
.voucher-words-box {
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 3px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.words-label { font-size: 10px; font-weight: 700; color: #166534; white-space: nowrap; }
.words-value { font-size: 11px; font-weight: 800; color: #14532d; }
.voucher-card-footer {
    background: #dcfce7;
    border-top: 1px solid #86efac;
    padding: 6px 12px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.v-btn {
    border: none;
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.12s ease;
}
.v-btn-new { background: #e2e8f0; color: #1e293b; }
.v-btn-save { background: #16a34a; color: #ffffff; }
.v-btn-save:disabled { background: #94a3b8; cursor: not-allowed; }
.v-btn-save-new { background: #0284c7; color: #ffffff; }
.v-btn-clear { background: #f59e0b; color: #ffffff; }
.v-btn-print { background: #2563eb; color: #ffffff; }
.v-btn-quit { background: #475569; color: #ffffff; }

/* Live Runtime Voucher Preview Card */
.voucher-preview-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.preview-header {
    background: #0f172a;
    color: #ffffff;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 11.5px;
}
.preview-header-title { display: flex; align-items: center; gap: 6px; }
.preview-actions { display: flex; align-items: center; gap: 8px; }
.live-indicator { font-size: 9px; font-weight: 800; color: #4ade80; display: flex; align-items: center; gap: 3px; }
.live-indicator .dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
.preview-body {
    padding: 6px 10px;
    background: #f8fafc;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* EXACT PHOTO MATCH VOUCHER PRINT & PREVIEW */
.voucher-live-document-exact {
    border: 2px solid #000000;
    background: #ffffff;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #000000;
    max-width: 580px;
    margin: 0 auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.v-exact-header {
    text-align: center;
    padding: 8px 12px;
    border-bottom: 2px solid #000000;
}
.v-exact-title {
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.v-exact-co {
    font-size: 18px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.5px;
    color: #78350f;
}
.v-exact-addr, .v-exact-phone {
    font-size: 12px;
    font-style: italic;
    margin-top: 1px;
}
.v-exact-row-meta {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 2px solid #000000;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
}
.v-exact-body {
    padding: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    font-style: italic;
}
.v-exact-bold-italic {
    font-weight: bold;
    font-style: italic;
}
.v-exact-amt {
    font-size: 14px;
    font-weight: 900;
}
.v-exact-balance {
    margin-top: 10px;
    font-size: 12.5px;
    font-style: italic;
}
.v-exact-sig-wrap {
    margin-top: 24px;
}
.v-exact-sig-wrap.text-end { text-align: right; }
.v-exact-sig-wrap.text-start { text-align: left; }
.v-exact-sig {
    font-size: 12.5px;
    font-weight: bold;
    font-style: italic;
}

/* Ledger History Statement Card (Bottom) */
.voucher-statement-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.statement-header {
    background: #1e293b;
    color: #ffffff;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.statement-title { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.statement-balance-summary { font-size: 11.5px; font-weight: 800; color: #38bdf8; }
.statement-body { padding: 0; max-height: 170px; overflow-y: auto; }
.statement-table { width: 100%; margin: 0; border-collapse: collapse; }
.statement-table th { background: #f1f5f9; font-size: 10px; font-weight: 700; color: #334155; text-transform: uppercase; border-bottom: 1.5px solid #cbd5e1; padding: 4px 8px; position: sticky; top: 0; z-index: 1; }
.statement-table td { font-size: 11px; padding: 4px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.statement-table tr:hover { background: #dcfce7 !important; }
.muted-row { color: #94a3b8; font-style: italic; padding: 12px; }

/* Sidebar Drawer Keyboard Selection */
.drawer-table tr.active-keyboard-row {
    background: #166534 !important;
    color: #ffffff !important;
}
.drawer-table tr.active-keyboard-row td {
    color: #ffffff !important;
    font-weight: 700;
}
.drawer-table tr.active-keyboard-row .pick-drawer-btn {
    background: #fef08a !important;
    color: #854d0e !important;
}

/* Sidebar Drawer */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 1040;
    display: none;
}
.drawer-overlay.active { display: block; }
.drawer-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: #ffffff;
    z-index: 1050;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-panel.active { right: 0; }
.drawer-header {
    background: #15803d;
    color: #ffffff;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}
.drawer-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.drawer-close-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
.drawer-search-bar { padding: 12px 16px; background: #f0fdf4; border-bottom: 1px solid #bbf7d0; }
.drawer-search-bar input { width: 100%; padding: 8px 12px; font-size: 13px; border: 1.5px solid #86efac; border-radius: 4px; outline: none; }
.drawer-search-bar input:focus { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0; }
.drawer-table { width: 100%; border-collapse: collapse; margin: 0; }
.drawer-table th { background: #f8fafc; font-size: 11px; font-weight: 700; color: #475569; padding: 8px 12px; border-bottom: 2px solid #e2e8f0; }
.drawer-table td { font-size: 12px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.drawer-table tr:hover { background: #f0fdf4; }