/*
 * Modern theme override for AdminLTE 3 / Bootstrap 4.
 * Loaded AFTER assets/css/adminlte.min.css in every layout head, so every
 * rule here only needs to win the cascade (same or higher specificity),
 * not replace the file it sits on top of. No Blade markup was touched to
 * make this work -- delete this file + its <link> tag(s) to fully revert.
 *
 * v3: palette rebuilt around the actual Starlinks logo colors (sampled
 * directly from public/starlogo.png -- navy #233c4f, gold #e0b531), a much
 * bigger visual jump than v1/v2, and compact/denser tables. Still
 * CSS-only, still Bootstrap 4 / AdminLTE 3 underneath (client's choice).
 */

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

:root {
  --mt-navy: #16222c;
  --mt-navy-mid: #233c4f;
  --mt-navy-light: #2f4d63;
  --mt-gold: #e0b531;
  --mt-gold-dark: #b8901f;
  --mt-gold-light: #fdf3d9;
  --mt-primary: var(--mt-navy-mid);
  --mt-primary-dark: var(--mt-navy);
  --mt-primary-light: #e8edf1;
  --mt-ink: #182129;
  --mt-ink-soft: #5c6672;
  --mt-ink-faint: #8a93a0;
  --mt-border: #e2e6ed;
  --mt-bg: #eef1f6;
  --mt-surface: #ffffff;
  --mt-sidebar: var(--mt-navy);
  --mt-sidebar-soft: var(--mt-navy-light);
  --mt-sidebar-text: #a9b4bf;
  --mt-radius: 12px;
  --mt-radius-sm: 7px;
  --mt-radius-lg: 18px;
  --mt-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
  --mt-shadow-md: 0 8px 20px rgba(16, 24, 40, 0.09);
  --mt-shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16);
  --mt-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */

* {
  scrollbar-width: thin;
}

body,
.content-wrapper,
.card,
.dropdown-menu,
.modal-content,
.btn,
.form-control,
table,
.select2-container .select2-selection {
  font-family: var(--mt-font);
}

body {
  background: var(--mt-bg);
  color: var(--mt-ink);
  -webkit-font-smoothing: antialiased;
}

.content-wrapper {
  background: var(--mt-bg);
}

