/* Custom Modern Theme for SISFO (Light/Dark) */
:root {
  /* SMK brand look */
  --bg: #fffff0;           /* ivory background */
  --surface: #ffffff;      /* cards/surfaces */
  --text: #1f2937;         /* gray-800 */
  --muted: #6b7280;        /* gray-500 */
  --primary: #2563eb;      /* blue accent */
  --primary-600: #1e4fd1;  /* darker blue */
  --success: #10b981;      /* green accent */
  --border: #ebe6da;       /* soft border on cream */
  --card-shadow: 0 10px 26px rgba(31,41,55,.06);
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #60a5fa;
  --primary-600: #4f8de0;
  --success: #34d399;
  --border: #1f2937;
  --card-shadow: 0 12px 30px rgba(0,0,0,.55);
}

html, body {
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Navbar */
.main-header .logo, .main-header .navbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.04);
}
.main-header .logo {
  border-right: 1px solid var(--border) !important;
}

/* Cards / Boxes */
.box, .login-box-body {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 16px !important;
}
.box .box-header {
  border-bottom: 1px solid var(--border) !important;
}

/* Buttons */
.btn-primary, .bg-light-blue {
  background-color: var(--primary) !important;
  border-color: var(--primary-600) !important;
}
.btn-primary:hover {
  background-color: var(--primary-600) !important;
}
.btn-success { background-color: var(--success) !important; border-color: #0ea172 !important; }

/* Tables */
.table, .table > thead > tr > th, .table > tbody > tr > td {
  border-color: var(--border) !important;
}
.table > thead > tr > th {
  background: rgba(37, 99, 235, .06);
  color: var(--text);
}

/* Forms */
.form-control, .select2-selection, .textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.form-control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: var(--primary);
}

/* Login page */
.login-page {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(37,99,235,.12), transparent),
              radial-gradient(900px 500px at 90% 20%, rgba(16,185,129,.12), transparent),
              var(--bg) !important;
}
.login-logo a { color: var(--text) !important; }

/* DataTables tweaks */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary-600) !important;
}

/* Dark mode adjustments for AdminLTE */
.skin-blue .main-header .navbar { background-color: var(--bg) !important; }
.skin-blue .main-header .logo { background-color: var(--bg) !important; color: var(--text) !important; }
.skin-blue .main-header .navbar .nav > li > a, .skin-blue .main-header .logo { color: var(--text) !important; }

/* Sidebar */
.main-sidebar, .left-side { background: var(--bg) !important; box-shadow: 8px 0 24px rgba(0,0,0,.04); }
.sidebar-menu > li > a { color: var(--text) !important; border-radius: 10px; margin: 4px 10px; }
.sidebar-menu > li.active > a, .sidebar-menu > li > a:hover { background: rgba(37,99,235,.10) !important; color: var(--primary) !important; }
.sidebar-menu > li.header { 
  color: #fff !important; 
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important; 
  border-bottom: none !important; /* override inline */
  margin: 8px 10px; 
  padding: 10px 12px; 
  border-radius: 10px;
}

/* Sidebar hover/active with gradient */
.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
}
.sidebar-menu > li > a:hover i,
.sidebar-menu > li.active > a i,
.sidebar-menu > li.menu-open > a i { color: #fff !important; }

/* Submenu items */
.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* Stronger specificity for AdminLTE skin (in case defaults override) */
.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
}
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
}

/* Left accent strip for active/hover (visual cue) */
.sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a { position: relative; overflow: hidden; }
.sidebar-menu > li > a::before,
.skin-blue .sidebar-menu > li > a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity .15s ease;
  background: linear-gradient(180deg, #2563eb 0%, #10b981 100%);
}
.sidebar-menu > li > a:hover::before,
.sidebar-menu > li.active > a::before,
.sidebar-menu > li.menu-open > a::before,
.skin-blue .sidebar-menu > li > a:hover::before,
.skin-blue .sidebar-menu > li.active > a::before,
.skin-blue .sidebar-menu > li > a::before { opacity: 1; }

/* Prevent parent LI background from covering link gradient */
.sidebar-menu > li.active,
.sidebar-menu > li.menu-open,
.skin-blue .sidebar-menu > li.active,
.skin-blue .sidebar-menu > li.menu-open { background: transparent !important; }

/* Submenu container background and default link color */
.sidebar-menu .treeview-menu { background: var(--bg) !important; }
.sidebar-menu .treeview-menu > li > a { color: var(--text) !important; }

/* Submenu left accent strip */
.treeview-menu > li > a { position: relative; overflow: hidden; }
.treeview-menu > li > a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity .15s ease;
  background: linear-gradient(180deg, #2563eb 0%, #10b981 100%);
}
.treeview-menu > li > a:hover::before,
.treeview-menu > li.active > a::before { opacity: 1; }

/* Theme toggle button */
.navbar .theme-toggle {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Utility */
.text-muted { color: var(--muted) !important; }
hr { border-color: var(--border); }

/* Content wrapper rounding and subtle top bar */
.content-wrapper {
  background: transparent !important;
}
.content-wrapper > .content {
  background: var(--bg);
  border-radius: 18px;
}

/* Content header bar (title area) with gradient */
.content-header {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
  border-radius: 0 0 14px 14px;
  padding-top: 10px;
  padding-bottom: 12px;
}
.content-header > h1,
.content-header > h1 > small,
.content-header > .breadcrumb > li > a,
.content-header > .breadcrumb > .active {
  color: #fff !important;
}
.content-header > .breadcrumb {
  background: transparent !important;
}

/* Navbar menu hover: gradient blue -> green */
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
}

/* Dropdown items hover in navbar */
.main-header .navbar .dropdown-menu > li > a:hover,
.main-header .navbar .dropdown-menu > li > a:focus {
  background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important;
  color: #fff !important;
}

/* PWA Offline Mode Styles */
.offline-mode {
  filter: grayscale(20%);
  opacity: 0.95;
}

.offline-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f39c12, #e74c3c);
  z-index: 9999;
  animation: offline-pulse 2s ease-in-out infinite alternate;
}

@keyframes offline-pulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.offline-message {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* PWA Install Button */
.pwa-install-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  border-radius: 50px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 12px rgba(60, 141, 188, 0.3) !important;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Offline status indicators */
.content-wrapper.offline-mode .box {
  border-left: 3px solid #f39c12;
}

.content-wrapper.offline-mode .box-header {
  background: rgba(243, 156, 18, 0.1);
}

/* Loading states for offline content */
.offline-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}