/* ── FONTS ───────────────────────────────────────────────── */ @font-face{font-family:'Kamerik';src:url('../fonts/Kamerik105Cyrillic-Thin.ttf') format('truetype');font-weight:100;font-display:swap} @font-face{font-family:'Kamerik';src:url('../fonts/Kamerik105Cyrillic-Light.ttf') format('truetype');font-weight:300;font-display:swap} @font-face{font-family:'Kamerik';src:url('../fonts/Kamerik105Cyrillic-Book.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Kamerik';src:url('../fonts/Kamerik105Cyrillic-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Kamerik';src:url('../fonts/Kamerik105Cyrillic-Heavy.ttf') format('truetype');font-weight:900;font-display:swap} /* ── TOKENS ─────────────────────────────────────────────── */ :root { --blue: #246DEE; --blue-dim: #1a56c4; --blue-tint: #EBF1FD; --dark: #1C2034; --white: #FFFFFF; --txt-primary: #1A1D2E; --txt-body: #3A4460; --txt-muted: #8892A4; --border: #DDE6F5; --card-bg: #FFFFFF; --card-shadow: 0 1px 3px rgba(36,109,238,.06), 0 0 0 1px rgba(36,109,238,.04); --surface: #F4F7FC; --sb-w: 236px; --sb-wc: 60px; --tb-h: 58px; /* Light sidebar */ --sb-bg: #FFFFFF; --sb-txt: #4A5568; --sb-muted: #8892A4; --sb-hover: rgba(36,109,238,.055); --sb-border: #E8EFF8; --tb-bg: #FFFFFF; --tb-border: #E8EFF8; --content: #F0F4FB; } [data-theme="dark"] { --txt-primary: #EEF1FF; --txt-body: #BFC8DE; --txt-muted: #7D8EA8; --border: rgba(255,255,255,.10); --card-bg: #222640; --card-shadow: 0 1px 4px rgba(0,0,0,.35); --surface: #1A1D38; --tb-bg: #1C2034; --tb-border: rgba(255,255,255,.08); --content: #161929; --blue-tint: rgba(36,109,238,.18); /* Dark sidebar */ --sb-bg: #1C2034; --sb-txt: rgba(255,255,255,.65); --sb-muted: rgba(255,255,255,.32); --sb-hover: rgba(255,255,255,.06); --sb-border: rgba(255,255,255,.07); } /* ── RESET ───────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Kamerik','Raleway',system-ui,-apple-system,sans-serif; background:var(--content);color:var(--txt-primary); font-size:13px;line-height:1.55;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .25s,color .25s; } a{color:var(--blue);text-decoration:none;transition:color .2s} a:hover{color:var(--blue-dim)} img{max-width:100%;display:block} /* ═══════════════════════════════════════════════════════════ SHELL LAYOUT ═══════════════════════════════════════════════════════════ */ #appTopbar{ position:fixed;top:0;left:0;right:0;z-index:600; height:var(--tb-h);background:var(--tb-bg); border-bottom:1px solid var(--tb-border); display:flex;align-items:center;justify-content:space-between; padding:0 1.25rem 0 0; box-shadow:0 1px 0 var(--tb-border); transition:background .25s,border-color .25s; } #appSidebar{ position:fixed;top:var(--tb-h);left:0;bottom:0;z-index:500; width:var(--sb-w);background:var(--sb-bg); display:flex;flex-direction:column;overflow:hidden; transition:width .28s cubic-bezier(.4,0,.2,1); border-right:1px solid var(--sb-border) !important; } #appMain { margin-left:var(--sb-w); margin-top:var(--tb-h); padding:1.75rem 1.75rem 1rem; min-height:calc(100vh - var(--tb-h)); display:flex; flex-direction:column; transition:margin-left .28s cubic-bezier(.4,0,.2,1); } .app-footer { margin-top:auto; padding:.85rem 1.75rem; border-top:1px solid var(--border); text-align:center; font-size:.78rem; font-weight:600; color:var(--txt-muted); transition:background .25s, border-color .25s; } /* ── Collapsed sidebar ──────────────────────────────────── */ body.sidebar-collapsed #appSidebar{width:0 !important;overflow:hidden !important;min-width:0 !important} body.sidebar-collapsed #appMain{margin-left:0 !important} body.sidebar-collapsed .sb-group>ul.sb-items{display:block !important} body.sidebar-collapsed .sb-group-header{display:none !important} body.sidebar-collapsed .sb-item-label{display:none !important} body.sidebar-collapsed .sb-group-label, body.sidebar-collapsed .sb-group-arrow, body.sidebar-collapsed .sb-logo-text{opacity:0;width:0;white-space:nowrap;overflow:hidden} body.sidebar-collapsed .sb-item>a{ justify-content:center !important;padding:.55rem 0 !important; width:100%;position:relative; } body.sidebar-collapsed .sb-item>a .sb-icon{margin-right:0 !important;font-size:1rem} body.sidebar-collapsed .sb-logo{justify-content:center;padding:.8rem} body.sidebar-collapsed .sb-logo img{width:26px} /* Tooltip on hover in collapsed mode */ body.sidebar-collapsed .sb-item>a::after{display:none} body.sidebar-collapsed .sb-item>a[title]:hover::after{ content:attr(title);display:block; position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%); background:rgba(28,32,52,.95);color:#fff; padding:.28rem .65rem;border-radius:7px;font-size:.75rem; white-space:nowrap;pointer-events:none;z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,.3); } body.sidebar-collapsed .sb-icon{color:#8892A4 !important} body.sidebar-collapsed .sb-item.active>a .sb-icon, body.sidebar-collapsed .sb-item>a:hover .sb-icon{color:var(--blue) !important} /* Logo swap in collapsed mode */ body.sidebar-collapsed .sb-logo-full{display:none} body.sidebar-collapsed .sb-logo-icon{display:block !important;width:28px;height:28px;object-fit:contain} .sb-logo-icon{display:none} /* ═══════════════════════════════════════════════════════════ TOPBAR ═══════════════════════════════════════════════════════════ */ .tb-left{display:flex;align-items:center;gap:.4rem;flex-shrink:0} #sidebarToggle{ width:var(--tb-h);height:var(--tb-h);background:none;border:none; cursor:pointer;color:var(--txt-body);font-size:1rem; display:flex;align-items:center;justify-content:center; transition:background .2s,color .2s;flex-shrink:0; } #sidebarToggle:hover{background:var(--blue-tint);color:var(--blue)} [data-theme="dark"] #sidebarToggle{color:rgba(255,255,255,.72) !important} [data-theme="dark"] #sidebarToggle:hover{background:rgba(255,255,255,.09) !important;color:#fff !important} .tb-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;padding:0 .6rem 0 .15rem} .tb-brand img{height:24px;width:auto} /* Logo light/dark theming */ [data-theme="dark"] .tb-logo-light{display:none !important} [data-theme="dark"] .tb-logo-dark{display:block !important} [data-theme="light"] .tb-logo-light{display:block !important} [data-theme="light"] .tb-logo-dark{display:none !important} .tb-biz-divider{width:1.5px;height:18px;background:var(--border);flex-shrink:0;margin:0 .2rem} /* Business name badge */ .tb-biz-name{ display:inline-flex !important;align-items:center !important; background:none !important;color:var(--txt-body) !important; border:1px solid var(--border) !important;box-shadow:none !important; font-weight:600 !important;font-size:.76rem !important; letter-spacing:.03em !important;text-transform:uppercase !important; padding:0 .75rem !important;border-radius:8px !important;height:32px !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px !important; transition:background .2s,border-color .2s,color .2s; } .tb-biz-name:hover{background:var(--blue-tint) !important;border-color:var(--blue) !important;color:var(--blue) !important} .tb-biz-name .fa-building{display:none !important} [data-theme="dark"] .tb-biz-name{background:none !important;color:var(--txt-body) !important;border-color:var(--border) !important} [data-theme="dark"] .tb-biz-name:hover{background:var(--blue-tint) !important;border-color:var(--blue) !important;color:var(--blue) !important} .tb-right{display:flex;align-items:center;gap:.3rem} .tb-btn{ display:inline-flex;align-items:center;gap:.4rem; height:32px;padding:0 .75rem; background:none;border:1px solid var(--border);border-radius:8px; cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:600; color:var(--txt-body);text-decoration:none;transition:all .18s;white-space:nowrap; } .tb-btn:hover{background:var(--blue-tint);border-color:var(--blue);color:var(--blue)} #darkModeToggle{width:32px;padding:0;justify-content:center} .tb-user{position:relative} .tb-user-btn{ display:flex;align-items:center;gap:.45rem;height:32px;padding:0 .75rem; background:none;border:1px solid var(--border);border-radius:8px; cursor:pointer;font-family:inherit;font-size:.8rem;color:var(--txt-primary); transition:all .18s; } .tb-user-btn:hover{background:var(--blue-tint);border-color:var(--blue)} [data-theme="dark"] .tb-user-btn{color:var(--txt-primary)} .tb-user-btn span:not(.tb-user-avatar){font-weight:700 !important;color:var(--txt-primary) !important} .tb-user-avatar{ width:24px;height:24px;border-radius:50%; background:var(--blue);color:#fff; display:inline-flex;align-items:center;justify-content:center; font-size:.68rem;flex-shrink:0; } .tb-user-menu{ display:none;position:absolute;right:0;top:calc(100% + 8px); background:var(--card-bg);border:1px solid var(--border); border-radius:12px;min-width:190px; box-shadow:0 8px 32px rgba(0,0,0,.13);z-index:600;overflow:hidden; } .tb-user-menu.open{display:block} .tb-user-menu-head{padding:.85rem 1rem;background:var(--blue-tint)} .tb-user-menu-head .name{font-weight:700;font-size:.88rem;color:var(--txt-primary)} .tb-user-menu-head .role{font-size:.7rem;color:var(--blue);margin-top:2px;font-weight:600} .tb-user-menu a{ display:flex;align-items:center;gap:.6rem; padding:.6rem 1rem;font-size:.84rem;font-weight:700; color:var(--txt-body);transition:background .15s;border-top:1px solid var(--border); } .tb-user-menu a:hover{background:var(--blue-tint);color:var(--blue)} .tb-user-menu a i{width:14px;text-align:center;color:var(--txt-muted);font-size:.82rem} .tb-user-menu a:hover i{color:var(--blue)} .tb-user-menu-divider{height:1px;background:var(--border)} /* ═══════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════ */ .sb-logo{ display:flex;align-items:center;gap:.65rem;padding:.9rem 1.1rem; border-bottom:1px solid var(--sb-border);flex-shrink:0;text-decoration:none; transition:padding .28s; } .sb-logo img{height:24px;width:auto;transition:all .28s;flex-shrink:0} .sb-logo-text{ font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; background:rgba(36,109,238,.25);border:1px solid rgba(36,109,238,.3); padding:.15rem .45rem;border-radius:5px;color:rgba(36,109,238,.9); } .sb-nav{ flex:1;padding:.4rem 0 1.5rem;overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:rgba(36,109,238,.18) transparent; } .sb-nav::-webkit-scrollbar{width:4px} .sb-nav::-webkit-scrollbar-track{background:transparent} .sb-nav::-webkit-scrollbar-thumb{background:rgba(36,109,238,.18);border-radius:4px} .sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(36,109,238,.38)} [data-theme="dark"] .sb-nav{scrollbar-color:rgba(255,255,255,.28) transparent} [data-theme="dark"] .sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28) !important} [data-theme="dark"] .sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5) !important} .sb-nav-start{padding-top:.5rem} .sb-solo{border-bottom:1px solid var(--sb-border);padding:.3rem 0 .45rem;margin-bottom:.2rem} .sb-group{margin:0} .sb-group-header{ display:flex;align-items:center;justify-content:space-between; padding:.45rem 1.1rem .2rem;cursor:pointer;user-select:none;transition:background .15s; } .sb-group-header:hover{background:rgba(36,109,238,.04) !important} [data-theme="dark"] .sb-group-header:hover{background:var(--sb-hover) !important} .sb-group-label{ font-size:.7rem !important;font-weight:700 !important; letter-spacing:.16em !important;color:#6B7A99 !important; padding:.65rem 1.1rem .2rem !important; } [data-theme="dark"] .sb-group-label{color:rgba(255,255,255,.52) !important} .sb-group-arrow{color:#B0BBD0 !important;font-size:.56rem;transition:transform .25s} .sb-group.open .sb-group-arrow{transform:rotate(90deg)} [data-theme="dark"] .sb-group-arrow{color:rgba(255,255,255,.28) !important} .sb-group>ul{display:none} .sb-group.open>ul{display:block} .sb-items{list-style:none} .sb-item>a{ display:flex;align-items:center;gap:.65rem; padding:.44rem 1.1rem .44rem 1.2rem; color:var(--sb-txt);text-decoration:none; font-size:.83rem;font-weight:400; border-left:3px solid transparent; transition:background .15s,color .15s,border-color .15s;white-space:nowrap; } .sb-item>a:hover{background:var(--sb-hover) !important;color:var(--blue) !important} .sb-item>a:hover .sb-icon{color:var(--blue) !important;opacity:1 !important} .sb-item.active>a{ background:rgba(36,109,238,.07) !important;color:var(--blue) !important; border-left-color:var(--blue) !important;font-weight:700 !important; } .sb-item.active>a .sb-icon{color:var(--blue) !important} [data-theme="dark"] .sb-item.active>a{background:rgba(36,109,238,.2) !important;color:#93C5FD !important;border-left-color:var(--blue) !important} [data-theme="dark"] .sb-item.active>a .sb-icon,[data-theme="dark"] .sb-item>a:hover .sb-icon{color:#fff !important} [data-theme="dark"] #appSidebar{border-right:1px solid rgba(255,255,255,.06) !important} .sb-icon{width:15px;text-align:center;font-size:.8rem;flex-shrink:0;color:#8892A4 !important;opacity:1 !important} [data-theme="dark"] .sb-icon{color:rgba(255,255,255,.6) !important} .sb-item-label{transition:opacity .2s,width .2s;overflow:hidden} /* ═══════════════════════════════════════════════════════════ BOOTSTRAP GRID COMPAT ═══════════════════════════════════════════════════════════ */ .container-fluid{width:100%;padding:0 10px} .container{max-width:1140px;margin:0 auto;padding:0 10px} .row{display:flex;flex-wrap:wrap;margin:0 -10px} .row::after{content:'';display:table;clear:both} [class*="col-"]{padding:0 10px;width:100%;box-sizing:border-box} .col-xs-1{width:8.333%} .col-xs-2{width:16.667%} .col-xs-3{width:25%} .col-xs-4{width:33.333%} .col-xs-5{width:41.667%} .col-xs-6{width:50%} .col-xs-7{width:58.333%} .col-xs-8{width:66.667%} .col-xs-9{width:75%} .col-xs-10{width:83.333%}.col-xs-11{width:91.667%}.col-xs-12{width:100%} @media(min-width:768px){ .col-sm-1{width:8.333%} .col-sm-2{width:16.667%} .col-sm-3{width:25%} .col-sm-4{width:33.333%} .col-sm-5{width:41.667%} .col-sm-6{width:50%} .col-sm-7{width:58.333%} .col-sm-8{width:66.667%} .col-sm-9{width:75%} .col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%} .col-sm-offset-1{margin-left:8.333%} .col-sm-offset-2{margin-left:16.667%} .col-sm-offset-3{margin-left:25%} .col-sm-offset-4{margin-left:33.333%} .col-sm-offset-6{margin-left:50%} .col-sm-offset-8{margin-left:66.667%} } @media(min-width:992px){ .col-md-1{width:8.333%} .col-md-2{width:16.667%} .col-md-3{width:25%} .col-md-4{width:33.333%} .col-md-5{width:41.667%} .col-md-6{width:50%} .col-md-7{width:58.333%} .col-md-8{width:66.667%} .col-md-9{width:75%} .col-md-10{width:83.333%}.col-md-11{width:91.667%}.col-md-12{width:100%} } /* ═══════════════════════════════════════════════════════════ PANELS ═══════════════════════════════════════════════════════════ */ .panel{ background:var(--card-bg);border:1px solid var(--border); border-radius:12px;margin-bottom:1.25rem; box-shadow:var(--card-shadow);overflow:hidden; } .panel-heading{ padding:.65rem 1rem; font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:var(--blue);color:#fff;border-bottom:none; display:flex;align-items:center;gap:.5rem; } .panel-primary>.panel-heading,.panel-info>.panel-heading{background:var(--blue)} .panel-default>.panel-heading{background:var(--surface);color:var(--txt-body);border-bottom:1px solid var(--border)} .panel-hash>.panel-heading{background:var(--dark);color:#fff} .panel-success>.panel-heading{background:#16a34a} .panel-danger>.panel-heading{background:#dc2626} .panel-warning>.panel-heading{background:#d97706} .panel-body{padding:1rem !important;color:var(--txt-body)} .panel-body p,.panel-body span,.panel-body td,.panel-body th{color:var(--txt-body)} .panel .panel-heading+.panel-body{border-top:1px solid var(--border)} .panel-footer{padding:.55rem 1rem;border-top:1px solid var(--border);background:var(--surface);font-size:.78rem;color:var(--txt-muted)} .panel-default .panel-body h4{margin:0 0 .3rem;font-size:.95rem} [data-theme="dark"] .panel{background-color:var(--card-bg) !important} [data-theme="dark"] .panel-footer{background:var(--surface) !important;border-color:var(--border) !important;color:var(--txt-muted)} [data-theme="dark"] .panel-body p,[data-theme="dark"] .panel-body span, [data-theme="dark"] .panel-body td,[data-theme="dark"] .panel-body th{color:var(--txt-body)} /* Empty state inside panel */ .panel ul{margin:0;padding:0} .panel ul li,.panel>.no-record{ list-style:none;padding:2.5rem 1rem;text-align:center; color:var(--txt-muted);font-size:.85rem;font-weight:500; } .panel ul li::before{content:"— "} .panel ul li::after{content:" —"} [data-theme="dark"] .panel ul li{color:var(--txt-muted)} /* Legacy boxes */ .latestStuffsBody{min-height:90px;padding:1rem;display:flex;align-items:center;justify-content:space-between;color:#fff} .latestStuffsBody .fa{font-size:1.75rem;opacity:.8} .latestStuffsBody>div>div{font-size:1.4rem!important;font-weight:700;line-height:1} .box{border-radius:12px;overflow:hidden;margin-bottom:1rem} .box-header{padding:.75rem 1rem;display:flex;align-items:center} .box-title{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .box-body{padding:1rem} /* ═══════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;gap:.38rem; padding:.45rem 1rem !important;border-radius:8px !important;border:1px solid transparent; font-family:inherit;font-size:.82rem !important;font-weight:700; cursor:pointer;text-decoration:none;transition:all .18s;white-space:nowrap;line-height:1.4; } .btn:focus{outline:none} .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)} .btn-primary:hover,.btn-primary:focus{background:var(--blue-dim);border-color:var(--blue-dim);color:#fff;box-shadow:0 4px 14px rgba(36,109,238,.3)} .btn-success{background:#16a34a;color:#fff;border-color:#16a34a} .btn-success:hover{background:#15803d;color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.3)} .btn-danger{background:#dc2626;color:#fff;border-color:#dc2626} .btn-danger:hover{background:#b91c1c;color:#fff} .btn-warning{background:#d97706;color:#fff;border-color:#d97706} .btn-warning:hover{background:#b45309;color:#fff} .btn-info{background:#2563eb;color:#fff;border-color:#2563eb} .btn-info:hover{background:#1d4ed8;color:#fff} .btn-default{background:var(--card-bg);color:var(--txt-body);border-color:var(--border)} .btn-default:hover{background:var(--surface);color:var(--txt-primary);border-color:var(--blue)} .btn-link{background:none;border:none;color:var(--blue);text-decoration:underline} .btn-sm{padding:.32rem .75rem !important;font-size:.76rem !important;border-radius:7px !important} .btn-xs{padding:.18rem .48rem;font-size:.7rem;border-radius:5px} .btn-lg{padding:.62rem 1.35rem;font-size:.94rem} .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed} .btn+.btn{margin-left:.35rem} /* ═══════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════ */ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 10px 10px} .table{width:100%;border-collapse:collapse;font-size:.8rem;color:var(--txt-body);background:var(--card-bg)} .table th,.table td{padding:.52rem .8rem;vertical-align:middle;border-top:1px solid var(--border)} .table th{ font-weight:700;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase; color:var(--txt-muted);background:var(--surface);white-space:nowrap;border-bottom:2px solid var(--border); } .table td{font-size:.82rem} .table-bordered th,.table-bordered td{border:1px solid var(--border)} .table-striped tbody tr:nth-child(odd){background:rgba(36,109,238,.022)} .table-hover tbody tr:hover{background:var(--blue-tint);cursor:pointer} .table-condensed th,.table-condensed td{padding:.28rem .5rem} table#myTable th,table#myTable td{text-align:left} #myTable tfoot th{background:var(--surface);font-weight:700;color:var(--txt-primary)} /* Dark mode table overrides */ [data-theme="dark"] table[style*="background"]{background-color:var(--card-bg) !important} [data-theme="dark"] .table,[data-theme="dark"] .table>*{background-color:var(--card-bg) !important} [data-theme="dark"] .table>thead>tr>th{background-color:var(--surface) !important;color:var(--txt-muted) !important;border-color:var(--border) !important} [data-theme="dark"] .table>tbody>tr>td, [data-theme="dark"] .table>tbody>tr>th{background-color:transparent !important;color:var(--txt-body) !important;border-color:var(--border) !important} [data-theme="dark"] .table-striped>tbody>tr:nth-child(odd)>td, [data-theme="dark"] .table-striped>tbody>tr:nth-child(odd)>th{background-color:rgba(36,109,238,.04) !important} [data-theme="dark"] .table-hover>tbody>tr:hover>td, [data-theme="dark"] .table-hover>tbody>tr:hover>th{background-color:var(--blue-tint) !important;color:var(--txt-primary) !important} [data-theme="dark"] td[style*="color: red"],[data-theme="dark"] td[style*="color:red"]{color:#ff7070 !important} /* Inactive/warning row colours (inline-style targets) */ tr[style*="color: red"] td,tr[style*="color:red"] td{color:#dc2626 !important;background:rgba(220,38,38,.04) !important} tr[style*="background-color: orange"] td,tr[style*="background-color:orange"] td{background:rgba(234,128,0,.15) !important;color:#92400e !important} [data-theme="dark"] tr[style*="color: red"] td,[data-theme="dark"] tr[style*="color:red"] td{color:#ff7070 !important;background:rgba(220,38,38,.12) !important} [data-theme="dark"] tr[style*="background-color: orange"] td,[data-theme="dark"] tr[style*="background-color:orange"] td{background:rgba(234,128,0,.2) !important;color:#ffa040 !important} /* ═══════════════════════════════════════════════════════════ DATATABLES ═══════════════════════════════════════════════════════════ */ table.dataTable{border-collapse:collapse !important} .dataTables_wrapper{font-size:.8rem;color:var(--txt-body);padding:1rem !important} .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem} .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label{display:flex;align-items:center;gap:.5rem;color:var(--txt-muted);font-size:.78rem;font-weight:600;margin:0} .dataTables_wrapper .dataTables_filter{justify-content:flex-end} .dataTables_wrapper .dataTables_filter input{ background:var(--card-bg);border:1.5px solid var(--border);border-radius:8px; color:var(--txt-primary);padding:.35rem .75rem;font-family:inherit;font-size:.8rem; min-width:220px;transition:border-color .2s,box-shadow .2s; } .dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,109,238,.1)} .dataTables_wrapper .dataTables_length select{ background:var(--card-bg);border:1.5px solid var(--border);border-radius:8px; color:var(--txt-primary);padding:.3rem .6rem;font-family:inherit;font-size:.8rem;cursor:pointer; } .dataTables_wrapper .dataTables_info{font-size:.75rem;color:var(--txt-muted);padding:.6rem 0 0;font-weight:400} .dataTables_wrapper .dataTables_paginate{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;padding:.5rem 0 0} .dataTables_wrapper .dataTables_paginate .paginate_button{ background:var(--card-bg) !important;border:1px solid var(--border) !important; border-radius:7px !important;color:var(--txt-body) !important; padding:.28rem .65rem !important;font-size:.76rem !important; cursor:pointer;transition:all .15s;min-width:32px;text-align:center; } .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;font-weight:700 !important} .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current){background:var(--blue-tint) !important;border-color:var(--blue) !important;color:var(--blue) !important} .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.35 !important;cursor:not-allowed !important} [data-theme="dark"] .dataTables_wrapper,[data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_filter label, [data-theme="dark"] .dataTables_wrapper .dataTables_length label{color:var(--txt-body) !important} [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select{background:var(--surface) !important;color:var(--txt-primary) !important;border-color:var(--border) !important} [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button{background:var(--surface) !important;border-color:var(--border) !important;color:var(--txt-body) !important} /* Scrollbars */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(36,109,238,.2);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(36,109,238,.4)} .dataTables_scrollBody::-webkit-scrollbar,.table-responsive::-webkit-scrollbar{height:5px;width:5px} .dataTables_scrollBody::-webkit-scrollbar-track,.table-responsive::-webkit-scrollbar-track{background:var(--surface);border-radius:4px} .dataTables_scrollBody::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb{background:rgba(36,109,238,.25);border-radius:4px} .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,.table-responsive::-webkit-scrollbar-thumb:hover{background:var(--blue)} /* ═══════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════ */ .form-control{ display:block;width:100%; background:var(--card-bg) !important;border:1.5px solid var(--border) !important; border-radius:8px !important;color:var(--txt-primary) !important; height:auto !important;padding:.42rem .7rem !important;font-size:.82rem !important; font-family:inherit;line-height:1.5; transition:border-color .2s,box-shadow .2s; } .form-control:focus{outline:none !important;border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(36,109,238,.12) !important} .form-control::placeholder{color:var(--txt-muted)} textarea.form-control{min-height:80px;resize:vertical} select.form-control{cursor:pointer} span.form-control{cursor:default} input[type="date"].form-control{color:var(--txt-primary);cursor:pointer} [data-theme="dark"] input[type="date"].form-control{color-scheme:dark} [data-theme="dark"] .form-control{background-color:var(--surface) !important;color:var(--txt-primary) !important} .form-group{margin-bottom:.9rem} .form-group-sm{margin-bottom:.75rem !important} .form-group-sm .form-control{padding:.28rem .6rem;font-size:.8rem} label{display:block;font-size:.78rem;font-weight:700;color:var(--txt-muted);margin-bottom:.3rem} [data-theme="dark"] label{color:var(--txt-body)} .control-label{font-size:.78rem;font-weight:700;color:var(--txt-body)} .help-block{font-size:.73rem;color:var(--txt-muted);margin-top:.2rem;display:block} .errMsg{color:#dc2626;font-size:.73rem;display:block;margin-top:.2rem} .infoMsg{color:var(--blue);font-size:.73rem;display:block;margin-top:.2rem} .input-group{display:flex} .input-group>.form-control{flex:1;border-radius:0 !important} .input-group>.form-control:first-child{border-radius:8px 0 0 8px !important} .input-group-addon{ display:flex;align-items:center;padding:.42rem .65rem;cursor:pointer; background:var(--surface) !important;border:1.5px solid var(--border) !important; border-right:none !important;border-radius:8px 0 0 8px !important;color:var(--txt-muted);font-size:.86rem; } .input-group-addon+.form-control{border-left:none !important} .input-group>.input-group-addon:last-child{border-radius:0 8px 8px 0 !important;border-right:1.5px solid var(--border) !important;border-left:none !important} .input-group .btn{border-radius:0 8px 8px 0} [data-theme="dark"] .input-group-addon{background:var(--surface) !important;border-color:var(--border) !important;color:var(--txt-muted) !important} /* ── Select2 ────────────────────────────────────────────── */ .select2-container--default .select2-selection--single{background:var(--card-bg);border:1.5px solid var(--border) !important;border-radius:8px !important;height:34px !important} .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:32px !important;color:var(--txt-primary);padding-left:.72rem;font-size:.86rem} .select2-container--default .select2-selection--single .select2-selection__arrow{height:32px !important} .select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(36,109,238,.1) !important} .select2-dropdown{border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);background:var(--card-bg)} .select2-results__option{font-size:.86rem;color:var(--txt-body);padding:.38rem .72rem} .select2-results__option--highlighted{background:var(--blue-tint) !important;color:var(--blue) !important} .select2-search--dropdown .select2-search__field{border:1.5px solid var(--border);border-radius:6px;font-size:.83rem;padding:.3rem .6rem;color:var(--txt-primary)} [data-theme="dark"] .select2-container--default .select2-selection--single{background:var(--surface) !important} [data-theme="dark"] .select2-dropdown{background:var(--card-bg) !important;border-color:var(--border) !important} [data-theme="dark"] .select2-results__option{color:var(--txt-body) !important} [data-theme="dark"] .select2-search--dropdown .select2-search__field{background:var(--surface) !important;color:var(--txt-primary) !important;border-color:var(--border) !important} /* ── Datepicker ─────────────────────────────────────────── */ .datepicker,.datepicker-dropdown,.datepicker.datepicker-dropdown,.datepicker.dropdown-menu{ z-index:99999 !important; background:var(--card-bg) !important;border:1.5px solid var(--border) !important; border-radius:12px !important;box-shadow:0 8px 28px rgba(0,0,0,.15) !important; font-family:'Kamerik','Raleway',sans-serif !important;padding:.5rem !important; } .datepicker table tr td,.datepicker table tr th{border-radius:7px !important;font-size:.82rem !important;color:var(--txt-body) !important} .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{background-color:var(--blue) !important;color:#fff !important;background-image:none !important} .datepicker table tr td.today{background:rgba(36,109,238,.12) !important;color:var(--blue) !important;font-weight:700 !important} .datepicker table tr td:hover,.datepicker table tr th:hover{background:var(--blue-tint) !important;color:var(--blue) !important} .datepicker table tr th{font-size:.72rem;font-weight:700;color:var(--txt-muted)} .datepicker .datepicker-switch,.datepicker .prev,.datepicker .next{color:var(--txt-primary) !important;font-weight:700 !important} /* Prevent modal overflow clipping datepicker */ .modal-body{overflow:visible !important} .modal-content{overflow:visible !important} [data-theme="dark"] .datepicker.dropdown-menu,[data-theme="dark"] .datepicker-dropdown{background:#1E2138 !important} [data-theme="dark"] .datepicker table tr td,[data-theme="dark"] .datepicker table tr th{color:#9AAAC8 !important} /* ═══════════════════════════════════════════════════════════ MODALS ═══════════════════════════════════════════════════════════ */ .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:700;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .modal{display:none;position:fixed;inset:0;z-index:800;overflow-y:auto} .modal.in{display:flex;align-items:flex-start;justify-content:center;padding:4.5rem 1rem 2rem} .modal-dialog{width:100%;max-width:520px;margin:0 auto} .modal-dialog.modal-sm{max-width:360px} .modal-dialog.modal-lg{max-width:760px} .modal-dialog.modal-xl{max-width:1040px} .modal-content{ background:var(--card-bg);border:1px solid var(--border); border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.22); overflow:hidden;animation:modalIn .2s ease;display:flex;flex-direction:column;max-height:92vh; } @keyframes modalIn{ from{opacity:0;transform:translateY(-12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } .modal-header{ padding:1.1rem 1.35rem .9rem;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;background:var(--card-bg);flex-shrink:0; } .modal-title{font-size:.95rem;font-weight:700;color:var(--txt-primary);text-align:center;flex:1} .modal-header center{flex:1} .modal-header .close{ background:none;border:none;cursor:pointer;width:28px;height:28px;border-radius:7px; font-size:1.2rem;color:var(--txt-muted);display:flex;align-items:center;justify-content:center; transition:all .18s;flex-shrink:0; } .modal-header .close:hover{background:rgba(220,38,38,.08);color:#dc2626} .modal-body{padding:1.1rem 1.35rem;color:var(--txt-body);max-height:70vh;overflow-y:auto} .modal-body::-webkit-scrollbar{width:4px} .modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .modal-footer{padding:.8rem 1.35rem;border-top:1px solid var(--border);display:flex;gap:.5rem;justify-content:flex-end;background:var(--surface);flex-shrink:0} .modal-footer .btn{min-width:90px} #flashMsgModal .modal-dialog{max-width:380px} [data-theme="dark"] .modal-header{background:var(--card-bg);border-color:var(--border)} [data-theme="dark"] .modal-footer{background:var(--surface);border-color:var(--border)} [data-theme="dark"] .modal-content{background:var(--card-bg);border-color:var(--border)} [data-theme="dark"] .modal-body{color:var(--txt-body)} /* Session expired modal */ #logInModal .modal-content{border-radius:18px !important;overflow:hidden !important} #logInModal .modal-header{background:linear-gradient(135deg,#1C2034,#252A48);border-bottom:none;padding:1.25rem 1.35rem} #logInModal .modal-title{color:#fff} #logInModal .close{color:rgba(255,255,255,.6)} #logInModal .close:hover{background:rgba(255,255,255,.08);color:#fff} #logInModal .modal-body{padding:1.35rem 1.35rem 1rem;background:var(--card-bg)} #logInModal .modal-footer{background:var(--surface);border-top:1px solid var(--border);padding:.85rem 1.35rem} #logInModalFMsg{color:#dc2626;font-size:.78rem;min-height:16px;text-align:center;margin-top:.4rem} /* ═══════════════════════════════════════════════════════════ UTILITIES ═══════════════════════════════════════════════════════════ */ .text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right} .text-primary{color:var(--blue)!important}.text-muted{color:var(--txt-muted)!important} .text-danger{color:#dc2626!important}.text-success{color:#16a34a!important} .text-warning{color:#d97706!important}.text-info{color:#2563eb!important} .text-uppercase{text-transform:uppercase} .bg-danger{background:#fee2e2!important;color:#991b1b!important} .bg-warning{background:#fef3c7!important;color:#78350f!important} .bg-success{background:#dcfce7!important;color:#166534!important} .bg-info{background:#dbeafe!important;color:#1e40af!important} [data-theme="dark"] .bg-warning{background:rgba(217,119,6,.18)!important;color:#FCD34D!important} [data-theme="dark"] .bg-danger{background:rgba(220,38,38,.18)!important;color:#FCA5A5!important} .pull-left{float:left}.pull-right{float:right} .clearfix::after{content:'';display:table;clear:both} .hidden{display:none!important} .visible-xs{display:none} @media(max-width:767px){.hidden-xs{display:none!important}.visible-xs{display:block}} /* Well */ .well,.pwell{ background:var(--card-bg) !important;border:1.5px solid var(--border) !important; border-radius:12px !important;padding:1.25rem !important;box-shadow:var(--card-shadow);margin-bottom:1rem; } .well .close,.pwell .close{ float:right;width:28px;height:28px;border-radius:7px; background:var(--surface);border:1px solid var(--border); font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--txt-muted);transition:all .18s;margin-bottom:.75rem; } .well .close:hover,.pwell .close:hover{background:rgba(220,38,38,.08);color:#dc2626;border-color:rgba(220,38,38,.2)} .pwell hr,.well>hr{border:none;border-top:1px solid var(--border);margin:.75rem 0 !important} .pwell .row:last-child{margin-top:.5rem} [data-theme="dark"] .well{background:var(--surface) !important} [data-theme="dark"] .pwell{background:var(--card-bg) !important} /* Alerts */ .alert{padding:.65rem 1rem;border-radius:9px;margin-bottom:.85rem;font-size:.85rem;display:flex;align-items:flex-start;gap:.5rem} .alert i{flex-shrink:0;margin-top:.1rem} .alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} .alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac} .alert-warning{background:#fef3c7;color:#78350f;border:1px solid #fcd34d} .alert-info{background:rgba(36,109,238,.08);color:#1e3a8a;border:1px solid rgba(36,109,238,.2)} [data-theme="dark"] .alert-info{background:rgba(36,109,238,.12);color:#93C5FD;border-color:rgba(36,109,238,.3)} [data-theme="dark"] hr{border-color:var(--border)} /* Badges & labels */ .badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--blue);color:#fff;border-radius:100px;font-size:.65rem;font-weight:700} .label{display:inline-block;padding:.22rem .6rem;border-radius:5px;font-size:.68rem;font-weight:700;line-height:1.4;background:var(--blue);color:#fff} .label-default{background:var(--surface);color:var(--txt-body)} .label-info{background:var(--blue-tint);color:var(--blue)} .label-success{background:#dcfce7;color:#166534} .label-danger{background:#fee2e2;color:#991b1b} .label-warning{background:#fef3c7;color:#78350f} .label-primary{background:var(--blue);color:#fff} .label+.label{margin-left:.3rem} /* Pagination */ .pagination{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:.6rem 0} .pagination>li>a,.pagination>li>span{ display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 .5rem; background:var(--card-bg) !important;border:1px solid var(--border) !important; border-radius:7px;font-size:.78rem;color:var(--txt-body) !important;transition:all .18s; } .pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important} .pagination>li>a:hover{background:var(--blue-tint) !important;color:var(--blue) !important} .pagination>.disabled>a{opacity:.35 !important} /* Misc */ .margin-top-5{margin-top:.5rem} .pointer{cursor:pointer} .panel-height{max-height:300px} .scroll{overflow-y:auto;overflow-x:hidden} .scroll::-webkit-scrollbar{width:3px} .scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .col-sm-2.sidenav{display:none} .pager,.pager a,.pager span{font-size:.8rem} .pager a{color:var(--blue) !important} .print-actions{display:flex;align-items:center;gap:.5rem;margin:.85rem 0;flex-wrap:wrap} .balance-summary{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue-tint);border:1px solid rgba(36,109,238,.18);border-radius:9px;padding:.4rem .85rem;font-size:.82rem;font-weight:700;color:var(--blue);margin-bottom:1rem} [style*="text-align:center"] b,.text-center b{color:var(--txt-primary)} /* Empty state card */ .empty-state{text-align:center;padding:3rem 1rem;color:var(--txt-muted)} .empty-state .empty-icon{width:56px;height:56px;border-radius:16px;background:var(--blue-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.35rem;color:var(--blue)} .empty-state h4{font-size:.9rem;font-weight:700;color:var(--txt-primary);margin-bottom:.35rem} .empty-state p{font-size:.82rem} /* Misc layout */ .col-xs-12>h4,.col-sm-12>h4{font-size:.92rem;font-weight:700;color:var(--txt-primary);margin-bottom:.85rem;padding-bottom:.65rem;border-bottom:1px solid var(--border)} /* ═══════════════════════════════════════════════════════════ DASHBOARD ═══════════════════════════════════════════════════════════ */ .dash{padding:0} .dash-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem} .dash-title{font-size:1.3rem !important;font-weight:600 !important;letter-spacing:-.022em !important;color:var(--txt-primary) !important;line-height:1} .dash-subtitle{font-size:.8rem !important;font-weight:400 !important;color:var(--txt-muted) !important;margin-top:.35rem !important} .dash-section{margin-bottom:2rem} .dash-sec-hdr{ display:flex;align-items:center;gap:.55rem; font-size:.72rem !important;font-weight:700 !important;letter-spacing:.13em !important; text-transform:uppercase;color:var(--txt-body) !important; margin-bottom:1rem !important;padding-bottom:.55rem;border-bottom:1px solid var(--border); } .dash-sec-hdr i{color:var(--blue) !important;font-size:.7rem !important} /* Stat grid — 4 columns */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem} @media(max-width:1280px){.stat-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:580px){.stat-grid{grid-template-columns:1fr 1fr}} /* Stat card */ .stat-card{ background:var(--card-bg);border:1px solid var(--border);border-radius:12px !important; padding:.95rem 1rem !important;display:flex;align-items:flex-start;gap:.75rem !important; box-shadow:var(--card-shadow);transition:box-shadow .25s,transform .22s;overflow:hidden; } .stat-card:hover{box-shadow:0 6px 22px rgba(36,109,238,.12);transform:translateY(-2px)} .stat-icon{width:38px !important;height:38px !important;border-radius:9px !important;flex-shrink:0;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.88rem !important} .stat-card--dark .stat-icon{background:var(--blue-tint) !important;color:var(--blue) !important} [data-theme="dark"] .stat-card--dark .stat-icon{background:rgba(36,109,238,.2) !important;color:#93C5FD !important} .stat-body{flex:1;min-width:0} .stat-value{font-size:clamp(.95rem,1.6vw,1.25rem) !important;font-weight:600 !important;color:var(--txt-primary) !important;letter-spacing:-.015em !important;line-height:1;margin-bottom:.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stat-label{font-size:.62rem !important;font-weight:600 !important;color:var(--txt-muted) !important;text-transform:uppercase;letter-spacing:.06em !important;line-height:1.35} /* Data grids */ .dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem} .dash-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem} @media(max-width:1200px){.dash-grid-4{grid-template-columns:repeat(2,1fr)}.dash-grid-3{grid-template-columns:1fr 1fr}} @media(max-width:768px){.dash-grid-2,.dash-grid-3,.dash-grid-4{grid-template-columns:1fr}} /* Data cards */ .dash-data-card{background:var(--card-bg);border:1px solid var(--border) !important;border-radius:12px !important;overflow:hidden !important;box-shadow:0 1px 4px rgba(36,109,238,.05) !important} .dash-data-hdr{ background:var(--card-bg) !important;border-bottom:2px solid var(--blue) !important; padding:.65rem .85rem !important;font-size:.62rem !important;font-weight:700 !important; letter-spacing:.16em !important;text-transform:uppercase;color:var(--txt-primary) !important; display:flex !important;align-items:center !important;gap:.45rem !important; } .dash-data-hdr i{color:var(--blue) !important;font-size:.62rem !important} .dash-data-body{max-height:280px !important;overflow-y:auto !important} .dash-data-body::-webkit-scrollbar{width:3px} .dash-data-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .dash-data-body .table{margin:0 !important;width:100% !important;border-collapse:collapse !important} .dash-data-body .table thead th{ background:#F7F9FD !important;color:#8892A4 !important; font-size:.62rem !important;font-weight:800 !important;text-transform:uppercase !important; letter-spacing:.1em !important;padding:.48rem .85rem !important; border-bottom:1px solid var(--border) !important;text-align:left !important;white-space:nowrap !important; } .dash-data-body .table thead th:last-child{text-align:right !important} .dash-data-body .table tbody td{ padding:.52rem .85rem !important;font-size:.82rem !important;font-weight:500 !important; color:var(--txt-primary) !important;border-bottom:1px solid rgba(36,109,238,.06) !important; text-align:left !important;vertical-align:middle !important; } .dash-data-body .table tbody td:last-child{text-align:right !important;font-weight:700 !important;color:var(--blue) !important;font-size:.8rem !important;white-space:nowrap !important} .dash-data-body .table tbody tr:nth-child(even) td{background:rgba(36,109,238,.025) !important} .dash-data-body .table tbody tr:hover td{background:rgba(36,109,238,.07) !important;color:var(--txt-primary) !important} .dash-data-body .table tbody tr:hover td:last-child{color:var(--blue) !important} [data-theme="dark"] .dash-data-hdr{background:var(--card-bg) !important} [data-theme="dark"] .dash-data-body .table thead th{background:rgba(255,255,255,.04) !important;color:var(--txt-muted) !important;border-color:var(--border) !important} [data-theme="dark"] .dash-data-body .table tbody td{color:var(--txt-body) !important;border-color:rgba(255,255,255,.05) !important} [data-theme="dark"] .dash-data-body .table tbody tr:nth-child(even) td{background:rgba(255,255,255,.03) !important} [data-theme="dark"] .dash-data-body .table tbody tr:hover td{background:rgba(36,109,238,.12) !important} .dash-empty{padding:.85rem 1rem;font-size:.8rem;color:var(--txt-muted);font-style:italic} /* Earnings chart — white in light, dark in dark */ .dash-chart-card{background:var(--card-bg) !important;border:1.5px solid var(--border) !important;box-shadow:var(--card-shadow) !important;border-radius:12px !important;padding:1.35rem !important;overflow:hidden} .dash-chart-title{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-muted) !important;margin-bottom:1rem} [data-theme="dark"] .dash-chart-card{background:var(--dark) !important;border-color:rgba(255,255,255,.06) !important;box-shadow:0 4px 20px rgba(0,0,0,.25) !important} [data-theme="dark"] .dash-chart-title{color:rgba(255,255,255,.35) !important} #paymentMethodYear{color:rgba(255,255,255,.6);font-size:.8rem} /* ═══════════════════════════════════════════════════════════ SETTINGS ═══════════════════════════════════════════════════════════ */ #rolesTable .label{font-size:.72rem;padding:.25rem .65rem;border-radius:6px} #rolesTable td{vertical-align:middle} #rolePermsTableBody tr td{vertical-align:middle;padding:.42rem .6rem} #rolePermsTableBody tr:hover td{background:var(--blue-tint)} #rolePermsTableBody input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer} #checkAllPerms,#checkViewOnly,#clearAllPerms{margin-right:.3rem} #userRolesList label{border-bottom:1px solid var(--border);padding:.55rem .25rem;margin:0;cursor:pointer;transition:background .15s;border-radius:0} #userRolesList label:hover{background:var(--blue-tint)} #userRolesList input[type=checkbox]{accent-color:var(--blue)} .role-info-box{background:rgba(36,109,238,.06);border:1px solid rgba(36,109,238,.18);border-radius:10px;padding:.85rem 1rem;font-size:.82rem;color:var(--txt-body);margin-bottom:.85rem;line-height:1.65} .role-info-box ul{padding-left:1rem;margin:.35rem 0 0} .role-info-box ul li{margin-bottom:.22rem} /* ═══════════════════════════════════════════════════════════ LOGIN ═══════════════════════════════════════════════════════════ */ .login-back-pill{display:inline-flex;align-items:center;gap:.38rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-size:.75rem;font-weight:600;padding:.3rem .85rem;border-radius:100px;text-decoration:none;transition:all .2s;backdrop-filter:blur(8px);margin-bottom:1.5rem} .login-back-pill:hover{background:rgba(36,109,238,.25);border-color:rgba(36,109,238,.4);color:#fff} /* ═══════════════════════════════════════════════════════════ PRODUCT ADD FORM PANEL ═══════════════════════════════════════════════════════════ */ .add-form-panel{background:var(--card-bg);border:1.5px solid var(--blue);border-radius:14px;padding:1.35rem 1.5rem;margin-bottom:1.25rem;box-shadow:0 0 0 4px rgba(36,109,238,.06);animation:slideDown .22s ease} @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} .add-form-panel .form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem} @media(max-width:900px){.add-form-panel .form-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.add-form-panel .form-grid{grid-template-columns:1fr}} .add-form-panel .form-grid-full{grid-column:1 / -1} .add-form-panel .form-title{font-size:.82rem;font-weight:700;color:var(--blue);margin-bottom:1rem;display:flex;align-items:center;gap:.4rem} .add-form-panel .form-actions{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.85rem;margin-top:.85rem;border-top:1px solid var(--border)} /* ═══════════════════════════════════════════════════════════ CHECKBOXES & FILTER SECTIONS (report modals) ═══════════════════════════════════════════════════════════ */ .checkbox{margin:.2rem 0} .checkbox label{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:400;color:var(--txt-body);cursor:pointer;padding:.22rem .4rem;border-radius:5px;transition:background .15s} .checkbox label:hover{background:var(--blue-tint)} .checkbox input[type=checkbox]{width:14px;height:14px;accent-color:var(--blue);cursor:pointer;flex-shrink:0} [data-theme="dark"] .checkbox label{color:var(--txt-body)} [data-theme="dark"] .checkbox label:hover{background:var(--blue-tint)} .filter-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;margin-bottom:.85rem} .filter-section-title{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)} [data-theme="dark"] .filter-section{background:var(--surface);border-color:var(--border)} .checkbox-scroll-list{max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;background:var(--card-bg)} .checkbox-scroll-list::-webkit-scrollbar{width:3px} .checkbox-scroll-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} /* ═══════════════════════════════════════════════════════════ WAREHOUSE / HR MISC ═══════════════════════════════════════════════════════════ */ .warehouse-inventory-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem} .warehouse-inventory-header h4{margin:0;font-size:1rem;font-weight:700} .employee-action-btns{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;margin-top:.5rem} @media(max-width:767px){.employee-action-btns{justify-content:flex-start;margin-top:.75rem}} /* ═══════════════════════════════════════════════════════════ PRINT — SHELL ═══════════════════════════════════════════════════════════ */ @media print{ #appTopbar,#appSidebar,.hidden-print{display:none !important} #appMain{margin:0 !important;padding:0 !important} body{font-size:11px;background:#fff;color:#000} .panel{box-shadow:none;border:1px solid #ccc} .modal-backdrop{display:none !important} .modal{display:none !important} .modal.in{position:static !important;display:block !important} .modal-content{box-shadow:none;border:none} .modal-footer{display:none} .modal-header .close{display:none} } /* ── PRINT — Modal (body.modal-print) ──────────────────── */ @media print{ body.modal-print #appMain, body.modal-print #appTopbar, body.modal-print #appSidebar, body.modal-print .modal-backdrop, body.modal-print .app-footer, body.modal-print .modal-header, body.modal-print .modal-footer{display:none !important} body.modal-print .modal.in{padding:0 !important;position:static !important} body.modal-print .modal-content{box-shadow:none !important;border:none !important;border-radius:0 !important} body.modal-print .modal-dialog{max-width:100% !important;margin:0 !important} body.modal-print .modal-body{padding:0 !important} body.modal-print .rcpt{max-width:100%} } /* ═══════════════════════════════════════════════════════════ MOBILE ═══════════════════════════════════════════════════════════ */ @media(max-width:767px){ #appSidebar{transform:translateX(-100%);transition:transform .28s} body.sidebar-open #appSidebar{transform:translateX(0)} body.sidebar-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:399} #appMain{margin-left:0;padding:1rem} #appTopbar{padding-right:.6rem} .tb-biz-name{display:none !important} .modal.in{padding:3rem .75rem 1rem} } @media(min-width:768px){.tb-biz-name{display:inline-flex !important}} /* ═══════════════════════════════════════════════════════════ BOOTSTRAP COLLAPSE COMPAT ═══════════════════════════════════════════════════════════ */ .collapse{display:none !important} .collapse.in{display:block !important} .row.collapse{display:none !important} .row.collapse.in{display:flex !important} /* ═══════════════════════════════════════════════════════════ GENERATE REPORT MODAL (gen-report-*) ═══════════════════════════════════════════════════════════ */ .gen-report-header{background:linear-gradient(135deg,#1C2034,#252A48);border:none;padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .gen-report-header .title{color:#fff;font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.5rem} .gen-report-header .title i{color:#6e9ef5} .gen-report-header .close{color:#fff !important;opacity:1 !important;font-size:1.3rem;line-height:1;background:rgba(255,255,255,.13);border:none;border-radius:7px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s} .gen-report-header .close:hover{background:rgba(255,255,255,.24) !important} .gen-report-body{ padding:1.35rem 1.5rem !important;overflow-y:auto !important;overflow-x:hidden !important; flex:1;background:var(--content);display:flex;flex-direction:column;gap:1rem; max-height:calc(92vh - 130px); } .gen-report-body::-webkit-scrollbar{width:5px} .gen-report-body::-webkit-scrollbar-track{background:rgba(36,109,238,.08);border-radius:4px} .gen-report-body::-webkit-scrollbar-thumb{background:rgba(36,109,238,.35);border-radius:4px} .gen-report-body::-webkit-scrollbar-thumb:hover{background:var(--blue)} [data-theme="dark"] .gen-report-body{background:var(--content)} [data-theme="dark"] .gen-report-body::-webkit-scrollbar-track{background:rgba(255,255,255,.06)} [data-theme="dark"] .gen-report-body::-webkit-scrollbar-thumb{background:rgba(36,109,238,.55)} .gen-report-footer{padding:.9rem 1.5rem;border-top:1px solid var(--border);background:var(--card-bg);display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0} .gen-report-footer .btn-success{min-width:130px} [data-theme="dark"] .gen-report-footer{background:var(--card-bg);border-color:var(--border)} /* Section cards */ .grp-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:visible;box-shadow:var(--card-shadow)} .grp-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);gap:.5rem} .grp-section-hdr i{font-size:.68rem} .grp-section-hdr .hdr-actions{display:flex;gap:.35rem;margin-left:auto} .grp-section-body{padding:.9rem 1rem;border-radius:0 0 12px 12px} [data-theme="dark"] .grp-section{background:var(--card-bg)} [data-theme="dark"] .grp-section-hdr{background:var(--surface)} [data-theme="dark"] .grp-section-body{background:var(--card-bg)} .grp-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .grp-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.15rem .5rem} @media(max-width:640px){.grp-col-grid{grid-template-columns:repeat(2,1fr)}} .grp-toggle-row{display:flex;gap:1.25rem;flex-wrap:wrap;padding:.5rem .9rem;margin-bottom:.75rem;background:var(--blue-tint);border:1px solid rgba(36,109,238,.15);border-radius:8px} .grp-toggle-row label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--blue);cursor:pointer;margin:0} .grp-toggle-row input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;cursor:pointer} [data-theme="dark"] .grp-toggle-row{background:rgba(36,109,238,.12);border-color:rgba(36,109,238,.22)} .grp-check label{display:flex;align-items:center;gap:.42rem;font-size:.8rem;font-weight:400;color:var(--txt-body);cursor:pointer;padding:.26rem .38rem;border-radius:6px;margin:0;transition:background .14s;white-space:nowrap} .grp-check label:hover{background:var(--blue-tint);color:var(--blue)} .grp-check input[type=checkbox]{accent-color:var(--blue);width:14px;height:14px;cursor:pointer;flex-shrink:0} [data-theme="dark"] .grp-check label{color:var(--txt-body)} [data-theme="dark"] .grp-check label:hover{background:var(--blue-tint);color:var(--blue)} /* ═══════════════════════════════════════════════════════════ SIMPLE REPORT MODAL (sml-report-modal) ═══════════════════════════════════════════════════════════ */ .sml-report-modal .modal-content{border-radius:18px;border:none;overflow:hidden} .sml-report-modal .modal-header{background:linear-gradient(135deg,#1C2034,#252A48);border:none;padding:1rem 1.35rem;display:flex;align-items:center;justify-content:space-between} .sml-report-modal .modal-header .title{color:#fff;font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:.45rem} .sml-report-modal .modal-header .title i{color:#6e9ef5} .sml-report-modal .modal-header .close{color:#fff !important;opacity:1 !important;font-size:1.3rem;background:rgba(255,255,255,.14);border:none;border-radius:7px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s} .sml-report-modal .modal-header .close:hover{background:rgba(255,255,255,.26) !important} .sml-report-modal .modal-body{padding:1.35rem 1.5rem;background:var(--card-bg)} .sml-report-modal .modal-footer{background:var(--card-bg);border-top:1px solid var(--border);padding:.85rem 1.5rem;display:flex;gap:.5rem;justify-content:flex-end} [data-theme="dark"] .sml-report-modal .modal-body,[data-theme="dark"] .sml-report-modal .modal-footer{background:var(--card-bg);border-color:var(--border)} .sml-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .sml-date-grid label{font-size:.72rem;font-weight:700;color:var(--txt-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem} .sml-date-grid .errMsg{min-height:16px;margin-top:.2rem} /* Legacy .report-modal-section (older report modals) */ .report-modal-section{border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;background:var(--surface)} .report-modal-section-title{display:flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)} .report-modal-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.1rem} @media(max-width:600px){.report-modal-col-grid{grid-template-columns:repeat(2,1fr)}} /* ═══════════════════════════════════════════════════════════ RECEIPT — rcpt LEGACY COMPONENT Kept for templates that use .rcpt-head (older pattern). New templates use .rcpt2 below. ═══════════════════════════════════════════════════════════ */ .rcpt{font-family:'Kamerik','Raleway',sans-serif;max-width:420px;margin:0 auto;background:#fff;font-size:.82rem;color:#1A1D2E;line-height:1.55} /* Legacy header (plain dashed line style) */ .rcpt-head{text-align:center;padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1.5px dashed #DDE6F5} .rcpt-head .biz{font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em} .rcpt-head .addr{font-size:.72rem;color:#3A4460;margin-top:.15rem;line-height:1.55} .rcpt-head .inv{font-size:.7rem;color:#8892A4;margin-top:.4rem} /* New dark gradient header */ .rcpt-biz-hdr{background:linear-gradient(135deg,#1C2034,#252A48);color:#fff;text-align:center;padding:1.35rem 1.25rem 1.1rem} .rcpt-biz-hdr .biz-name{font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem;color:#fff} .rcpt-biz-hdr .biz-addr{font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.6} .rcpt-biz-hdr .biz-inv{display:inline-flex;align-items:center;gap:.45rem;margin-top:.75rem;background:rgba(36,109,238,.3);border:1px solid rgba(36,109,238,.45);border-radius:6px;padding:.22rem .75rem;font-size:.72rem;font-weight:700;color:#c8d8ff;letter-spacing:.02em} /* Meta */ .rcpt-meta{margin:0;padding:.85rem 1.1rem;background:#F8FAFD;border-bottom:1px solid #DDE6F5} .rcpt-meta .r{display:flex;justify-content:space-between;align-items:flex-start;font-size:.76rem;padding:.22rem 0;gap:.5rem;border-bottom:1px dashed #EDF2FB} .rcpt-meta .r:last-child{border-bottom:none} .rcpt-meta .r strong{color:#8892A4;font-weight:700;flex-shrink:0;min-width:100px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .rcpt-meta .r span{color:#1A1D2E;font-weight:600;text-align:right} /* Items */ .rcpt-items-hdr{display:flex;padding:.45rem .9rem;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.85);background:#246DEE;margin:0} .rcpt-items-hdr span{flex:1} .rcpt-item{display:flex;padding:.42rem .9rem;font-size:.78rem;border-bottom:1px solid #EDF2FB;color:#1A1D2E;align-items:center;gap:.25rem} .rcpt-item:nth-child(even){background:#F8FAFD} .rcpt-item span{flex:1} /* Totals */ .rcpt-totals{padding:.75rem .9rem .5rem;border-top:2px solid #1C2034;background:#fff} .rcpt-totals .tl{display:flex;justify-content:space-between;font-size:.78rem;padding:.22rem 0;color:#3A4460;border-bottom:1px dashed #EDF2FB} .rcpt-totals .tl:last-of-type{border-bottom:none} .rcpt-totals .tl.bold{font-weight:800;font-size:.9rem;color:#1A1D2E;margin-top:.5rem;padding:.55rem .75rem;background:#EBF1FD;border-radius:8px;border:none} .rcpt-totals .tl.bold span:last-child{color:#246DEE} /* Footer & buttons */ .rcpt-foot{text-align:center;padding:.75rem 1rem;font-size:.7rem;color:#8892A4;line-height:1.7;background:#F8FAFD;border-top:1px dashed #DDE6F5} .rcpt-buttons{display:flex;gap:.5rem;justify-content:center;padding:.9rem 1rem;background:#fff;border-top:1px solid #EDF2FB} .rcpt-buttons .btn{min-width:120px} /* Modal shell */ .rcpt-modal .modal-content{border:none !important;background:transparent !important;box-shadow:0 28px 72px rgba(0,0,0,.38) !important;border-radius:18px !important;overflow:hidden !important} .rcpt-modal .modal-header{display:none !important} .rcpt-modal .modal-body{padding:0 !important;overflow-y:auto !important;overflow-x:hidden !important;max-height:88vh;background:transparent !important} .rcpt-modal .modal-body::-webkit-scrollbar{width:4px} .rcpt-modal .modal-body::-webkit-scrollbar-thumb{background:rgba(36,109,238,.35);border-radius:4px} /* rcpt print */ @media print{ .rcpt{max-width:100%;padding:.5rem 0} .rcpt-biz-hdr{background:#1C2034 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .rcpt-items-hdr{background:#246DEE !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .rcpt-buttons{display:none} } /* Legacy receipt-doc (some PDF templates) */ .receipt-doc{font-family:'Kamerik','Raleway',sans-serif;font-size:.82rem;color:#1A1D2E;max-width:380px;margin:0 auto;padding:1.25rem 1.1rem} .receipt-doc .receipt-header{text-align:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:2px solid #1A1D2E} .receipt-doc .receipt-header h3{font-size:1.1rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.2rem} .receipt-doc .receipt-header p{font-size:.75rem;color:#3A4460;line-height:1.5} .receipt-doc .receipt-meta{margin-bottom:.85rem} .receipt-doc .receipt-meta p{font-size:.78rem;margin-bottom:.18rem;display:flex;gap:.4rem} .receipt-doc .receipt-meta p strong{min-width:110px;display:inline-block;color:#1A1D2E} .receipt-doc .receipt-table{width:100%;border-collapse:collapse;margin-bottom:.85rem;font-size:.78rem} .receipt-doc .receipt-table th{border-bottom:1.5px solid #1A1D2E;padding:.3rem .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em} .receipt-doc .receipt-table td{padding:.28rem .4rem;border-bottom:1px solid #DDE6F5} .receipt-doc .receipt-totals{border-top:1.5px solid #1A1D2E;padding-top:.7rem} .receipt-doc .receipt-totals .r-line{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:.2rem} .receipt-doc .receipt-totals .r-line.bold{font-weight:700;font-size:.84rem;margin-top:.35rem;padding-top:.35rem;border-top:1px dashed #DDE6F5} .receipt-doc .receipt-footer{text-align:center;margin-top:.85rem;padding-top:.7rem;border-top:1px dashed #DDE6F5;font-size:.72rem;color:#8892A4} /* ═══════════════════════════════════════════════════════════ OLD STANDALONE REPORT PAGES (rpt-*) ═══════════════════════════════════════════════════════════ */ .rpt-page{font-family:'Raleway','Kamerik',Arial,sans-serif;font-size:13px;color:#1A1D2E;background:#fff;max-width:1280px;margin:0 auto;padding:1.5rem} .rpt-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:2px solid #DDE6F5} .rpt-header .biz-name{font-size:1.25rem;font-weight:900;color:#1A1D2E;letter-spacing:-.02em;margin-bottom:.4rem} .rpt-biz{color:#246DEE;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.2rem} .rpt-meta,.rpt-header .meta{font-size:.82rem;color:#3A4460;line-height:1.75} .rpt-meta span{margin-right:1.5rem} .rpt-header .meta strong{color:#1A1D2E} .rpt-print-btn{display:inline-flex;align-items:center;gap:.4rem;background:#246DEE;color:#fff;border:none;border-radius:9px;padding:.55rem 1.2rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;transition:all .2s} .rpt-print-btn:hover{background:#1a56c4;box-shadow:0 6px 18px rgba(36,109,238,.35)} .rpt-panel-heading,.rpt-section-title{background:#246DEE;color:#fff;padding:.6rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:8px 8px 0 0} .rpt-table-wrap{border:1px solid #DDE6F5;border-radius:0 0 10px 10px;overflow:hidden} .rpt-table{width:100%;border-collapse:collapse;font-size:.8rem} .rpt-table th{background:#f5f7fb;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#556070;padding:.4rem .55rem;border:1px solid #DDE6F5;white-space:nowrap} .rpt-table td{padding:.38rem .55rem;border:1px solid #DDE6F5;color:#1A1D2E;vertical-align:top} .rpt-table tr:nth-child(even) td{background:#F9FBFF} .rpt-table tfoot th{background:#E8EFF8;font-weight:700;color:#1A1D2E;border:1px solid #DDE6F5} @media print{ .rpt-page{padding:.5rem;max-width:100%} .rpt-print-btn,.btn{display:none !important} .rpt-table{font-size:7.5px} .rpt-table th,.rpt-table td{padding:.2rem .3rem} } /* ═══════════════════════════════════════════════════════════ RECEIPT — rcpt2 MODAL SHELLS ═══════════════════════════════════════════════════════════ */ #saleReceiptModal .modal-header, #purchaseReceiptModal .modal-header, #receivableReceiptModal .modal-header, #payableReceiptModal .modal-header, #expenseReceiptModal .modal-header, #purchaseorderReceiptModal .modal-header, #salesorderReceiptModal .modal-header, #warehousesaleReceiptModal .modal-header{display:none !important} #saleReceiptModal.modal.in,#purchaseReceiptModal.modal.in, #receivableReceiptModal.modal.in,#payableReceiptModal.modal.in, #expenseReceiptModal.modal.in,#purchaseorderReceiptModal.modal.in, #salesorderReceiptModal.modal.in,#warehousesaleReceiptModal.modal.in{ padding:2.5rem 1rem 1.5rem !important;align-items:flex-start !important; } #saleReceiptModal .modal-dialog,#purchaseReceiptModal .modal-dialog, #receivableReceiptModal .modal-dialog,#payableReceiptModal .modal-dialog, #expenseReceiptModal .modal-dialog,#purchaseorderReceiptModal .modal-dialog, #salesorderReceiptModal .modal-dialog,#warehousesaleReceiptModal .modal-dialog{max-width:460px !important;margin:0 auto !important} #saleReceiptModal .modal-content,#purchaseReceiptModal .modal-content, #receivableReceiptModal .modal-content,#payableReceiptModal .modal-content, #expenseReceiptModal .modal-content,#purchaseorderReceiptModal .modal-content, #salesorderReceiptModal .modal-content,#warehousesaleReceiptModal .modal-content{border:none !important;border-radius:20px !important;overflow:hidden !important;background:#fff !important;box-shadow:0 28px 72px rgba(0,0,0,.45) !important} #saleReceiptModal .modal-body,#purchaseReceiptModal .modal-body, #receivableReceiptModal .modal-body,#payableReceiptModal .modal-body, #expenseReceiptModal .modal-body,#purchaseorderReceiptModal .modal-body, #salesorderReceiptModal .modal-body,#warehousesaleReceiptModal .modal-body{ padding:0 !important;background:#fff !important;overflow-x:hidden !important;overflow-y:auto !important; max-height:calc(90vh - 60px) !important; scrollbar-width:thin !important;scrollbar-color:rgba(36,109,238,.35) rgba(36,109,238,.07) !important; } #saleReceiptModal .modal-body::-webkit-scrollbar, #purchaseReceiptModal .modal-body::-webkit-scrollbar, #receivableReceiptModal .modal-body::-webkit-scrollbar, #payableReceiptModal .modal-body::-webkit-scrollbar, #expenseReceiptModal .modal-body::-webkit-scrollbar, #purchaseorderReceiptModal .modal-body::-webkit-scrollbar, #salesorderReceiptModal .modal-body::-webkit-scrollbar, #warehousesaleReceiptModal .modal-body::-webkit-scrollbar{display:block !important;width:5px !important} #saleReceiptModal .modal-body::-webkit-scrollbar-thumb, #purchaseReceiptModal .modal-body::-webkit-scrollbar-thumb, #receivableReceiptModal .modal-body::-webkit-scrollbar-thumb, #payableReceiptModal .modal-body::-webkit-scrollbar-thumb, #expenseReceiptModal .modal-body::-webkit-scrollbar-thumb, #purchaseorderReceiptModal .modal-body::-webkit-scrollbar-thumb, #salesorderReceiptModal .modal-body::-webkit-scrollbar-thumb, #warehousesaleReceiptModal .modal-body::-webkit-scrollbar-thumb{background:rgba(36,109,238,.38) !important;border-radius:4px !important} [data-theme="dark"] #saleReceiptModal .modal-body, [data-theme="dark"] #purchaseReceiptModal .modal-body, [data-theme="dark"] #receivableReceiptModal .modal-body, [data-theme="dark"] #payableReceiptModal .modal-body, [data-theme="dark"] #expenseReceiptModal .modal-body, [data-theme="dark"] #purchaseorderReceiptModal .modal-body, [data-theme="dark"] #salesorderReceiptModal .modal-body, [data-theme="dark"] #warehousesaleReceiptModal .modal-body{background:#fff !important;scrollbar-color:rgba(36,109,238,.55) rgba(255,255,255,.05) !important} [data-theme="dark"] #saleReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #purchaseReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #receivableReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #payableReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #expenseReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #purchaseorderReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #salesorderReceiptModal .modal-body::-webkit-scrollbar-track, [data-theme="dark"] #warehousesaleReceiptModal .modal-body::-webkit-scrollbar-track{background:rgba(255,255,255,.04) !important} [data-theme="dark"] #saleReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #purchaseReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #receivableReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #payableReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #expenseReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #purchaseorderReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #salesorderReceiptModal .modal-body::-webkit-scrollbar-thumb, [data-theme="dark"] #warehousesaleReceiptModal .modal-body::-webkit-scrollbar-thumb{background:rgba(36,109,238,.55) !important} /* rcpt-modal2 shell */ .rcpt-modal2 .modal-header{display:none !important} .rcpt-modal2 .modal-dialog{max-width:460px !important} .rcpt-modal2 .modal-content{border:none !important;border-radius:18px !important;overflow:hidden !important;box-shadow:0 24px 64px rgba(0,0,0,.38) !important;background:#fff !important} .rcpt-modal2 .modal-body{padding:0 !important;overflow-x:hidden !important;overflow-y:auto !important;max-height:82vh !important;background:#fff !important;scrollbar-width:none !important;-ms-overflow-style:none !important} .rcpt-modal2 .modal-body::-webkit-scrollbar{display:none !important} /* ═══════════════════════════════════════════════════════════ RECEIPT — rcpt2 COMPONENT ═══════════════════════════════════════════════════════════ */ .rcpt2{font-family:'Kamerik','Raleway',sans-serif;font-size:.82rem;color:#1A1D2E;background:#fff;width:100%;display:block} .rcpt2-biz-hdr{background:linear-gradient(150deg,#1C2034 0%,#2D3560 100%);color:#fff;text-align:center;padding:1.75rem 1.5rem 1.4rem;width:100%} .rcpt2-biz-name{font-size:1.3rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:.5rem} .rcpt2-biz-addr{font-size:.74rem;color:rgba(255,255,255,.8);line-height:1.75} .rcpt2-biz-ref{display:inline-flex;align-items:center;gap:.45rem;margin-top:.95rem;background:rgba(36,109,238,.35);border:1px solid rgba(36,109,238,.55);border-radius:7px;padding:.3rem .9rem;font-size:.73rem;font-weight:700;color:#c8dbff;letter-spacing:.03em} .rcpt2-meta{background:#F4F7FD;border-bottom:2px solid #246DEE;padding:.9rem 1.35rem;width:100%} .rcpt2-row{display:flex;justify-content:space-between;align-items:baseline;padding:.28rem 0;border-bottom:1px dashed #DDE6F5;gap:.5rem} .rcpt2-row:last-child{border-bottom:none} .rcpt2-key{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7B8DB0;flex-shrink:0;min-width:100px} .rcpt2-val{font-size:.8rem;font-weight:700;color:#1A1D2E;text-align:right} .rcpt2-items-hdr{display:flex;padding:.5rem 1.35rem;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:#246DEE;width:100%} .rcpt2-item{display:flex;padding:.48rem 1.35rem;font-size:.8rem;border-bottom:1px solid #EDF2FB;color:#1A1D2E;align-items:center;background:#fff;width:100%} .rcpt2-item:nth-child(even){background:#F8FAFD} .rcpt2-col-name{flex:2} .rcpt2-col-num{flex:1;text-align:right;white-space:nowrap} .rcpt2-totals{padding:.9rem 1.35rem .65rem;background:#fff;border-top:2px solid #1C2034;width:100%} .rcpt2-tl{display:flex;justify-content:space-between;font-size:.8rem;padding:.3rem 0;color:#4A5568;border-bottom:1px dashed #EDF2FB} .rcpt2-tl:last-of-type{border-bottom:none} .rcpt2-total-balance{display:flex;justify-content:space-between;font-weight:800;font-size:.95rem;color:#1A1D2E;background:#EBF3FF;border:1.5px solid rgba(36,109,238,.3);border-radius:10px;padding:.65rem .9rem !important;margin-top:.7rem;border-bottom:1.5px solid rgba(36,109,238,.3) !important} .rcpt2-total-balance span:last-child{color:#246DEE;font-size:1.05rem} .rcpt2-foot{text-align:center;padding:.85rem 1rem 1rem;font-size:.72rem;color:#9AA5B8;line-height:1.8;background:#F4F7FD;border-top:1px dashed #DDE6F5;width:100%} .rcpt2-buttons{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid #E4EDF8;box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:.85rem 1rem;display:flex;gap:.6rem;justify-content:center;width:100%} .rcpt2-buttons .btn{min-width:130px} /* ── rcpt2 print ────────────────────────────────────────── */ /* NOTE: @page portrait rule here; sr-* landscape rule below is last so landscape wins globally. Individual receipt PHP files must include their own @page portrait rule in a