/* ==========================================================================
   AutoDrive — Class contract
   --------------------------------------------------------------------------
   Redefines the class names the existing 311 views already use, so a view that
   has not been individually migrated still renders in the new design.

   Every selector here exists because the markup in application/views uses it.
   Usage counts in comments come from a scan of the view tree and are the
   reason each block is worth writing. Do not add speculative selectors.
   ========================================================================== */

/* ==========================================================================
   1. Layout primitives
   ========================================================================== */

.container-fluid {                                    /* 7 uses */
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* Bootstrap 2's fluid grid, rebuilt on flexbox so it can wrap and stack.
   The original used percentage widths with negative margins and could not
   respond below 768px. */
.row-fluid,                                           /* 26 uses */
.row {                                                /* 25 uses */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-start;
}

.row-fluid::after, .row::after { content: none; }      /* kill BS2 clearfix */

.row-fluid > [class*="span"],
.row > [class*="span"] {
  flex: 1 1 auto;
  min-width: 0;                                        /* allow shrink */
  margin-left: 0;                                      /* BS2 used margins */
}

/* 12-column proportions, gap-aware. */
.span1  { flex-basis: calc(8.333%  - var(--sp-4)); }
.span2  { flex-basis: calc(16.666% - var(--sp-4)); }
.span3  { flex-basis: calc(25%     - var(--sp-4)); }
.span4  { flex-basis: calc(33.333% - var(--sp-4)); }
.span5  { flex-basis: calc(41.666% - var(--sp-4)); }
.span6  { flex-basis: calc(50%     - var(--sp-4)); }
.span7  { flex-basis: calc(58.333% - var(--sp-4)); }
.span8  { flex-basis: calc(66.666% - var(--sp-4)); }
.span9  { flex-basis: calc(75%     - var(--sp-4)); }
.span10 { flex-basis: calc(83.333% - var(--sp-4)); }
.span11 { flex-basis: calc(91.666% - var(--sp-4)); }
.span12 { flex-basis: 100%; }

@media (max-width: 900px) {
  .row-fluid > [class*="span"],
  .row > [class*="span"] { flex-basis: 100%; }
}

/* Section header row used above most list screens. */
.topicdiv  { float: none; }                            /* 28 uses */
.addNewDiv { float: none; }                            /* 26 uses */

/* ==========================================================================
   2. Buttons                                           347 .btn uses
   ========================================================================== */

.btn {
  --btn-bg:        var(--n-0);
  --btn-bg-hover:  var(--n-50);
  --btn-fg:        var(--text);
  --btn-border:    var(--border-strong);
  --btn-ring:      var(--focus-ring);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--btn-ring); }

.btn[disabled], .btn.disabled { pointer-events: none; opacity: .55; box-shadow: none; }

/* Variants. btn-success is the most common (110 uses) — it is the submit
   button throughout the application, so it reads as the primary action. */
.btn-primary {
  --btn-bg: var(--b-600); --btn-bg-hover: var(--b-700);
  --btn-fg: var(--text-inverse); --btn-border: var(--b-600);
}
.btn-success {
  --btn-bg: var(--b-600); --btn-bg-hover: var(--b-700);
  --btn-fg: var(--text-inverse); --btn-border: var(--b-600);
}
.btn-info {
  --btn-bg: var(--c-600); --btn-bg-hover: var(--c-700);
  --btn-fg: var(--text-inverse); --btn-border: var(--c-600);
}
.btn-warning {
  --btn-bg: var(--y-500); --btn-bg-hover: var(--y-600);
  --btn-fg: var(--n-900); --btn-border: var(--y-500);
}
.btn-danger {
  --btn-bg: var(--r-600); --btn-bg-hover: var(--r-700);
  --btn-fg: var(--text-inverse); --btn-border: var(--r-600);
  --btn-ring: var(--focus-ring-danger);
}
.btn-inverse {
  --btn-bg: var(--n-800); --btn-bg-hover: var(--n-900);
  --btn-fg: var(--text-inverse); --btn-border: var(--n-800);
}
.btn-link {
  --btn-bg: transparent; --btn-bg-hover: transparent;
  --btn-fg: var(--text-link); --btn-border: transparent;
  box-shadow: none;
}
.btn-link:hover { text-decoration: underline; }

