/**
 * ATA Online Accreditation — Modern Table Styles
 * ================================================
 * Global stylesheet for all DataTables across the platform.
 * Included via head.php so every page inherits these styles.
 *
 * DESIGN GOALS:
 *   - Clean, modern appearance with subtle depth
 *   - High readability (senior-friendly: 16 px body, 14 px header)
 *   - NO horizontal scrolling — columns wrap & flex naturally
 *   - Consistent status pill colors across all pages
 *   - Professional export buttons
 *   - Responsive and accessible (WCAG 2.1 AA)
 *
 * v3.0 (2026-05-01) — Senior-friendly upsizing:
 *   - Body cells   16 px / 1.65 line-height
 *   - Header cells 14 px / 600 / uppercase
 *   - Status pills 14 px / no truncation under 280 px label
 *   - Action btns  40×40 hit area
 *
 * TO CUSTOMIZE:
 *   - Header color:  Search for "--ata-header"
 *   - Status colors: Search for ".status-pill"
 *   - Font sizes:    Search for "font-size"
 */

/* ── Scoped CSS Variables ──────────────────────────────────
   These consume canonical tokens from ata-tokens.css.
   DO NOT redefine --ata-accent here — ata-brand.css owns that
   token (gold) and a local override silently poisons every
   page loaded after this file.
   ─────────────────────────────────────────────────────────── */
:root {
    --ata-header-bg:       var(--ata-gold-light);  /* v6: ivory/gold-tint header (was charcoal --ata-navy) */
    --ata-header-text:     var(--ata-gold-deep);   /* v6: deep gold-brown text on gold tint (was white) */
    --ata-header-border:   var(--ata-gold);        /* v6: gold divider under the header row */
    --ata-row-hover:       #faf6ea;                /* v6: warm gold-tinted row hover (was cool #f0f4fa) */
    --ata-row-alt:         var(--ata-subtle);
    --ata-text-primary:    var(--ata-ink);
    --ata-text-secondary:  var(--ata-muted);
    --ata-radius:          var(--ata-radius-md);
}

/* ── Page Titles / Breadcrumbs ─────────────────────────── */
.row.page-titles {
    padding: 0.75rem 0 1rem;
}
.row.page-titles h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ata-text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.row.page-titles .breadcrumb {
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* ── Card Wrapper ──────────────────────────────────────── */
.card.shadow-sm.border-0,
.card.ata-table-card {
    border-radius: var(--ata-radius);
    border: 1px solid var(--ata-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    overflow: hidden;
}

/* ── Table Base ────────────────────────────────────────── */
.table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
    table-layout: auto;
}

.table td,
.table th {
    font-size: var(--ata-fs-body) !important;  /* 16 px senior baseline */
    padding: 16px 16px !important;
    vertical-align: middle;
    border-color: var(--ata-border);
    color: var(--ata-text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: var(--ata-lh-body);
}

/* ── Table Header ──────────────────────────────────────── */
.table thead tr.bg-primary th,
.table thead th,
.datatable thead th,
table.dataTable thead th {
    background: var(--ata-header-bg) !important;
    color: var(--ata-header-text) !important;
    font-size: var(--ata-fs-small) !important;  /* 15 px header text */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 16px 16px !important;
    border-bottom: 2px solid var(--ata-header-border) !important;
    white-space: normal;
    position: relative;
    line-height: 1.35;
}

/* First and last header cells get rounded corners */
.table thead th:first-child,
table.dataTable thead th:first-child {
    border-top-left-radius: 8px;
}
.table thead th:last-child,
table.dataTable thead th:last-child {
    border-top-right-radius: 8px;
}

/* ── DataTables sorting icons — make them white ───────── */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    opacity: 0.5;
}
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
}

/* ── Table Body ────────────────────────────────────────── */
.table tbody tr {
    transition: background 0.15s ease;
}
.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--ata-row-hover) !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(even) {
    background-color: var(--ata-row-alt);
}
.table tbody tr:nth-of-type(even):hover {
    background-color: var(--ata-row-hover) !important;
}

/* Row borders */
.table td {
    border-bottom: 1px solid var(--ata-border);
}

