/* =====================================================
   Theme: HO Leave System — Modern UI (drop-in override)
   Author: ChatGPT
   How to use:
   1) Link THIS file AFTER AdminLTE and existing site CSS.
      Example:
        <link rel="stylesheet" href="dist/css/adminlte.min.css">
        <link rel="stylesheet" href="dist/css/custom.css">
        <link rel="stylesheet" href="assets/css/styles.css">
        <link rel="stylesheet" href="theme-modern.css">  <-- add
   2) No HTML changes required. Uses mild, progressive overrides.
   3) Supports light/dark with prefers-color-scheme.
   ===================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --ui-font: 'Inter', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ui-radius: 14px;

  --ui-bg: #f6f8fb;
  --ui-surface: #ffffff;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-border: rgba(2,6,23,.08);

  --ui-primary: #2563eb;
  --ui-primary-600: #1d4ed8;
  --ui-primary-50: #eef2ff;

  --ui-success: #16a34a;
  --ui-warning: #d97706;
  --ui-danger:  #dc2626;
  --ui-info:    #0ea5e9;

  --shadow-1: 0 8px 24px rgba(2,6,23,.08);
  --shadow-2: 0 16px 48px rgba(2,6,23,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ui-bg: #0b1220;
    --ui-surface: rgba(15, 23, 42, 0.75);
    --ui-text: #e5e7eb;
    --ui-muted: #9aa4b2;
    --ui-border: rgba(255,255,255,.08);
    --shadow-1: 0 8px 24px rgba(0,0,0,.35);
    --shadow-2: 0 16px 48px rgba(0,0,0,.45);
  }
}

/* ---------- Global ---------- */
html, body {
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: radial-gradient(1000px 700px at -10% -10%, rgba(37,99,235,.08), transparent 60%),
              radial-gradient(900px 700px at 110% 10%, rgba(14,165,233,.08), transparent 60%),
              var(--ui-bg);
}

a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-600); }

/* Smooth corners for AdminLTE boxes/cards */
.card, .small-box, .info-box, .callout, .modal-content, .dropdown-menu {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border);
  box-shadow: var(--shadow-1);
  background: var(--ui-surface);
}

/* ---------- Header / Navbar ---------- */
.main-header.navbar, .navbar, .main-header {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface) !important;
  box-shadow: var(--shadow-1);
}

.navbar-nav .nav-link, .navbar a, .brand-link {
  color: var(--ui-text) !important;
  font-weight: 600;
}

.brand-link {
  display: flex; align-items: center; gap: 10px;
  background: transparent !important;
}

/* ---------- Sidebar ---------- */
.main-sidebar {
  border-right: 1px solid var(--ui-border);
  background: var(--ui-surface) !important;
  box-shadow: none;
}

.sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: 10px;
  margin: 4px 8px;
  color: var(--ui-text);
}

.sidebar .nav-sidebar > .nav-item > .nav-link.active,
.sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-info));
  color: #fff !important;
  box-shadow: var(--shadow-1);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  font-weight: 700;
  transition: transform .06s ease, box-shadow .2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-info));
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
}
.btn-primary:hover { filter: brightness(0.98); }

.btn-outline-primary {
  color: var(--ui-primary);
  border-color: var(--ui-primary);
}
.btn-outline-primary:hover {
  background: var(--ui-primary-50);
  color: var(--ui-primary-600);
}

/* Subtle ghost button */
.btn-ghost {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
}
.btn-ghost:hover {
  background: rgba(2,6,23,.05);
}

/* ---------- Forms ---------- */
.form-control, .custom-select, select, input[type='text'], input[type='date'],
input[type='email'], input[type='password'], textarea {
  border-radius: 12px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface);
  box-shadow: none !important;
}

.input-group-text {
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-muted);
}

/* Focus ring */
.form-control:focus, .custom-select:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15) !important;
}

/* ---------- Tables ---------- */
.table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.table thead th {
  background: linear-gradient(180deg, var(--ui-bg), transparent);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-weight: 700;
}

.table tbody tr + tr td {
  border-top: 1px solid var(--ui-border);
}

.table-hover tbody tr:hover {
  background: rgba(37,99,235,.05);
}

/* DataTables compatibility */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 10px;
  border: 1px solid var(--ui-border);
}

/* ---------- Badges / Pills ---------- */
.badge, .badge-pill {
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 700;
}
.badge-primary { background: var(--ui-primary); }
.badge-success { background: var(--ui-success); }
.badge-warning { background: var(--ui-warning); color: #111; }
.badge-danger  { background: var(--ui-danger); }

/* ---------- Alerts ---------- */
.alert {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  box-shadow: var(--shadow-1);
}
.alert-primary {
  background: var(--ui-primary-50);
  color: var(--ui-primary-600);
  border-color: rgba(37,99,235,.35);
}

/* ---------- Cards & Small boxes ---------- */
.card {
  overflow: hidden;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ui-border) !important;
  font-weight: 700;
}
.card-footer {
  background: transparent;
  border-top: 1px solid var(--ui-border) !important;
}

/* KPI small boxes (AdminLTE .small-box) */
.small-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-info));
  color: #fff;
  box-shadow: var(--shadow-2);
}
.small-box .icon {
  color: rgba(255,255,255,.6);
}
.small-box .inner h3, .small-box .inner p { text-shadow: 0 2px 10px rgba(0,0,0,.18); }

/* ---------- Login / Auth pages ---------- */
.login-page, .register-page {
  background: radial-gradient(900px 600px at -10% -10%, rgba(37,99,235,.12), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, rgba(14,165,233,.12), transparent 60%),
              var(--ui-bg) !important;
}
.login-card-body, .register-card-body {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--shadow-2);
  background: var(--ui-surface);
}

/* ---------- Modals ---------- */
.modal-content {
  box-shadow: var(--shadow-2);
}

/* ---------- Utilities ---------- */
.shadow-1 { box-shadow: var(--shadow-1) !important; }
.shadow-2 { box-shadow: var(--shadow-2) !important; }

.rounded-xl { border-radius: var(--ui-radius) !important; }

.text-muted { color: var(--ui-muted) !important; }

.hr-soft { border: 0; height: 1px; background: var(--ui-border); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 767.98px) {
  .content-header .breadcrumb { display: none; }
  .main-header .navbar-nav .nav-item { padding: 0 .25rem; }
  .table { font-size: .95rem; }
}

/* ---------- Optional: Accent focus outlines for key actions ---------- */
a.btn, button.btn {
  outline-offset: 2px;
}
a.btn:focus-visible, button.btn:focus-visible {
  outline: 3px solid rgba(37,99,235,.35);
}

/* ---------- Optional: Progress bar / Loading ---------- */
.progress, .progress-bar {
  border-radius: 999px !important;
}
.progress {
  background: rgba(2,6,23,.08);
}
.progress-bar {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-info));
}

/* ---------- Tables: sticky header helper ---------- */
.table-sticky thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ui-surface);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; border-radius: 999px; font-weight: 600;
  background: var(--ui-primary-50); color: var(--ui-primary-600);
}

/* ---------- Toast-like helper ---------- */
.toast-lite {
  position: fixed; right: 16px; bottom: 16px;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--shadow-2);
}