a {
  color: var(--mt-navy-mid);
  transition: color 0.12s ease;
}
a:hover,
a:focus {
  color: var(--mt-gold-dark);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c3c9d4;
  border-radius: 10px;
  border: 2px solid var(--mt-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #a6adba;
}
.main-sidebar ::-webkit-scrollbar-thumb {
  background: var(--mt-navy-light);
  border-color: var(--mt-sidebar);
}

/* ---------- Top navbar ---------- */

.main-header.navbar {
  background: var(--mt-surface) !important;
  border-bottom: 3px solid var(--mt-gold) !important;
  box-shadow: var(--mt-shadow);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.main-header.navbar .nav-link {
  color: var(--mt-ink-soft);
  border-radius: var(--mt-radius-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
.main-header.navbar .nav-link:hover {
  color: var(--mt-navy-mid);
  background: var(--mt-gold-light);
}

.form-control-navbar {
  border-radius: 999px 0 0 999px;
  background: var(--mt-bg);
  border-color: var(--mt-border);
  padding-left: 1rem;
}
.btn-navbar {
  border-radius: 0 999px 999px 0;
  background: var(--mt-bg);
  border-color: var(--mt-border);
}

.navbar-badge {
  border-radius: 999px;
  background: var(--mt-gold) !important;
  color: var(--mt-navy) !important;
  box-shadow: 0 0 0 2px var(--mt-surface);
  font-weight: 700;
}

/* ---------- Sidebar ---------- */

.main-sidebar,
.main-sidebar::before {
  background: linear-gradient(180deg, var(--mt-sidebar) 0%, #1c2c38 100%) !important;
}

.brand-link {
  border-bottom: 3px solid var(--mt-gold);
  display: flex;
  align-items: center;
}
.brand-link-logo {
  justify-content: center;
  padding: 0.65rem 1rem;
}
.brand-image-full {
  width: 100%;
  max-width: 190px;
  height: auto;
  display: block;
  background: #ffffff;
  border-radius: var(--mt-radius-sm);
  padding: 0.5rem 0.7rem;
  box-shadow: var(--mt-shadow);
}

.user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.user-panel .image img {
  box-shadow: 0 0 0 2px var(--mt-gold);
}
.user-panel .info a {
  color: #eef1f4;
  font-weight: 600;
}

.nav-sidebar.flex-column {
  padding-left: 10px;
  padding-right: 10px;
}

/* AdminLTE's <li class="nav-item"> is display:list-item inside a flex
   column, which doesn't reliably stretch to the sidebar's width -- once
   a treeview submenu is open, its (often longer) item text pushes the
   li's shrink-to-fit/max-content sizing wider than the sidebar, shoving
   the parent row's own nav-link (and its arrow icon) out past the
   visible edge. Force it to the container width explicitly so it can't
   grow with its own submenu content. */
.nav-sidebar > .nav-item,
.nav-sidebar .nav-treeview > .nav-item {
  width: 100%;
  max-width: 100%;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: var(--mt-sidebar-text);
  border-radius: var(--mt-radius-sm);
  margin: 3px 0;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:focus {
  background: rgba(224, 181, 49, 0.1);
  color: #ffffff;
  border-left-color: rgba(224, 181, 49, 0.5);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--mt-gold) !important;
  color: var(--mt-navy) !important;
  font-weight: 700;
  border-left-color: #ffffff;
  box-shadow: 0 4px 12px rgba(224, 181, 49, 0.35);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link .nav-icon {
  color: inherit;
  opacity: 0.9;
  width: 1.4rem;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  opacity: 1;
}

.nav-sidebar .nav-treeview {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--mt-radius-sm);
  margin: 0 10px;
}
.nav-sidebar .nav-treeview .nav-link {
  font-size: 0.89rem;
}

/* ---------- Content header ---------- */

.content-header h1 {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--mt-ink);
  letter-spacing: -0.01em;
}

.breadcrumb {
  background: transparent;
  padding: 0;
}
.breadcrumb-item.active {
  color: var(--mt-ink-soft);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--mt-ink-faint);
}
.breadcrumb-item a {
  color: var(--mt-navy-mid);
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  transition: box-shadow 0.15s ease;
}

.card-header {
  background: var(--mt-surface);
  border-bottom: 2px solid var(--mt-gold);
  border-radius: var(--mt-radius) var(--mt-radius) 0 0 !important;
  padding: 0.85rem 1.25rem;
}

.card-body {
  padding: 1.1rem 1.25rem;
}

.card-title {
  font-weight: 700;
  /* No color here: AdminLTE sets color:#fff on .card-header for colored
     variants (card-success/card-danger/card-primary/etc) and this h3
     inherits it. Forcing a fixed dark color here broke contrast on the
     navy card-primary header (dark-on-dark), even though it happened to
     stay legible on brighter green/red headers by coincidence. */
}

.card.card-outline {
  border-top-width: 3px;
}

.card-header.bg-primary,
.card-primary:not(.card-outline) > .card-header {
  background: linear-gradient(135deg, var(--mt-navy-mid), var(--mt-navy)) !important;
  border-bottom: 2px solid var(--mt-gold);
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--mt-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn:not(.btn-sm):not(.btn-xs) {
  padding: 0.5rem 1.1rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--mt-navy-mid), var(--mt-navy));
  border-color: var(--mt-navy);
  box-shadow: 0 2px 8px rgba(35, 60, 79, 0.3);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--mt-navy), #0f181f);
  border-color: #0f181f;
}

.btn-warning {
  background: linear-gradient(135deg, var(--mt-gold), var(--mt-gold-dark));
  border-color: var(--mt-gold-dark);
  color: var(--mt-navy);
  font-weight: 700;
}
.btn-warning:hover {
  background: var(--mt-gold-dark);
  border-color: var(--mt-gold-dark);
  color: #ffffff;
}

.btn-info {
  background: #0ea5b7;
  border-color: #0ea5b7;
}
.btn-info:hover {
  background: #0b8492;
  border-color: #0b8492;
}

.btn-success {
  background: #1a8f56;
  border-color: #1a8f56;
}
.btn-success:hover {
  background: #14713f;
  border-color: #14713f;
}

.btn-danger {
  background: #c53434;
  border-color: #c53434;
}
.btn-danger:hover {
  background: #9f2727;
  border-color: #9f2727;
}

.btn-outline-light {
  border-radius: var(--mt-radius-sm);
}

.btn-group-sm > .btn,
.btn-sm {
  border-radius: var(--mt-radius-sm);
}

/* Compact icon-only file-slot chips (Clients/Vendors/Orders "Files" column).
   Was 3 stacked full-size labeled buttons -- forced tall rows since a row's
   height is set by its tallest cell. Icon-only chips in a row fit a narrow
   column on one line instead of wrapping onto 3. */
.file-slot {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
}
.btn-file-chip {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

/* ---------- Forms ---------- */

.form-control,
.select2-container--bootstrap4 .select2-selection {
  border-radius: var(--mt-radius-sm);
  border-color: var(--mt-border);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-control:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4 .select2-selection--single:focus {
  border-color: var(--mt-gold-dark);
  box-shadow: 0 0 0 3px var(--mt-gold-light);
}

label {
  font-weight: 600;
  color: var(--mt-ink-soft);
  font-size: 0.88rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--mt-navy-mid);
  background: var(--mt-navy-mid);
}

/* ---------- Tables / DataTables -- compact + brand-tinted ---------- */

.table {
  color: var(--mt-ink);
  font-size: 0.86rem;
}

.table th,
.table td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  line-height: 1.35;
}

.table thead th {
  background: var(--mt-primary-light);
  border-bottom: 2px solid var(--mt-gold) !important;
  border-top: none !important;
  font-weight: 700;
  color: var(--mt-navy-mid);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.045em;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--mt-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: #fafbfd;
}

.table-hover tbody tr,
table.dataTable tbody tr {
  transition: background 0.1s ease;
}
.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
  background: var(--mt-gold-light) !important;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  border-radius: var(--mt-radius-sm);
  border-color: var(--mt-border);
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
  font-size: 0.82rem;
}

