/*
 * SfButton — portable button family CSS, extracted from app.css for use
 * across portals (admin, applicant, student, etc.).
 *
 * Drop into any Blazor portal that references GlobalEdTech.Sis.WebApp.Shared
 * (which provides the SfButton razor components). Include via:
 *
 *     <link rel="stylesheet"
 *           href="_content/GlobalEdTech.Web.Shared/css/sf-tokens.css" />
 *     <link rel="stylesheet"
 *           href="_content/GlobalEdTech.Web.Shared/css/sf-buttons.css" />
 *
 * sf-tokens.css ships the design-token system (colors, focus rings,
 * shadow, button family colors / sizes, etc.). It must be loaded
 * alongside this file — every var() reference here resolves to a token
 * declared there. See sf-tokens.css for token catalog and rationale.
 *
 * See docs/ui/sf-button-design.md and docs/ui/sf-button-group-design.md.
 *
 * ── SfButton class-name reference ──────────────────────────────────────
 *   Component name          CSS class(es) used
 *   ─────────────────────   ─────────────────────────────────────────
 *   SfButton.Primary        .sf-btn-save
 *   SfButton.Accent         .sf-btn-accent
 *   SfButton.Secondary      .sf-btn-cancel
 *   SfButton.Ghost          .sf-btn-secondary    ← misleading; means "ghost"
 *   SfButton.Destructive    .sf-btn-delete
 *   SfButton.Cautionary     .sf-btn-cautionary
 *   SfButton.Link           .btn-plain
 *   SfButton.Close          .btn-plain (icon-only with fa-window-close)
 *   SfButton.Grid.*         .sf-btn-grid (sizing) + role class
 *   SfButton.Grid.Custom    .sf-btn-grid-aligned + role class
 *   SfButton.ButtonGroup.*  .sf-btn-group (parent only)
 *
 * Don't try to "fix" .sf-btn-secondary by changing it to mean Secondary —
 * ~250 existing call sites use it for the Ghost treatment. The component
 * names are the source of truth for new code; class names are legacy.
 */

/* ════════════════════════════════════════════════════════════════════
   Standalone role buttons (Primary / Accent / Secondary / Ghost /
   Destructive / Cautionary). Each rule applies to a TelerikButton with
   the corresponding sf-btn-* class — automatically merged by the
   SfButton.* wrapper components.
   ════════════════════════════════════════════════════════════════════ */

/* ── SfButton.Primary  →  .sf-btn-save ────────────────────────────── */
.sf-btn-save.k-button {
    background-color: var(--sf-primary-button-bg) !important;
    border-color: var(--sf-primary-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-save.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-primary-button-hover) !important;
    border-color: var(--sf-primary-button-hover) !important;
}

.sf-btn-save.k-button.k-disabled {
    opacity: 0.6;
}

