/* ============================================================
   ICTHospital — Modern Professional Layer (Rahnivo polish)
   Additive override for the Charisma v2 / Bootstrap 3 theme.
   Loaded AFTER charisma-app.css. No theme file is modified.
   Remove the single <link> to this file to revert everything.
   ============================================================ */

:root{
  --brand:#0f6cab;
  --brand-dark:#0b4f7e;
  --brand-soft:#e8f2f9;
  --ink:#1b2a38;
  --muted:#64798a;
  --bg:#f2f6fa;
  --card:#ffffff;
  --line:#dde7ef;
  --ok:#1e9e6a;
  --warn:#e8a13a;
  --bad:#d9534f;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,42,67,.05),0 8px 24px -12px rgba(16,42,67,.18);
  --shadow-lg:0 2px 4px rgba(16,42,67,.06),0 20px 44px -16px rgba(16,42,67,.28);
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif !important;
  background:var(--bg) !important;
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
}
a{ color:var(--brand); transition:color .15s ease; }
a:hover,a:focus{ color:var(--brand-dark); }
::selection{ background:var(--brand); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:#b9cbd9 transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#b9cbd9; border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Top bar ---------- */
.navbar{
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(16,42,67,.02),0 10px 30px -18px rgba(16,42,67,.25);
  min-height:56px;
}
/* CoolAdmin desktop header (the one this layout actually renders) */
.header-desktop2,.header-desktop{
  background:#fff !important;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(16,42,67,.25);
}
.header-desktop2 .header-button-item>i,
.header-desktop2 .header-button-item .zmdi,
.header-desktop .header-button-item>i{
  color:var(--brand-dark) !important;
}
.header-desktop2 span,.header-desktop2 .account-dropdown__item{ color:var(--ink); }
.header-desktop2 .logo h2{ color:var(--ink) !important; }
.navbar .navbar-brand{
  font-weight:700; letter-spacing:.2px; color:var(--ink) !important;
  font-size:19px; padding-top:16px;
}
.navbar .btn,.navbar button{ border-radius:8px; }
.navbar .dropdown-menu{
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg);
  padding:6px; margin-top:8px;
}
.navbar .dropdown-menu>li>a{ border-radius:7px; padding:7px 12px; font-weight:500; }
.navbar .dropdown-menu>li>a:hover{ background:var(--brand-soft); }