/* ── Action Column Centering ──────────────────────────── */
.col-action {
    text-align: center;
    white-space: nowrap;
    width: 1%;
    min-width: 92px;
}

/* ── Status Pills ─────────────────────────────────────── */
.status-pill {
    font-size: var(--ata-fs-small); /* 15 px — readable for all ages */
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-block;
    letter-spacing: 0.02em;
    line-height: 1.4;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-filling {
    background: #fef3c7;
    color: #92400e;
}
.status-submitted {
    background: #dbeafe;
    color: #1e40af;
}
.status-returned {
    background: #fee2e2;
    color: #991b1b;
}
.status-denied {
    background: var(--ata-danger-bg, #fee2e2);
    color: var(--ata-danger-text, #991b1b);
}
.status-approved {
    background: #d1fae5;
    color: #065f46;
}
.status-review {
    background: #f1f5f9;
    color: #475569;
}
.status-inprogress {
    background: #e0e7ff;
    color: #3730a3;
}
.status-sent-vet {
    background: #e0e7ff;
    color: #3730a3;
}
.status-fully-submitted {
    background: #bfdbfe;
    color: #1e40af;
}
.status-candidacy {
    background: #ede9fe;
    color: #5b21b6;
}
.status-vet-review {
    background: #fce7f3;
    color: #9d174d;
}
.status-vet-feedback {
    background: #ccfbf1;
    color: #065f46;
}

/* ── Action Buttons ──────────────────────────────────────
   v3: every action icon button is 40×40 — large enough to tap
   on a tablet, large enough to see for senior reviewers, and
   wide enough to fit "View / Edit / Delete / Remarks" titles. */
.table .btn-outline-primary,
.table .btn-outline-danger,
.table .btn-outline-success,
.table .btn-outline-info,
.table .btn-outline-secondary,
.table .btn-outline-warning {
    align-items: center;
    border-radius: var(--ata-radius-sm);
    display: inline-flex;
    font-size: var(--ata-fs-body);
    height: var(--ata-control-icon-btn);
    justify-content: center;
    min-width: var(--ata-control-icon-btn);
    padding: 6px 12px;
    transition: background-color var(--ata-transition-fast), color var(--ata-transition-fast), border-color var(--ata-transition-fast);
    cursor: pointer;
}
.table .btn-outline-primary:hover {
    background: var(--ata-navy);
    border-color: var(--ata-navy);
    color: var(--ata-surface);
}
.table .btn-outline-danger:hover {
    background: var(--ata-danger-text);
    border-color: var(--ata-danger-text);
    color: var(--ata-surface);
}
.table .btn-outline-success:hover {
    background: var(--ata-success-text);
    border-color: var(--ata-success-text);
    color: var(--ata-surface);
}
.table .btn-outline-info:hover {
    background: var(--ata-info-text);
    border-color: var(--ata-info-text);
    color: var(--ata-surface);
}

/* Action button groups — keep buttons inline, centered, with gap */
.action-btns {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

/* Secondary line inside a table cell (e.g. email under institution,
   designation under applicant). Muted, smaller, and wraps long unbroken
   strings like email addresses so the table never forces a horizontal
   scroll on narrow viewports. */
.ata-cell-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--ata-fs-small);
    color: var(--ata-muted);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}
a.ata-cell-sub {
    color: var(--ata-muted);
    text-decoration: none;
}
a.ata-cell-sub:hover,
a.ata-cell-sub:focus {
    color: var(--ata-primary);
    text-decoration: underline;
}

/* View / Edit icon buttons */
.table .btn-sm i.bx {
    font-size: 1.15rem;
}

/* ── DataTables Controls ───────────────────────────────── */
/* Search box */
.dataTables_filter {
    margin-bottom: 16px !important;
}
.dataTables_filter input {
    border: 1px solid var(--ata-border) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: var(--ata-fs-body) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    min-height: var(--ata-control-h);
    min-width: 260px;
}
.dataTables_filter input:focus {
    border-color: var(--ata-navy) !important;
    box-shadow: var(--ata-shadow-focus) !important;
}
.dataTables_filter label {
    font-size: var(--ata-fs-small);
    color: var(--ata-text-secondary);
    font-weight: 500;
}

/* Info text */
.dataTables_info {
    font-size: var(--ata-fs-small);
    color: var(--ata-text-secondary);
    padding-top: 14px !important;
}

/* Pagination */
.dataTables_paginate {
    padding-top: 14px !important;
}
.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: 9px 16px !important;
    margin: 0 2px !important;
    font-size: var(--ata-fs-small) !important;
    min-height: var(--ata-control-h-sm);
    border: 1px solid var(--ata-border) !important;
    color: var(--ata-text-secondary) !important;
    background: #fff !important;
    transition: all 0.15s;
}
.dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    color: var(--ata-text-primary) !important;
    border-color: #cbd5e1 !important;
}
.dataTables_paginate .paginate_button.current {
    background: var(--ata-navy) !important;
    color: var(--ata-surface) !important;
    border-color: var(--ata-navy) !important;
    font-weight: var(--ata-fw-semibold);
}
.dataTables_paginate .paginate_button.current:hover {
    background: var(--ata-navy-light) !important;
    border-color: var(--ata-navy-light) !important;
    color: var(--ata-surface) !important;
}
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Length selector */
.dataTables_length {
    font-size: var(--ata-fs-small);
    color: var(--ata-text-secondary);
    margin-bottom: 14px;
}
.dataTables_length select {
    border: 1px solid var(--ata-border);
    border-radius: 6px;
    min-height: var(--ata-control-h-sm);
    padding: 6px 12px;
    font-size: var(--ata-fs-small);
}

/* ── Export Buttons ────────────────────────────────────── */
.dt-buttons {
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dt-buttons .dt-button,
.dt-buttons .btn {
    background: #fff !important;
    color: var(--ata-text-primary) !important;
    border: 1px solid var(--ata-border) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: var(--ata-fs-small) !important;
    font-weight: 600;
    min-height: var(--ata-control-h-sm);
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover {
    background: var(--ata-subtle) !important;
    border-color: var(--ata-border) !important;
    color: var(--ata-text-primary) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ── Empty Table State ─────────────────────────────────── */
.dataTables_empty,
table.dataTable td.dataTables_empty {
    font-size: var(--ata-fs-body);
    color: var(--ata-text-secondary);
    padding: 56px 16px !important;
    text-align: center;
    font-style: italic;
}

/* ── Responsive — prevent horizontal scroll ───────────── */
.card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force table to use full width without overflow on desktop */
@media (min-width: 992px) {
    .table {
        table-layout: auto;
        width: 100% !important;
    }
    .table td,
    .table th {
        white-space: normal;
    }
}

@media (max-width: 991px) {
    .table td,
    .table th {
        font-size: var(--ata-fs-small) !important;
        padding: 12px 12px !important;
    }
    .status-pill {
        font-size: var(--ata-fs-xs);
        padding: 5px 12px;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 18px;
    }

    .table td,
    .table th {
        font-size: var(--ata-fs-small) !important;
        padding: 12px 10px !important;
    }
    .dt-buttons .dt-button,
    .dt-buttons .btn {
        padding: 8px 14px !important;
        font-size: var(--ata-fs-small) !important;
    }
    .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }

    .dataTables_filter,
    .dataTables_filter label,
    .dataTables_length,
    .dt-buttons {
        float: none !important;
        text-align: left !important;
        width: 100%;
    }

    .dataTables_filter label {
        display: grid;
        gap: 6px;
    }

    .dt-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dt-buttons .dt-button,
    .dt-buttons .btn {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 34px;
        width: 100%;
    }

    .dataTables_wrapper {
        max-width: 100%;
    }

    .dataTables_wrapper .table-responsive {
        border: 1px solid var(--ata-border);
        border-radius: var(--ata-radius-sm);
    }

    .col-action {
        min-width: 88px;
    }
}

/* ── Override old yellow bg-primary header ──────────────── */
.bg-primary td,
.bg-primary th,
tr.bg-primary td,
tr.bg-primary th {
    background: var(--ata-header-bg) !important;
    color: var(--ata-header-text) !important;
    font-size: var(--ata-fs-small) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 16px 16px !important;
    white-space: normal;
    line-height: 1.35;
}

/* ── Scrollbar Styling ─────────────────────────────────── */
.card-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.card-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}
.card-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.card-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--ata-muted);
}

/* ── Bootstrap 3→5 Compatibility ──────────────────────── */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ── Date column helper — compact dates ───────────────── */
.col-date {
    white-space: nowrap;
    font-size: var(--ata-fs-small) !important;
    color: var(--ata-text-secondary);
}

/* ── Dashboard button list (Member Institutional) ──────── */
.dash-btn-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-btn-list .btn {
    width: 100%;
    text-align: left;
    font-size: var(--ata-fs-small);
    padding: 12px 16px;
    min-height: var(--ata-control-h-sm);
    white-space: normal;
}
.dash-btn-list .btn i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════
   MODALS — Remarks, Comments, Feedback
   ══════════════════════════════════════════════════════ */
.modal-content {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card-hover);
    overflow: hidden;
}
.modal-header {
    background: var(--ata-navy);
    color: var(--ata-surface);
    border-bottom: none;
    padding: var(--ata-space-md) var(--ata-space-lg);
}
.modal-header .modal-title {
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-semibold);
    letter-spacing: 0;
}
.modal-header .close,
.modal-header .btn-close {
    color: var(--ata-surface);
    opacity: 0.8;
    filter: invert(1);
}
.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 1;
}
.modal-body {
    padding: var(--ata-space-lg);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    color: var(--ata-body);
}
.modal-footer {
    border-top: 1px solid var(--ata-border);
    padding: var(--ata-space-md) var(--ata-space-lg);
    gap: var(--ata-space-xs);
}
.modal-footer .btn {
    border-radius: var(--ata-radius-sm);
    padding: 11px 22px;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    min-height: var(--ata-control-h);
}
.modal-footer .btn-primary {
    background: var(--ata-gold);
    border-color: var(--ata-gold);
    color: var(--ata-on-gold);
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:focus {
    background: var(--ata-gold-bright);
    border-color: var(--ata-gold-bright);
    color: var(--ata-on-gold);
}
.modal-footer .btn-secondary {
    background: var(--ata-surface);
    border-color: var(--ata-navy);
    color: var(--ata-navy);
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn-secondary:focus {
    background: var(--ata-subtle);
    color: var(--ata-navy);
}

/* Remark list inside modals */
.modal-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ata-space-md) 0;
}
.modal-body ul li {
    padding: var(--ata-space-md) var(--ata-space-lg);
    background: var(--ata-subtle);
    border-radius: var(--ata-radius-sm);
    margin-bottom: var(--ata-space-sm);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    border-left: 4px solid var(--ata-navy);
}
.modal-body ul li strong {
    color: var(--ata-ink);
}
.modal-body hr {
    border-color: var(--ata-border);
    margin: var(--ata-space-md) 0;
}

/* Textarea in modals */
.modal-body textarea.form-control {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    padding: 10px 14px;
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    resize: vertical;
    min-height: 112px;
    transition: border-color var(--ata-transition-fast), box-shadow var(--ata-transition-fast);
}
.modal-body textarea.form-control:focus {
    border-color: var(--ata-navy);
    box-shadow: var(--ata-shadow-focus);
}
.modal-body textarea.form-control::placeholder {
    color: var(--ata-muted);
}

/* ══════════════════════════════════════════════════════
   FORM CONTROLS — Global Inputs, Textareas, Selects
   Final look is owned by ata-forms.css (which loads after
   this file). Kept here as safety for pages that don't
   render inside #app/#vueJsApp.
   ══════════════════════════════════════════════════════ */
