/* ============================================================
   Shared, cross-page styles. Loaded on every page (admin, portal,
   and the standalone auth/error pages) in addition to that page's
   own stylesheet, so these rules stay in exactly one place instead
   of being copied into app.css / auth.css / portal.css three times.
   ============================================================ */

:root {
    --font-sans: "Sen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    font-family: var(--font-sans);
}

/* Buttons, inputs, selects and textareas don't inherit the body font
   by default in most browsers' UA stylesheets — without this they'd
   silently fall back to the OS system font while everything else on
   the page uses Sen. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Removes the browser's default up/down spinner buttons from every
   number input site-wide — they read as a rough, unfinished touch on
   what are otherwise plain amount/quantity fields. The field still
   only accepts numbers; this only hides the spinner control. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---- Button loading state ----------------------------------
   Applied by /js/ui.js to a submit button the moment its form is
   submitted: disables it (so a double-click / double-tap can't
   fire the request twice) and shows a small spinner so the user
   knows something is happening, especially on slow connections. */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: currentColor;
    border-radius: 50%;
    vertical-align: -2px;
    animation: btn-spinner-spin 0.6s linear infinite;
}

/* Buttons with a light/soft background (secondary, logout, etc.)
   need a dark-on-light spinner track rather than the white-on-dark
   one above. */
.is-loading.btn-secondary .btn-spinner,
.is-loading.dropdown-item .btn-spinner,
.is-loading.auth-button-secondary .btn-spinner {
    border-color: rgba(30, 43, 36, 0.25);
    border-top-color: currentColor;
}

@keyframes btn-spinner-spin {
    to {
        transform: rotate(360deg);
    }
}

button.is-loading,
input[type="submit"].is-loading {
    opacity: 0.85;
    cursor: wait;
}

/* ---- Nav icons -----------------------------------------------
   Every sidebar/topbar nav link gets a small leading icon sized
   consistently regardless of which stylesheet defines the link
   itself (app.css vs portal.css). */
.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Password show/hide toggle --------------------------------
   Wraps a single <input type="password"> plus the toggle button.
   Works inside any form styling (.form-input or .auth-input) since
   it only adds right-padding to whatever input is inside it. */
.password-field {
    position: relative;
}

.password-field input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-muted, #5c6b63);
}

.password-toggle:hover {
    color: var(--color-text, #1e2b24);
    background: rgba(0, 0, 0, 0.04);
}

.password-toggle .icon-eye-off {
    display: none;
}

.password-toggle.is-visible .icon-eye {
    display: none;
}

.password-toggle.is-visible .icon-eye-off {
    display: block;
}

/* ---- Notification bell -----------------------------------------
   Small badge-carrying icon button placed next to the account
   dropdown in both topbars. */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--color-border, #d8e6de);
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.notif-bell:hover {
    background: rgba(0, 0, 0, 0.04);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-error, #b3261e);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ---- Dropdown menu ---------------------------------------------
   A small "account" style dropdown used in the topbar (profile,
   change password, sign out) — the mobile-app-style menu, distinct
   from the main section nav. Works the same on admin and portal:
   a trigger button with [data-dropdown-toggle] controls a panel
   with [data-dropdown-menu], toggled by /js/ui.js. */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
}

.dropdown-caret {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.dropdown.is-open .dropdown-caret {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8e6de);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 43, 36, 0.14);
    padding: 6px;
    z-index: 40;
}

.dropdown.is-open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--color-text, #1e2b24);
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--color-primary-soft, #e7f3ec);
}

.dropdown-item.is-danger {
    color: var(--color-error, #b3261e);
}

.dropdown-item.is-danger:hover {
    background: var(--color-error-bg, #fbeaea);
}

.dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border, #d8e6de);
}

/* ---- Confirm modal ----------------------------------------------
   Replaces the native window.confirm() for any form/button marked
   data-confirm="message" — built and shown by /js/ui.js. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 18, 0.5);
}

.confirm-overlay[hidden] {
    display: none;
}

.confirm-modal {
    width: 100%;
    max-width: 360px;
    background: var(--color-surface, #fff);
    border-radius: 14px;
    padding: 24px 22px 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 18, 0.3);
    text-align: center;
}

.confirm-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-error-bg, #fbeaea);
    color: var(--color-error, #b3261e);
    margin-bottom: 14px;
}

.confirm-modal-icon .nav-icon {
    width: 22px;
    height: 22px;
}

.confirm-modal-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.confirm-modal-message {
    margin: 0 0 20px;
    font-size: 0.9rem;
    color: var(--color-muted, #5c6b63);
}

.confirm-modal-actions {
    display: flex;
    gap: 10px;
}

.confirm-modal-actions button {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.confirm-modal-cancel {
    background: var(--color-border, #d8e6de);
    color: var(--color-text, #1e2b24);
}

.confirm-modal-confirm {
    background: var(--color-error, #b3261e);
    color: #fff;
}