/* =====================================================================
   modern.css — shared modern + responsive theme
   ---------------------------------------------------------------------
   A site-wide restyle layered on top of Bootstrap 4 and the legacy
   Lockdown_sidebar.css. Loaded LAST so its rules win. Uses the same
   navy/teal design language established in Engineering.php so the whole
   console reads as one system.

   Nothing here changes markup, IDs, or behaviour — it only restyles the
   existing shell (sidebar / top navbar / content) and the Bootstrap
   components (cards, tables, modals, buttons, forms) each page already
   uses. Safe to include on every page.
   ===================================================================== */

:root{
    --m-bg:#eef2f6;
    --m-surface:#ffffff;
    --m-surface-2:#f8fafc;
    --m-ink:#0f172a;
    --m-muted:#64748b;
    --m-line:#e6ebf1;
    --m-primary:#0d9488;
    --m-primary-dark:#0f766e;
    --m-primary-soft:rgba(13,148,136,.10);
    /* Colour of the pencil "edit" icons on the cards throughout the site.
       Defaults to the brand primary (matches the "Add new" tiles). Change
       this one value to recolour every edit icon site-wide. */
    --m-edit-icon:var(--m-primary);
    --m-info:#0ea5e9;
    --m-danger:#ef4444;
    --m-danger-soft:#fee2e2;
    --m-warning:#f59e0b;
    --m-ok:#10b981;
    --m-ok-soft:#d1fae5;
    --m-navy:#0f172a;
    --m-navy-2:#111c30;
    --m-radius:14px;
    --m-radius-sm:10px;
    --m-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
    --m-shadow-lg:0 12px 28px rgba(16,24,40,.14);
}

/* ---------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */
body{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
    background:var(--m-bg) !important;
    color:var(--m-ink);
    -webkit-font-smoothing:antialiased;
}

.wrapper{ display:flex; align-items:stretch; min-height:100vh; }

/* legacy decorative spacers that throw off the modern rhythm */
.ruler-div,.ruler-border{ display:none !important; }

/* ---------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------- */
#sidebar{
    min-width:220px; max-width:220px;
    background:linear-gradient(180deg,var(--m-navy) 0%,var(--m-navy-2) 100%) !important;
    color:#cbd5e1 !important;
    box-shadow:2px 0 18px rgba(15,23,42,.18);
    transition:all .25s ease;
    z-index:20;
}
#sidebar.active{ min-width:82px; max-width:82px; text-align:center; }

#sidebar .sidebar-header{
    background:transparent !important;
    padding:22px 20px 14px !important;
    display:flex; align-items:center; gap:12px;
}
#sidebar .sidebar-header h4{
    color:#fff; font-weight:700; font-size:1.05rem; margin:0; letter-spacing:.2px;
}
#sidebar .sidebar-header strong{ color:#fff; font-weight:700; }
#sidebar hr{ border-top:1px solid rgba(255,255,255,.08); margin:4px 16px 8px; }

#sidebar ul.components{ padding:10px 12px !important; border-bottom:none !important; }
#sidebar ul li a{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px !important; margin:2px 0;
    font-size:.9rem; font-weight:500;
    color:#cbd5e1 !important;
    border-radius:10px;
    transition:background .15s ease,color .15s ease;
}
#sidebar ul li a i{ margin-right:0 !important; width:18px; text-align:center; font-size:1rem; opacity:.9; }
#sidebar ul li a:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"]{
    background:var(--m-primary) !important; color:#fff !important;
    box-shadow:0 6px 14px rgba(13,148,136,.35);
}
#sidebar.active .sidebar-header h4{ display:none; }
#sidebar.active ul li a{ justify-content:center; flex-direction:column; gap:5px; font-size:.7rem; }
#sidebar.active ul li a i{ font-size:1.1rem; }

/* ---------------------------------------------------------------------
   Content column
   ------------------------------------------------------------------- */
#content{ padding:0; min-height:100vh; width:100%; transition:all .25s ease; display:flex; flex-direction:column; }