/* Sizes */
.btn-mini  { min-height: 28px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.btn-small { min-height: 32px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn-large { min-height: 44px; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group > .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ==========================================================================
   3. Tables                                            230 .table uses
   ========================================================================== */

.table {
  width: 100%;
  margin-bottom: var(--sp-4);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-spacing: 0;
  overflow: hidden;                     /* clip rows to the rounded corners */
  font-size: var(--fs-sm);
}

.table > thead > tr > th,
.table > thead > tr > td {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tr > td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.table > tbody > tr:first-child > td { border-top: 0; }

.table-striped > tbody > tr:nth-child(odd) > td { background: var(--n-25); }

.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td { background: var(--surface-hover); }

.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th { border: 1px solid var(--border); }

.table-condensed > tbody > tr > td,
.table-condensed > thead > tr > th { padding: var(--sp-2) var(--sp-3); }

/* Detail-view label/value pattern — the single most common markup in the
   application (757 .tablefield + 232 .tabledata). Rendered as a definition
   grid rather than the old grey right-aligned cells. */
.tablefield {
  width: 1%;
  padding: var(--sp-3) var(--sp-4) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: left !important;
  white-space: nowrap;
  vertical-align: top;
}

.tabledata,
.tablefield + td {
  padding: var(--sp-3) var(--sp-4) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  vertical-align: top;
}

.tabledata .data { padding-top: 0; }

tr:first-child > .tablefield,
tr:first-child > .tabledata { border-top: 0 !important; }

/* Wide tables must scroll inside their own box, never the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   4. Forms
   ========================================================================== */

label { display: inline-block; margin-bottom: var(--sp-1); font-weight: var(--fw-medium); }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="date"],
input[type="search"], input[type="url"],
select, textarea, .form-control, .uneditable-input {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  padding: 5px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  color: var(--text);
  /* 13px on a pointer device. Controls at the 16px body-input size read as
     oversized on a dense admin screen and stretch every form vertically; the
     iOS zoom-on-focus that 16px avoids only applies to touch, so that size is
     restored at the touch breakpoint below. */
  font-size: var(--fs-sm);
  line-height: 1.35;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

textarea { min-height: 84px; padding: var(--sp-2) var(--sp-3); }

/* Touch: 16px, because anything smaller makes iOS zoom the page when a field
   is focused, and a taller target is easier to hit with a thumb. */
@media (max-width: 760px) {
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="date"],
  input[type="search"], input[type="url"],
  select, textarea, .form-control, .uneditable-input {
    min-height: 40px;
    font-size: var(--fs-md);
  }
}

input:hover, select:hover, textarea:hover { border-color: var(--n-400); }

input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

input[readonly], input[disabled], select[disabled], textarea[disabled],
.uneditable-input {
  background-color: var(--surface-sunken);
  color: var(--text-muted);
}

input[type="checkbox"], input[type="radio"] {
  /* 1rem is the browser default and measures 16px — under the 24px minimum
     target size. Enlarged rather than padded, so the box people aim at is the
     box they see. */
  width: 1.15rem; height: 1.15rem;
  min-height: 0;
  margin-right: var(--sp-2);
  accent-color: var(--b-600);
  vertical-align: -2px;
}

select {
  /* An empty or single-short-option select otherwise collapses to a stub a
     few pixels wide, which reads as a broken control rather than a chooser. */
  min-width: 9rem;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236c7889' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  appearance: none;
  -webkit-appearance: none;
}

select[multiple] { background-image: none; padding-right: var(--sp-3); }

::placeholder { color: var(--text-subtle); opacity: 1; }

/* Horizontal form scaffolding */
.control-group { margin-bottom: var(--sp-4); }
.control-label { display: block; margin-bottom: var(--sp-1); color: var(--text); font-weight: var(--fw-medium); }
.controls { position: relative; }
.help-block { display: block; margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-xs); }
.help-inline { margin-left: var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); }

.form-horizontal .control-group { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
.form-horizontal .control-label { flex: 0 0 180px; margin-bottom: 0; text-align: right; }
.form-horizontal .controls { flex: 1 1 320px; }

@media (max-width: 720px) {
  .form-horizontal .control-label { flex-basis: 100%; text-align: left; }
}

/* Input with a trailing button/addon — 81 .input-append uses, almost all of
   them date fields with a calendar button. */
.input-append, .input-prepend {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}

.input-append > input, .input-prepend > input,
.input-append > .uneditable-input {
  position: relative;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-append > .add-on, .input-append > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 32px;
  margin-left: -1px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-sunken);
  color: var(--text-muted);
  box-shadow: none;
}

.input-prepend > .add-on {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 0;
}
.input-prepend > input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.input-append > input:focus { z-index: 2; }

.div_datepicker, .div_datepickers { display: inline-flex; width: auto; }

/* Validation messages emitted by form_validation */
.err, .error, .drivingLicenseError, .examScheduleError {
  display: block;
  margin-top: var(--sp-1);
  color: var(--r-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

form { margin: 0; }

/* ==========================================================================
   5. Alerts                                            128 .alert uses
   ========================================================================== */

.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--y-100);
  border-left: 3px solid var(--y-500);
  border-radius: var(--radius-md);
  background: var(--y-50);
  color: var(--y-800);
  font-size: var(--fs-sm);
}

.alert-success { background: var(--g-50); border-color: var(--g-100); border-left-color: var(--g-500); color: var(--g-800); }
.alert-error,
.alert-danger  { background: var(--r-50); border-color: var(--r-100); border-left-color: var(--r-500); color: var(--r-800); }
.alert-info    { background: var(--c-50); border-color: var(--c-100); border-left-color: var(--c-500); color: var(--c-800); }

.alert a { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }

/* 179 .close uses — alert and modal dismiss buttons. */
.close {
  margin-left: auto;
  padding: 0 var(--sp-1);
  border: 0;
  background: none;
  color: currentColor;
  font-size: var(--fs-lg);
  line-height: 1;
  opacity: .5;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.close:hover { opacity: 1; }
.close:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ==========================================================================
   6. Modals                                            67 .modal uses
   ========================================================================== */

/* bootstrap.js 2.3.2 drives these: it toggles inline display and the .in
   class, and injects .modal-backdrop. The styling below works with that
   behaviour rather than replacing it — the JS is deliberately untouched. */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--z-modal);
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: 0;
  overflow: hidden auto;
  display: none;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  transform: translate(-50%, -50%) scale(.98);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.modal.fade { top: 50%; }
.modal.in   { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.modal-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}

.modal-header h3, .modal-header h4 { margin: 0; font-size: var(--fs-lg); }

.modal-body   { padding: var(--sp-5); }
.modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--n-950);
}
.modal-backdrop.fade { opacity: 0; transition: opacity var(--dur) var(--ease); }
.modal-backdrop.in, .modal-backdrop { opacity: .5; }

/* Full-height sheet on small screens — a centred dialog is unusable there. */
@media (max-width: 640px) {
  .modal {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translate(0, 100%);
  }
  .modal.in { transform: translate(0, 0); }
}

/* Views wrap their modal markup in this and script moves it to #modlecontent. */
.model-wraper { display: contents; }

/* Modal forms use the same field grid as student/edit, tightened for dialog width. */
.ad-modal-form .ad-form-grid {
  gap: var(--sp-4) var(--sp-5);
}

.ad-modal-form-extra {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* script.js toggles these with display:inline / none; keep the grid when shown. */
#partialPaymentdiv.ad-modal-form-extra:not([style*="none"]),
#addonPaymentdiv.ad-modal-form-extra:not([style*="none"]) {
  display: grid !important;
}

.ad-modal-form .ad-field-body > #adhoc_commissionable_course_list_div,
.ad-modal-form .ad-field-body > #adhoc_commissionable_course_list_div > select,
.ad-modal-form .ad-field-body > #adhoc_course_list_div,
.ad-modal-form .ad-field-body > #adhoc_course_list_div > select,
.ad-modal-form .ad-field-body > #courselist,
.ad-modal-form .ad-field-body > #courselist > select {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .ad-modal-form .ad-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Instructor-calendar add-schedule forms keep <tr class="…_tr"> wrappers for
   script.js (closest("tr") / siblings), but hide the table chrome so the
   ad-form-grid inside each row matches other modernized modals. */
.ad-modal-form .ad-schedule-rows {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

.ad-modal-form .ad-schedule-rows > tbody > tr > td,
.ad-modal-form .ad-schedule-rows > tr > td {
  padding: 0 0 var(--sp-4);
  border: 0;
  background: transparent;
  vertical-align: top;
}

.ad-modal-form .ad-schedule-rows > tbody > tr:last-child > td,
.ad-modal-form .ad-schedule-rows > tr:last-child > td {
  padding-bottom: 0;
}

.ad-modal-form .ad-schedule-rows .ad-field-body > div {
  width: 100%;
  min-width: 0;
}

.ad-modal-form .ad-schedule-rows .ad-field-body > div > select {
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   7. Navigation, dropdowns, tabs
   ========================================================================== */

.nav { margin: 0; padding: 0; list-style: none; }

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
}

.nav-tabs > li > a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.nav-tabs > li > a:hover { color: var(--text); border-bottom-color: var(--border-strong); text-decoration: none; }
.nav-tabs > li.active > a { color: var(--b-700); border-bottom-color: var(--b-600); }

.nav-header {
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-popover);
  display: none;
  min-width: 200px;
  margin-top: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.open > .dropdown-menu { display: block; }
.dropdown-menu.pull-right { left: auto; right: 0; }

.dropdown-menu > li > a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.dropdown-menu .divider { height: 1px; margin: var(--sp-1) 0; background: var(--border); }

.caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: var(--sp-1);
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  vertical-align: middle;
  opacity: .7;
}

/* ==========================================================================
   8. Badges, labels, pagination                        26 .label, 7 .badge
   ========================================================================== */

.badge, .label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.label { border-radius: var(--radius-sm); }

.badge-warning,  .label-warning   { background: var(--y-100); color: var(--y-800); }
.badge-success,  .label-success   { background: var(--g-100); color: var(--g-800); }
.badge-important,.label-important { background: var(--r-100); color: var(--r-800); }
.badge-info,     .label-info      { background: var(--c-100); color: var(--c-800); }
.badge-inverse,  .label-inverse   { background: var(--n-800); color: var(--text-inverse); }

.pagination {
  display: flex;
  margin: var(--sp-5) 0;
}
.pagination-centered { justify-content: center; }

.pagination a, .pagination strong, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  margin-right: var(--sp-1);
  padding-inline: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.pagination a:hover { background: var(--surface-hover); text-decoration: none; }
.pagination strong, .pagination .current {
  background: var(--b-600);
  border-color: var(--b-600);
  color: var(--text-inverse);
}

/* ==========================================================================
   9. Accordion                                         26 uses
   ========================================================================== */

.accordion { margin-bottom: var(--sp-4); }

.accordion-group {
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}

.accordion-heading > .accordion-toggle {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.accordion-heading > .accordion-toggle:hover { background: var(--surface-hover); text-decoration: none; }

.accordion-inner { padding: var(--sp-4); border-top: 1px solid var(--border); }

/* bootstrap.js collapse toggles .collapse / .in */
.collapse { display: none; }
.collapse.in { display: block; }

/* ==========================================================================
   10. Misc legacy helpers
   ========================================================================== */

.well {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.page-header {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.addNewRecord { margin: 0; text-align: right; }        /* 43 uses */

.priceTableHead {
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-sunken);
  font-weight: var(--fw-semibold);
}

.copyright { color: var(--text-subtle); font-size: var(--fs-xs); }

/* Seven views hard-code a light grey directly in a style attribute (#999 at
   2.85:1, #ccc at 1.6:1). An inline style can only be overridden by matching
   on the attribute itself. This is narrow and deliberate: it fixes the
   contrast without editing views that are otherwise untouched. */
[style*="color: #999"],
[style*="color:#999"],
[style*="color: #ccc"],
[style*="color:#ccc"] { color: var(--text-muted) !important; }

.text-info    { color: var(--c-700); }
.text-success { color: var(--g-700); }
.text-error   { color: var(--r-700); }
.text-warning { color: var(--y-700); }
.muted        { color: var(--text-muted); }

/* Dashboard figure tiles defined in the old custom.css */
.exp_dash_dev {
  display: flex;
  overflow: hidden;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}
.exp_dash_number {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  height: auto;
  background: var(--b-600);
  color: var(--text-inverse);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.exp_dash_description {
  display: flex; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   11. Icons
   --------------------------------------------------------------------------
   The views mix two systems: Font Awesome 4 (.fa) and Bootstrap 2's sprite
   (.icon-*). The sprite is a bitmap that cannot recolour or scale, so the 12
   .icon-* classes actually in use are remapped onto Font Awesome glyphs.
   ========================================================================== */

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: auto; height: auto;
  margin: 0;
  background-image: none;              /* kill the BS2 sprite */
  line-height: 1;
  font-style: normal;
}

[class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.icon-calendar::before   { content: "\f073"; }   /* 80 uses */
.icon-plus::before       { content: "\f067"; }   /* 76 uses */
.icon-edit::before       { content: "\f044"; }   /* 16 uses */
.icon-print::before      { content: "\f02f"; }
.icon-envelope::before   { content: "\f0e0"; }
.icon-ok::before         { content: "\f00c"; }
.icon-ban-circle::before { content: "\f05e"; }
.icon-user::before       { content: "\f007"; }
.icon-off::before        { content: "\f011"; }
.icon-minus::before      { content: "\f068"; }
.icon-fire::before       { content: "\f06d"; }
.icon-book::before       { content: "\f02d"; }
.icon-remove::before     { content: "\f00d"; }
.icon-search::before     { content: "\f002"; }
.icon-trash::before      { content: "\f1f8"; }

/* Row-action icons rendered by cms_helper — give them a real hit area.
   The anchor itself must be the target, not just the glyph inside it:
   a bare <a><i/></a> is only as tall as the line box, roughly 17px, which is
   below any reasonable touch target. */
td > a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

td > a > [class^="icon-"], td > a > .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

td > a:hover > [class^="icon-"], td > a:hover > .fa {
  background: var(--surface-sunken);
  color: var(--b-600);
}

td > a:hover > .icon-ban-circle, td > a:hover > .fa-ban { color: var(--r-600); }