/* ============================================================================= Modern design layer — added 2026-09-07. The panel is AdminLTE 2.4.18 on Bootstrap 3.4.1. Both reached end of life in 2019, and every one of the 28 pages is server-rendered PHP that depends on AdminLTE's JS, jQuery and DataTables. Replacing the framework means breaking all of them at once. So this file changes how the panel LOOKS without changing what it IS: it loads after AdminLTE, its skin and custom.css, and restyles the components those files produce. No markup changes, no JS changes, no behaviour changes — which means it cannot regress a working page, and any single rule can be reverted on its own. Tokens first, then layout, then components. Dark mode is driven by a `theme-dark` class on , set by an inline script in head.php from the operator's stored choice - falling back to the OS setting. One palette, and a preference the user can actually override. ============================================================================= */ /* ---------- tokens ---------------------------------------------------------- */ /* Palette is the SMS Belize brand kit in /assets (brand.css), not an invented one. Primary #0057B8, Navy #12304A, Belize Red #CE1126 (sparingly - alerts and badges only), Success #16A34A, Background #F7F9FC, Slate #64748B. */ :root { --sms-belize-blue: #0057b8; --sms-belize-navy: #12304a; --sms-belize-red: #ce1126; --sms-belize-green: #16a34a; --sms-belize-white: #ffffff; --sms-belize-soft-gray: #f7f9fc; --sms-belize-slate: #64748b; --brand: var(--sms-belize-blue); --brand-strong: #00478f; --brand-soft: #e7eff9; --brand-ring: rgba(0, 87, 184, .26); --bg: var(--sms-belize-soft-gray); --surface: var(--sms-belize-white); --surface-2: #f9fbfd; --border: #e2e8f0; --border-2: #eef2f7; /* Navy for major text, per the kit. */ --text: var(--sms-belize-navy); --muted: var(--sms-belize-slate); --faint: #94a3b8; --ok: var(--sms-belize-green); --ok-bg: #e8f6ed; --warn: #b45309; --warn-bg: #fdf3e3; /* Belize red. Reserved for alerts, unread counts and failure states. */ --bad: var(--sms-belize-red); --bad-bg: #fdecee; --info: #0e7490; --info-bg: #e5f5f8; --r-sm: 6px; --r: 10px; --r-lg: 14px; --sh-1: 0 1px 2px rgba(16, 24, 40, .05); --sh-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --sh-3: 0 4px 14px rgba(16, 24, 40, .08); --sidebar-w: 240px; } /* Dark values come from the brand kit too: bg #0F172A, surface #1E293B, primary #3B82F6, text #F8FAFC, muted #94A3B8, accent #EF4444. */ :root.theme-dark { --brand: #3b82f6; --brand-strong: #60a5fa; --brand-soft: #16273f; --brand-ring: rgba(59, 130, 246, .30); --bg: #0f172a; --surface: #1e293b; --surface-2: #243044; --border: #334155; --border-2: #2a3548; --text: #f8fafc; --muted: #94a3b8; --faint: #7c8aa0; --ok: #4ade80; --ok-bg: #10281c; --warn: #f2c078; --warn-bg: #2a2114; --bad: #ef4444; --bad-bg: #2e1618; --info: #7fd4e4; --info-bg: #10262c; --sh-1: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 1px 3px rgba(0, 0, 0, .45); --sh-3: 0 6px 20px rgba(0, 0, 0, .5); } /* ---------- base ------------------------------------------------------------ */ /* Inter is the brand typeface, linked from head.php rather than @import-ed here: an @import is only honoured at the very top of a stylesheet, and a downloads in parallel instead of serialising behind this file. The fallback chain is complete, so a panel opened without internet renders immediately in a native face. */ body, .skin-blue, .skin-blue-light, body.hold-transition { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; letter-spacing: -.011em; } a { color: var(--brand); } a:hover, a:focus { color: var(--brand-strong); text-decoration: none; } ::selection { background: var(--brand-ring); } /* Visible focus everywhere. The stock theme removes outlines and replaces them with nothing, which makes the panel unusable from the keyboard. */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ---------- layout: header -------------------------------------------------- */ .main-header .navbar, .main-header .logo, .skin-blue .main-header .navbar, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: var(--sh-1); } /* A 64px header rather than AdminLTE's 50px. Two reasons: 50px is cramped by modern standards, and the horizontal lockup is a wide 3:1 shape whose legibility is bound by HEIGHT - at 34px its wordmark and tagline turn to mush. The header is position:relative and the content follows in normal flow, so this pushes the page down without any offset to correct; the one coupled value is the sidebar's padding-top, updated alongside it. */ .main-header { border-bottom: 0; } .main-header .navbar { min-height: 64px; } .main-header .logo { height: 64px; line-height: 64px; font-weight: 650; letter-spacing: -.01em; font-size: 17px; } .main-header .navbar .nav > li > a { padding-top: 22px; padding-bottom: 22px; } .main-header .navbar .sidebar-toggle { padding: 22px 16px; } .main-header .logo img { max-height: 30px; width: auto; } /* The horizontal lockup already contains the wordmark, so it stands alone - no separate title text beside it. Sized by height so the SVG keeps its own proportions. */ .main-header .logo img.logo-lockup { max-height: 46px; height: 46px; width: auto; display: inline-block; vertical-align: middle; } #application-title { margin-left: 9px; vertical-align: middle; } /* Light/dark logo swap. See the note in header.php. */ .main-header .logo .logo-for-dark { display: none; } .main-header .logo .logo-for-dark img { height: 32px; width: auto; vertical-align: middle; } .main-header .logo .logo-for-dark #application-title { color: var(--text); font-size: 18px; } /* Selector must out-specify `.main-header .logo img.logo-lockup` above, which carries an element on the end - three classes alone lose to it and the swap silently fails. */ :root.theme-dark .main-header .logo img.logo-lockup.logo-for-light { display: none; } :root.theme-dark .main-header .logo .logo-for-dark { display: inline-block; } .skin-blue .main-header .navbar .nav > li > a, .main-header .navbar .nav > li > a { color: var(--muted); } .skin-blue .main-header .navbar .nav > li > a:hover, .skin-blue .main-header .navbar .nav > li > a:focus, .skin-blue .main-header .navbar .nav .open > a { background: var(--surface-2); color: var(--text); } .skin-blue .main-header .navbar .sidebar-toggle { color: var(--muted); } .skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--surface-2); color: var(--text); } /* ---------- layout: sidebar ------------------------------------------------- */ .main-sidebar, .left-side, .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side { background: var(--surface); border-right: 1px solid var(--border); } .main-sidebar { width: var(--sidebar-w); padding-top: 64px; } /* matches the header height above */ @media (min-width: 768px) { .content-wrapper, .right-side, .main-footer { margin-left: var(--sidebar-w); } .sidebar-collapse .content-wrapper, .sidebar-collapse .right-side, .sidebar-collapse .main-footer { margin-left: 0; } } .skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a { color: var(--text); } .user-panel { padding: 14px 14px 12px; border-bottom: 1px solid var(--border-2); } .user-panel .user-name { font-weight: 600; } .user-panel > .image > img { box-shadow: 0 0 0 2px var(--border); } .sidebar-menu { padding: 10px 10px 24px; } .skin-blue .sidebar-menu > li > a, .sidebar-menu > li > a { color: var(--muted); border-radius: var(--r-sm); margin: 1px 0; padding: 9px 11px; font-weight: 500; border-left: 0 !important; /* AdminLTE marks the active item with a 3px bar */ transition: background .12s ease, color .12s ease; } .skin-blue .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .fa { width: 20px; font-size: 14px; color: var(--faint); transition: color .12s ease; } .skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li > a:hover { background: var(--surface-2); color: var(--text); } .sidebar-menu > li:hover > a > .fa { color: var(--muted); } .skin-blue .sidebar-menu > li.active > a, .sidebar-menu > li.active > a { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .sidebar-menu > li.active > a > .fa { color: var(--brand); } /* ---------- layout: content ------------------------------------------------- */ .content-wrapper, .right-side { background: var(--bg); } .content-header { padding: 22px 24px 6px; background: transparent; } .content-header > h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0; } .content-header > h1 > small { color: var(--muted); font-size: 14px; } .content-header > .breadcrumb { display: none; } /* the sidebar already says where you are */ .content { padding: 12px 24px 28px; } .main-footer { background: transparent; border-top: 1px solid var(--border); color: var(--muted); padding: 14px 24px; } /* ---------- cards (.box) ---------------------------------------------------- */ .box { background: var(--surface); border: 1px solid var(--border); border-top: 1px solid var(--border) !important; /* AdminLTE draws a 3px colour bar */ border-radius: var(--r); box-shadow: var(--sh-2); margin-bottom: 20px; } .box-header { padding: 16px 18px 0; color: var(--text); border-bottom: 0; } .box-header.with-border { border-bottom: 1px solid var(--border-2); padding-bottom: 14px; } .box-header > .box-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .box-body { padding: 18px; } .box-footer { background: var(--surface-2); border-top: 1px solid var(--border-2); border-radius: 0 0 var(--r) var(--r); padding: 14px 18px; } .box.box-solid > .box-header, .box.box-primary > .box-header { background: transparent; color: var(--text); } /* ---------- dashboard tiles (.small-box) ------------------------------------ */ /* Was: eight saturated blocks of flat colour, six of them usually reading zero, so the two numbers that matter carried no more weight than the six that did not. Now they are quiet cards where the FIGURE is the loudest thing, and colour is a small accent rather than the whole surface. */ .small-box { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); margin-bottom: 18px; overflow: hidden; position: relative; } .small-box > .inner { padding: 18px 18px 14px; } .small-box h3 { color: var(--text) !important; font-size: 30px; font-weight: 660; letter-spacing: -.025em; margin: 0 0 2px; } .small-box p { color: var(--muted) !important; font-size: 12.5px; font-weight: 550; text-transform: uppercase; letter-spacing: .045em; margin: 0; } /* The stock icon is a 70px glyph bleeding out of the corner. Shrink and mute it so it labels the tile instead of shouting over the number. */ .small-box > .icon { top: 16px; right: 16px; font-size: 26px; color: var(--faint) !important; opacity: .55; transition: none; } .small-box:hover > .icon { font-size: 26px; opacity: .75; } /* A 3px accent strip carries the semantic colour that used to flood the card. */ .small-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faint); } .small-box.bg-green::before, .small-box.bg-olive::before { background: var(--ok); } .small-box.bg-yellow::before, .small-box.bg-orange::before { background: var(--warn); } .small-box.bg-red::before, .small-box.bg-maroon::before { background: var(--bad); } .small-box.bg-aqua::before, .small-box.bg-teal::before { background: var(--info); } .small-box.bg-blue::before, .small-box.bg-light-blue::before, .small-box.bg-purple::before { background: var(--brand); } .small-box.bg-gray::before, .small-box.bg-navy::before { background: var(--faint); } .small-box > .small-box-footer { background: var(--surface-2) !important; color: var(--muted) !important; border-top: 1px solid var(--border-2); padding: 8px 18px; font-size: 12px; } .small-box > .small-box-footer:hover { color: var(--brand) !important; background: var(--surface-2) !important; } /* ---------- buttons --------------------------------------------------------- */ .btn { border-radius: var(--r-sm); font-weight: 550; font-size: 13.5px; padding: 7px 14px; border: 1px solid transparent; box-shadow: none; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-primary, .btn-primary:focus { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; } .btn-default { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-default:hover, .btn-default:focus { background: var(--surface-2); border-color: var(--muted); color: var(--text); } .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-success { background: var(--ok); border-color: var(--ok); color: #fff; } .btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; } .btn-info { background: var(--info); border-color: var(--info); color: #fff; } .btn-danger:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(.93); color: #fff; } .btn-flat { border-radius: var(--r-sm); } /* ---------- forms ----------------------------------------------------------- */ .form-control, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); box-shadow: none; height: auto; min-height: 38px; padding: 8px 12px; font-size: 14px; transition: border-color .12s ease, box-shadow .12s ease; } .form-control:focus, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .form-control::placeholder { color: var(--faint); } .form-control[disabled], .form-control[readonly] { background: var(--surface-2); color: var(--muted); } label { font-weight: 550; color: var(--text); margin-bottom: 6px; } .help-block { color: var(--muted); font-size: 12.5px; } .input-group-addon { background: var(--surface-2); border-color: var(--border); color: var(--muted); border-radius: var(--r-sm); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 22px; } .select2-dropdown { background: var(--surface); border-color: var(--border); border-radius: var(--r-sm); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); } /* ---------- tables ---------------------------------------------------------- */ .table { color: var(--text); margin-bottom: 0; } .table > thead > tr > th { border-bottom: 1px solid var(--border) !important; border-top: 0; color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; padding: 11px 12px; white-space: nowrap; } .table > tbody > tr > td { border-top: 1px solid var(--border-2); padding: 12px; vertical-align: middle; } .table-hover > tbody > tr:hover { background: var(--surface-2); } .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; } /* Wide tables scroll inside their own box rather than pushing the page sideways. */ .table-responsive { border: 0; overflow-x: auto; } .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding: 7px 11px; margin-left: 8px; } .dataTables_wrapper .dataTables_length select { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding: 5px 8px; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--muted); font-size: 13px; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--r-sm) !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; margin-left: 4px; padding: 5px 11px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-2) !important; color: var(--text) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; } /* ---------- labels, badges, alerts ------------------------------------------ */ .label { display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; line-height: 1.4; } .label-success, .bg-green { background: var(--ok-bg) !important; color: var(--ok) !important; } .label-danger, .bg-red { background: var(--bad-bg) !important; color: var(--bad) !important; } .label-warning, .bg-yellow { background: var(--warn-bg) !important; color: var(--warn) !important; } .label-info, .bg-aqua { background: var(--info-bg) !important; color: var(--info) !important; } .label-primary { background: var(--brand-soft) !important; color: var(--brand) !important; } .label-default { background: var(--surface-2) !important; color: var(--muted) !important; } /* .bg-* also colour the dashboard tiles; keep those transparent so the card styling above survives. */ .small-box.bg-green, .small-box.bg-red, .small-box.bg-yellow, .small-box.bg-aqua, .small-box.bg-blue, .small-box.bg-olive, .small-box.bg-orange, .small-box.bg-maroon, .small-box.bg-teal, .small-box.bg-light-blue, .small-box.bg-purple, .small-box.bg-gray, .small-box.bg-navy { background: var(--surface) !important; color: var(--text) !important; } .alert { border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; box-shadow: var(--sh-1); } .alert-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .alert-danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); } .alert-warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } .alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info); } .text-muted { color: var(--muted) !important; } .text-red { color: var(--bad) !important; } .text-green { color: var(--ok) !important; } /* ---------- modals, dropdowns, tabs ----------------------------------------- */ .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); } .modal-header { border-bottom: 1px solid var(--border-2); padding: 16px 20px; } .modal-header .modal-title { font-size: 16px; font-weight: 620; } .modal-body { padding: 20px; } .modal-footer { border-top: 1px solid var(--border-2); padding: 14px 20px; } .modal-backdrop.in { opacity: .45; } .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-3); padding: 6px; } .dropdown-menu > li > a { color: var(--text); border-radius: var(--r-sm); padding: 8px 12px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--surface-2); color: var(--text); } .dropdown-menu .divider { background: var(--border-2); } .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs > li > a { border: 0; color: var(--muted); font-weight: 550; border-radius: 0; padding: 10px 14px; } .nav-tabs > li > a:hover { background: transparent; color: var(--text); border-bottom: 2px solid var(--border); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: transparent; color: var(--brand); border: 0; border-bottom: 2px solid var(--brand); } .nav-tabs-custom { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-2); border: 1px solid var(--border); } .nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--border-2); } /* ---------- login ----------------------------------------------------------- */ /* The old sign-in screen was a small white rectangle on flat grey. This gives it a centred card with real depth — it is the first thing anyone sees. */ .login-page, .register-page { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .login-box, .register-box { width: 100%; max-width: 400px; margin: 0; } .login-logo, .register-logo { margin-bottom: 22px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; } .login-logo a, .register-logo a { color: var(--text); } .login-logo img { max-height: 44px; width: auto; vertical-align: middle; } /* Stacked lockup carries the mark, wordmark and tagline together, so it replaces the icon-plus-text pairing entirely on the sign-in screen. */ .login-logo img.login-lockup { display: block; margin: 0 auto; width: 186px; max-height: none; height: auto; } /* Dark-mode variant of the sign-in lockup. See the note in index.php. */ .login-logo .login-lockup-dark { display: none; } .login-logo .login-lockup-dark img { display: block; margin: 0 auto 12px; width: 72px; height: 72px; } .login-logo .login-brand-name { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.15; } .login-logo .login-brand-tagline { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--muted); } /* Same specificity trap as the header swap - see the note there. */ :root.theme-dark .login-logo img.login-lockup.logo-for-light { display: none; } :root.theme-dark .login-logo .login-lockup-dark { display: block; } .login-box-body, .register-box-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 26px 24px 22px; color: var(--text); } .login-box-msg, .register-box-msg { color: var(--muted); padding: 0 0 18px; font-size: 14px; } .login-box-body .form-group { margin-bottom: 14px; } .login-box-body .btn-primary { width: 100%; padding: 10px 14px; font-size: 14px; } /* The stock markup puts the "forgot password" link and the button in a 8/4 split, which crams the button. Stack them instead. */ @media (max-width: 480px) { .login-box-body .row > div { width: 100%; float: none; } .login-box-body .row > div + div { margin-top: 10px; } } /* ---------- misc ------------------------------------------------------------ */ /* The stock loader is a large blue triangle pinned to the top-right corner, big enough to cover the page's own controls. Replaced with the slim top progress line every modern app uses. */ .pace .pace-activity, .pace-corner-indicator .pace-activity { display: none !important; } .pace { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; pointer-events: none; background: transparent; } .pace .pace-progress { background: var(--brand); height: 2px; position: fixed; top: 0; right: 100%; width: 100%; z-index: 2000; box-shadow: 0 0 8px var(--brand-ring); } .pace.pace-inactive { display: none; } .callout { border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); } .progress { background: var(--border-2); border-radius: 999px; box-shadow: none; height: 8px; } .progress-bar { background: var(--brand); border-radius: 999px; box-shadow: none; } .pagination > li > a, .pagination > li > span { background: var(--surface); border-color: var(--border); color: var(--text); } .pagination > .active > a, .pagination > .active > span { background: var(--brand); border-color: var(--brand); } hr { border-color: var(--border-2); } /* Toastr sits above everything and still looked like 2014. */ #toast-container > div { border-radius: var(--r); box-shadow: var(--sh-3); opacity: 1; padding: 15px 15px 15px 50px; }