/* ==========================================================================
   Heliosync SchoolOS — Table infrastructure
   --------------------------------------------------------------------------
   Standalone, build-free CSS for every `bootstrap-table` in the admin panel.

   WHY PLAIN CSS AND NOT TAILWIND
   The ~105 existing table views render on the LEGACY Bootstrap 4 layout,
   where Tailwind is not loaded. Emitting utility classes from
   app/Services/BootstrapTableService.php would leave those pages unstyled.
   Instead the service emits semantic `hs-*` classes, defined here once, so
   BOTH the legacy layout and the redesigned Tailwind layout get the same
   table styling with zero Bootstrap/Tailwind collision.

   TOKENS
   Every colour/radius/shadow is read from public/assets/css/heliosync-tokens.css
   (CSS custom properties). Each var() carries an inline literal fallback so
   this file is fully self-sufficient if the token sheet is missing or loads
   after this one.

   LOAD ORDER
   Must be linked AFTER style.min.css / custom.css / comman.css and after the
   bootstrap-table CSS, and after heliosync-tokens.css.

   SPECIFICITY POLICY
   Base rules are written as `a.hs-act, button.hs-act` (0,1,1) so they beat
   Bootstrap's `.btn` (0,1,0) on load order alone. `!important` appears in
   exactly two rule blocks (the legacy kebab panel padding and the active
   pagination pill), each commented with the !important rule it must defeat.

   SCOPING POLICY
   Chrome overrides are scoped to `.bootstrap-table`, `.fixed-table-container`
   or an opt-in `.hs-table-scope` wrapper. Nothing here can leak onto pages
   that do not render a bootstrap-table.
   ========================================================================== */


/* ==========================================================================
   1. Local token aliases
   Declared on :root so the fallbacks resolve even without the token sheet.
   Anything Agent 3 defines in heliosync-tokens.css wins, because that file
   is linked first and these only re-read the same variable names.
   ========================================================================== */

