/* ==========================================================================
   Premium Admin Theme Layer
   --------------------------------------------------------------------------
   Purely additive visual layer on top of AdminLTE 2 + Bootstrap 3.
   No existing class is renamed or removed, so all current JS behaviour
   (sidebar toggle, DataTables, select2, datepicker, colorpicker, etc.)
   keeps working.
   ========================================================================== */

:root{
  --brand-primary:   #0284c7;
  --brand-primary-dark: #0369a1;
  --brand-success:   #059669;
  --brand-danger:    #dc2626;
  --brand-warning:   #d97706;
  --brand-info:      #0891b2;
  --border-soft:     #e2e8f0;
  --text-strong:     #1e293b;
  --text-muted:      #64748b;
  --radius-lg:       12px;
  --radius-md:       10px;
  --radius-sm:       6px;
  --shadow-soft:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover:    0 10px 25px rgba(0,0,0,0.12);
}

body, h1, h2, h3, h4, h5, h6, p, a, label, input, button, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
body { background: #f1f5f9 !important; -webkit-font-smoothing: antialiased; }

/* ---------- Header ---------- */
.main-header { box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; border-bottom: none !important; }
.main-header .navbar-custom-menu, .main-header .navbar-right { float: right !important; display: flex !important; align-items: center !important; }
.main-header .navbar .nav > li { display: inline-block !important; float: left !important; }

/* Header nav-item text colour needs to stay readable against every AdminLTE
   skin (including the "-light" variants), since a fixed colour would go
   invisible on half of them. */
body.skin-blue .main-header .navbar .nav > li > a, body.skin-blue .main-header .sidebar-toggle,
body.skin-purple .main-header .navbar .nav > li > a, body.skin-purple .main-header .sidebar-toggle,
body.skin-green .main-header .navbar .nav > li > a, body.skin-green .main-header .sidebar-toggle,
body.skin-red .main-header .navbar .nav > li > a, body.skin-red .main-header .sidebar-toggle,
body.skin-yellow .main-header .navbar .nav > li > a, body.skin-yellow .main-header .sidebar-toggle,
body.skin-black .main-header .navbar .nav > li > a, body.skin-black .main-header .sidebar-toggle {
  color: #fff !important;
}
body.skin-blue-light .main-header .navbar .nav > li > a, body.skin-blue-light .main-header .sidebar-toggle,
body.skin-purple-light .main-header .navbar .nav > li > a, body.skin-purple-light .main-header .sidebar-toggle,
body.skin-green-light .main-header .navbar .nav > li > a, body.skin-green-light .main-header .sidebar-toggle,
body.skin-red-light .main-header .navbar .nav > li > a, body.skin-red-light .main-header .sidebar-toggle,
body.skin-yellow-light .main-header .navbar .nav > li > a, body.skin-yellow-light .main-header .sidebar-toggle,
body.skin-black-light .main-header .navbar .nav > li > a, body.skin-black-light .main-header .sidebar-toggle {
  color: #334155 !important;
}
.main-header .navbar .nav > li > a:hover { background: rgba(0,0,0,0.08) !important; }
.main-header .logo { font-weight: 600; letter-spacing: .3px; }

/* ---------- Profile dropdown ---------- */
.navbar-nav > .user-menu > .dropdown-menu {
  width: 260px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body { padding: 12px 15px !important; background: #fff !important; }
.navbar-nav > .user-menu > .dropdown-menu > .user-body a,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
  color: #334155 !important; font-weight: 500 !important; font-size: 13px;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body a:hover,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover { color: var(--brand-primary) !important; }
.navbar-nav > .user-menu > .dropdown-menu > .user-body a i,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a i { color: var(--text-muted) !important; margin-bottom: 3px; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  background: #f8fafc !important; border-top: 1px solid var(--border-soft) !important; padding: 10px 15px !important;
  display: flex; justify-content: space-between;
}
.navbar-nav > .user-menu > .dropdown-menu .user-footer .btn {
  color: #fff !important; background-color: var(--brand-primary) !important;
  border-radius: var(--radius-sm) !important; border: none; padding: 6px 14px; font-size: 13px;
  transition: background-color .15s ease;
}
.navbar-nav > .user-menu > .dropdown-menu .user-footer .btn:hover { background-color: var(--brand-primary-dark) !important; }

/* ---------- Sidebar ---------- */
.main-sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.08) !important; }
.sidebar-menu { padding: 12px 8px !important; }
.sidebar-menu > li > a {
  border-radius: var(--radius-sm) !important;
  margin-bottom: 2px !important;
  padding: 11px 14px !important;
  border-left: none !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: background .15s ease, color .15s ease;
}
.sidebar-menu > li > a:hover, .sidebar-menu > li.active > a { background: rgba(255,255,255,.1) !important; }
.sidebar-menu li a > i { width: 22px; text-align: center; margin-right: 8px; font-size: 15px; }
.treeview-menu { padding: 4px 0 !important; margin: 2px 0 4px 6px !important; border-radius: var(--radius-sm); }
.treeview-menu > li > a { padding: 8px 12px 8px 32px !important; border-radius: 5px !important; font-size: 13px !important; }

/* ---------- Content / dashboard stat cards ---------- */
.content-wrapper { background: transparent !important; padding-top: 12px !important; }
.content-header > h1 { font-size: 20px !important; font-weight: 600 !important; color: var(--text-strong) !important; }
.small-box { border-radius: var(--radius-md) !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.small-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover) !important; }
.small-box .inner { padding: 16px !important; }

