/**
 * Base element styling — html, body, form controls, tables, flash messages.
 *
 * Lifted out of a 147-line inline ``<style>`` block in ``base.html``. It defined
 * the document's own baseline — zoom behaviour, text-size adjustment, the flash
 * variants, label/input/button defaults, table layout and the modal header bar
 * — which is exactly what a stylesheet is for, and none of it was reachable by
 * biome or by the design-drift scan while it sat in markup.
 *
 * Linked last in base.html: the block was in ``<head>`` after every other
 * ``<link>``, so it won any specificity tie, and loading last preserves that.
 */

/* Base Styles and Zoom Control */
html {
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    /* font-family lives in design-tokens.css */
    margin: 20px;
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    line-height: 1.6;
    color: var(--fg-body-strong);
}

/* Flash Messages */
.flash {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid;
    font-weight: 500;
}
.flash.success {
    background-color: color-mix(
        in srgb,
        var(--color-brand-green) 10%,
        transparent
    );
    color: var(--color-brand-green);
    border-color: color-mix(in srgb, var(--color-brand-green) 30%, transparent);
}
.flash.error {
    background-color: var(--sev-high-bg);
    color: var(--danger-fg);
    border-color: var(--sev-high-border);
}
.flash.warning {
    background-color: var(--banner-warning-bg);
    color: var(--banner-warning-fg);
    border-color: var(--policy-looser-bg);
}
.flash.info {
    background-color: var(--sev-low-bg);
    color: var(--chart-line-info);
    border-color: var(--info-border);
}

/* Form Elements */
label {
    display: block;
    margin-top: 12px;
    font-weight: 500;
    color: var(--fg-body-strong);
}
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 250px;
    padding: 8px 12px;
    margin-top: 6px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: var(--fs-base);
}
button {
    padding: 10px 16px;
    margin-top: 16px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
}

/* Logout Button - uses CSS variable from design-system.css */
.patitur-logout-btn {
    background: var(--color-brand-green);
    color: var(--fg-on-dark);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.patitur-logout-btn:hover {
    background: var(--color-brand-green-hover);
}

.patitur-logout-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Legacy .table-footer CSS removed (2026-03-31).
   Table footer and pagination now use Tailwind classes in
   flowbite.html macros (_table_footer, _pagination_nav). */

/* Table responsive behavior */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure proper table scaling */
table {
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Ensure consistent button sizing */
.table-footer .button,
.table-footer .div-wrapper,
.table-footer .button-2,
.table-footer .angle-right-wrapper {
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Modal header banner — painted by alert-modal-status-edit.js
   on alertStatusChangeSuccess / alertStatusChangeError events.
   The bar swaps its bg + title text to a flash banner; the X
   button stays clickable so the operator can dismiss the modal
   even mid-flash.  Reset by ``htmx:beforeRequest`` from inside
   the modal so a retry clears the previous error state. */
#modal-header-bar.modal-header-success {
    background-color: var(--color-brand-green-hover);
}
#modal-header-bar.modal-header-error {
    background-color: var(--danger-fg);
}
#modal-header-bar.modal-header-success #modal-title,
#modal-header-bar.modal-header-error #modal-title {
    color: var(--fg-on-dark);
}
#modal-header-bar.modal-header-success #modal-subtitle,
#modal-header-bar.modal-header-error #modal-subtitle {
    display: none;
}
#modal-header-bar.modal-header-success [data-modal-hide],
#modal-header-bar.modal-header-error [data-modal-hide] {
    color: color-mix(in srgb, var(--fg-on-dark) 85%, transparent);
}

/* Alpine.js cloak. Keeps a component hidden until Alpine mounts, so its panels
   do not flash on load. Was an inline block partway down
   glossary/_alert_detail_content.html; in a head stylesheet it is guaranteed to
   apply before first paint, which is what the guard is actually for — and it is
   a global Alpine concern, not a glossary one. */
[x-cloak] {
    display: none !important;
}
