/* ============================================================================
   ROYAL THEME  (23-10-2026)

   The look of the login page - Royal's navy and orange, the Inter font,
   rounded cards - carried into the whole app. LOOK ONLY: no markup, no
   JavaScript, no PHP depends on this file. Loaded LAST in index.php so it
   wins over AdminLTE / Bootstrap; remove that one <link> to undo it.

   Colours mean the same as before: Save stays green, Delete stays red,
   warnings stay amber. Only the blue "chrome" (sidebar, table and window
   headers, primary buttons) becomes Royal's navy, with orange as the accent.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --re-navy-900: #020D26;   /* login background */
  --re-navy-800: #0B1836;   /* login card - the sidebar */
  --re-navy-700: #14254D;
  --re-navy-600: #1F3466;   /* table / window headers */
  --re-navy-500: #2B4583;   /* primary buttons */
  --re-navy-400: #3D5BA6;
  --re-orange:   #FD5C01;   /* login button - the accent */
  --re-orange-soft: rgba(253, 92, 1, .12);
  --re-bg:       #F4F6FA;   /* page background */
  --re-card:     #FFFFFF;
  --re-line:     #E5E9F0;
  --re-line-2:   #D6DCE6;
  --re-text:     #1F2937;
  --re-muted:    #6B7280;
  --re-radius:   10px;
  --re-shadow:   0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --re-font:     'Inter', 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------- base */
body:not(.bits-login),
body:not(.bits-login) .content-wrapper,
body:not(.bits-login) .main-footer {
  font-family: var(--re-font);
  color: var(--re-text);
}
body:not(.bits-login) .content-wrapper { background: var(--re-bg); }
.content-header h1, .content-header .m-0 { font-weight: 700; color: var(--re-text); letter-spacing: -.01em; }
.breadcrumb-item, .breadcrumb-item a { font-size: .82rem; color: var(--re-muted); }
.breadcrumb-item.active { color: var(--re-text); }