.paginate_button.current,
.paginate_button.current:hover {
  background: var(--mt-navy-mid) !important;
  border-color: var(--mt-navy-mid) !important;
  color: #fff !important;
  border-radius: var(--mt-radius-sm) !important;
}
.paginate_button {
  border-radius: var(--mt-radius-sm) !important;
  padding: 0.28em 0.65em !important;
}

/* ---------- Badges / status pills (soft-pill, compact) ---------- */

.badge {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.3em 0.65em;
  font-size: 0.7em;
  letter-spacing: 0.01em;
}

.badge.bg-warning,
.badge-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.badge.bg-danger,
.badge-danger {
  background: #fde2e2 !important;
  color: #9a2b2b !important;
}
.badge.bg-olive {
  background: #dcf3e3 !important;
  color: #1a6b3d !important;
}
.badge.bg-maroon {
  background: #fbe3ea !important;
  color: #96284f !important;
}
.badge.bg-secondary,
.badge-secondary {
  background: #eaedf2 !important;
  color: var(--mt-ink-soft) !important;
}
.badge.bg-success,
.badge-success {
  background: #dcf3e3 !important;
  color: #1a6b3d !important;
}
.badge.bg-info,
.badge-info {
  background: #dcf1f4 !important;
  color: #0d6b7a !important;
}
.badge.bg-primary,
.badge-primary {
  background: var(--mt-gold-light) !important;
  color: var(--mt-navy) !important;
}

/* ---------- Dashboard widgets ---------- */

.small-box {
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.small-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--mt-shadow-md);
}
.small-box > .small-box-footer {
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
  background: rgba(0, 0, 0, 0.08);
}
.small-box h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.small-box .icon {
  opacity: 0.25;
}

.info-box {
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.info-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--mt-shadow-md);
}
.info-box .info-box-icon {
  border-radius: var(--mt-radius) 0 0 var(--mt-radius);
}
.info-box .info-box-number {
  font-weight: 800;
}

/* ---------- Dropdowns / modals ---------- */

.dropdown-menu {
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-lg);
  padding: 0.4rem;
}
.dropdown-item {
  border-radius: var(--mt-radius-sm);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--mt-gold-light);
  color: var(--mt-navy);
}

.modal-content {
  border-radius: var(--mt-radius);
  border: none;
  box-shadow: var(--mt-shadow-lg);
}
.modal-header {
  border-bottom: 2px solid var(--mt-gold);
}
.modal-footer {
  border-top: 1px solid var(--mt-border);
}

/* ---------- Footer ---------- */

.main-footer {
  background: var(--mt-surface);
  border-top: 3px solid var(--mt-gold);
  color: var(--mt-ink-soft);
}

/* ---------- Auth pages (login / password reset) ---------- */

body.login-page,
body.hold-transition.login-page {
  background: radial-gradient(circle at 18% 20%, var(--mt-navy-light) 0%, transparent 45%),
    radial-gradient(circle at 85% 78%, var(--mt-gold) 0%, transparent 38%),
    linear-gradient(160deg, var(--mt-navy) 0%, #0f1a22 100%);
}

.login-page .login-box .card,
.login-page .card-outline.card-primary {
  border: none;
  border-top: 4px solid var(--mt-gold) !important;
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-lg);
  overflow: hidden;
}
.login-page .card-header {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--mt-border);
}
.login-box-msg {
  color: var(--mt-ink-soft);
  font-weight: 500;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.login-logo img {
  width: 100%;
  max-width: 230px;
  height: auto;
  background: #ffffff;
  border-radius: var(--mt-radius);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--mt-shadow-lg);
}

/* ---------- OT Slip portal ---------- */

.otslip-page .main-header.navbar,
.navbar-primary.navbar-dark {
  background: linear-gradient(135deg, var(--mt-navy-mid), var(--mt-navy)) !important;
  border-bottom: 3px solid var(--mt-gold) !important;
}

.navbar-brand-otslip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.navbar-brand-mark {
  height: 26px;
  width: auto;
}