/* ==========================================================================
   RahKhiz — Bootstrap 5 bridge
   Load order:  bootstrap.min.css  →  theme.css  →  site.css/console.css  →  this file

   Bootstrap supplies the layout grid, reset, navbar, dropdown, modal, offcanvas,
   table and utility classes. theme.css keeps the RahKhiz brand look for the
   components whose class names the two systems share (.btn, .card, .badge).
   This file reconciles the two: it feeds the brand palette into Bootstrap's CSS
   variables and gives Bootstrap's form/table/navbar components the same styling
   the hand-rolled classes already had.
   ========================================================================== */

/* ---- brand palette → Bootstrap theme variables ---- */
:root{
  --bs-primary:var(--primary);
  --bs-primary-rgb:21,60,106;
  --bs-secondary:var(--brass);
  --bs-secondary-rgb:184,134,59;
  --bs-success:var(--success);
  --bs-success-rgb:29,122,92;
  --bs-danger:var(--danger);
  --bs-danger-rgb:163,48,63;
  --bs-warning:var(--warning);
  --bs-warning-rgb:182,114,10;
  --bs-info:var(--info);
  --bs-info-rgb:44,110,140;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:15px;
  --bs-border-color:var(--border);
  --bs-border-radius:var(--r);
  --bs-border-radius-sm:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-border-radius-xl:var(--r-xl);
  --bs-link-color:var(--primary-2);
  --bs-link-hover-color:var(--primary);
  --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--text-2);
  --bs-tertiary-bg:var(--surface-alt);
  --bs-heading-color:var(--ink);
}

/* Bootstrap's .container is capped by the design system's own width. */
.container,.container-fluid,.container-lg,.container-xl{max-width:var(--container);padding-left:20px;padding-right:20px}
.container-fluid{max-width:none}

/* ---- Bootstrap form controls inherit the themed input styling ---- */
.form-control,.form-select{
  padding:11px 13px;border:1px solid var(--border);border-radius:var(--r);
  background-color:var(--surface);font-size:14.5px;min-height:44px;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(28,90,170,.14);outline:none;
}
.form-control::placeholder{color:var(--text-3)}
.form-control:disabled,.form-select:disabled{background-color:var(--surface-alt);opacity:.7}
textarea.form-control{min-height:96px;resize:vertical}
.form-label{font-size:12.5px;font-weight:700;color:var(--text-2);letter-spacing:.02em;margin-bottom:6px}
.form-text{font-size:12px;color:var(--text-3)}
.input-group-text{background:var(--surface-alt);border-color:var(--border);color:var(--text-2);font-size:13px}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(28,90,170,.14)}
.was-validated .form-control:invalid,.form-control.is-invalid{border-color:var(--danger)}
.invalid-feedback{color:var(--danger);font-size:12.5px}

/* ---- tables ---- */
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);margin-bottom:0;font-size:14px}
.table>thead th{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--border);background:var(--surface-alt);
  padding:10px 14px;white-space:nowrap;
}
.table>tbody td{padding:12px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.table>tbody tr:last-child td{border-bottom:0}
.table-hover>tbody>tr:hover>*{background-color:var(--surface-alt)}
.table-responsive{border-radius:var(--r-lg)}

/* ---- navbar (brand chrome) ---- */
.navbar.rk-navbar{
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);min-height:var(--nav-h);padding:0;
  position:sticky;top:0;z-index:1030;
}
.navbar.rk-navbar .navbar-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:20px;color:var(--ink);padding:0}
.navbar.rk-navbar .navbar-brand:hover{text-decoration:none}
.navbar.rk-navbar .brand-mark{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:var(--brass-light);font-family:var(--serif);font-weight:800;font-size:19px;
}
.navbar.rk-navbar .nav-link{font-weight:600;font-size:14.5px;color:var(--text-2);padding:10px 14px;border-radius:8px}
.navbar.rk-navbar .nav-link:hover{color:var(--ink);background:var(--surface-alt)}
.navbar.rk-navbar .nav-link.active{color:var(--primary);background:var(--primary-soft)}
.navbar.rk-navbar .navbar-toggler{border-color:var(--border);padding:6px 10px}
.navbar.rk-navbar .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(28,90,170,.14)}

/* dark variant, used over the hero */
.navbar.rk-navbar.on-dark{background:transparent;border-bottom-color:rgba(255,255,255,.14);backdrop-filter:none}
.navbar.rk-navbar.on-dark{background:linear-gradient(180deg,rgba(7,23,45,.92),rgba(7,23,45,.58));color:#fff}
.navbar.rk-navbar.on-dark .navbar-brand{color:#fff}
.navbar.rk-navbar.on-dark .nav-link{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.navbar.rk-navbar.on-dark .nav-link:hover,.navbar.rk-navbar.on-dark .nav-link.active{color:#fff;background:rgba(255,255,255,.12)}
.navbar.rk-navbar.on-dark .navbar-toggler{border-color:rgba(255,255,255,.3)}
.navbar.rk-navbar.on-dark .navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(2)}
.navbar.rk-navbar.on-dark .country-pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}

/* country chip + account button in the navbar */
.rk-navbar .country-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-alt);font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap;
}
.rk-navbar .nav-user{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-weight:600;font-size:14px;color:var(--text);cursor:pointer;
}
.rk-navbar .nav-user:hover{border-color:var(--primary-2)}
.rk-navbar .nav-user .avatar{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:12px;font-weight:700;
}

