/* ============================================================
   modernui.css  —  modern refresh layer for Perfect Lab Manager
   Loaded after mainstyle.css, so it refines existing classes
   (.mod-card, .stat-card, .submodtabs, .modtable, .flat-btn …)
   without breaking the legacy theme.  Drop the <link> into
   header.php to apply site-wide, or keep it in module_head.php
   for the new modules only.
   ============================================================ */

:root{
  --mui-radius: 12px;
  --mui-radius-sm: 5px;
  --mui-border: #e8ecf3;
  --mui-ink: #1f2a37;
  --mui-muted: #6b7280;
  --mui-accent: #0170BB;
  --mui-bg: #f6f8fb;
  --mui-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
  --mui-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
}

/* ---------- typography & base ---------- */
body{
  font-family: "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing:.1px;
}
h5,h6{ letter-spacing:.2px; }

/* ---------- cards ---------- */
.mod-card{
  border:1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mod-card:hover{ box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.09) !important; }

/* ---------- stat cards ---------- */
.stat-card{
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  position:relative; overflow:hidden;
  border:none;
}
.stat-card::after{
  content:""; position:absolute; right:-30px; top:-30px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.stat-card h3{ font-weight:700 !important; letter-spacing:.3px; }
.stat-card i{ opacity:.30 !important; }

/* ---------- sub-module tabs (pill style) ---------- */
.submodtabs{ gap:6px !important; border-bottom:1px solid var(--mui-border); padding-bottom:8px; }
.submodtabs a{
  border:1px solid var(--mui-border) !important;
  background:#fff !important;
  color:var(--mui-muted) !important;
  border-radius: 999px !important;
  padding:6px 16px !important;
  font-weight:500;
  transition: all .15s ease;
}
.submodtabs a:hover{ color:var(--mui-accent) !important; border-color:#c9def0 !important; box-shadow:var(--mui-shadow-sm); }
.submodtabs a.active{
  background:var(--mui-accent) !important;
  color:#fff !important;
  border-color:var(--mui-accent) !important;
  box-shadow:0 4px 10px rgba(1,112,187,.28);
}

/* ---------- tables ---------- */
.modtable{ border-collapse:separate !important; border-spacing:0; }
.modtable thead tr th{
  text-transform:uppercase; font-size:8pt !important; letter-spacing:.6px;
  font-weight:600 !important; padding:10px 8px !important;
}
.modtable thead tr th:first-child{ border-top-left-radius:var(--mui-radius-sm); }
.modtable thead tr th:last-child{ border-top-right-radius:var(--mui-radius-sm); }
.modtable tbody tr{ transition: background .12s ease; }
.modtable tbody tr:nth-child(even) td{ background:#fbfcfe; }
.modtable tbody tr:hover td{ background:#eef5fc; }
.modtable tbody tr td{ padding:9px 8px !important; border-bottom:1px solid #f0f2f6; }
.modtable tfoot td{ border-top:2px solid var(--mui-accent); }

/* ---------- buttons ---------- */
.flat-btn{
  border-radius: var(--mui-radius-sm) !important;
  font-weight:400 !important;
  letter-spacing:.2px;
  box-shadow: var(--mui-shadow-sm);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.flat-btn:hover{ filter:brightness(.96); box-shadow:var(--mui-shadow); }
.flat-btn:active{ transform: translateY(1px); }

.link-btn{
  border-radius: var(--mui-radius-sm) !important;
  font-weight:400 !important;
  letter-spacing:.2px;
  box-shadow: var(--mui-shadow-sm);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.link-btn:hover{ filter:brightness(.96); box-shadow:var(--mui-shadow); }
.link-btn:active{ transform: translateY(1px); }

/* ---------- form fields ---------- */
.entry-form .dtentry, .req-form .dtentry, .dtentry{
  border:1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius-sm) !important;
  padding:0px 5px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  background:#fff;
}
.entry-form .dtentry:focus, .dtentry:focus{
  outline:none; border-color:var(--mui-accent) !important;
  box-shadow:0 0 0 3px rgba(1,112,187,.12) !important;
}
.entry-form label{ font-weight:600 !important; color:#374151 !important; font-size:9pt !important; margin-bottom:3px; display:inline-block; }

/* ---------- select2 polish ---------- */
.select2-container--default .select2-selection--single{
  border:1px solid var(--mui-border) !important;
  border-radius:var(--mui-radius-sm) !important;
  height:30px !important; 
  padding:1px 6px !important;
}

/* ---------- badges ---------- */
.badge-soft{ font-weight:600; letter-spacing:.3px; }

/* ---------- DataTables controls ---------- */
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--mui-border) !important;
  border-radius:var(--mui-radius-sm) !important;
  padding:6px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  border-radius:var(--mui-radius-sm) !important;
  background:var(--mui-accent) !important; color:#fff !important; border:none !important;
}

/* ---------- print: clean monochrome statements ---------- */
@media print{
  .noprint{ display:none !important; }
  .mod-card{ box-shadow:none !important; border:none !important; }
  .modtable tbody tr:hover td, .modtable tbody tr:nth-child(even) td{ background:#fff !important; }
  body{ color:#000 !important; }
}

/* ============================================================
   GLOBAL / LEGACY LAYER
   Applies the modern skin to the original (pre-v2) screens too.
   Loaded site-wide via header.php. Only "skin" properties are
   touched (radius, shadow, border, focus, hover, transitions) —
   no layout/position/width changes — so legacy pages keep their
   structure while gaining the refreshed look. Theme colours set
   by the app (panelColor, button colours, etc.) are preserved.
   ============================================================ */

/* soft app canvas */
body{ background:var(--mui-bg); }

/* ---------- legacy buttons (all carry .flat-btn; also plain .btn) ---------- */
.btn{
  border-radius: var(--mui-radius-sm) !important;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(.97); }
.btn:active{ transform:translateY(1px); }
.user-btn, .bars, #sidebarCollapse, #sidebarCollapse1{ border-radius: var(--mui-radius-sm) !important; }

/* ---------- legacy form fields ---------- */
.form-control,
.entry-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.entry-group select,
.entry-group textarea,
.wrapper input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.wrapper select,
.wrapper textarea{
  border:1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.entry-group input:focus, .entry-group select:focus, .entry-group textarea:focus,
.wrapper input:focus, .wrapper select:focus, .wrapper textarea:focus{
  outline:none !important;
  border-color: var(--mui-accent) !important;
  box-shadow: 0 0 0 3px rgba(1,112,187,.12) !important;
}

/* ---------- legacy panels / shadow blocks ---------- */
.panelcolor{ border-radius: var(--mui-radius-sm) var(--mui-radius-sm) 0 0 !important; }
.theme-shadow-3{
  border:1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
}
.table-shadow{
  box-shadow: var(--mui-shadow) !important;
  -webkit-box-shadow: var(--mui-shadow) !important;
  -moz-box-shadow: var(--mui-shadow) !important;
  border-radius: var(--mui-radius) !important;
}

/* ---------- modals ---------- */
.modal-content{
  border:none !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: 0 12px 40px rgba(16,24,40,.22) !important;
  overflow:hidden;
}
.modal-header{ border-bottom:1px solid rgba(255,255,255,.18) !important; }
.modal-header.panelcolor{ border-radius:0 !important; }

/* ---------- legacy tables (ID-based) — gentle, non-destructive ---------- */
.table-responsive{ border-radius: var(--mui-radius-sm); }
.table-responsive table tbody tr{ transition: background .12s ease; }
.table-responsive table tbody tr:hover td{ background: rgba(1,112,187,.06) !important; }
.table-responsive table thead th{ letter-spacing:.3px; }

/* ---------- sidebar (#sidebar3) ---------- */
.nav-item a{
  border-radius: var(--mui-radius-sm);
  margin:2px 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sub-item{
  border-radius: var(--mui-radius-sm);
  margin:1px 8px;
  transition: background .12s ease, padding-left .12s ease;
}
.sub-item:hover{ padding-left:18px !important; }
#sidebar3{ scrollbar-width: thin; }

/* ---------- top menu dropdowns ---------- */
.dropdown{
  border-radius: var(--mui-radius-sm) !important;
  box-shadow: var(--mui-shadow) !important;
  overflow:hidden;
  border:1px solid var(--mui-border) !important;
}
.dropdown a{ transition: background .12s ease, padding-left .12s ease; }
.dropdown a:hover{ padding-left:18px; }
.menubtn{ border-radius: var(--mui-radius-sm) !important; transition: background .15s ease, color .15s ease; }
.dropdown-menu{
  border-radius: var(--mui-radius-sm) !important;
  box-shadow: var(--mui-shadow) !important;
  border:1px solid var(--mui-border) !important;
}

/* ---------- tidy scrollbars ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#c7d0dd; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#aab6c8; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   LAB WORKFLOW MODULES
   specimen_collection · results_entry · results_validation ·
   test_reports — these screens build their main work area from
   bespoke classes (department tab bars, result grids, print
   cards) that the generic rules above don't reach. Skin them to
   match, without touching their theme background colours or the
   active-department selection indicator.
   ============================================================ */

/* ---- department / section tab bars & action buttons ---- */
.tablinks, .action-btn, .tabbed > button, .tab button,
.tabvitalbtn, .tabhistbtn, .tabrxbtn, .tabdiagbtn, .tabflbtn,
.tabinvstbtn, .tabsumbtn, .tabtxtbtn, .service-btn, .user-btn, .recbtn{
  border-radius: var(--mui-radius-sm) !important;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease !important;
}
.tablinks:hover, .action-btn:hover, .tabbed > button:hover,
.service-btn:hover, .user-btn:hover{ filter:brightness(.96); }
.tablinks:active, .action-btn:active{ transform: translateY(1px); }
.tablinks.active{ box-shadow: 0 4px 10px rgba(0,0,0,.16) !important; }

/* ---- result / data grids (Bootstrap + bespoke) ---- */
.wrapper table.table, .wrapper table.table-bordered,
.wrapper table.table-striped, .table-bordered{
  border-color: var(--mui-border) !important;
}
.wrapper table.table td, .wrapper table.table th,
.table-bordered td, .table-bordered th{
  border-color: #eef1f6 !important;
}
.tableheadcolor, .tableheadcolor th{ letter-spacing:.3px; }
.wrapper table tbody tr{ transition: background .12s ease; }
.wrapper table tbody tr:hover td{ background: rgba(1,112,187,.06) !important; }
.table-striped tbody tr:nth-of-type(odd) td{ background:#fbfcfe; }

/* ---- cards / info panels on these screens ---- */
.print-card, .custom-info{
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  border:1px solid var(--mui-border) !important;
}
.theme-shadow-2{
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
}

/* ---- custom pagination + extra input fields ---- */
.custom-pagination a, .custom-pagination span, .paginate_button{
  border-radius: var(--mui-radius-sm) !important;
}
.text-field, .search-patient, .thisperiod{
  border:1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.text-field:focus, .search-patient:focus, .thisperiod:focus{
  outline:none !important;
  border-color: var(--mui-accent) !important;
  box-shadow: 0 0 0 3px rgba(1,112,187,.12) !important;
}