/* ---------- Sidebar ---------- */
.sidebar-nav{
  background:linear-gradient(180deg,#10222f 0%,#0d1a26 100%) !important;
  border:none !important;
  border-radius:0 18px 18px 0;
  padding:14px 10px !important;
  box-shadow:var(--shadow);
}
.sidebar-nav .nav-header{
  color:#7fa3ba !important; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 12px 6px !important; border:none !important; background:none !important;
}
.main-menu>li>a,
.sidebar-nav li a{
  color:#c9d9e5 !important;
  border-radius:9px !important;
  padding:9px 12px !important;
  margin:2px 0;
  font-weight:500;
  border:none !important;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.main-menu>li>a:hover,.sidebar-nav li a:hover{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
}
.main-menu>li.active>a,.sidebar-nav li.active>a,
.main-menu a.active{
  background:linear-gradient(90deg,var(--brand),#1280c9) !important;
  color:#fff !important;
  box-shadow:0 6px 14px -6px rgba(15,108,171,.7);
}
.main-menu>li>a:active{ transform:scale(.985); }
.sidebar-nav .glyphicon,.sidebar-nav .fa,.sidebar-nav i{ opacity:.85; margin-right:8px; }

/* ---------- Content cards (Charisma .box system) ---------- */
.box{
  background:transparent !important; border:none !important;
  box-shadow:none !important; margin-bottom:22px;
}
.box-inner{
  background:var(--card);
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.box-header.well{
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  min-height:48px;
  padding:13px 18px !important;
  box-shadow:none !important;
}
.box-header h2{
  font-size:15.5px !important; font-weight:700 !important; color:var(--ink);
  letter-spacing:.1px;
}
.box-header .box-icon a{
  /* Charisma sets .box-icon a{width:5px} (tiny icon chips) — with text
     labels that crushes the buttons and spills the text. */
  width:auto !important;
  border-radius:8px; border:1px solid var(--line) !important; background:#fff !important;
  transition:background .15s ease;
}
.box-header .box-icon a:hover{ background:var(--brand-soft) !important; }
.box-content{ padding:20px !important; background:#fff; }
.well{
  background:#fbfdff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none;
}

/* ---------- Dashboard stat blocks ---------- */
.hero-unit,.main-widget,.widget{
  border-radius:var(--radius) !important;
}
a.ajaxtrigger,a.main-widget,
.dashboard-stat,.stat-block{
  transition:transform .15s ease,box-shadow .15s ease;
}
.box-content .row [class*="col-"] .well{ transition:box-shadow .15s ease,transform .15s ease; }
.box-content .row [class*="col-"] .well:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }

/* ---------- Tables ---------- */
.table{
  margin-bottom:0;
  border-color:var(--line) !important;
}
.table>thead>tr>th{
  background:#f6fafc;
  color:#43617a;
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border-bottom:2px solid var(--line) !important;
  padding:11px 12px !important;
  white-space:nowrap;
}
.table>tbody>tr>td{
  padding:10px 12px !important;
  border-top:1px solid #eaf1f6 !important;
  vertical-align:middle !important;
}
.table-striped>tbody>tr:nth-of-type(odd){ background:#fcfdfe; }
.table-hover>tbody>tr:hover{ background:var(--brand-soft); }
.table-responsive{ border:none; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--line); border-radius:8px; padding:5px 9px; margin-left:6px;
}
.pagination>li>a,.pagination>li>span{
  border-color:var(--line); color:var(--brand); padding:7px 12px;
}
.pagination>li:first-child>a{ border-radius:8px 0 0 8px; }
.pagination>li:last-child>a{ border-radius:0 8px 8px 0; }
.pagination>.active>a{ background:var(--brand); border-color:var(--brand); }

/* ---------- Buttons ---------- */
.btn{
  border-radius:8px !important;
  font-weight:600;
  padding:7px 14px;
  border-width:1px;
  box-shadow:none !important;
  transition:background .15s ease,box-shadow .15s ease,transform .08s ease,border-color .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(180deg,#1280c9,var(--brand)) !important;
  border-color:var(--brand-dark) !important; color:#fff !important;
}
.btn-primary:hover{ background:linear-gradient(180deg,#0f6cab,#0d5c8f) !important; box-shadow:0 8px 16px -8px rgba(15,108,171,.7) !important; }
.btn-success{ background:var(--ok) !important; border-color:#178557 !important; }
.btn-info{ background:#2f9db8 !important; border-color:#27879e !important; }
.btn-warning{ background:var(--warn) !important; border-color:#cf8a24 !important; color:#fff !important; }
.btn-danger{ background:var(--bad) !important; border-color:#c2433f !important; }
.btn-default{
  background:#fff !important; border-color:#c8d8e4 !important; color:var(--ink) !important;
}
.btn-default:hover{ background:var(--brand-soft) !important; }
.btn-xs{ padding:3px 9px; border-radius:7px !important; font-size:12px; }
.btn-sm{ padding:5px 11px; border-radius:8px !important; }

/* ---------- Forms ---------- */
.form-control{
  border:1px solid #c9d9e5;
  border-radius:8px !important;
  box-shadow:none !important;
  height:38px;
  padding:8px 12px;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea.form-control{ height:auto; }
.form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(15,108,171,.16) !important;
  outline:none;
}
.control-label, label{ font-weight:600; color:#33506a; font-size:13px; }
.input-group-addon{
  background:#f0f6fb; border-color:#c9d9e5; border-radius:8px 0 0 8px !important; color:var(--brand-dark);
}
.input-group .form-control{ border-radius:0 8px 8px 0 !important; }
.help-block{ color:var(--muted); font-size:12px; }
select.form-control{ appearance:auto; }

/* ---------- Alerts, badges, labels ---------- */
.alert{
  border-radius:10px; border-width:1px; padding:13px 16px;
  box-shadow:var(--shadow);
}
.label,.badge{ border-radius:99px; padding:3px 9px; font-weight:600; letter-spacing:.02em; }
.label-success,.badge-success{ background:var(--ok) !important; }
.label-warning{ background:var(--warn) !important; }
.label-danger{ background:var(--bad) !important; }
.label-info{ background:#2f9db8 !important; }
.label-primary{ background:var(--brand) !important; }

/* ---------- Login page ---------- */
.login-header h2,.login-header{
  color:var(--ink); font-weight:700; letter-spacing:.2px;
}
.ch-container .well,
.login-box .well{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:28px 26px;
}
.ch-container .input-group-lg .form-control{ height:48px; font-size:15px; }
.ch-container img{ max-width:250px; height:auto !important; width:auto; }

/* ---------- Footer ---------- */
footer,.footer{
  color:var(--muted); font-size:12.5px;
}
footer a{ font-weight:600; }

/* ---------- Modals, dropdowns, misc ---------- */
.modal-content{ border-radius:14px; border:none; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header{ background:#f6fafc; border-bottom:1px solid var(--line); }
.modal-title{ font-weight:700; }
.dropdown-menu{ border-radius:10px; border-color:var(--line); box-shadow:var(--shadow-lg); }
.nav-tabs>li>a{ border-radius:9px 9px 0 0; font-weight:600; color:#43617a; }
.progress{ border-radius:99px; box-shadow:none; background:#e9f1f7; }
.progress-bar{ background:var(--brand); }
.panel{ border-radius:var(--radius); border-color:var(--line); box-shadow:var(--shadow); }
.panel-heading{ border-radius:var(--radius) var(--radius) 0 0 !important; font-weight:700; }
.thumbnail{ border-radius:10px; border-color:var(--line); }
hr{ border-top-color:var(--line); }

/* ---------- Sidebar submenu behaviour (dropmenu) ---------- */
.main-menu a.dropmenu .glyphicon-chevron-down{
  transition:transform .2s ease; font-size:11px; margin-top:3px;
}
.main-menu a.dropmenu.open .glyphicon-chevron-down{ transform:rotate(180deg); }
.main-menu li>ul{
  background:rgba(255,255,255,.05);
  border-radius:9px; margin:2px 0 6px; padding:5px;
  list-style:none;
}
.main-menu li>ul li a{
  padding:7px 10px !important; font-size:13px; display:block;
}
.sidebar-nav .main-menu li>ul{ background:rgba(255,255,255,.06); }

/* ---------- Motion: tasteful, professional ---------- */
.box-inner,.alert,.modal-content{ animation:rn-fade .25s ease both; }
@keyframes rn-fade{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width:767px){
  .box-content{ padding:14px !important; }
  .box-header.well{ padding:11px 14px !important; }
  .sidebar-nav{ border-radius:0; }
  .navbar .navbar-brand{ font-size:17px; }
  .btn{ padding:7px 11px; }
  h1{ font-size:24px; } h2{ font-size:20px; }
}

/* ============================================================
   LAYOUT REPAIR + RAHNIVO REBRAND (v2 additions)
   The app loads Bootstrap 3 (CDN) AND Bootstrap 4 (local) plus
   CoolAdmin theme.css. No Bootstrap grid survives that fight in
   the content area, and BS4 turns the sidebar <ul class="nav">
   into a wrapping flex row. This stylesheet is loaded LAST
   (just before </head>) and re-imposes one deterministic
   layout: BS3-style float grid for content, a true stacked
   sidebar, and Rahnivo's navy + teal identity.
   ============================================================ */

/* ---------- Sidebar: one clean column ---------- */
.menu-sidebar2{
  background:linear-gradient(180deg,#0a1c2e 0%,#071422 100%) !important;
}
.menu-sidebar2 .main-menu,
.sidebar-nav .main-menu{
  display:block !important;
  flex-wrap:nowrap !important;
  padding:10px 12px 18px !important;
}
.menu-sidebar2 .main-menu>li,
.sidebar-nav .main-menu>li{
  display:block !important;
  float:none !important;
  width:auto !important;
  flex:none !important;
}
.menu-sidebar2 .main-menu .nav-header,
.sidebar-nav .main-menu .nav-header{
  display:block !important;
  width:auto !important;
  color:#6e8cae !important;
  font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:18px 10px 6px !important;
  background:none !important; border:none !important;
}
.menu-sidebar2 .main-menu>li>a,
.sidebar-nav .main-menu>li>a{
  display:flex !important; align-items:center; gap:10px;
  color:#c9d9e5 !important;
  text-decoration:none !important;
  font-size:14px; font-weight:500;
  padding:9px 12px !important;
  margin:2px 0;
  border-radius:9px !important;
  border:none !important;
  transition:background .15s ease,color .15s ease;
}
.menu-sidebar2 .main-menu>li>a:hover,
.sidebar-nav .main-menu>li>a:hover{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
}
.menu-sidebar2 .main-menu>li>a.active,
.sidebar-nav .main-menu>li>a.active{
  background:linear-gradient(90deg,#0d9488,#06b6d4) !important;
  color:#fff !important;
  box-shadow:0 8px 16px -8px rgba(6,182,212,.65);
}
.menu-sidebar2 .main-menu>li>ul,
.sidebar-nav .main-menu>li>ul{
  display:none;
  list-style:none; margin:2px 0 6px; padding:5px;
  background:rgba(255,255,255,.05); border-radius:9px;
}
.menu-sidebar2 .main-menu>li>ul li a,
.sidebar-nav .main-menu>li>ul li a{
  display:flex !important; align-items:center; gap:9px;
  color:#aec6d8 !important; text-decoration:none !important;
  font-size:13px; padding:7px 10px !important; border-radius:7px;
}
.menu-sidebar2 .main-menu>li>ul li a:hover,
.sidebar-nav .main-menu>li>ul li a:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; }
.main-menu a .glyphicon{ color:#8fb6cc; flex:0 0 auto; }
.main-menu>li>a.active .glyphicon{ color:#fff; }

/* ---------- Content grid (BS3 float semantics, self-contained) ---------- */
@media (min-width:992px){
  .main-content .row,.box-content .row,.page-container2 .row{display:block !important;}
  .main-content .row::before,.main-content .row::after,
  .box-content .row::before,.box-content .row::after{ content:""; display:table; }
  .main-content .row::after,.box-content .row::after{ clear:both; }
  .main-content [class*="col-md-"],.box-content [class*="col-md-"]{
    float:left !important; position:relative; min-height:1px;
    padding-left:15px; padding-right:15px; box-sizing:border-box;
  }
  .main-content .col-md-1,.box-content .col-md-1{width:8.333% !important;}
  .main-content .col-md-2,.box-content .col-md-2{width:16.666% !important;}
  .main-content .col-md-3,.box-content .col-md-3{width:25% !important;}
  .main-content .col-md-4,.box-content .col-md-4{width:33.333% !important;}
  .main-content .col-md-5,.box-content .col-md-5{width:41.666% !important;}
  .main-content .col-md-6,.box-content .col-md-6{width:50% !important;}
  .main-content .col-md-7,.box-content .col-md-7{width:58.333% !important;}
  .main-content .col-md-8,.box-content .col-md-8{width:66.666% !important;}
  .main-content .col-md-9,.box-content .col-md-9{width:75% !important;}
  .main-content .col-md-10,.box-content .col-md-10{width:83.333% !important;}
  .main-content .col-md-11,.box-content .col-md-11{width:91.666% !important;}
  .main-content .col-md-12,.box-content .col-md-12{width:100% !important;}
}
@media (min-width:768px) and (max-width:991px){
  .main-content .row,.box-content .row{display:block !important;}
  .main-content .row::after,.box-content .row::after{ content:""; display:table; clear:both; }
  .main-content [class*="col-sm-"],.box-content [class*="col-sm-"]{
    float:left !important; position:relative; min-height:1px;
    padding-left:15px; padding-right:15px; box-sizing:border-box;
  }
  .main-content .col-sm-6,.box-content .col-sm-6{width:50% !important;}
  .main-content .col-sm-12,.box-content .col-sm-12{width:100% !important;}
  .main-content [class*="col-md-"],.box-content [class*="col-md-"]{ float:none !important; width:100% !important; padding-left:15px; padding-right:15px; box-sizing:border-box; }
}
@media (max-width:767px){
  .main-content [class*="col-md-"],.box-content [class*="col-md-"],
  .main-content [class*="col-sm-"],.box-content [class*="col-sm-"]{
    float:none !important; width:100% !important; box-sizing:border-box;
  }
}

/* ---------- Box header: title left, actions right, never overlap ---------- */
.box-header{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  height:auto !important; min-height:50px;
}
.box-header h2{ flex:1 1 auto; min-width:0; margin:0 !important; }
.box-header .box-icon{
  position:static !important; float:none !important;
  flex:0 0 auto; display:flex; gap:6px; align-items:center;
}
.box-header .box-icon .btn{ white-space:nowrap; }

/* ---------- Top bar: the .logo in the header is the mobile variant
   (d-lg-none upstream); enforce that on desktop — the brand lives
   at the top of the sidebar instead. ---------- */
@media (min-width:992px){
  .header-desktop2 .logo{ display:none !important; }
}
.rh-brand{
  padding:20px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:6px;
}
.rh-brand img{ display:block; width:100%; max-width:228px; height:auto; }

/* ---------- Box icon actions: size to content, wrap if needed ---------- */
.box-header .box-icon{
  width:auto !important; max-width:100%;
  flex-wrap:wrap; justify-content:flex-end;
}
.box-header .box-icon .btn{ flex:0 0 auto; }

/* ---------- Dashboard stat cards ---------- */
.ich-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:18px;
}
.ich-num{ font-size:26px; font-weight:800; color:var(--ink); line-height:1.1; }
.ich-label{ color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }