/**
 * =============================================================================
 * BOOTSTRAP → TAILWIND CSS BRIDGE  (v1.0)
 * =============================================================================
 * Replaces bootstrap.min.css entirely.
 * All Bootstrap 3 class names are kept so HTML templates don't need changes.
 * Styling is reimplemented using design tokens from tokens.css.
 * =============================================================================
 */

/* ============================================================
   BASE RESET & BOX MODEL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   1. GRID SYSTEM
   Bootstrap 3 12-column grid → CSS Flexbox
   ============================================================ */

.container {
  width: 100%;
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.container-fluid {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* All columns share this base */
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* XS (mobile-first, always applies) */
.col-xs-1  { flex: 0 0 8.333333%;   max-width: 8.333333%; }
.col-xs-2  { flex: 0 0 16.666667%;  max-width: 16.666667%; }
.col-xs-3  { flex: 0 0 25%;         max-width: 25%; }
.col-xs-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
.col-xs-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
.col-xs-6  { flex: 0 0 50%;         max-width: 50%; }
.col-xs-7  { flex: 0 0 58.333333%;  max-width: 58.333333%; }
.col-xs-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
.col-xs-9  { flex: 0 0 75%;         max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%;  max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%;        max-width: 100%; }

/* SM (≥768px) */
@media (min-width: 768px) {
  .col-sm-1  { flex: 0 0 8.333333%;   max-width: 8.333333%; }
  .col-sm-2  { flex: 0 0 16.666667%;  max-width: 16.666667%; }
  .col-sm-3  { flex: 0 0 25%;         max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
  .col-sm-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
  .col-sm-6  { flex: 0 0 50%;         max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333333%;  max-width: 58.333333%; }
  .col-sm-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
  .col-sm-9  { flex: 0 0 75%;         max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%;  max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%;        max-width: 100%; }

  .col-sm-offset-0  { margin-left: 0; }
  .col-sm-offset-1  { margin-left: 8.333333%; }
  .col-sm-offset-2  { margin-left: 16.666667%; }
  .col-sm-offset-3  { margin-left: 25%; }
  .col-sm-offset-4  { margin-left: 33.333333%; }
  .col-sm-offset-6  { margin-left: 50%; }
}

/* MD (≥992px) */
@media (min-width: 992px) {
  .col-md-1  { flex: 0 0 8.333333%;   max-width: 8.333333%; }
  .col-md-2  { flex: 0 0 16.666667%;  max-width: 16.666667%; }
  .col-md-3  { flex: 0 0 25%;         max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%;         max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%;  max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
  .col-md-9  { flex: 0 0 75%;         max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%;  max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%;        max-width: 100%; }

  .col-md-offset-0  { margin-left: 0; }
  .col-md-offset-1  { margin-left: 8.333333%; }
  .col-md-offset-2  { margin-left: 16.666667%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-4  { margin-left: 33.333333%; }
  .col-md-offset-5  { margin-left: 41.666667%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-8  { margin-left: 66.666667%; }
}

/* LG (≥1200px) */
@media (min-width: 1200px) {
  .col-lg-1  { flex: 0 0 8.333333%;   max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%;  max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%;         max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
  .col-lg-6  { flex: 0 0 50%;         max-width: 50%; }
  .col-lg-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
  .col-lg-9  { flex: 0 0 75%;         max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
  .col-lg-12 { flex: 0 0 100%;        max-width: 100%; }
}

/* Default: xs columns full-width on mobile */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10,
.col-md-11 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 992px) {
  /* MD overrides set above */
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10,
.col-lg-11 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 1200px) {
  /* LG overrides set above */
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 { margin-top: 20px; margin-bottom: 10px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }

p { margin: 0 0 10px; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { color: var(--color-text-link-hover); text-decoration: underline; }

small { font-size: 85%; }
strong { font-weight: 600; }
.lead { font-size: 1.125rem; font-weight: 300; }
.text-muted   { color: var(--color-text-muted) !important; }
.text-primary { color: var(--color-accent-primary) !important; }
.text-success { color: var(--color-status-success-text) !important; }
.text-danger  { color: var(--color-status-danger-text) !important; }
.text-warning { color: var(--color-status-warning-text) !important; }
.text-info    { color: var(--color-status-info-text) !important; }
.text-center  { text-align: center !important; }
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.text-nowrap  { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize{ text-transform: capitalize !important; }


/* ============================================================
   3. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42857;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.btn:hover   { opacity: 0.85; text-decoration: none; }
.btn:active  { transform: translateY(1px); }
.btn:focus   { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.btn-lg { padding: 10px 18px; font-size: 15px; border-radius: 8px; }
.btn-block { display: flex; width: 100%; }

.btn-default  { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: var(--color-border-default); }
.btn-primary  { background: var(--color-accent-primary); color: #fff; border-color: var(--color-accent-primary); }
.btn-success, .btn.green { background: var(--color-status-success-text); color: #fff; border-color: var(--color-status-success-text); }
.btn-danger,  .btn.red   { background: var(--color-status-danger-text);  color: #fff; border-color: var(--color-status-danger-text); }
.btn-warning, .btn.yellow{ background: var(--color-status-warning-text); color: #fff; border-color: var(--color-status-warning-text); }
.btn-info,    .btn.blue  { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.btn-link     { background: transparent; border-color: transparent; color: var(--color-text-link); }
.btn-link:hover { color: var(--color-text-link-hover); text-decoration: underline; background: transparent; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 6px 0 0 6px; }
.btn-group > .btn:last-child  { border-radius: 0 6px 6px 0; }
.btn-group-vertical { display: inline-flex; flex-direction: column; }

/* Purple/green Metronic-style variants */
.btn.purple { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
.btn.dark   { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: var(--color-border-default); }
.btn-circle { border-radius: 50% !important; width: 32px; height: 32px; padding: 0; }


/* ============================================================
   4. FORMS
   ============================================================ */

.form-group {
  margin-bottom: 14px;
  position: relative;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857;
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  background-image: none;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.form-control[disabled], .form-control[readonly] { opacity: 0.6; cursor: not-allowed; }
textarea.form-control { height: auto; min-height: 80px; resize: vertical; }
select.form-control { cursor: pointer; }

/* Form horizontal */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; }
.form-horizontal .control-label {
  padding-top: 7px;
  text-align: right;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-secondary);
}
@media (max-width: 767px) {
  .form-horizontal .control-label { text-align: left; }
}

/* Validation states */
.has-error .form-control   { border-color: var(--color-status-danger-text); }
.has-success .form-control { border-color: var(--color-status-success-text); }
.has-warning .form-control { border-color: var(--color-status-warning-text); }
.has-error .help-block,
.has-error .control-label  { color: var(--color-status-danger-text); }
.has-success .help-block,
.has-success .control-label{ color: var(--color-status-success-text); }

.help-block { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }

/* Input Group */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  flex: 1 1 auto;
  border-radius: 0;
  position: relative;
  z-index: 2;
}
.input-group .form-control:first-child { border-radius: 6px 0 0 6px; }
.input-group .form-control:last-child  { border-radius: 0 6px 6px 0; }

.input-group-addon, .input-group-btn {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 13px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.input-group-addon:first-child { border-radius: 6px 0 0 6px; border-right: 0; }
.input-group-addon:last-child  { border-radius: 0 6px 6px 0; border-left: 0; }
.input-group-btn:first-child > .btn { border-radius: 6px 0 0 6px; }
.input-group-btn:last-child  > .btn { border-radius: 0 6px 6px 0; }

/* Checkbox & Radio */
.checkbox, .radio { margin-top: 10px; margin-bottom: 10px; }
.checkbox label, .radio label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }
.checkbox input[type="checkbox"], .radio input[type="radio"] { margin: 0; cursor: pointer; }
.checkbox-inline, .radio-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; vertical-align: middle; }

/* Select2 / chosen placeholder */
.select2-container .select2-selection { min-height: 34px; }


/* ============================================================
   5. TABLES
   ============================================================ */

.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  font-size: 13px;
}
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px 10px;
  line-height: 1.42857;
  vertical-align: middle;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}
.table > thead > tr > th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border-default);
  background-color: var(--color-bg-surface);
  white-space: nowrap;
}
.table-hover > tbody > tr:hover > td {
  background-color: rgba(59, 130, 246, 0.06);
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(255, 255, 255, 0.02);
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--color-border-subtle);
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td { padding: 5px 8px; }
.table-responsive { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }

/* Row status colors */
tr.success > td { background-color: var(--color-status-success-bg) !important; }
tr.danger  > td { background-color: var(--color-status-danger-bg)  !important; }
tr.warning > td { background-color: var(--color-status-warning-bg) !important; }
tr.info    > td { background-color: var(--color-status-info-bg)    !important; }
tr.active  > td { background-color: rgba(255,255,255,0.05)         !important; }


/* ============================================================
   6. PANELS
   ============================================================ */

.panel {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.panel-body    { padding: 15px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid var(--color-border-subtle); border-radius: 8px 8px 0 0; background-color: var(--color-bg-elevated); }
.panel-footer  { padding: 10px 15px; border-top: 1px solid var(--color-border-subtle); border-radius: 0 0 8px 8px; background-color: var(--color-bg-elevated); }
.panel-title   { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }

.panel-default > .panel-heading { background-color: var(--color-bg-elevated); }
.panel-primary > .panel-heading { background-color: var(--color-accent-primary); color: #fff; }
.panel-success > .panel-heading { background-color: var(--color-status-success-bg); color: var(--color-status-success-text); }
.panel-danger  > .panel-heading { background-color: var(--color-status-danger-bg);  color: var(--color-status-danger-text); }
.panel-warning > .panel-heading { background-color: var(--color-status-warning-bg); color: var(--color-status-warning-text); }

/* Collapse panel */
.panel-group .panel { border-radius: 6px; }
.panel-group .panel + .panel { margin-top: 5px; }


/* ============================================================
   7. PORTLETS (Metronic-specific Cards)
   ============================================================ */

.portlet {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.portlet.light, .portlet.light.bordered {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-default);
}
.portlet.bordered { border: 1px solid var(--color-border-default) !important; }
.portlet.box { border: 0; }
.portlet.solid { background-color: var(--color-bg-elevated); }

.portlet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 44px;
  flex-wrap: wrap;
  gap: 8px;
}
.portlet-title .caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.portlet-title .caption-subject { font-size: 14px; font-weight: 600; }
.portlet-title .tools { display: flex; align-items: center; gap: 6px; }
.portlet-title .actions { display: flex; align-items: center; gap: 6px; }

.portlet-body { padding: 15px; }
.portlet-footer { padding: 10px 15px; border-top: 1px solid var(--color-border-subtle); }

/* Metronic color variants */
.portlet.blue    { background: var(--color-accent-primary); }
.portlet.green   { background: var(--color-status-success-text); }
.portlet.red     { background: var(--color-status-danger-text); }
.portlet.purple  { background: #8b5cf6; }


/* ============================================================
   8. MODALS
   ============================================================ */

.modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
  background-color: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
}
.modal.in, .modal.show { display: flex; align-items: center; justify-content: center; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translateY(-30px); }
.modal.in .modal-dialog, .modal.show .modal-dialog { transform: translateY(0); }

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 20px auto;
  pointer-events: auto;
}
.modal-dialog.modal-sm  { max-width: 360px; }
.modal-dialog.modal-lg  { max-width: 900px; }
.modal-dialog.modal-xl  { max-width: 1200px; }
.modal-dialog.modal-full{ max-width: 98vw; }

.modal-content {
  position: relative;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  outline: 0;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-elevated);
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0; }

.modal-body { padding: 20px; overflow-y: auto; max-height: 75vh; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-elevated);
}

/* Close button */
.close, .modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0.6;
  padding: 4px 8px;
  border-radius: 4px;
}
.close:hover { opacity: 1; color: var(--color-text-primary); }

.modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1040;
  background-color: rgba(0,0,0,0.5);
}
.modal-backdrop.in { opacity: 0.5; }


/* ============================================================
   9. ALERTS
   ============================================================ */

.alert {
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-success  { background: var(--color-status-success-bg); border-color: var(--color-status-success-border); color: var(--color-status-success-text); }
.alert-danger   { background: var(--color-status-danger-bg);  border-color: var(--color-status-danger-border);  color: var(--color-status-danger-text); }
.alert-warning  { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: var(--color-status-warning-text); }
.alert-info     { background: var(--color-status-info-bg);    border-color: var(--color-status-info-border);    color: var(--color-status-info-text); }
.alert-dismissable .close { margin-left: auto; }


/* ============================================================
   10. NAVIGATION — Tabs & Pills
   ============================================================ */

.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.nav > li > a:hover  { background: var(--color-accent-subtle); color: var(--color-text-primary); }
.nav > li.active > a { background: var(--color-accent-primary); color: #fff; }
.nav > li.disabled > a { opacity: 0.4; pointer-events: none; }

/* Nav tabs */
.nav-tabs {
  border-bottom: 2px solid var(--color-border-default);
}
.nav-tabs > li > a {
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
}
.nav-tabs > li.active > a {
  border-bottom-color: var(--color-accent-primary);
  color: var(--color-text-primary);
  background: transparent;
}

/* Nav pills */
.nav-pills > li > a { border-radius: 20px; }

/* Tab content */
.tab-content > .tab-pane { display: none; }
.tab-content > .active   { display: block; }

/* Breadcrumb (Bootstrap style) */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 8px 15px;
  margin-bottom: 20px;
  background-color: var(--color-bg-elevated);
  border-radius: 6px;
}
.breadcrumb > li + li::before {
  content: "/";
  padding: 0 8px;
  color: var(--color-text-muted);
}
.breadcrumb > .active { color: var(--color-text-muted); }


/* ============================================================
   11. DROPDOWN
   ============================================================ */

.dropdown, .dropup { position: relative; }
.dropdown-toggle::after { content: " ▾"; font-size: 10px; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 180px;
  padding: 6px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  list-style: none;
  margin: 2px 0 0;
}
.dropdown-menu.pull-right { left: auto; right: 0; }
.open > .dropdown-menu   { display: block; }

.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.1s;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover { background: var(--color-accent-subtle); color: var(--color-text-primary); }
.dropdown-menu > li.active > a { background: var(--color-accent-primary); color: #fff; }
.dropdown-menu > li.disabled > a { opacity: 0.5; pointer-events: none; }

.dropdown-divider, .divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: 6px 0;
}
.dropdown-header {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}


/* ============================================================
   12. BADGES & LABELS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
  background-color: var(--color-accent-primary);
  color: #fff;
}

.label {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
}
.label-default { background: var(--color-bg-elevated); color: var(--color-text-secondary); }
.label-primary  { background: var(--color-accent-primary);         color: #fff; }
.label-success  { background: var(--color-status-success-text);    color: #fff; }
.label-danger   { background: var(--color-status-danger-text);     color: #fff; }
.label-warning  { background: var(--color-status-warning-text);    color: #fff; }
.label-info     { background: var(--color-status-info-text);       color: #fff; }


/* ============================================================
   13. PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.pagination > li > a, .pagination > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.pagination > li > a:hover { background: var(--color-accent-subtle); border-color: var(--color-border-accent); }
.pagination > li.active > a, .pagination > li.active > span { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: #fff; }
.pagination > li.disabled > a { opacity: 0.4; pointer-events: none; }


/* ============================================================
   14. COLLAPSE / ACCORDION
   ============================================================ */

.collapse { display: none; }
.collapse.in, .collapse.show { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height 0.35s ease; }


/* ============================================================
   15. PROGRESS BARS
   ============================================================ */

.progress {
  height: 8px;
  background-color: var(--color-bg-elevated);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.progress-bar {
  height: 100%;
  background-color: var(--color-accent-primary);
  border-radius: 10px;
  transition: width 0.6s ease;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
}
.progress-bar-success { background-color: var(--color-status-success-text); }
.progress-bar-danger  { background-color: var(--color-status-danger-text); }
.progress-bar-warning { background-color: var(--color-status-warning-text); }
.progress-bar-info    { background-color: #0ea5e9; }
.progress-bar-striped {
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 40px 40px;
}


/* ============================================================
   16. LIST GROUP
   ============================================================ */

.list-group { display: flex; flex-direction: column; padding: 0; margin-bottom: 20px; list-style: none; }
.list-group-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  font-size: 13px;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  text-decoration: none;
}
.list-group-item:first-child { border-radius: 6px 6px 0 0; }
.list-group-item:last-child  { border-radius: 0 0 6px 6px; }
.list-group-item + .list-group-item { border-top: 0; }
.list-group-item:hover, .list-group-item:focus { background: var(--color-bg-elevated); }
.list-group-item.active { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: #fff; }


/* ============================================================
   17. TOOLTIPS & POPOVERS
   ============================================================ */

.tooltip { position: absolute; z-index: 1070; display: block; font-size: 12px; opacity: 0; pointer-events: none; }
.tooltip.in { opacity: 0.9; }
.tooltip-inner { max-width: 200px; padding: 5px 10px; background: rgba(0,0,0,0.85); color: #fff; border-radius: 4px; text-align: center; }

.popover {
  position: absolute;
  z-index: 1060;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 12px 16px;
  max-width: 280px;
  font-size: 13px;
  color: var(--color-text-primary);
}
.popover-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); }


/* ============================================================
   18. WELL
   ============================================================ */

.well {
  min-height: 20px;
  padding: 15px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  margin-bottom: 20px;
}
.well-sm { padding: 9px; border-radius: 4px; }
.well-lg { padding: 24px; border-radius: 8px; }


/* ============================================================
   19. UTILITY CLASSES
   ============================================================ */

/* Float */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Display */
.hidden           { display: none !important; }
.show             { display: block !important; }
.invisible        { visibility: hidden !important; }
.d-block          { display: block !important; }
.d-inline-block   { display: inline-block !important; }
.d-flex           { display: flex !important; }
.d-none           { display: none !important; }

/* Responsive visibility */
@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
  .visible-xs, .visible-xs-block { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
  .visible-sm, .visible-sm-block { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
}

/* Spacing helpers */
.mt0, .mt-0 { margin-top: 0 !important; }
.mt5, .mt-5 { margin-top: 5px !important; }
.mt10       { margin-top: 10px !important; }
.mt15       { margin-top: 15px !important; }
.mt20       { margin-top: 20px !important; }
.mb0, .mb-0 { margin-bottom: 0 !important; }
.mb5        { margin-bottom: 5px !important; }
.mb10       { margin-bottom: 10px !important; }
.mb15       { margin-bottom: 15px !important; }
.mb20       { margin-bottom: 20px !important; }
.ml5        { margin-left: 5px !important; }
.ml10       { margin-left: 10px !important; }
.ml15       { margin-left: 15px !important; }
.mr5        { margin-right: 5px !important; }
.mr10       { margin-right: 10px !important; }
.mr15       { margin-right: 15px !important; }
.p0         { padding: 0 !important; }
.p5         { padding: 5px !important; }
.p10        { padding: 10px !important; }
.p15        { padding: 15px !important; }
.p20        { padding: 20px !important; }
.pt0        { padding-top: 0 !important; }
.pt10       { padding-top: 10px !important; }
.pt15       { padding-top: 15px !important; }
.pl0        { padding-left: 0 !important; }
.pl10       { padding-left: 10px !important; }
.pl15       { padding-left: 15px !important; }
.pr0        { padding-right: 0 !important; }
.pr10       { padding-right: 10px !important; }
.pr15       { padding-right: 15px !important; }
.no-padding { padding: 0 !important; }
.no-margin  { margin: 0 !important; }

/* Width helpers */
.w-full      { width: 100% !important; }
.w-half      { width: 50% !important; }
.w-auto      { width: auto !important; }

/* Font */
.font-bold      { font-weight: 600 !important; }
.bold           { font-weight: 600 !important; }
.font-light     { font-weight: 300 !important; }
.font-sm        { font-size: 12px !important; }
.font-xs        { font-size: 11px !important; }
.font-lg        { font-size: 16px !important; }
.uppercase      { text-transform: uppercase !important; }
.italic         { font-style: italic !important; }

/* Cursor */
.pointer        { cursor: pointer !important; }

/* Overflow */
.overflow-hidden{ overflow: hidden !important; }
.overflow-auto  { overflow: auto !important; }
.overflow-x-auto{ overflow-x: auto !important; }

/* Border */
.no-border      { border: none !important; }
.border-top     { border-top: 1px solid var(--color-border-subtle) !important; }
.border-bottom  { border-bottom: 1px solid var(--color-border-subtle) !important; }

/* Position */
.relative       { position: relative !important; }
.absolute       { position: absolute !important; }

/* Separator / Divider */
.separator, hr {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: 15px 0;
}

/* Row styling helpers */
.row-no-gutters { margin-left: 0; margin-right: 0; }
.row-no-gutters > [class*="col-"] { padding-left: 0; padding-right: 0; }


/* ============================================================
   20. GLYPHICONS BRIDGE → Font Awesome
   Keeps glyphicon class but renders as Font Awesome
   (Font Awesome is loaded in index.html)
   ============================================================ */

[class^="glyphicon-"], [class*=" glyphicon-"] {
  font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.glyphicon-ok::before          { content: "\f00c"; }
.glyphicon-remove::before      { content: "\f00d"; }
.glyphicon-plus::before        { content: "\f067"; }
.glyphicon-minus::before       { content: "\f068"; }
.glyphicon-search::before      { content: "\f002"; }
.glyphicon-user::before        { content: "\f007"; }
.glyphicon-home::before        { content: "\f015"; }
.glyphicon-pencil::before      { content: "\f040"; }
.glyphicon-trash::before       { content: "\f1f8"; }
.glyphicon-print::before       { content: "\f02f"; }
.glyphicon-download-alt::before{ content: "\f019"; }
.glyphicon-upload::before      { content: "\f093"; }
.glyphicon-refresh::before     { content: "\f021"; }
.glyphicon-cog::before         { content: "\f013"; }
.glyphicon-eye-open::before    { content: "\f06e"; }
.glyphicon-eye-close::before   { content: "\f070"; }
.glyphicon-lock::before        { content: "\f023"; }
.glyphicon-warning-sign::before{ content: "\f071"; }
.glyphicon-info-sign::before   { content: "\f129"; }
.glyphicon-star::before        { content: "\f005"; }
.glyphicon-heart::before       { content: "\f004"; }
.glyphicon-envelope::before    { content: "\f0e0"; }
.glyphicon-calendar::before    { content: "\f073"; }
.glyphicon-time::before        { content: "\f017"; }
.glyphicon-map-marker::before  { content: "\f041"; }
.glyphicon-phone::before       { content: "\f095"; }
.glyphicon-file::before        { content: "\f15b"; }
.glyphicon-folder-open::before { content: "\f07c"; }
.glyphicon-folder-close::before{ content: "\f07b"; }
.glyphicon-list::before        { content: "\f03a"; }
.glyphicon-list-alt::before    { content: "\f022"; }
.glyphicon-th-list::before     { content: "\f00b"; }
.glyphicon-th::before          { content: "\f009"; }
.glyphicon-th-large::before    { content: "\f009"; }
.glyphicon-tags::before        { content: "\f02c"; }
.glyphicon-tag::before         { content: "\f02b"; }
.glyphicon-arrow-left::before  { content: "\f060"; }
.glyphicon-arrow-right::before { content: "\f061"; }
.glyphicon-arrow-up::before    { content: "\f062"; }
.glyphicon-arrow-down::before  { content: "\f063"; }
.glyphicon-chevron-left::before { content: "\f053"; }
.glyphicon-chevron-right::before{ content: "\f054"; }
.glyphicon-chevron-up::before  { content: "\f077"; }
.glyphicon-chevron-down::before{ content: "\f078"; }
.glyphicon-sort::before        { content: "\f0dc"; }
.glyphicon-sort-by-alphabet::before { content: "\f15d"; }
.glyphicon-tasks::before       { content: "\f0ae"; }
.glyphicon-check::before       { content: "\f046"; }
.glyphicon-unchecked::before   { content: "\f096"; }
.glyphicon-share::before       { content: "\f064"; }
.glyphicon-export::before      { content: "\f14d"; }
.glyphicon-import::before      { content: "\f090"; }
.glyphicon-duplicate::before   { content: "\f0c5"; }
.glyphicon-copy::before        { content: "\f0c5"; }
.glyphicon-ban-circle::before  { content: "\f05e"; }
.glyphicon-exclamation-sign::before { content: "\f06a"; }
.glyphicon-question-sign::before    { content: "\f059"; }
.glyphicon-stats::before       { content: "\f080"; }
.glyphicon-signal::before      { content: "\f012"; }
.glyphicon-dashboard::before   { content: "\f0e4"; }
.glyphicon-record::before      { content: "\f111"; }
.glyphicon-picture::before     { content: "\f03e"; }
.glyphicon-camera::before      { content: "\f030"; }
.glyphicon-log-in::before      { content: "\f090"; }
.glyphicon-log-out::before     { content: "\f08b"; }
.glyphicon-move::before        { content: "\f047"; }
.glyphicon-resize-full::before { content: "\f0b2"; }
.glyphicon-resize-small::before{ content: "\f066"; }
.glyphicon-expand::before      { content: "\f065"; }
.glyphicon-collapse-down::before{ content: "\f150"; }
.glyphicon-save::before        { content: "\f0c7"; }
.glyphicon-floppy-disk::before { content: "\f0c7"; }
.glyphicon-open::before        { content: "\f115"; }
.glyphicon-new-window::before  { content: "\f08e"; }
.glyphicon-road::before        { content: "\f018"; }
.glyphicon-shopping-cart::before{ content: "\f07a"; }
.glyphicon-credit-card::before { content: "\f09d"; }
.glyphicon-barcode::before     { content: "\f02a"; }
.glyphicon-qrcode::before      { content: "\f029"; }
.glyphicon-earphone::before    { content: "\f095"; }
.glyphicon-education::before   { content: "\f19d"; }
.glyphicon-modal-window::before{ content: "\f2d2"; }
.glyphicon-globe::before       { content: "\f0ac"; }
.glyphicon-cloud::before       { content: "\f0c2"; }
.glyphicon-flash::before       { content: "\f0e7"; }
.glyphicon-wrench::before      { content: "\f0ad"; }
.glyphicon-briefcase::before   { content: "\f0b1"; }
.glyphicon-bell::before        { content: "\f0f3"; }
.glyphicon-flag::before        { content: "\f024"; }
.glyphicon-scissors::before    { content: "\f0c4"; }
.glyphicon-transfer::before    { content: "\f362"; }
.glyphicon-certificate::before { content: "\f0a3"; }
.glyphicon-text-width::before  { content: "\f035"; }
.glyphicon-text-height::before { content: "\f034"; }
.glyphicon-zoom-in::before     { content: "\f00e"; }
.glyphicon-zoom-out::before    { content: "\f010"; }


/* ============================================================
   21. BOOTSTRAP-SWITCH COMPATIBILITY
   ============================================================ */

.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid var(--color-border-default);
  position: relative;
  overflow: hidden;
  width: 60px !important;
  height: 24px;
  background: var(--color-bg-elevated);
}
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }

.bootstrap-switch.bootstrap-switch-on  { border-color: var(--color-status-success-border); }
.bootstrap-switch.bootstrap-switch-off { border-color: var(--color-border-default); }


/* ============================================================
   22. MISC COMPONENTS
   ============================================================ */

/* Jumbotron */
.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  background-color: var(--color-bg-elevated);
  border-radius: 12px;
}

/* Thumbnail */
.thumbnail {
  display: block;
  padding: 4px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background-color: var(--color-bg-surface);
}

/* Media object */
.media { display: flex; align-items: flex-start; gap: 12px; }
.media-body { flex: 1; }
.media-heading { font-size: 14px; font-weight: 600; margin: 0 0 6px; }

/* Center block */
.center-block { display: block; margin-left: auto; margin-right: auto; }

/* Spacer */
.spacer { height: 20px; }
.spacer-sm { height: 10px; }
.spacer-lg { height: 40px; }

/* Input search fix */
input[type="search"] { -webkit-appearance: none; box-sizing: border-box; }

/* Select full width inside input-group */
.input-group select.form-control { flex: 1 1 auto; }

/* Fix for Angular ngModel with form-control */
[formcontrol].form-control,
[formcontrolname].form-control,
[ngmodel].form-control { width: 100%; }