/* =========================================================================
   OCTA+ v7.1 — bootstrap-fallback.css
   Purpose: make the dashboard usable even when Bootstrap CSS from a CDN
   fails to load. This file covers ONLY the Bootstrap classes actively
   used by dashboard.php and dashboard.js — it is NOT a Bootstrap
   replacement. Loaded BEFORE style.css so that Bootstrap (if it loads)
   AND our theme both take precedence over it.
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; background: none; border: none; }
a { text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }

/* ---------- layout: container / grid ---------- */
.container { width: 100%; max-width: 1200px; padding: 0 12px; margin: 0 auto; }
.container-fluid { width: 100%; padding: 0 12px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row > [class^="col"], .row > [class*=" col"] { padding: 0 6px; }

/* generic columns */
.col     { flex: 1 0 0; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
[class*="col-"] { position: relative; width: 100%; min-height: 1px; }

/* fractional widths */
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* gaps (g-*) apply to .row */
.row.g-1 { margin: -2px; } .row.g-1 > [class*="col"] { padding: 2px; }
.row.g-2 { margin: -4px; } .row.g-2 > [class*="col"] { padding: 4px; }
.row.g-3 { margin: -8px; } .row.g-3 > [class*="col"] { padding: 8px; }
.row.g-4 { margin: -12px; } .row.g-4 > [class*="col"] { padding: 12px; }
.row.g-5 { margin: -24px; } .row.g-5 > [class*="col"] { padding: 24px; }

/* ---------- display / flex utilities ---------- */
.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-flex  { display: flex !important; }
.d-grid  { display: grid !important; }
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-flex { display: inline-flex !important; }
}

.flex-row       { flex-direction: row !important; }
.flex-column    { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.flex-grow-1    { flex-grow: 1 !important; }
.flex-shrink-0  { flex-shrink: 0 !important; }

.justify-content-start    { justify-content: flex-start !important; }
.justify-content-end      { justify-content: flex-end !important; }
.justify-content-center   { justify-content: center !important; }
.justify-content-between  { justify-content: space-between !important; }
.justify-content-around   { justify-content: space-around !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-end     { align-items: flex-end !important; }
.align-items-center  { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-items-baseline{ align-items: baseline !important; }
.align-self-center   { align-self: center !important; }
.align-self-end      { align-self: flex-end !important; }
.text-nowrap  { white-space: nowrap !important; }

/* gap (also used outside .row) */
.gap-1 { gap: 4px !important; } .gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; } .gap-4 { gap: 16px !important; } .gap-5 { gap: 24px !important; }

/* ---------- spacing (margin/padding) ---------- */
.m-0 { margin: 0 !important; } .m-1 { margin: 4px !important; } .m-2 { margin: 8px !important; }
.m-3 { margin: 12px !important; } .m-4 { margin: 16px !important; } .m-5 { margin: 24px !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-5 { margin-top: 24px !important; margin-bottom: 24px !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; } .mt-5 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; } .mb-5 { margin-bottom: 24px !important; }
.ms-1 { margin-left: 4px !important; } .ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 12px !important; } .ms-auto { margin-left: auto !important; }
.me-1 { margin-right: 4px !important; } .me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 12px !important; } .me-auto { margin-right: auto !important; }

.p-0 { padding: 0 !important; } .p-1 { padding: 4px !important; } .p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; } .p-4 { padding: 16px !important; } .p-5 { padding: 24px !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.pt-1 { padding-top: 4px !important; } .pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 12px !important; }
.pb-1 { padding-bottom: 4px !important; } .pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 12px !important; }
.ps-2 { padding-left: 8px !important; } .ps-3 { padding-left: 12px !important; }
.pe-2 { padding-right: 8px !important; } .pe-3 { padding-right: 12px !important; }