/* Top navbar */
.navbar{
    height:auto !important;
    min-height:62px;
    background:var(--m-surface) !important;
    border:none !important;
    border-bottom:1px solid var(--m-line) !important;
    border-radius:0 !important;
    box-shadow:0 2px 10px rgba(16,24,40,.05) !important;
    padding:10px 24px !important;
    margin-bottom:0 !important;
}
.navbar .container-fluid{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; flex-wrap:wrap;
}
.navbar .navbar-header{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    color:var(--m-muted); font-size:.85rem;
}
.navbar .navbar-header strong{ color:var(--m-ink); font-weight:600; }

/* Menu / Log Out buttons in the top bar */
.navbar-btn,
#sidebarCollapse.btn,
#LogOut.btn{
    width:auto !important;
    padding:8px 15px !important;
    border-radius:10px !important;
    font-size:.82rem !important;
    font-weight:600;
    box-shadow:none !important;
    border:1px solid transparent !important;
    transition:all .15s ease;
}
#sidebarCollapse.btn{
    background:var(--m-primary-soft) !important;
    color:var(--m-primary-dark) !important;
    border-color:rgba(13,148,136,.20) !important;
}
#sidebarCollapse.btn:hover{ background:var(--m-primary) !important; color:#fff !important; }
#LogOut.btn{
    background:var(--m-surface-2) !important;
    color:var(--m-ink) !important;
    border-color:var(--m-line) !important;
}
#LogOut.btn:hover{ background:var(--m-danger) !important; color:#fff !important; border-color:var(--m-danger) !important; }

/* notification icon cluster in the navbar */
.navbar .form-inline{ display:flex; align-items:center; gap:8px; margin:0; }
.my_icon{ padding-right:22px !important; padding-top:6px !important; }

/* Main content region */
#content1{
    background:var(--m-bg) !important;
    padding:26px 40px 56px !important;
    min-height:auto;
    flex:1;
}
@media (max-width:992px){ #content1{ padding:22px 22px 44px !important; } }
@media (max-width:576px){ #content1{ padding:16px 14px 36px !important; } }

/* Page header logo (Radal_* #HeaderImage). The logo image is loaded from the
   DB and the page JS paints a background colour on the <img>, which showed as a
   white box against the light page background. Drop that background and blend
   the image's own white into the page (multiply over the light backdrop makes
   the white disappear while the logo's colours stay). */
#HeaderImage{
    background:transparent !important;
    mix-blend-mode:multiply;
    max-width:100%;
    height:auto;
}

/* ---------------------------------------------------------------------
   Buttons (content area + general)
   ------------------------------------------------------------------- */
.btn{
    border-radius:var(--m-radius-sm) !important;
    font-weight:600;
    font-size:.85rem;
    padding:9px 18px;
    transition:all .15s ease;
}
#content1 .btn{ width:auto; min-width:0; padding-top:9px; padding-bottom:9px; }
/* No persistent halo on mouse click/active — the old spread ring rendered a
   larger-radius rectangle behind the button ("button over a button"). Keep a
   clean keyboard-only focus ring for accessibility. */
.btn,
.btn:hover,
.btn:focus,
.btn.focus,
.btn:active,
.btn:active:focus,
.btn.active{ box-shadow:none !important; outline:none !important; }
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(13,148,136,.40) !important; }

