/* Base Styles - extracted from base.html */

html {
    background-color: var(--bg-canvas);
}
/* body background is owned by Bootstrap via --bs-body-bg (= --canvas); no rule here. */

/* Prevent child elements from intercepting clicks */
.nav-link i,
.nav-link span,
.nav-link small,
.mobile-nav-item i,
.mobile-nav-item span,
.mobile-nav-item small {
    pointer-events: none;
}

/* Eliminate 300ms touch delay on interactive elements */
a, button, .nav-link, .mobile-nav-item, [role="button"] {
    touch-action: manipulation;
}

/* Screen reader only - hide visually but keep for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom CSS */
.status-badge {
    font-size: 0.875rem;
}
.table-actions {
    white-space: nowrap;
}
.form-section {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

/* Mobile view simulation - simplified */
.mobile-view-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

.mobile-view-toggle:hover {
    background: rgba(0, 0, 0, 0.9);
}

/*
 * Submitting state for Turbo form buttons.
 * Turbo marks the submitting button with aria-disabled="true" (not the real
 * :disabled property), so Bootstrap's :disabled styling does not apply. Mirror
 * that look here so the button reads as busy while a submission is in flight.
 */
button[aria-disabled="true"],
input[type="submit"][aria-disabled="true"] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/*
 * Extra status badge / button colours.
 *
 * Bootstrap 5 only ships contextual classes for primary/secondary/success/
 * danger/warning/info/dark. Custom workflow statuses can be assigned these extra
 * colours via the status editor, so the classes must live in this globally loaded
 * stylesheet (not settings.css) to render on dashboard, list, and public badges.
 *
 * Status badges hardcode `text-white`, so every colour here is dark enough to
 * keep white text readable.
 */
.bg-orange { background-color: #e8590c !important; }
.bg-teal   { background-color: #0d9488 !important; }
.bg-purple { background-color: #6f42c1 !important; }
.bg-pink   { background-color: #d63384 !important; }

.btn-orange { background-color: #e8590c; border-color: #e8590c; color: #fff; }
.btn-orange:hover, .btn-orange:focus { background-color: #d24f0a; border-color: #d24f0a; color: #fff; }
.btn-teal { background-color: #0d9488; border-color: #0d9488; color: #fff; }
.btn-teal:hover, .btn-teal:focus { background-color: #0b827a; border-color: #0b827a; color: #fff; }
.btn-purple { background-color: #6f42c1; border-color: #6f42c1; color: #fff; }
.btn-purple:hover, .btn-purple:focus { background-color: #5e36a6; border-color: #5e36a6; color: #fff; }
.btn-pink { background-color: #d63384; border-color: #d63384; color: #fff; }
.btn-pink:hover, .btn-pink:focus { background-color: #bb2d73; border-color: #bb2d73; color: #fff; }

/*
 * Outline variants for the same custom colours, used by the status filter tabs
 * (macros/status_filter.html renders btn-outline-{colour}). Bootstrap 5.3 ships
 * no outline class for these AND loads after base.css, so its .btn base rule
 * clobbers any non-!important declaration here (raw property OR --bs-btn-* var).
 * Same mechanism as .bg-orange above: !important wins regardless of load order.
 * Rest = coloured text/border on transparent; active/hover = filled, white text.
 */
.btn-outline-orange { color: #e8590c !important; border-color: #e8590c !important; background-color: transparent !important; }
.btn-outline-orange:hover, .btn-outline-orange:focus, .btn-outline-orange.active { color: #fff !important; background-color: #e8590c !important; border-color: #e8590c !important; }
.btn-outline-teal { color: #0d9488 !important; border-color: #0d9488 !important; background-color: transparent !important; }
.btn-outline-teal:hover, .btn-outline-teal:focus, .btn-outline-teal.active { color: #fff !important; background-color: #0d9488 !important; border-color: #0d9488 !important; }
.btn-outline-purple { color: #6f42c1 !important; border-color: #6f42c1 !important; background-color: transparent !important; }
.btn-outline-purple:hover, .btn-outline-purple:focus, .btn-outline-purple.active { color: #fff !important; background-color: #6f42c1 !important; border-color: #6f42c1 !important; }
.btn-outline-pink { color: #d63384 !important; border-color: #d63384 !important; background-color: transparent !important; }
.btn-outline-pink:hover, .btn-outline-pink:focus, .btn-outline-pink.active { color: #fff !important; background-color: #d63384 !important; border-color: #d63384 !important; }

/* Simple mobile simulation using Bootstrap responsive breakpoints */
body.mobile-simulation {
    max-width: 375px;
    margin: 0 auto;
    border: 2px solid #ddd;
    border-radius: 15px;
    background: #f8f9fa;
    padding: 10px;
}