/* ---- dropdown / modal / offcanvas in brand colours ---- */
.dropdown-menu{
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  padding:6px;font-size:14px;min-width:220px;
}
.dropdown-item{border-radius:8px;padding:9px 12px;font-weight:500;display:flex;align-items:center;gap:10px;color:var(--text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-alt);color:var(--ink)}
.dropdown-item.text-danger:hover{background:var(--danger-soft)}
.dropdown-divider{border-top-color:var(--border-light);margin:5px 2px}

.modal-content{border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--border-light);padding:18px 22px}
.modal-title{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0}
.modal-body{padding:22px}
.modal-footer{border-top:1px solid var(--border-light);padding:14px 22px;gap:8px}

.offcanvas{background:var(--surface)}
.offcanvas-header{border-bottom:1px solid var(--border-light)}
.offcanvas-title{font-family:var(--serif);color:var(--ink)}

/* ---- alerts, progress, pagination, tabs, accordion ---- */
.alert{border-radius:var(--r-lg);border:1px solid transparent;font-size:14px;padding:13px 16px}
.alert-primary{background:var(--primary-soft);color:var(--primary)}
.alert-success{background:var(--success-soft);color:var(--success)}
.alert-danger{background:var(--danger-soft);color:var(--danger)}
.alert-warning{background:var(--warning-soft);color:var(--warning)}
.alert-info{background:var(--info-soft);color:var(--info)}

.progress{background:var(--border-light);border-radius:999px;height:8px}
.progress-bar{background:linear-gradient(90deg,var(--primary),var(--primary-2))}

.page-link{color:var(--primary);border-color:var(--border);font-weight:600;font-size:14px}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary)}

.nav-tabs{border-bottom:1px solid var(--border);gap:4px}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;font-weight:600;color:var(--text-2);padding:10px 14px;border-radius:0}
.nav-tabs .nav-link:hover{color:var(--ink);border-bottom-color:var(--border)}
.nav-tabs .nav-link.active{color:var(--primary);background:transparent;border-bottom-color:var(--primary)}

.nav-pills .nav-link{font-weight:600;color:var(--text-2);border-radius:999px;padding:8px 16px}
.nav-pills .nav-link.active{background:var(--ink);color:#fff}

.accordion-button{font-weight:600;color:var(--ink);background:var(--surface)}
.accordion-button:not(.collapsed){background:var(--primary-soft);color:var(--primary);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(28,90,170,.14);border-color:var(--primary-2)}
.accordion-item{border-color:var(--border)}

.list-group-item{border-color:var(--border-light);padding:13px 16px;font-size:14px}
.list-group-item.active{background:var(--primary);border-color:var(--primary)}

.breadcrumb{font-size:13px;margin-bottom:0}
.breadcrumb-item+.breadcrumb-item::before{color:var(--text-3)}

.spinner-border,.spinner-grow{color:var(--primary)}

/* ---- Bootstrap grid gutters default a little tighter, matching the old .grid ---- */
.row{--bs-gutter-x:18px;--bs-gutter-y:18px}

/* ---- focus ring consistency ---- */
.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible,
.nav-link:focus-visible,.dropdown-item:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(28,90,170,.2);
}

/* ---- legacy utility shims -------------------------------------------------
   The console JS builds markup with the original utility classes. These map
   onto the same visual result so Bootstrap and the existing markup coexist.   */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:991px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

@media (max-width:991px){
  .navbar.rk-navbar .navbar-collapse{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);padding:12px;margin-top:10px;
  }
  .navbar.rk-navbar.on-dark .navbar-collapse .nav-link{color:var(--text-2)}
  .navbar.rk-navbar.on-dark .navbar-collapse .nav-link.active{color:var(--primary);background:var(--primary-soft)}
  .navbar.rk-navbar.on-dark .navbar-collapse .btn-outline-light{color:var(--ink);border-color:var(--border);background:var(--surface)}
}

/* ---- toasts (brand look on Bootstrap's toast component) ---- */
.toast{background:var(--ink);color:#fff;border:0;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px}
.toast .toast-body{color:#fff;padding:14px 16px}
.toast .toast-body b{display:block;font-size:14px}
.toast .toast-body span{color:var(--on-ink-soft);font-size:13px;margin-top:2px}
.toast .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.7}
.toast .ico{margin-top:1px;flex:none}
.toast-ok .ico{color:#4ADE9C}
.toast-bad .ico{color:#ff8b9b}
.toast-info .ico{color:var(--brass-light)}
.toast-container{max-width:min(380px,calc(100vw - 24px))}

/* ---- modal sizing parity with the previous dialog widths ---- */
.modal-dialog{--bs-modal-width:min(640px,100%)}
.modal-dialog.modal-lg{--bs-modal-width:min(900px,100%)}
.modal-dialog.modal-sm{--bs-modal-width:min(440px,100%)}
.modal-header .btn-close{margin:0}