.btn-primary{ background:var(--m-primary) !important; border-color:var(--m-primary) !important; }
.btn-primary:hover{ background:var(--m-primary-dark) !important; border-color:var(--m-primary-dark) !important; }
.btn-info{ background:var(--m-info) !important; border-color:var(--m-info) !important; color:#fff !important; }
.btn-info:hover{ filter:brightness(.94); }
.btn-secondary{ background:var(--m-surface-2) !important; border-color:var(--m-line) !important; color:var(--m-ink) !important; }
.btn-secondary:hover{ background:#eef2f6 !important; }
.btn-warning{ background:var(--m-warning) !important; border-color:var(--m-warning) !important; color:#fff !important; }
.btn-danger{ background:var(--m-danger) !important; border-color:var(--m-danger) !important; }
.btn-success{ background:var(--m-ok) !important; border-color:var(--m-ok) !important; }
.btn-outline-primary{ color:var(--m-primary) !important; border-color:var(--m-primary) !important; }
.btn-outline-primary:hover{ background:var(--m-primary) !important; color:#fff !important; }

/* ---------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */
.card{
    background:var(--m-surface) !important;
    border:1px solid var(--m-line) !important;
    border-radius:var(--m-radius) !important;
    box-shadow:var(--m-shadow) !important;
    overflow:hidden;
    transition:transform .16s ease,box-shadow .16s ease;
}
.card.border-primary,
.card.border-info,
.card.border-success,
.card.border-warning,
.card.border-danger{ border-color:var(--m-line) !important; }
.card-header{
    background:var(--m-surface-2) !important;
    border-bottom:1px solid var(--m-line) !important;
    padding:14px 18px !important;
    font-weight:600;
    color:var(--m-ink);
}
.card-header h6,.card-header h5,.card-header h4{ margin:0; font-weight:700; }
.card-body{ padding:18px !important; }
/* subtle accent bar for coloured cards */
.card.border-primary{ box-shadow:inset 0 3px 0 var(--m-primary),var(--m-shadow) !important; }
.card.border-info{ box-shadow:inset 0 3px 0 var(--m-info),var(--m-shadow) !important; }
.card.border-danger{ box-shadow:inset 0 3px 0 var(--m-danger),var(--m-shadow) !important; }
.card.border-success{ box-shadow:inset 0 3px 0 var(--m-ok),var(--m-shadow) !important; }
.card.border-warning{ box-shadow:inset 0 3px 0 var(--m-warning),var(--m-shadow) !important; }

/* "Add new …" gradient tiles (Cards.css .card-body-add on Radal_* pages).
   These are a bespoke clickable tile whose OUTER .card was originally invisible
   (white, no border/shadow). The generic .card chrome above wrapped them in a
   bordered, shadowed, overflow-clipped box at a different corner radius than the
   inner tile — which exposed a white, mismatched-radius corner + shadow behind
   the tile ("button over a button"). Strip the wrapper chrome and render the
   tile as one clean, on-brand rounded block. Uses :has() (all current browsers).*/
.card:has(> .card-body-add),
.card:has(.card-body-add){
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    border-radius:22px !important;
    min-height:0;
}
.card-body-add{
    border-radius:22px !important;
    background-image:linear-gradient(135deg,var(--m-primary),#22d3ee) !important;
    color:#fff !important;
    box-shadow:0 8px 20px rgba(13,148,136,.30) !important;
    transition:transform .16s ease,box-shadow .16s ease;
}
a:hover > .card > .card-body-add,
.card:hover .card-body-add{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(13,148,136,.40) !important;
}

/* Pencil "edit" icons on cards (Radal_* pages). Colour is driven by
   --m-edit-icon so it can be re-themed from one place. */
.edit-icon{
    color:var(--m-edit-icon) !important;
    cursor:pointer;
    transition:color .15s ease, transform .15s ease;
}
.edit-icon:hover{
    color:var(--m-primary-dark) !important;
    transform:scale(1.15);
}

/* ---------------------------------------------------------------------
   Tables (plain + bootstrap-table)
   ------------------------------------------------------------------- */
.table{
    background:var(--m-surface);
    border-radius:var(--m-radius-sm);
    overflow:hidden;
    font-size:.85rem;
    color:var(--m-ink);
    margin-bottom:0;
}
.table thead th{
    background:var(--m-surface-2);
    border-bottom:1px solid var(--m-line) !important;
    border-top:none !important;
    color:var(--m-muted);
    font-weight:600;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:12px 14px;
}
.table td{
    border-top:1px solid var(--m-line) !important;
    padding:11px 14px;
    vertical-align:middle;
}
.table-hover tbody tr:hover{ background:var(--m-primary-soft) !important; }
.table-responsive,.table-wrapper-scroll-y,.table-wrapper-scroll-y1,.table-wrapper-scroll-y2{
    border:1px solid var(--m-line);
    border-radius:var(--m-radius-sm);
    overflow:auto;
}
/* bootstrap-table chrome */
.bootstrap-table .fixed-table-container{ border:none !important; border-radius:var(--m-radius-sm); }
.fixed-table-toolbar .btn{ font-size:.8rem; }

/* ---------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------- */
.modal-content{
    border:none !important;
    border-radius:var(--m-radius) !important;
    box-shadow:0 24px 60px rgba(16,24,40,.28) !important;
    overflow:hidden;
}
.modal-header{
    background:var(--m-navy) !important;
    color:#fff !important;
    border-bottom:none !important;
    padding:16px 22px !important;
}
.modal-header .modal-title{ font-weight:700; font-size:1.05rem; }
.modal-header .close{ color:#fff !important; opacity:.8; text-shadow:none; font-weight:400; }
.modal-header .close:hover{ opacity:1; }
.modal-body{ padding:22px !important; }
.modal-footer{ border-top:1px solid var(--m-line) !important; padding:14px 22px !important; }

/* ---------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------- */
label,.form-label{ font-weight:600; font-size:.82rem; color:var(--m-ink); margin-bottom:6px; }
.form-control,.custom-select{
    border:1px solid var(--m-line) !important;
    border-radius:var(--m-radius-sm) !important;
    padding:10px 13px !important;
    font-size:.88rem !important;
    height:auto !important;
    color:var(--m-ink);
    background:var(--m-surface);
    transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control:focus,.custom-select:focus{
    border-color:var(--m-primary) !important;
    box-shadow:0 0 0 3px rgba(13,148,136,.18) !important;
}
.form-control::placeholder{ color:#94a3b8; }
.form-group{ margin-bottom:16px; }
.form-check-label{ font-weight:500; font-size:.85rem; color:var(--m-ink); }
.input-group-text{ background:var(--m-surface-2); border:1px solid var(--m-line); border-radius:var(--m-radius-sm); }

/* ---------------------------------------------------------------------
   Badges & alerts
   ------------------------------------------------------------------- */
.badge{ font-weight:600; padding:5px 10px; border-radius:999px; font-size:.72rem; }
.badge-primary{ background:var(--m-primary) !important; }
.badge-danger{ background:var(--m-danger) !important; }
.badge-success{ background:var(--m-ok) !important; }
.badge-warning{ background:var(--m-warning) !important; color:#fff !important; }

.alert{ border:none; border-radius:var(--m-radius-sm); font-size:.88rem; }
.alert-danger{ background:var(--m-danger-soft); color:#991b1b; }
.alert-success{ background:var(--m-ok-soft); color:#065f46; }

/* ---------------------------------------------------------------------
   Login card (index.php) — centre it nicely
   ------------------------------------------------------------------- */
body:not(.has-dashboard) #content1 > .col-md-6{
    max-width:440px; margin:6vh auto 0; float:none; width:100%;
}

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width:768px){
    #sidebar{ position:fixed; height:100%; left:0; top:0; margin-left:-220px; }
    #sidebar.active{ margin-left:0; min-width:220px; max-width:220px; text-align:left; }
    #sidebar.active .sidebar-header h4{ display:block; }
    #sidebar.active ul li a{ flex-direction:row; justify-content:flex-start; font-size:.9rem; }
    #content{ width:100%; }
    .navbar{ padding:10px 14px !important; }
    .navbar .navbar-header{ gap:8px; font-size:.8rem; }
    .my_icon{ padding-right:14px !important; }
}
@media (max-width:576px){
    .navbar .form-inline{ flex-wrap:wrap; }
    .card-body{ padding:14px !important; }
    .modal-body{ padding:16px !important; }
}