/* ---------------------------------------------------------------- top bar */
.main-header.navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--re-line) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.main-header .nav-link { color: #4B5563 !important; }
.main-header .nav-link:hover { color: var(--re-navy-500) !important; }

/* ---------------------------------------------------------------- sidebar */
.main-sidebar, .main-sidebar.sidebar-dark-primary {
  background: var(--re-navy-800) !important;
  box-shadow: none !important;
  border-right: 1px solid #16264A;
}
.main-sidebar .brand-link {
  background: var(--re-navy-900);
  border-bottom: 1px solid #16264A !important;
  color: #F1F5FB !important;
}
.main-sidebar .user-panel { border-bottom: 1px solid #1B2C55 !important; }
.main-sidebar .user-panel .info a, .main-sidebar .user-panel .info { color: #DCE3F0 !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: #B7C3DA;
  border-radius: 8px;
  font-size: .9rem;
  margin: 1px 0;
}
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link.active {
  background: var(--re-orange) !important;
  color: #1A0B00 !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(253, 92, 1, .25) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
  background: rgba(255, 255, 255, .05) !important;
  color: #FFFFFF !important;
}
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
  background: rgba(253, 92, 1, .14) !important;
  color: #FFB27F !important;
  font-weight: 600;
}
.nav-sidebar .nav-header { color: #7286A8 !important; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- cards */
.content-wrapper .card {
  border: 0;
  border-radius: var(--re-radius);
  box-shadow: var(--re-shadow);
}
.content-wrapper .card-header {
  background: #fff;
  border-bottom: 1px solid var(--re-line);
  border-radius: var(--re-radius) var(--re-radius) 0 0 !important;
}
.content-wrapper .card-title { font-weight: 600; color: var(--re-text); }
.content-wrapper .card-footer { background: #FAFBFC; border-top: 1px solid var(--re-line); }
.content-wrapper .card.card-primary.card-outline,
.content-wrapper .card.card-outline-tabs { border-top: 3px solid var(--re-navy-500); }

/* dashboard boxes */
.small-box, .info-box { border-radius: var(--re-radius) !important; box-shadow: var(--re-shadow) !important; }
.small-box > .small-box-footer { border-radius: 0 0 var(--re-radius) var(--re-radius); }

/* tabs */
.content-wrapper .nav-tabs { border-bottom: 1px solid var(--re-line); }
.content-wrapper .nav-tabs .nav-link { color: var(--re-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.content-wrapper .nav-tabs .nav-link:hover { color: var(--re-text); }
.content-wrapper .nav-tabs .nav-link.active {
  color: var(--re-navy-500) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--re-orange) !important;
}
.content-wrapper .nav-pills .nav-link.active { background: var(--re-navy-500); }

/* ---------------------------------------------------------------- tables */
.content-wrapper .table { color: var(--re-text); }
.content-wrapper .table td { border-top: 1px solid #EEF1F5; vertical-align: middle; }
.content-wrapper thead.bg-primary,
.content-wrapper thead.bg-primary th,
.content-wrapper tr.bg-primary,
.content-wrapper tr.bg-primary th,
.content-wrapper tr.bg-primary td,
.modal thead.bg-primary,
.modal tr.bg-primary,
.modal tr.bg-primary th {
  background: var(--re-navy-600) !important;
  color: #FFFFFF !important;
  border-color: #2A4074 !important;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .01em;
}
.content-wrapper .table-hover tbody tr:hover,
.content-wrapper table.dataTable tbody tr:hover { background: #F6F8FC; }
.content-wrapper .dataTables_wrapper .dataTables_filter input,
.content-wrapper .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--re-line-2);
  border-radius: 6px;
}
.content-wrapper .page-item.active .page-link { background: var(--re-navy-500); border-color: var(--re-navy-500); }
.content-wrapper .page-link { color: var(--re-navy-500); }

/* ---------------------------------------------------------------- popups */
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(2, 13, 38, .25); overflow: hidden; }
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-dark {
  background: var(--re-navy-700) !important;
  color: #FFFFFF !important;
  border-bottom: 3px solid var(--re-orange);
}
.modal-header .modal-title { font-weight: 600; font-size: 1.02rem; }
.modal-header.bg-primary .close, .modal-header.bg-info .close, .modal-header.bg-dark .close { color: #FFFFFF; opacity: .8; text-shadow: none; }
.modal-footer { background: #FAFBFC; border-top: 1px solid var(--re-line); }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 7px; font-weight: 500; }
.btn-primary {
  background: var(--re-navy-500) !important;
  border-color: var(--re-navy-500) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--re-navy-400) !important; border-color: var(--re-navy-400) !important; }
.btn-outline-primary { color: var(--re-navy-500); border-color: var(--re-navy-500); }
.btn-outline-primary:hover { background: var(--re-navy-500); color: #FFFFFF; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--re-orange-soft) !important; }

/* ---------------------------------------------------------------- inputs */
.content-wrapper .form-control,
.modal .form-control,
.content-wrapper .custom-select,
.modal .custom-select {
  border-color: var(--re-line-2);
  border-radius: 7px;
}
.content-wrapper .form-control:focus,
.modal .form-control:focus,
.content-wrapper .custom-select:focus,
.modal .custom-select:focus {
  border-color: var(--re-orange);
  box-shadow: 0 0 0 3px var(--re-orange-soft);
}
.content-wrapper .form-control:disabled,
.content-wrapper .form-control[readonly],
.modal .form-control:disabled,
.modal .form-control[readonly] { background: #F3F5F9; color: #4B5563; }
.content-wrapper label, .modal label { color: #374151; }
.bootstrap-select > .dropdown-toggle { border-radius: 7px; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--re-navy-500); border-color: var(--re-navy-500); }

/* ---------------------------------------------------------------- badges & links */
.badge { border-radius: 999px; font-weight: 600; padding: .32em .7em; }
.badge-primary, .bg-primary.badge { background: var(--re-navy-500) !important; }
.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) { color: var(--re-navy-500); }
.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):hover { color: var(--re-orange); }

/* ---------------------------------------------------------------- footer */
.main-footer { background: #fff; border-top: 1px solid var(--re-line); color: var(--re-muted); font-size: .82rem; }