/* ---------- Panels / boxes / forms ---------- */
.box { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: var(--shadow-soft) !important; margin-bottom: 20px !important; background: #fff !important; }
.box-header { padding: 14px 18px !important; border-bottom: 1px solid #f1f5f9 !important; background: #fff !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.box-header .box-title { font-size: 15px !important; font-weight: 600 !important; color: var(--text-strong) !important; }
.box-body { padding: 18px !important; }

/* Skin-aware box top accents (kept in sync with AdminLTE skins, incl. light variants) */
body.skin-blue .box, body.skin-blue-light .box { border-top: 3px solid #3b82f6 !important; }
body.skin-purple .box, body.skin-purple-light .box { border-top: 3px solid #8b5cf6 !important; }
body.skin-green .box, body.skin-green-light .box { border-top: 3px solid #10b981 !important; }
body.skin-red .box, body.skin-red-light .box { border-top: 3px solid #ef4444 !important; }
body.skin-yellow .box, body.skin-yellow-light .box { border-top: 3px solid #f59e0b !important; }
body.skin-black .box, body.skin-black-light .box { border-top: 3px solid #475569 !important; }

.form-control {
  border-radius: var(--radius-sm) !important; border: 1px solid var(--border-soft) !important;
  height: 38px !important; padding: 8px 12px !important; font-size: 13.5px !important;
  box-shadow: none !important; background: #fff !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus { border-color: #94a3b8 !important; box-shadow: 0 0 0 3px rgba(148,163,184,.15) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500 !important; font-size: 13.5px !important; padding: 7px 16px !important; border: none !important; transition: background .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--brand-primary) !important; }
.btn-primary:hover { background: var(--brand-primary-dark) !important; }
.btn-success { background: var(--brand-success) !important; }
.btn-success:hover { background: #047857 !important; }
.btn-danger { background: var(--brand-danger) !important; }
.btn-danger:hover { background: #b91c1c !important; }
.btn-warning { background: var(--brand-warning) !important; }
.btn-warning:hover { background: #b45309 !important; }
.btn-info { background: var(--brand-info) !important; }
.btn-info:hover { background: #0e7490 !important; }
.btn-default { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid var(--border-soft) !important; }
.btn-default:hover { background: #e2e8f0 !important; }

/* ---------- Tables ---------- */
.table > thead > tr > th { border-bottom: 1px solid var(--border-soft) !important; font-weight: 600 !important; font-size: 13px !important; color: #475569 !important; background: #f8fafc !important; }
.table-hover > tbody > tr:hover { background: #f8fafc !important; }
.table-responsive { border-radius: var(--radius-md); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }

/* ---------- Login / lock screen ---------- */
.login-page, .lockscreen { background: linear-gradient(135deg, #0f172a 0%, #0f766e 100%) !important; }
.login-box, .lockscreen-wrapper { margin-top: 6%; }
.login-box-body, .lockscreen-item { border-radius: var(--radius-lg) !important; box-shadow: 0 20px 45px rgba(0,0,0,.25) !important; border: none !important; }
.login-box-body .btn-primary { width: 100%; }

/* ---------- Right settings sidebar ---------- */
aside.control-sidebar {
  top: 50px !important; right: -300px !important; width: 300px !important;
  height: calc(100vh - 50px) !important; position: fixed !important; z-index: 1050 !important;
  background: #1e293b !important; color: #e2e8f0 !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.2) !important; transition: right .25s ease !important;
  overflow-y: auto !important; display: block !important;
}
body.control-sidebar-open aside.control-sidebar { right: 0 !important; }
/* Keep the layout from shifting when the settings panel opens (it overlays instead) */
body.control-sidebar-open .content-wrapper, body.control-sidebar-open .main-footer, body.control-sidebar-open .main-header {
  margin-right: 0 !important; transform: none !important;
}
.control-sidebar-bg { position: fixed !important; z-index: 1040 !important; background: rgba(0,0,0,0.35) !important; display: none; top: 0; left: 0; right: 0; bottom: 0; }
body.control-sidebar-open .control-sidebar-bg { display: block !important; }

/* ---------- Alerts ---------- */
.custom_alert { border-radius: 8px !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }

/* ---------- Scrollbar (WebKit browsers) ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- Date / time picker & colorpicker popovers ---------- */
.datepicker-dropdown, .bootstrap-datetimepicker-widget, .colorpicker {
  z-index: 99999 !important; border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important; border: 1px solid var(--border-soft) !important;
}

/* ==========================================================================
   Responsive: tablet & mobile
   ========================================================================== */
@media (max-width: 991px) {
  .content-wrapper, .main-footer { margin-left: 0 !important; }
  .box { border-radius: var(--radius-md) !important; }
}

@media (max-width: 767px) {
  .small-box { margin-bottom: 12px; }
  .login-box, .lockscreen-wrapper { width: 90%; margin: 8% auto 0; }
  .box-header .box-tools { position: static; margin-top: 8px; display: block; }
  .table-responsive { border: 1px solid var(--border-soft); }
  .navbar-nav > .user-menu > .dropdown-menu { width: 100% !important; right: 0 !important; left: 0 !important; }
  aside.control-sidebar { width: 280px !important; right: -280px !important; }
  body.control-sidebar-open aside.control-sidebar { right: 0 !important; }
}

@media (max-width: 480px) {
  .content-wrapper > .no-print.alert { margin: 10px !important; }
  .box-body { padding: 12px !important; }
  /* Only stack buttons that are already marked full-width or sit alone in a form footer,
     so existing inline/table action buttons are never affected. */
  .login-box-body .btn, .box-footer > .btn:only-child { width: 100%; margin-bottom: 6px; }
}