/* =====================================================================
   Shared classes extracted from inline style="..." attributes.

   Registered in BOTH root layouts (web/layouts/app.blade.php and
   admin/layouts/master.blade.php), after every base sheet and before
   @stack('style'), so:
     - it beats main.css / style.css / custom.css / arabic.css and the
       admin style.css / rtl_style.css, which is what the inline styles
       used to do;
     - a page's own @push('style') sheet still beats it.

   Only genuinely cross-cutting rules belong here. Anything used by a
   single view lives in public/assets/web/css/views/.
   ===================================================================== */

/* ---- Brand-coloured inline icons -----------------------------------
   17 occurrences of style="color: var(--t-brand)" on decorative <i>
   glyphs in the header, home page, marketplace filters and breadcrumbs.
   Nothing in the loaded sheets sets `color` directly on those <i>
   elements, so a single class at (0,1,0) is enough. */
.icon-brand {
    color: var(--t-brand);
}

/* ---- Section eyebrow label modifiers -------------------------------
   .tn-label itself lives in traincu-home.css, which loads from
   @stack('style-lib') — i.e. before this file — so these win on order. */
.tn-label--center {
    justify-content: center;
}

.tn-label--accent {
    /* was var(--tn-orange-lt), itself an alias of --t-brand-tint */
    color: var(--t-brand-tint);
}

/* ---- Site header ---------------------------------------------------- */
.header-caret {
    font-size: var(--t-fs-xs);
}

/* ---- Site footer ---------------------------------------------------- */
.footer-lead {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--t-fs-sm);
    line-height: var(--t-lh-body);
}

.footer-cta-group {
    display: flex;
    gap: var(--t-2);
    flex-wrap: wrap;
}

.footer-copyright-link {
    color: rgba(255, 255, 255, 0.65);
    font-weight: var(--t-fw-semi);
    text-decoration: none;
    /* logical, so it mirrors under dir="rtl" without a patch */
    margin-inline: var(--t-1);
}

/* ---- Download-app section ------------------------------------------
   traincu-home.css has `.download-section .left p { color: ... !important }`
   at (0,1,2). The declaration this replaces was an inline !important, so
   the !important has to stay AND the selector has to outrank (0,1,2).
   See the report: this is the one place !important was carried over. */
.download-section .left p.download-app-lead {
    color: #fff !important;
    font-weight: var(--t-fw-medium);
}

/* ---- Shared form components ----------------------------------------- */

/* <x-errors /> list items */
.form-error-item {
    list-style: circle;
}

/* form column that positions an absolutely placed child */
.form-field-anchor {
    position: relative;
}

.account-verification-title {
    font-weight: var(--t-fw-semi);
}

/* ---- Admin: DataTables ---------------------------------------------
   DataTables needs an explicit width on the table it initialises. */
.datatable-full-width {
    width: 100%;
}

/* ---- Admin: pagination card footer ---------------------------------
   The base rule is `.card-footer.pagination-card-footer` at (0,2,0) in
   both admin/css/style.css and admin/css/rtl_style.css, so the modifier
   has to match that specificity to win on source order. Scoped to a
   modifier class rather than the bare class, because only one view
   wanted the border gone. */
.card-footer.pagination-card-footer--flush {
    border-top: none;
}