.form-control {
    border-radius: var(--ata-radius-sm);
    border: 1px solid var(--ata-border);
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    font-size: var(--ata-fs-body);
    transition: border-color var(--ata-transition-fast), box-shadow var(--ata-transition-fast);
    color: var(--ata-body);
    min-height: var(--ata-control-h);
}
.form-control:focus {
    border-color: var(--ata-navy);
    box-shadow: var(--ata-shadow-focus);
}
.form-control::placeholder {
    color: var(--ata-muted);
    opacity: 0.78;
}
.form-label, label {
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    color: var(--ata-ink);
    margin-bottom: var(--ata-space-xs);
}
textarea.form-control {
    min-height: 112px;
    line-height: var(--ata-lh-body);
}
select.form-control,
.form-select {
    border-radius: var(--ata-radius-sm);
    border: 1px solid var(--ata-border);
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    font-size: var(--ata-fs-body);
    appearance: auto;
    min-height: var(--ata-control-h);
}
.form-control-plaintext {
    font-size: var(--ata-fs-body);
    color: var(--ata-body);
    padding: 10px 0;
}

/* Read-only form controls */
.form-control[readonly],
textarea[readonly] {
    background: var(--ata-subtle);
    border-color: var(--ata-border);
    color: var(--ata-body);
    cursor: default;
}

/* ══════════════════════════════════════════════════════
   BUTTONS — Global Polish
   Keep motion restrained. Design system §6.1 forbids
   decorative bouncing; ata-forms.css finalizes the look
   inside #app / #vueJsApp.
   ══════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--ata-radius-sm);
    font-weight: var(--ata-fw-semibold);
    font-size: var(--ata-fs-body);
    padding: 11px 22px;
    min-height: var(--ata-control-h);
    transition: background-color var(--ata-transition-fast), border-color var(--ata-transition-fast), color var(--ata-transition-fast), box-shadow var(--ata-transition-fast);
    cursor: pointer;
    letter-spacing: 0;
}
.btn-primary {
    background: var(--ata-gold);
    border-color: var(--ata-gold);
    color: var(--ata-on-gold);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--ata-gold-bright);
    border-color: var(--ata-gold-bright);
    color: var(--ata-on-gold);
    box-shadow: var(--ata-shadow-card);
}
.btn-danger {
    background: var(--ata-danger-text);
    border-color: var(--ata-danger-text);
    color: var(--ata-surface);
}
.btn-danger:hover,
.btn-danger:focus {
    background: #7f1414;   /* one shade darker than token danger-text */
    border-color: #7f1414;
    color: var(--ata-surface);
}
.btn-success {
    background: var(--ata-success-text);
    border-color: var(--ata-success-text);
    color: var(--ata-surface);
}
.btn-success:hover,
.btn-success:focus {
    background: #044e3a;   /* one shade darker than token success-text */
    border-color: #044e3a;
    color: var(--ata-surface);
}
.btn-info {
    background: var(--ata-info-text);
    border-color: var(--ata-info-text);
    color: var(--ata-surface);
}
.btn-info:hover,
.btn-info:focus {
    background: #163185;
    border-color: #163185;
    color: var(--ata-surface);
}
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}
.btn-sm {
    padding: 8px 16px;
    font-size: var(--ata-fs-small);
    border-radius: var(--ata-radius-sm);
    min-height: var(--ata-control-h-sm);
}
.btn i, .btn .bx, .btn .fa {
    margin-right: 6px;
}

/* ══════════════════════════════════════════════════════
   ACCORDION / TABS — Questionnaire, View Forms
   Nav-tab appearance inside #app is finalized by
   ata-forms.css (filled Navy active pill). Rules here
   cover pages that render tabs outside that scope.
   ══════════════════════════════════════════════════════ */
.accordion-item {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md) !important;
    margin-bottom: var(--ata-space-xs);
    overflow: hidden;
}
.accordion-button {
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    color: var(--ata-ink);
    padding: var(--ata-space-md) var(--ata-space-lg);
    background: var(--ata-surface);
    border-radius: var(--ata-radius-md) !important;
}
.accordion-button:not(.collapsed) {
    background: var(--ata-subtle);
    color: var(--ata-navy);
    box-shadow: none;
}
.accordion-button::after {
    transition: transform var(--ata-transition);
}
.accordion-button:focus {
    box-shadow: var(--ata-shadow-focus);
    border-color: var(--ata-navy);
}
.accordion-body {
    padding: var(--ata-space-lg);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    color: var(--ata-body);
}