/* ---------- typography ---------- */
.text-center { text-align: center !important; }
.text-start  { text-align: left !important; }
.text-end    { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.small { font-size: 0.875em !important; }
.fs-4 { font-size: 1.5rem !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; }
.fw-bold      { font-weight: 700 !important; }
.fw-semibold  { font-weight: 600 !important; }
.fw-normal    { font-weight: 400 !important; }
.fw-light     { font-weight: 300 !important; }
.lh-1 { line-height: 1 !important; }
.text-white    { color: #fff !important; }
.text-muted    { color: #6c757d !important; }
.text-danger   { color: #dc3545 !important; }
.text-success  { color: #198754 !important; }
.text-warning  { color: #b8860b !important; }
.text-primary  { color: #0d6efd !important; }
.text-secondary{ color: #6c757d !important; }

/* backgrounds */
.bg-white     { background-color: #ffffff !important; }
.bg-light     { background-color: #f8f9fa !important; }
.bg-dark      { background-color: #212529 !important; }
.bg-primary   { background-color: #0d6efd !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-warning   { background-color: #ffc107 !important; }
.bg-success   { background-color: #198754 !important; }
.bg-danger    { background-color: #dc3545 !important; }
.bg-info      { background-color: #0dcaf0 !important; }

/* ---------- borders / shape / shadow ---------- */
.border         { border: 1px solid #dee2e6 !important; }
.border-top-0   { border-top: 0 !important; }
.border-bottom-0{ border-bottom: 0 !important; }
.border-warning { border-color: #ffc107 !important; }
.border-success { border-color: #198754 !important; }
.border-danger  { border-color: #dc3545 !important; }
.rounded        { border-radius: 8px !important; }
.rounded-1      { border-radius: 4px !important; }
.rounded-2      { border-radius: 8px !important; }
.rounded-3      { border-radius: 12px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-bottom { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.rounded-top    { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.075) !important; }
.shadow    { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }
.shadow-lg { box-shadow: 0 12px 28px rgba(0,0,0,0.25) !important; }

/* w/h helpers */
.w-100 { width: 100% !important; } .w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

/* position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* ---------- navbar ---------- */
.navbar {
  display: flex; align-items: center; padding: 8px 0;
  background-color: #f8f9fa;
}
.navbar-dark { color: rgba(255,255,255,0.85); }
.navbar-dark .navbar-brand,
.navbar-dark .navbar-text { color: #fff; }
.navbar > .container,
.navbar > .container-fluid { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.navbar-brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 20px; font-weight: 700;
  color: inherit; text-decoration: none;
}
.navbar-text { padding: 4px 0; }

/* ---------- nav / tabs ---------- */
.nav { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.nav-item { list-style: none; }
.nav-link {
  display: block; padding: 8px 16px;
  background: transparent; border: 0;
  color: #0d6efd; text-decoration: none;
  font-family: inherit; font-size: inherit;
  cursor: pointer;
}
.nav-link:hover { color: #0a58ca; }
.nav-tabs { border-bottom: 1px solid #dee2e6; }
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 6px; border-top-right-radius: 6px;
  color: #495057;
}
.nav-tabs .nav-link:hover {
  border-color: #e9ecef #e9ecef #dee2e6;
  background: #f8f9fa;
}
.nav-tabs .nav-link.active {
  color: #495057; background: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-content > .tab-pane.show { display: block; }
.tab-content > .fade { opacity: 0; transition: opacity 0.15s linear; }
.tab-content > .fade.show { opacity: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; font-family: inherit; font-size: 15px; font-weight: 500;
  line-height: 1.5; text-align: center; text-decoration: none;
  vertical-align: middle; cursor: pointer; user-select: none;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:disabled { opacity: 0.65; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 5px; }
.btn-lg { padding: 12px 22px; font-size: 17px; border-radius: 7px; }
.btn-primary   { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.btn-primary:hover   { background: #0b5ed7; border-color: #0a58ca; }
.btn-secondary { color: #fff; background: #6c757d; border-color: #6c757d; }
.btn-secondary:hover { background: #5c636a; }
.btn-success   { color: #fff; background: #198754; border-color: #198754; }
.btn-success:hover   { background: #146c43; }
.btn-danger    { color: #fff; background: #dc3545; border-color: #dc3545; }
.btn-danger:hover    { background: #b02a37; }
.btn-warning   { color: #212529; background: #ffc107; border-color: #ffc107; }
.btn-warning:hover   { background: #ffca2c; }
.btn-light     { color: #212529; background: #f8f9fa; border-color: #f8f9fa; }
.btn-light:hover     { background: #e9ecef; }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.btn-outline-secondary:hover { color: #fff; background: #6c757d; }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-light:hover { color: #212529; background: #f8f9fa; }
.btn-link { color: #0d6efd; background: transparent; text-decoration: underline; padding: 4px 8px; }
.btn-close {
  padding: 4px; width: 18px; height: 18px; background: transparent;
  border: 0; opacity: 0.5; position: relative;
}
.btn-close::before { content: '\00d7'; font-size: 22px; line-height: 1; }
.btn-close-white { color: #fff; opacity: 0.9; }
.btn-close:hover { opacity: 1; }

/* button groups (radio pickers) */
.btn-group {
  display: inline-flex; vertical-align: middle;
}
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.btn-check:checked + .btn { background: #0d6efd; color: #fff; border-color: #0d6efd; }

/* ---------- cards ---------- */
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,0.125);
  border-radius: 8px; min-width: 0; word-wrap: break-word;
}
.card-body { flex: 1 1 auto; padding: 16px; }
.card-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.125); }
.card-header:first-child { border-radius: 8px 8px 0 0; }

/* ---------- forms ---------- */
.form-label { display: inline-block; margin-bottom: 4px; font-weight: 500; font-size: 14px; }
.form-control, .form-select {
  display: block; width: 100%;
  padding: 8px 12px; font-family: inherit; font-size: 14.5px;
  line-height: 1.5; color: #212529;
  background-color: #fff; background-clip: padding-box;
  border: 1px solid #ced4da; border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.25);
}
.form-select { padding-right: 30px; appearance: none; background-image: none; }
.form-control-sm, .form-select-sm { padding: 4px 8px; font-size: 13px; border-radius: 4px; }
textarea.form-control { min-height: 60px; }
.form-check { display: block; min-height: 22px; padding-left: 24px; margin-bottom: 4px; }
.form-check-inline { display: inline-block; margin-right: 12px; }
.form-check-input { float: left; margin-left: -24px; margin-top: 4px; width: 16px; height: 16px; vertical-align: top; }
.form-check-label { margin-left: 4px; cursor: pointer; }
.form-switch .form-check-input { width: 32px; }
.input-group {
  display: flex; align-items: stretch; width: 100%;
}
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; }
.input-group > * { border-radius: 0 !important; }
.input-group > *:first-child { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.input-group > *:last-child  { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.input-group > *:not(:first-child) { margin-left: -1px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 3px 8px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap;
  vertical-align: baseline; border-radius: 4px;
  background: #6c757d;
}
.badge.bg-primary  { background-color: #0d6efd !important; }
.badge.bg-success  { background-color: #198754 !important; }
.badge.bg-warning  { background-color: #ffc107 !important; color: #212529 !important; }
.badge.bg-danger   { background-color: #dc3545 !important; }
.badge.bg-light    { background-color: #f8f9fa !important; color: #212529 !important; }
.badge.bg-secondary{ background-color: #6c757d !important; }

/* ---------- alerts ---------- */
.alert {
  position: relative; padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid transparent; border-radius: 6px; font-size: 14.5px;
}
.alert-primary { color: #084298; background: #cfe2ff; border-color: #b6d4fe; }
.alert-success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.alert-warning { color: #664d03; background: #fff3cd; border-color: #ffecb5; }
.alert-danger  { color: #842029; background: #f8d7da; border-color: #f5c2c7; }
.alert-info    { color: #055160; background: #cff4fc; border-color: #b6effb; }

/* ---------- progress ---------- */
.progress {
  display: flex; height: 12px; overflow: hidden;
  font-size: 10px; background: #e9ecef; border-radius: 6px;
}
.progress-bar {
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; color: #fff; text-align: center;
  background: #0d6efd; transition: width 0.6s ease;
}

/* ---------- modal ---------- */
.modal {
  display: none; position: fixed; top: 0; left: 0;
  z-index: 1055; width: 100%; height: 100%; overflow-y: auto;
  outline: 0; background: rgba(0,0,0,0.5);
}
.modal.show { display: block; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translateY(-30px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog {
  position: relative; width: auto; margin: 24px auto;
  max-width: 500px; pointer-events: none;
}
.modal-dialog-lg { max-width: 800px; }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px; outline: 0; pointer-events: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #dee2e6;
  border-radius: 10px 10px 0 0;
}
.modal-body { position: relative; flex: 1 1 auto; padding: 16px; }
.modal-footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 8px; padding: 12px 16px;
  border-top: 1px solid #dee2e6; border-radius: 0 0 10px 10px;
}
.modal-title { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0; }

/* prevent body scroll when modal open */
body.modal-open { overflow: hidden; }