/* ==========================================================================
   THEME.CSS — Global design system for the Hospital Management System
   --------------------------------------------------------------------------
   Single source of truth for color, typography and shared component styling.
   Loaded on every authenticated page (see home/dashboard.php) and on the
   standalone auth pages (login / forgot / reset password).

   Palette: clinical blue + health green (replaces the old default pink/blue
   AdminLTE accents). Change the variables below and it cascades everywhere.
   Per-page stylesheets (common/extranal/css/<module>/*.css) load AFTER this
   file, so they can still layer on page-specific layout without touching
   colors here.
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --brand-blue-900: #0b2f4d;
  --brand-blue-800: #0e3a5f;
  --brand-blue-700: #114a76;
  --brand-blue-600: #145a8c;
  --brand-blue: #1670a8;         /* primary */
  --brand-blue-dark: #0f5686;    /* primary hover/active */
  --brand-blue-light: #e5f1f8;   /* tints / soft backgrounds */
  --brand-blue-lighter: #f2f8fc;

  --brand-green-900: #063d31;
  --brand-green-700: #0a6b52;
  --brand-green: #12946f;        /* accent / positive actions */
  --brand-green-dark: #0d7a5c;
  --brand-green-light: #e4f6f0;

  /* Gradients used for hero/header surfaces */
  --gradient-brand: linear-gradient(135deg, var(--brand-blue-900) 0%, var(--brand-green-900) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);

  /* ---- Neutrals ---------------------------------------------------------- */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  --white: #ffffff;

  /* ---- Semantic ----------------------------------------------------------*/
  --color-success: #12946f;
  --color-success-bg: #e4f6f0;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-info: #1670a8;
  --color-info-bg: #e5f1f8;

  /* ---- Surface / layout --------------------------------------------------*/
  --page-bg: #f4f8f9;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(15, 41, 61, 0.06), 0 1px 2px rgba(15, 41, 61, 0.04);
  --shadow: 0 8px 24px rgba(11, 47, 77, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 47, 77, 0.14);
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  font-family: var(--font-family);
  color: var(--ink-700);
  background: var(--page-bg);
}

.content-wrapper,
.content-wrapper.bg-light,
.content-wrapper.bg-gradient-light {
  background: var(--page-bg) !important;
}

a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-dark); }

/* ==========================================================================
   TEXT / UTILITY COLOR OVERRIDES
   (re-map Bootstrap's semantic utility classes onto the new palette so every
   existing page — migrated or not — inherits the new colors automatically)
   ========================================================================== */