/* Nav tabs (fallback for pages outside #app / #vueJsApp) */
.nav-tabs {
    border-bottom: 2px solid var(--ata-border);
    gap: var(--ata-space-xxs);
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ata-body);
    font-weight: var(--ata-fw-semibold);
    font-size: var(--ata-fs-body);
    padding: 12px 22px;
    min-height: 48px;
    border-radius: var(--ata-radius-sm) var(--ata-radius-sm) 0 0;
    transition: color var(--ata-transition-fast), background-color var(--ata-transition-fast), border-color var(--ata-transition-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--ata-navy);
    background: var(--ata-subtle);
    border-bottom-color: var(--ata-neutral-border);
}
.nav-tabs .nav-link.active {
    color: var(--ata-navy);
    font-weight: var(--ata-fw-bold);
    border-bottom-color: var(--ata-navy);
    background: var(--ata-surface);
}
.tab-content {
    padding: var(--ata-space-lg) 0;
}

/* ══════════════════════════════════════════════════════
   QUESTIONNAIRE & FORM SECTIONS
   ══════════════════════════════════════════════════════ */
/* Instruction/info alert boxes */
.alert {
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}
.alert-primary {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.alert-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0c4a6e;
}

/* Question labels in forms */
.mb-3 label b,
.mb-3 label strong,
.form-group label b,
.form-group label strong {
    font-size: var(--ata-fs-body);
    color: var(--ata-text-primary);
    line-height: var(--ata-lh-body);
}

/* Form section headers */
.form-section-title {
    font-size: var(--ata-fs-h3);
    font-weight: 700;
    color: var(--ata-text-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ata-border);
}

/* Percentage / progress indicator */
.progress {
    border-radius: var(--ata-radius-md);
    height: 10px;
    background: var(--ata-neutral-bg);
}
.progress-bar {
    border-radius: var(--ata-radius-md);
    background: var(--ata-navy);
}

/* Form card sections (for questionnaire groups) */
.ata-form-card {
    background: #fff;
    border: 1px solid var(--ata-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.ata-form-card h5,
.ata-form-card h6 {
    color: var(--ata-text-primary);
    font-weight: 600;
    margin-bottom: 16px;
}

/* Comment/remark cards */
.remark-card {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-left: 4px solid var(--ata-navy);
    border-radius: var(--ata-radius-sm);
    padding: var(--ata-space-sm) var(--ata-space-md);
    margin-bottom: var(--ata-space-xs);
}
.remark-card .remark-author {
    font-size: 0.82rem;
    color: var(--ata-text-secondary);
    margin-bottom: 4px;
}
.remark-card .remark-text {
    font-size: var(--ata-fs-body);
    color: var(--ata-text-primary);
    font-weight: 500;
}
.remark-card .remark-time {
    font-size: 0.78rem;
    color: var(--ata-text-secondary);
    margin-top: 6px;
}

/* Grouped comments (by question number) */
.border.rounded.p-2.mb-2 {
    border-color: var(--ata-border) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    background: var(--ata-row-alt);
}
.border.rounded.p-2.mb-2 .badge {
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════
   VIEW FORM — Read-Only Data Display
   ══════════════════════════════════════════════════════ */
/* Tables inside view forms */
.table-container,
.view-form-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ata-border);
    padding: 20px;
    margin-bottom: 16px;
}

/* Read-only span displaying as form-control in questionnaire views */
span.form-control {
    display: block;
    background: var(--ata-row-alt);
    border: 1px solid var(--ata-border);
    border-radius: 8px;
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    font-size: var(--ata-fs-body);
    min-height: var(--ata-control-h);
    color: var(--ata-text-primary);
    cursor: default;
}

/* Tables with background-color inline (override to use CSS) */
tr[style*="background-color: #f2f2f2"],
td[style*="background-color: #f2f2f2"],
div[style*="background-color: #f2f2f2"] {
    background-color: var(--ata-row-alt) !important;
}

/* ══════════════════════════════════════════════════════
   FILE UPLOAD INPUTS — v3
   ══════════════════════════════════════════════════════ */
input[type="file"].form-control {
    padding: 10px 14px;
    font-size: var(--ata-fs-body);
    min-height: var(--ata-control-h);
    cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
    background: var(--ata-navy);
    color: var(--ata-surface);
    border: none;
    border-radius: var(--ata-radius-sm);
    padding: 9px 16px;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    margin-right: var(--ata-space-md);
    cursor: pointer;
    transition: background var(--ata-transition-fast);
}
input[type="file"].form-control::file-selector-button:hover {
    background: var(--ata-navy-light);
}

/* ══════════════════════════════════════════════════════
   RADIO & CHECKBOX STYLING — v3 (22 px tap target)
   ══════════════════════════════════════════════════════ */
.form-check {
    padding-left: 2em;
    margin-bottom: 10px;
}
.form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0.18em;
    border: 1.5px solid var(--ata-border);
    transition: all 0.15s;
}
.form-check-input:checked {
    background-color: var(--ata-navy);
    border-color: var(--ata-navy);
}
.form-check-label {
    font-size: var(--ata-fs-body);
    color: var(--ata-text-primary);
    line-height: var(--ata-lh-body);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE FORM ADJUSTMENTS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .modal-body {
        padding: 16px;
    }
    .accordion-body {
        padding: 14px 16px;
    }
    .btn {
        font-size: 0.84rem;
        padding: 7px 14px;
    }
}