.hs-act,
.hs-act-menu,
.hs-badge,
.hs-table-empty,
.bootstrap-table,
.fixed-table-container,
.hs-table-scope {
    --hs-t-gold-400: var(--hs-gold-400, #D4AF37);
    --hs-t-gold-700: var(--hs-gold-700, #7A6015);
    --hs-t-ink-0:    var(--hs-ink-0,    #FFFFFF);
    --hs-t-ink-50:   var(--hs-ink-50,   #F8F9FA);
    --hs-t-ink-100:  var(--hs-ink-100,  #F1F3F5);
    --hs-t-ink-200:  var(--hs-ink-200,  #E5E8EB);
    --hs-t-ink-400:  var(--hs-ink-400,  #9BA3AD);
    --hs-t-ink-500:  var(--hs-ink-500,  #6B7480);
    --hs-t-ink-700:  var(--hs-ink-700,  #363D47);
    --hs-t-ink-900:  var(--hs-ink-900,  #14171C);
    --hs-t-success:  var(--hs-success,  #15803D);
    --hs-t-warning:  var(--hs-warning,  #B45309);
    --hs-t-danger:   var(--hs-danger,   #B91C1C);
    --hs-t-info:     var(--hs-info,     #0E7490);
    --hs-t-radius:   var(--hs-radius-md, 6px);
    --hs-t-shadow-sm: var(--hs-shadow-sm, 0 1px 2px rgba(20, 23, 28, .06));
    --hs-t-shadow-md: var(--hs-shadow-md, 0 6px 16px rgba(20, 23, 28, .12));
}


/* ==========================================================================
   2. .hs-act — the row action icon button
   Emitted by BootstrapTableService::button() and every named helper.
   Markup: <a href class="btn hs-act hs-act--edit edit-data" aria-label>
             <i class="fa fa-edit" aria-hidden="true"></i>
           </a>
   The `btn` class is retained only so the control still reads as a button if
   this stylesheet is ever missing; all of Bootstrap's `.btn` cosmetics are
   overridden below.
   ========================================================================== */

.hs-act,
a.hs-act,
button.hs-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    vertical-align: middle;

    border: 1px solid var(--hs-t-ink-200);
    border-radius: var(--hs-t-radius);
    background: var(--hs-t-ink-0);
    background-image: none;      /* kills any leftover .btn-gradient-* image */
    box-shadow: none;

    color: var(--hs-t-ink-500);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;

    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Star Admin's `.btn i` sets its own size/margins; normalise the glyph. */
.hs-act > i,
a.hs-act > i,
button.hs-act > i {
    font-size: 13px;
    line-height: 1;
    margin: 0;
    color: inherit;
}

.hs-act:hover,
a.hs-act:hover,
button.hs-act:hover {
    background-color: var(--hs-t-ink-50);
    border-color: var(--hs-t-ink-400);
    color: var(--hs-t-ink-700);
    text-decoration: none;
}

.hs-act:active,
a.hs-act:active,
button.hs-act:active {
    background-color: var(--hs-t-ink-100);
}

/* Keyboard ring. `outline` (not box-shadow) so it survives inside the
   overflow-hidden `.fixed-table-body` scroll container. */
.hs-act:focus-visible,
a.hs-act:focus-visible,
button.hs-act:focus-visible {
    outline: 2px solid var(--hs-t-gold-400);
    outline-offset: 2px;
    border-color: var(--hs-t-gold-400);
}

/* Mouse click must not leave a ring; Bootstrap 4 puts a blue glow on
   `.btn:focus` with `.btn:focus` (0,1,1 + pseudo) — matched here. */
.hs-act:focus:not(:focus-visible),
a.hs-act:focus:not(:focus-visible),
button.hs-act:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.hs-act[disabled],
.hs-act.disabled {
    opacity: .5;
    pointer-events: none;
}

/* --- Tone variants: restraint. Neutral at rest, tinted only on hover. ---- */

.hs-act--edit:hover,
a.hs-act--edit:hover      { color: var(--hs-t-gold-700); border-color: var(--hs-t-gold-400); background-color: #FDF8E7; }
.hs-act--success:hover,
a.hs-act--success:hover   { color: var(--hs-t-success); border-color: var(--hs-t-success); background-color: #F1F8F3; }
.hs-act--warning:hover,
a.hs-act--warning:hover   { color: var(--hs-t-warning); border-color: var(--hs-t-warning); background-color: #FDF6EC; }
.hs-act--danger:hover,
a.hs-act--danger:hover    { color: var(--hs-t-danger);  border-color: var(--hs-t-danger);  background-color: #FDF2F2; }
.hs-act--info:hover,
a.hs-act--info:hover      { color: var(--hs-t-info);    border-color: var(--hs-t-info);    background-color: #EFF8FA; }
.hs-act--neutral:hover,
a.hs-act--neutral:hover   { color: var(--hs-t-ink-900); border-color: var(--hs-t-ink-400); background-color: var(--hs-t-ink-50); }

/* Tone-matched focus ring keeps the destructive intent visible for keyboard users. */
.hs-act--danger:focus-visible  { outline-color: var(--hs-t-danger);  border-color: var(--hs-t-danger); }
.hs-act--success:focus-visible { outline-color: var(--hs-t-success); border-color: var(--hs-t-success); }


/* ==========================================================================
   3. .hs-act-menu — one primary action + a "…" overflow menu
   Emitted by BootstrapTableService::actionMenu() and (wrapper only) by
   the legacy menuItem(). Positioning/toggling is Bootstrap 4's `.dropdown`;
   public/assets/js/heliosync-tables.js only takes over when no Bootstrap
   dropdown plugin is present.
   ========================================================================== */

.hs-act-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hs-act-menu--single { gap: 0; }

.hs-act-menu__toggle {
    font-size: 14px;
}

.hs-act-menu__toggle[aria-expanded="true"] {
    background-color: var(--hs-t-ink-100);
    border-color: var(--hs-t-ink-400);
    color: var(--hs-t-ink-900);
}

/* Bootstrap's `.dropdown-toggle::after` caret — the glyph is the caret here. */
.hs-act-menu__toggle::after { display: none; }

.hs-act-menu__panel {
    min-width: 180px;
    padding: 4px;
    margin: 4px 0 0;
    border: 1px solid var(--hs-t-ink-200);
    border-radius: var(--hs-t-radius);
    background: var(--hs-t-ink-0);
    box-shadow: var(--hs-t-shadow-md);
    z-index: 1021; /* above .fixed-table-header (bootstrap-table uses 1020) */
}

/* comman.css sets `.action-column-dropdown-menu { padding: 0 !important }` and
   custom.css sets `left: -2rem !important`. Both are !important, so the panel
   padding here must be too — otherwise legacy kebab menus keep 0 padding and
   the items touch the panel edge. */
.hs-act-menu__panel.action-column-dropdown-menu {
    padding: 4px !important;
}

.hs-act-menu__item,
a.hs-act-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: calc(var(--hs-t-radius) - 2px);
    color: var(--hs-t-ink-700);
    font-size: 13px;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.hs-act-menu__item:hover,
.hs-act-menu__item:focus,
a.hs-act-menu__item:hover,
a.hs-act-menu__item:focus {
    background-color: var(--hs-t-ink-50);
    color: var(--hs-t-ink-900);
    text-decoration: none;
}

.hs-act-menu__item:focus-visible {
    outline: 2px solid var(--hs-t-gold-400);
    outline-offset: -2px;
}

.hs-act-menu__icon {
    flex: 0 0 auto;
    width: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--hs-t-ink-400);
}

.hs-act-menu__item--danger,
a.hs-act-menu__item--danger                { color: var(--hs-t-danger); }
.hs-act-menu__item--danger .hs-act-menu__icon { color: var(--hs-t-danger); }
.hs-act-menu__item--danger:hover,
.hs-act-menu__item--danger:focus,
a.hs-act-menu__item--danger:hover,
a.hs-act-menu__item--danger:focus          { background-color: #FDF2F2; color: var(--hs-t-danger); }

.hs-act-menu__item--success, a.hs-act-menu__item--success { color: var(--hs-t-success); }
.hs-act-menu__item--warning, a.hs-act-menu__item--warning { color: var(--hs-t-warning); }
.hs-act-menu__item--info,    a.hs-act-menu__item--info    { color: var(--hs-t-info); }

/* Divider a caller may drop between item groups. */
.hs-act-menu__divider {
    height: 1px;
    margin: 4px 2px;
    background: var(--hs-t-ink-200);
}

/* Fallback JS open-state (used only when no Bootstrap dropdown plugin exists). */
.hs-act-menu__panel.hs-is-open {
    display: block;
}


/* ==========================================================================
   4. .hs-badge — status pill (BootstrapTableService::statusBadge)
   ========================================================================== */

.hs-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.hs-badge--success { background: #F1F8F3; border-color: #CBE6D5; color: var(--hs-t-success); }
.hs-badge--warning { background: #FDF6EC; border-color: #F0DEC0; color: var(--hs-t-warning); }
.hs-badge--danger  { background: #FDF2F2; border-color: #F2CFCF; color: var(--hs-t-danger); }
.hs-badge--info    { background: #EFF8FA; border-color: #C9E4EA; color: var(--hs-t-info); }
.hs-badge--edit    { background: #FDF8E7; border-color: #EBDCA6; color: var(--hs-t-gold-700); }
.hs-badge--neutral { background: var(--hs-t-ink-100); border-color: var(--hs-t-ink-200); color: var(--hs-t-ink-700); }

/* The legacy formatter (public/assets/js/custom/bootstrap-table/formatter.js)
   emits Bootstrap 4 `.badge.badge-*` pills. Restyle them in place, scoped to
   table bodies only, so existing views match without touching that file. */
.fixed-table-container .badge,
.hs-table-scope .badge {
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-image: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.fixed-table-container .badge-success, .hs-table-scope .badge-success { background-color: #F1F8F3; border-color: #CBE6D5; color: var(--hs-t-success); }
.fixed-table-container .badge-danger,  .hs-table-scope .badge-danger  { background-color: #FDF2F2; border-color: #F2CFCF; color: var(--hs-t-danger); }
.fixed-table-container .badge-warning, .hs-table-scope .badge-warning { background-color: #FDF6EC; border-color: #F0DEC0; color: var(--hs-t-warning); }
.fixed-table-container .badge-info,    .hs-table-scope .badge-info    { background-color: #EFF8FA; border-color: #C9E4EA; color: var(--hs-t-info); }
.fixed-table-container .badge-primary, .hs-table-scope .badge-primary { background-color: #FDF8E7; border-color: #EBDCA6; color: var(--hs-t-gold-700); }
.fixed-table-container .badge-secondary, .hs-table-scope .badge-secondary { background-color: var(--hs-t-ink-100); border-color: var(--hs-t-ink-200); color: var(--hs-t-ink-700); }


/* ==========================================================================
   5. bootstrap-table chrome
   Restrained overrides only — no structural changes, so all 105 views keep
   working exactly as they do now. Everything is scoped under
   `.bootstrap-table` / `.fixed-table-container` / `.hs-table-scope`.
   ========================================================================== */

/* --- Header row ---------------------------------------------------------- */
.bootstrap-table .fixed-table-container thead th,
.hs-table-scope thead th {
    padding: 10px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--hs-t-ink-200);
    background-color: var(--hs-t-ink-100);
    color: var(--hs-t-ink-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* bootstrap-table wraps header labels in `.th-inner`; Star Admin gives it its
   own font-size, hence the explicit reset. */
.bootstrap-table .fixed-table-container thead th .th-inner,
.hs-table-scope thead th .th-inner {
    padding: 0;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.bootstrap-table .fixed-table-container thead th .sortable:hover,
.hs-table-scope thead th .sortable:hover {
    color: var(--hs-t-ink-900);
}

/* --- Body rows ----------------------------------------------------------- */
.bootstrap-table .fixed-table-container tbody td,
.hs-table-scope tbody td {
    padding: 12px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--hs-t-ink-200);
    color: var(--hs-t-ink-700);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.bootstrap-table .fixed-table-container tbody tr:last-child td,
.hs-table-scope tbody tr:last-child td {
    border-bottom: 0;
}

/* Star Admin ships `.table-hover tbody tr:hover` with its own background;
   this selector is more specific (0,3,1) so no !important is needed. */
.bootstrap-table .fixed-table-container tbody tr:hover > td,
.hs-table-scope tbody tr:hover > td {
    background-color: var(--hs-t-ink-50);
}

.bootstrap-table .fixed-table-container tbody tr.selected > td,
.hs-table-scope tbody tr.selected > td {
    background-color: #FDF8E7;
}

.bootstrap-table .fixed-table-container .table > :not(:first-child) {
    border-top: 0;
}

/* Action column: keep the icons on one line and centred. */
.bootstrap-table .fixed-table-container tbody td .hs-act,
.hs-table-scope tbody td .hs-act {
    vertical-align: middle;
}

/* --- Toolbar, search, page-size selector --------------------------------- */
.bootstrap-table .fixed-table-toolbar,
.hs-table-scope .fixed-table-toolbar {
    padding: 0 0 12px;
}

.bootstrap-table .fixed-table-toolbar .search input,
.bootstrap-table .fixed-table-toolbar .search .form-control,
.bootstrap-table .fixed-table-pagination .page-list .btn,
.bootstrap-table .fixed-table-toolbar .columns .btn,
.hs-table-scope .fixed-table-toolbar .search input {
    height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--hs-t-ink-200);
    border-radius: var(--hs-t-radius);
    background-color: var(--hs-t-ink-0);
    background-image: none;
    box-shadow: none;
    color: var(--hs-t-ink-700);
    font-size: 13px;
    line-height: 1.4;
}

.bootstrap-table .fixed-table-toolbar .search input::placeholder {
    color: var(--hs-t-ink-400);
}

.bootstrap-table .fixed-table-toolbar .search input:focus,
.bootstrap-table .fixed-table-toolbar .columns .btn:focus-visible,
.bootstrap-table .fixed-table-pagination .page-list .btn:focus-visible {
    outline: 2px solid var(--hs-t-gold-400);
    outline-offset: 1px;
    border-color: var(--hs-t-gold-400);
    box-shadow: none;
}

.bootstrap-table .fixed-table-toolbar .columns .btn,
.bootstrap-table .fixed-table-pagination .page-list .btn {
    color: var(--hs-t-ink-700);
}

.bootstrap-table .fixed-table-toolbar .columns .btn:hover,
.bootstrap-table .fixed-table-pagination .page-list .btn:hover {
    background-color: var(--hs-t-ink-50);
    border-color: var(--hs-t-ink-400);
}

/* --- Pagination ---------------------------------------------------------- */
.bootstrap-table .fixed-table-pagination,
.hs-table-scope .fixed-table-pagination {
    padding-top: 12px;
    color: var(--hs-t-ink-500);
    font-size: 13px;
}

.bootstrap-table .fixed-table-pagination .pagination-detail {
    color: var(--hs-t-ink-500);
}

.bootstrap-table .fixed-table-pagination .pagination .page-link {
    min-width: 32px;
    height: 32px;
    margin: 0 2px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hs-t-ink-200);
    border-radius: var(--hs-t-radius);
    background-color: var(--hs-t-ink-0);
    background-image: none;
    color: var(--hs-t-ink-700);
    font-size: 13px;
    line-height: 1;
    box-shadow: none;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link:hover {
    background-color: var(--hs-t-ink-50);
    border-color: var(--hs-t-ink-400);
    color: var(--hs-t-ink-900);
}

.bootstrap-table .fixed-table-pagination .pagination .page-link:focus-visible {
    outline: 2px solid var(--hs-t-gold-400);
    outline-offset: 2px;
    box-shadow: none;
}

/* Star Admin styles `.page-item.active .page-link` with a gradient background
   image at (0,3,0) plus `!important` on the background shorthand, so the gold
   active state has to be !important to land. */
.bootstrap-table .fixed-table-pagination .pagination .page-item.active .page-link {
    background: var(--hs-t-gold-400) !important;
    border-color: var(--hs-t-gold-400) !important;
    color: var(--hs-t-ink-900) !important;
    font-weight: 600;
}

.bootstrap-table .fixed-table-pagination .pagination .page-item.disabled .page-link {
    background-color: var(--hs-t-ink-50);
    border-color: var(--hs-t-ink-200);
    color: var(--hs-t-ink-400);
}

/* --- Loading / no-records ------------------------------------------------ */
.bootstrap-table .fixed-table-container .no-records-found td,
.hs-table-scope .no-records-found td {
    padding: 0;
    background-color: var(--hs-t-ink-0);
    color: var(--hs-t-ink-500);
    text-align: center;
}

.bootstrap-table .fixed-table-loading {
    background-color: rgba(255, 255, 255, .85);
    color: var(--hs-t-ink-500);
    font-size: 13px;
}


/* ==========================================================================
   6. .hs-table-empty — empty state block (BootstrapTableService::emptyState)
   Drops straight into the `no-records-found` cell or any card body.
   ========================================================================== */

.hs-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 20px;
    color: var(--hs-t-ink-500);
    text-align: center;
}

.hs-table-empty__icon {
    font-size: 28px;
    color: var(--hs-t-ink-400);
    margin-bottom: 2px;
}

.hs-table-empty__title {
    margin: 0;
    color: var(--hs-t-ink-700);
    font-size: 15px;
    font-weight: 600;
}

.hs-table-empty__text {
    margin: 0;
    max-width: 420px;
    color: var(--hs-t-ink-500);
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================================
   7. RTL
   The layout sets dir="rtl" on <html> for RTL languages. Logical properties
   cover most of it; these are the physical leftovers.
   ========================================================================== */

[dir="rtl"] .hs-act-menu__item {
    text-align: right;
}

[dir="rtl"] .hs-act-menu__panel {
    left: auto;
    right: 0;
}


/* ==========================================================================
   8. Motion & density
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hs-act,
    a.hs-act,
    button.hs-act,
    .hs-act-menu__item,
    a.hs-act-menu__item {
        transition: none;
    }
}

/* Small screens: bootstrap-table switches to its card view; loosen the
   fixed action-button sizing so rows do not overflow. */
@media (max-width: 575.98px) {
    .bootstrap-table .fixed-table-container tbody td,
    .hs-table-scope tbody td {
        padding: 10px 12px;
    }
    .bootstrap-table .fixed-table-container thead th,
    .hs-table-scope thead th {
        padding: 9px 12px;
    }
}

/* Forced-colours / Windows high contrast: keep the affordance visible. */
@media (forced-colors: active) {
    .hs-act,
    a.hs-act,
    button.hs-act {
        border-color: ButtonBorder;
        color: ButtonText;
    }
}