/* ================================================================
   Pustak Bhandar 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:linear-gradient(135deg,#3b82f6,#1d4ed8);
    border-radius:6px;flex-shrink:0;
}
.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;}
.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:100%;left:0;
    margin-top:4px;
    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;
}
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;}
.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:58px;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:linear-gradient(135deg,#3b82f6,#1d4ed8);
    border-radius:8px;margin:0 auto 12px;
}
.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;
}

/* ================================================================
   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;}

/* ================================================================
   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;}
.bill-section-body{padding:16px;}
.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;}
.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;
}
.btn-icon:hover{background:#fef2f2;color:var(--danger);border-color:#fecaca;}

/* ================================================================
   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;bottom: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 .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;}
    .metric-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
    .main-content{padding:12px;}
    .footer{padding:10px 12px 18px;flex-direction:column;}
    .metric-grid{grid-template-columns:1fr;}
    .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;}
    .quick-actions{flex-direction:column;}
    .quick-actions .btn{width:100%;}
    .form-group{grid-template-columns:1fr;}
    .report-grid{grid-template-columns:1fr;}
    .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;bottom: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;}
}