/* ══════════════════════════════════════════════════════
   QUESTIONNAIRE FORMS — Self Study Parts 1-5
   Styles dynamically-generated question forms without
   changing the PHP templates.
   ══════════════════════════════════════════════════════ */

/* Main question headings (h4 tags in questionnaire forms)
   Flat fill + navy accent bar. Final look is finalized by
   ata-forms.css inside #app; this is the fallback. */
form[id^="allAnswers"] h4,
form[role="form"] h4 {
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    color: var(--ata-ink);
    background: var(--ata-subtle);
    padding: var(--ata-space-md) var(--ata-space-lg);
    border: 1px solid var(--ata-border);
    border-left: 4px solid var(--ata-navy);
    border-radius: var(--ata-radius-sm);
    margin-top: var(--ata-space-lg);
    margin-bottom: var(--ata-space-md);
    line-height: var(--ata-lh-tight);
}

/* Sub-section headings (h5 in questionnaires) */
form[id^="allAnswers"] h5,
form[role="form"] h5.fw-bold {
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    color: var(--ata-ink);
    padding: var(--ata-space-sm) var(--ata-space-md);
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-left: 4px solid var(--ata-gold);
    border-radius: var(--ata-radius-sm);
    margin-bottom: var(--ata-space-md);
    margin-top: var(--ata-space-md);
}

/* Question labels in questionnaire forms */
form[id^="allAnswers"] label.fw-bold,
form[role="form"] label.fw-bold {
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    color: var(--ata-ink);
    display: block;
    margin-bottom: var(--ata-space-xs);
    line-height: var(--ata-lh-body);
    padding: 0;
    background: transparent;
    border-radius: 0;
    border-left: 0;
}

/* Remove excessive br tags visually */
form[id^="allAnswers"] br + br,
form[role="form"] label + br {
    display: none;
}

/* Textareas in questionnaire forms */
form[id^="allAnswers"] textarea.form-control,
form[role="form"] textarea.form-control {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    padding: 10px 14px;
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    min-height: 112px;
    margin-bottom: var(--ata-space-md);
    transition: border-color var(--ata-transition-fast), box-shadow var(--ata-transition-fast);
    resize: vertical;
}
form[id^="allAnswers"] textarea.form-control:focus,
form[role="form"] textarea.form-control:focus {
    border-color: var(--ata-navy);
    box-shadow: var(--ata-shadow-focus);
}

/* Question group spacing */
form[id^="allAnswers"] .col-md-12,
form[role="form"] .col-md-12 {
    margin-bottom: var(--ata-space-xxs);
}

/* Nested sub-question indentation */
form[id^="allAnswers"] .row .row {
    margin-left: var(--ata-space-sm);
    padding-left: var(--ata-space-sm);
    border-left: 2px solid var(--ata-border);
}