.text-primary { color: var(--brand-blue) !important; }
.text-success { color: var(--color-success) !important; }
.text-info    { color: var(--brand-blue) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

.bg-primary { background-color: var(--brand-blue) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-info    { background-color: var(--brand-blue) !important; }
.bg-danger  { background-color: var(--color-danger) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-gradient-primary { background: var(--gradient-brand-soft) !important; }

.border-primary { border-color: var(--brand-blue) !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--brand-blue-dark) !important;
  border-color: var(--brand-blue-dark) !important;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(22, 112, 168, 0.25);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
}

.btn-outline-primary {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-outline-primary:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-link { color: var(--brand-blue); }

/* Legacy ".green" button modifier — used across ~28 view files, originally
   styled by common/css/bootstrap-reset.css which isn't loaded on this
   layout, so these buttons were rendering with no color at all (plain
   white/default). Higher specificity than a single .btn-* class, so this
   correctly wins even when combined with e.g. "btn btn-info green". */
.btn.green {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}
.btn.green:hover,
.btn.green:focus {
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}

/* Soft/pill action buttons used on redesigned pages */
.btn-soft {
  background: var(--brand-blue-light);
  color: var(--brand-blue-dark);
  border: 1px solid transparent;
  font-weight: 600;
}
.btn-soft:hover { background: #dceefb; color: var(--brand-blue-dark); }

.btn-soft-success {
  background: var(--brand-green-light);
  color: var(--brand-green-dark);
  border: 1px solid transparent;
  font-weight: 600;
}
.btn-soft-success:hover { background: #d3f2e6; color: var(--brand-green-dark); }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.card.border-0  { border: 0 !important; }

.card-primary.card-outline { border-top: 3px solid var(--brand-blue); }
.card-header { background: var(--white); border-bottom: 1px solid var(--border); }

/* Page header band used at the top of module pages */
.content-header,
section.content-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.content-header h1 { color: var(--ink-900); font-weight: 800; }
.content-header .breadcrumb { background: transparent; }
.content-header .breadcrumb-item a { color: var(--brand-blue); }
.content-header .breadcrumb-item.active { color: var(--ink-500); }

/* Reusable stat/metric card for module dashboards & list-page summaries */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  height: 100%;
}
.stat-card .stat-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
}
.stat-card .stat-icon.green  { background: var(--brand-green-light); color: var(--brand-green-dark); }
.stat-card .stat-icon.amber  { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-card .stat-icon.red    { background: var(--color-danger-bg); color: var(--color-danger); }
.stat-card .stat-value { font-size: 24px; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.stat-card .stat-label { font-size: 12.5px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table thead th {
  background: var(--ink-50);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  border-top: none;
  white-space: nowrap;
}
.table td { vertical-align: middle; color: var(--ink-700); }
.table-hover tbody tr:hover { background-color: var(--brand-blue-lighter); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border); }

/* Row/record avatar used in list tables */
.avatar-chip {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-blue-light); color: var(--brand-blue-dark);
  font-weight: 700; font-size: 13px; text-transform: uppercase;
}

/* ==========================================================================
   BADGES / STATUS PILLS
   ========================================================================== */

.badge-primary { background-color: var(--brand-blue-light); color: var(--brand-blue-dark); }
.badge-success { background-color: var(--brand-green-light); color: var(--brand-green-dark); }
.badge-danger  { background-color: var(--color-danger-bg); color: var(--color-danger); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge-info    { background-color: var(--brand-blue-light); color: var(--brand-blue-dark); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.is-success { background: var(--brand-green-light); color: var(--brand-green-dark); }
.status-pill.is-info    { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.status-pill.is-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill.is-danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.status-pill.is-neutral { background: var(--ink-100); color: var(--ink-500); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control,
.custom-select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(22, 112, 168, 0.12);
}
.form-group label { color: var(--ink-700); font-weight: 600; }
.custom-file-label { border-radius: var(--radius-sm); border-color: var(--border); }
.input-group-text { background: var(--ink-50); border-color: var(--border); color: var(--ink-500); }

/* select2 focus ring to match */
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection:focus {
  border-color: var(--brand-blue) !important;
}

/* ==========================================================================
   SIDEBAR / HEADER (compat overrides for shared layout)
   --------------------------------------------------------------------------
   This used to duplicate its own dark background + white-tinted active-
   link rules for .main-sidebar - a THIRD copy of the same styling that
   already lives (and should only live) in application/assets/css/
   enhanced-sidebar-styles.css, on top of the one that used to be inline
   in dashboard.php. Three separate files fighting over the same
   selectors is exactly how the sidebar kept silently reverting to dark
   colors no matter which one got edited - removed here so
   enhanced-sidebar-styles.css is unambiguously the only place this is
   defined.
   ========================================================================== */
.brand-link { border-bottom: 1px solid var(--border, #e2e8f0) !important; }

.navbar-badge,
.badge-info.quick-actions-badge { background: var(--brand-green) !important; }

/* ==========================================================================
   MODALS (aligns with global-modal-styles.css gradient)
   ========================================================================== */

.modal-header {
  background: var(--gradient-brand-soft);
}
.modal-content { border-radius: var(--radius-lg); border: none; }

/* ==========================================================================
   MISC
   ========================================================================== */

::selection { background: var(--brand-blue-light); color: var(--brand-blue-900); }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-500);
}
.empty-state i { font-size: 40px; color: var(--ink-400); margin-bottom: 12px; display: block; }

.page-toolbar-btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Pagination */
.page-item.active .page-link { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.page-link { color: var(--brand-blue); }
.page-link:hover { color: var(--brand-blue-dark); }

/* Nav tabs */
.nav-tabs .nav-link.active { color: var(--brand-blue); border-color: var(--border) var(--border) var(--white); }
.nav-tabs .nav-link { color: var(--ink-500); }
.nav-tabs .nav-link:hover { color: var(--brand-blue); }

/* ==========================================================================
   LEGACY ".panel" COMPONENT
   AdminLTE 3 / Bootstrap 4 don't style Bootstrap-3-era .panel/.panel-heading/
   .panel-body classes at all, which is why ~90 older view files across the
   app render as plain unstyled boxes with a bare text header. Themed here
   once, site-wide, instead of duplicating the same rules into every
   per-page CSS file that happens to use these classes.
   ========================================================================== */

.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.panel.panel-primary {
  border-top: 3px solid var(--brand-blue);
}

.panel-heading {
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}

.panel-body {
  padding: 20px;
}
/* Several legacy views nest .panel-body inside .panel-body for layout
   grouping rather than spacing - don't double the padding when that
   happens. */
.panel-body .panel-body {
  padding: 0;
}