.sf-btn-save.k-button:focus-visible {
    outline: 2px solid var(--sf-primary-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── SfButton.Accent  →  .sf-btn-accent ───────────────────────────── */
.sf-btn-accent.k-button {
    background-color: var(--sf-accent-button-bg) !important;
    border-color: var(--sf-accent-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-accent.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-accent-button-hover) !important;
    border-color: var(--sf-accent-button-hover) !important;
}

.sf-btn-accent.k-button.k-disabled { opacity: 0.6; }

.sf-btn-accent.k-button:focus-visible {
    outline: 2px solid var(--sf-accent-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── SfButton.Secondary  →  .sf-btn-cancel ────────────────────────── */
/* Border is --sf-secondary-text by design, NOT --sf-border-subtle. Keeping
   cancel darker than form-input borders preserves the visual hierarchy of
   toolbar (subtle) < cancel (strong) < primary actions. */
.sf-btn-cancel.k-button {
    background-color: var(--sf-bg-white) !important;
    border: 1px solid var(--sf-secondary-text) !important;
    color: var(--sf-secondary-text) !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-cancel.k-button:hover:not(.k-disabled) {
    background-color: #f8f9fa !important;
}

.sf-btn-cancel.k-button:focus-visible {
    outline: 2px solid var(--sf-secondary-text);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── SfButton.Ghost  →  .sf-btn-secondary ─────────────────────────── */
/* Low emphasis actions (Password Recovery, Preview, More Options, etc.).
   slate-500 (--sf-border-subtle, #64748b) — 4.1:1 against gray-100 fill,
   passes WCAG 2.2 non-text contrast (3:1). Lighter than Secondary's
   slate-600 border so the two roles read as distinct. */
.sf-btn-secondary.k-button {
    background-color: var(--sf-secondary-button-bg) !important;
    border: 1px solid var(--sf-border-subtle) !important;
    color: var(--sf-secondary-button-text) !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-secondary.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-secondary-button-hover) !important;
}

.sf-btn-secondary.k-button:focus-visible {
    outline: 2px solid var(--sf-secondary-button-text);
    outline-offset: 2px;
    box-shadow: none;
}

.sf-btn-secondary.k-button.k-disabled {
    background-color: var(--sf-secondary-button-disabled-bg) !important;
    color: var(--sf-secondary-button-disabled-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Inside an input wrapper (e.g. Telerik search/combo group), tighten the secondary button */
.k-input .sf-btn-secondary.k-button {
    min-width: unset !important;
    padding: 4px 4px !important;
}

/* ── SfButton.Destructive  →  .sf-btn-delete ──────────────────────── */
.sf-btn-delete.k-button {
    background-color: var(--sf-delete-button-bg) !important;
    /* Darker red border (red-700) for visual weight against the red-600 fill */
    border-color: var(--sf-delete-button-hover) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-delete.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-delete-button-hover) !important;
    border-color: var(--sf-delete-button-hover) !important;
}

.sf-btn-delete.k-button.k-disabled {
    background-color: var(--sf-disabled-button-bg) !important;
    border-color: var(--sf-disabled-button-bg) !important;
    color: var(--sf-disabled-button-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

.sf-btn-delete.k-button:focus-visible {
    outline: 2px solid var(--sf-delete-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── SfButton.Cautionary  →  .sf-btn-cautionary ───────────────────── */
/* Cautionary actions that need attention but are less severe than delete —
   e.g. Reset Password, Suspend, Lock. White ground with red border + text;
   hover tints to red-50. */
.sf-btn-cautionary.k-button {
    background-color: var(--sf-bg-white) !important;
    border: 1px solid var(--sf-delete-button-bg) !important;
    color: var(--sf-delete-button-bg) !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-cautionary.k-button:hover:not(.k-disabled) {
    background-color: #fef2f2 !important; /* tailwind red-50 */
}

.sf-btn-cautionary.k-button.k-disabled {
    background-color: var(--sf-disabled-button-bg) !important;
    border-color: var(--sf-disabled-button-bg) !important;
    color: var(--sf-disabled-button-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

.sf-btn-cautionary.k-button:focus-visible {
    outline: 2px solid var(--sf-delete-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   SfButton.Link / SfButton.Close  →  .btn-plain
   Plain <button> styled as inline text — no Telerik chrome, no role
   color. Used by SfButton.Link (text affordance) and SfButton.Close
   (icon-only close X).
   ════════════════════════════════════════════════════════════════════ */

.btn-plain {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
    vertical-align: baseline;
    cursor: pointer;
}

.btn-plain:hover,
.btn-plain:focus {
    color: inherit;
    text-decoration: none;
}

.btn-plain:focus:not(:focus-visible) {
    outline: none;
}

.btn-plain:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* Disabled visual for plain link-style buttons. Browsers' default
   disabled treatment for unstyled buttons is barely visible, so authors
   expect a muted-text + not-allowed cue when Enabled="false" propagates
   to the disabled attribute. */
.btn-plain:disabled,
.btn-plain[disabled] {
    color: var(--sf-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* SfButton.Link rendered inside a Telerik grid — restore the
   Bootstrap-link-style blue color + hover underline that callers had
   before migrating to <SfButton.Link>. .btn-plain otherwise inherits the
   surrounding text color, which makes a clickable row affordance read as
   plain text. Scoped to .k-grid so SfButton.Link in other contexts
   (modals, sidebars, inline help) keeps the plain inheriting treatment.
   :not(:disabled) keeps the disabled-muted rule above winning for
   Enabled="false" — selector specificity (0,3,0) beats the disabled rule
   (0,2,0) so non-disabled grid links pick up the blue. */
.k-grid .btn-plain:not(:disabled):not([disabled]) {
    color: var(--sf-focus-ring-inner);
}
.k-grid .btn-plain:not(:disabled):not([disabled]):hover {
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════
   SfButton.Grid.* — uniform 28×28 command-column buttons, plus the
   adjacent grid-cell padding and toolbar overflow tweaks they need.
   ════════════════════════════════════════════════════════════════════ */

/* Show button drop-shadows and focus rings inside grid toolbars.
   Telerik's default `.k-toolbar-items` overflow clips sf-btn-* shadows
   and the focus-clearance margin, so SfButton.Grid.* render flat and
   lose their focus indicator when keyboard-navigated. Scoped to
   .k-grid-toolbar so stand-alone Telerik toolbars elsewhere keep their
   default scroll-button affordance for overflowing content. */
.k-grid .k-grid-toolbar,
.k-grid .k-grid-toolbar .k-toolbar-items,
.k-grid .k-grid-toolbar .k-toolbar-items-scroll {
    overflow: visible !important;
}

/* Tighten command-cell horizontal padding when SfButton.Grid.* buttons
   are present. The buttons' own 4px focus-clearance margin already
   provides the visual breathing room that Telerik's default ~14px cell
   padding was supplying, so we can reclaim ~20px of column width and
   let narrower locked columns (e.g. 100px Actions) keep their buttons
   horizontal without wrapping. Scoped via :has() so command cells
   without our buttons keep Telerik's default padding. */
.k-grid .k-command-cell:has(.sf-btn-grid),
.k-grid .k-command-cell:has(.sf-btn-grid-aligned) {
    padding-inline: 10px !important;
}

/* Lighter sibling of sf-btn-grid for buttons that share the focus-
   clearance margin and the double-ring focus indicator but DON'T want
   the 28×28 icon-only footprint. SfButton.Grid.Custom uses this so it
   can render text + icon at the role class's natural sizing while
   still aligning vertically with the action-bound grid buttons
   (Save / Edit / Delete / etc.). */
.sf-btn-grid-aligned.k-button {
    margin: calc(var(--sf-focus-offset) + var(--sf-focus-inner-width)) !important;
}

.sf-btn-grid-aligned.sf-btn-grid-aligned.k-button:focus,
.sf-btn-grid-aligned.sf-btn-grid-aligned.k-button:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Restores the universal double-ring focus indicator (blue inner +
   white outer) on grid command buttons, overriding the role rules'
   colored single-ring treatment. Two reasons grid buttons need this:

     1. The 28×28 icon-only footprint is too small for a colored single
        ring to read well; the bright blue+white double ring is much
        more visible against any role color (red Delete, slate Save,
        gray Edit) and against any row background.

     2. Telerik renders grid command-column buttons with tabindex="-1"
        (Tab key skips them — keyboard nav goes through the grid's own
        cell traversal). Mouse clicks don't reliably trigger
        :focus-visible across browsers, so we match :focus too — that
        way the ring shows up on click, on keyboard arrow-nav, and on
        programmatic focus uniformly.

   Chained `.sf-btn-grid` for (0,3,1) specificity to beat role
   :focus-visible rules at (0,2,1). !important guards against Telerik's
   internal focus styling. */
.sf-btn-grid.sf-btn-grid.k-button:focus,
.sf-btn-grid.sf-btn-grid.k-button:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Selector chains `.sf-btn-grid` twice on purpose: when this class is
   composed alongside a role class (sf-btn-save, sf-btn-delete, etc.) the
   role rules also have specificity (0,2,0) and !important. Repeating the
   class here bumps us to (0,3,0) so sf-btn-grid's sizing always wins
   regardless of where the role rules sit in the cascade. */
.sf-btn-grid.sf-btn-grid.k-button {
    width: var(--sf-btn-size) !important;
    height: var(--sf-btn-size) !important;
    min-width: var(--sf-btn-size) !important;
    padding: 0 !important;
    /* Reserve space for the focus outline so it isn't clipped by parents
       with overflow: hidden (Telerik grid command cells). The outline
       extends `outline-offset + outline-width` = 2px + 2px = 4px outside
       the button edge; the box-shadow's 3px spread is smaller and within
       this margin. Computed via the focus-ring vars so future tweaks
       there propagate here automatically. */
    margin: calc(var(--sf-focus-offset) + var(--sf-focus-inner-width)) !important;
    /* IMPORTANT: do NOT add !important to `display`. Telerik hides
       grid command buttons by setting inline `style="display: none"`
       based on the row's edit state + ShowInEdit. An !important here
       wins over Telerik's inline style and forces every button to
       render in every mode. */
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}

/* Margin spacer between adjacent buttons inside a grid toolbar. */
.k-grid .k-grid-toolbar .k-button + .k-button {
    margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   SfButton.ButtonGroup  →  .sf-btn-group (parent only)
   Auto-applied by <SfButton.ButtonGroup.Group> via OnParametersSet.
   Children are <SfButton.ButtonGroup.Button> / .Toggle (rendered by
   Telerik as .k-buttons inside the group). Parent-driven descendant
   selectors so children stay free of role classes — no specificity
   fights between role rules and segmented-control rules.
   ════════════════════════════════════════════════════════════════════ */

/* Drop shadow on the parent so it traces the outer perimeter of the
   whole segmented control rather than each child individually (which
   would put the right-edge shadow of child N on top of child N+1).
   border-radius matches Telerik's default for .k-button-group .k-button
   (4px from the Kendo theme) so the shadow's rounded corners line up
   with the children's outer corners. */
.sf-btn-group {
    border-radius: 4px;
    box-shadow: var(--sf-shadow-md);
}

.sf-btn-group .k-button {
    /* Ghost baseline — matches the sf-btn-secondary palette */
    background-color: var(--sf-secondary-button-bg) !important;
    border-color: var(--sf-border-subtle) !important;
    color: var(--sf-secondary-button-text) !important;
    /* Use the WCAG-aligned interactive-target token (32px) rather than the
       compact --sf-btn-size — button groups appear most often inline with
       form fields, where the 32px height matches the surrounding text
       inputs and reads as a peer of those controls rather than a denser
       toolbar control. Icon-only toggles render as 32×32 squares; text
       and icon+text toggles grow horizontally with their content. */
    min-width: var(--sf-interactive-min) !important;
    min-height: var(--sf-interactive-min) !important;
    transition: background-color 200ms ease, color 200ms ease;
}

.sf-btn-group .k-button:hover:not(.k-disabled):not(.k-selected) {
    background-color: var(--sf-secondary-button-hover) !important;
}

.sf-btn-group .k-button.k-selected {
    /* Filled treatment one step up — slate-700 fill, white text — so the
       active toggle reads as the chosen segment. Border stays slate-500
       to keep the segmented-control gestalt. */
    background-color: var(--sf-color-dark) !important;
    border-color: var(--sf-border-subtle) !important;
    color: var(--sf-color-white) !important;
}

.sf-btn-group .k-button.k-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Universal blue+white double-ring on focus — matches the rest of the
   SfButton family. Selector chained twice for (0,3,1) specificity to beat
   role rules that some legacy markup still carries on individual children. */
.sf-btn-group .k-button.k-button:focus,
.sf-btn-group .k-button.k-button:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Icon-tone helpers — apply alongside any role class to tint just the
   rendered icon span (.k-button-icon). Use sparingly; the role class
   still wins for text/border/background.
       <SfButton.Grid.Custom Class="sf-icon-tone-success" …>
   !important is required because role rules set color: … !important on
   the button, and the icon span inherits that color by default.
   ════════════════════════════════════════════════════════════════════ */

.sf-icon-tone-success.k-button .k-button-icon  { color: var(--sf-color-success) !important; }
.sf-icon-tone-danger.k-button   .k-button-icon { color: var(--sf-color-destructive) !important; }
.sf-icon-tone-info.k-button     .k-button-icon { color: #1d4ed8 !important; } /* blue-700 */
.sf-icon-tone-darkblue.k-button .k-button-icon { color: darkblue !important; }