/* Save buttons in questionnaire forms */
form[id^="allAnswers"] .btn-primary,
form[role="form"] .btn-primary {
    padding: 11px 22px;
    font-size: var(--ata-fs-body);
    font-weight: var(--ata-fw-semibold);
    border-radius: var(--ata-radius-sm);
    margin-right: var(--ata-space-sm);
    margin-top: var(--ata-space-sm);
    min-height: var(--ata-control-h);
}

/* Summary section heading — gold accent instead of green */
form[id^="allAnswers"] h4.mt-3 {
    background: var(--ata-subtle);
    border-left-color: var(--ata-gold);
}

/* ══════════════════════════════════════════════════════
   APPLICATION FORMS — Associate Member, Fact Sheet
   ══════════════════════════════════════════════════════ */

/* Tab navigation in application forms */
.application-tabs .nav-pills .nav-link {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ata-text-secondary);
    transition: all 0.2s;
}
.application-tabs .nav-pills .nav-link.active {
    background: var(--ata-navy);
    color: var(--ata-surface);
}

.ssq-review-page .ssq-nav {
    display: grid;
    gap: var(--ata-space-xs);
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.ssq-review-page .ssq-nav--parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ssq-review-page .ssq-nav--sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssq-review-page .ssq-nav .nav-item,
.ssq-review-page .ssq-nav .nav-link {
    width: 100%;
}

.ssq-review-page .ssq-nav .nav-link {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 44px;
    text-align: center;
}

.ssq-agst-toggle {
    align-items: center;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    padding: 8px 10px;
}

.ssq-agst-toggle .form-check-input {
    margin-left: 0;
}

/* Instruction boxes in application forms */
.alert.border-0.shadow-sm {
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* Form group spacing in applications */
.mb-3 .form-control,
.mb-3 textarea.form-control,
.mb-3 select.form-control {
    margin-top: 4px;
}

/* View-only form displays */
.form-control-plaintext,
p.form-control-plaintext {
    background: var(--ata-row-alt);
    padding: var(--ata-control-pad-y) var(--ata-control-pad-x);
    border-radius: 8px;
    border: 1px solid var(--ata-border);
    font-size: var(--ata-fs-body);
    min-height: var(--ata-control-h);
    line-height: var(--ata-lh-body);
}

/* ══════════════════════════════════════════════════════
   INLINE STYLE OVERRIDES — Fix legacy inline styles
   ══════════════════════════════════════════════════════ */

/* Override hardcoded font-size:12px on buttons */
button[style*="font-size:12px"],
button[style*="font-size: 12px"],
.btn[style*="font-size:12px"] {
    font-size: 0.85rem !important;
}

/* Override hardcoded font-size:14px on table cells */
td[style*="font-size: 14px"],
th[style*="font-size: 14px"] {
    font-size: var(--ata-fs-body) !important;
}

/* Override x-small font sizes */
*[style*="font-size: x-small"] {
    font-size: 0.8rem !important;
}

/* Override hardcoded font-size:small on accordion */
.accordion-button[style*="font-size:small"] {
    font-size: var(--ata-fs-body) !important;
    color: var(--ata-navy) !important;
}

/* ══════════════════════════════════════════════════════
   ACTION COLUMN — Consistent icon centering
   ══════════════════════════════════════════════════════ */

/* Force vertical+horizontal centering for all action cells */
td.col-action,
th.col-action {
    vertical-align: middle !important;
    text-align: center !important;
}

/* Ensure action-btns container is always a centered flex row */
.col-action .action-btns,
td.col-action > .action-btns {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Icon buttons — v3: 40 px square, large hit area for senior reviewers */
.col-action .btn-sm,
.col-action a.btn-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--ata-control-icon-btn);
    height: var(--ata-control-icon-btn);
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
}

/* Icon size normalised — bx and fa same visual size */
.col-action .btn-sm i.bx,
.col-action .btn-sm i.fa,
.col-action a.btn-sm i.bx,
.col-action a.btn-sm i.fa {
    font-size: 1.25rem;
    margin: 0 !important;
    line-height: 1;
    display: block;
}