/*
 * Shared TransitSync UI components.
 *
 * Migration pattern for pages that still keep their own <style> block
 * (e.g. Admin/Users/*, Employees/Cleaning/*, Fleet/Vehicles/*, Fleet/Cleaning/Index):
 *   1. Delete any local rule that duplicates a class defined here (.ts-page-head,
 *      .ts-btn/.ts-btn-secondary, .ts-card*, .ts-table*, .ts-badge/.ts-chip/.ts-kbd)
 *      and switch the markup to use the shared class instead.
 *   2. Search the remaining local <style> block for literal rgba(255,255,255,...),
 *      rgba(0,0,0,...) or bare hex colors and replace them with the nearest
 *      --ts-overlay-1/2/3, --ts-accent, --ts-link-soft, or existing --ts-* token
 *      from _Layout.cshtml. If no existing token fits, add a new --ts-* pair to
 *      the :root and body[data-theme="light"] blocks instead of hardcoding.
 *   3. Give any custom interactive element (styled anchor/button/card) a
 *      :focus-visible rule mirroring .ts-btn:focus-visible below.
 *   4. Keep font-weight at 400/500 (600 max for emphasis) and border-radius at
 *      8-10px - the design is intentionally flat, no gradients or shadows.
 *   5. Keep genuinely page-specific layout (grid structure, one-off component
 *      names) local - only promote a pattern here once it appears on 2+ pages.
 *   6. Test both themes via the toggle button before considering a page migrated.
 */

.ts-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ts-page-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ts-text);
}

.ts-page-head p {
    margin: 6px 0 0;
}

.ts-page-head p a {
    color: var(--ts-link-soft);
    text-decoration: none;
    font-weight: 500;
}

.ts-btn,
.ts-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 9px 14px;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}

.ts-btn {
    background: var(--ts-accent);
    color: #fff;
}

.ts-btn:hover {
    background: var(--ts-accent-hover);
    color: #fff;
}

.ts-btn-secondary {
    background: transparent;
    color: var(--ts-text);
    border-color: var(--ts-border-strong);
}

.ts-btn-secondary:hover {
    background: var(--ts-overlay-1);
    color: var(--ts-text);
}

.ts-btn:focus-visible,
.ts-btn-secondary:focus-visible,
.ts-btn-danger:focus-visible,
.ts-theme-toggle:focus-visible {
    outline: 3px solid var(--ts-accent);
    outline-offset: 2px;
}

.ts-btn-danger {
    background: var(--ts-danger);
    color: #fff;
}

.ts-btn-danger:hover {
    filter: brightness(1.1);
    color: #fff;
}

.ts-sub {
    color: var(--ts-text-soft);
    font-size: .82rem;
    margin-top: 3px;
}

.ts-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

.ts-field {
    grid-column: span 12;
}

.ts-field-half {
    grid-column: span 6;
}

.ts-field-third {
    grid-column: span 4;
}

.ts-field label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ts-text);
    margin-bottom: 6px;
}

.ts-field input,
.ts-field select,
.ts-field textarea {
    width: 100%;
    box-sizing: border-box;
}

.ts-field textarea {
    min-height: 110px;
    resize: vertical;
}

.ts-help {
    display: block;
    margin-top: 6px;
    color: var(--ts-text-muted);
    font-size: .8rem;
}

.ts-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ts-text);
    font-weight: 500;
    font-size: .88rem;
}

.ts-check input {
    width: 16px;
    height: 16px;
}

.ts-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.ts-badge.success {
    background: var(--ts-success-bg);
    color: var(--ts-success-text);
    border-color: var(--ts-success);
}

.ts-badge.warn {
    background: var(--ts-warn-bg);
    color: var(--ts-warn-text);
    border-color: var(--ts-warn);
}

.ts-badge.danger {
    background: var(--ts-danger-bg);
    color: var(--ts-danger-text);
    border-color: var(--ts-danger);
}

@media (max-width: 760px) {
    .ts-field-half,
    .ts-field-third {
        grid-column: span 12;
    }

    .ts-form-actions .ts-btn,
    .ts-form-actions .ts-btn-secondary,
    .ts-form-actions .ts-btn-danger {
        width: 100%;
    }
}

.ts-card {
    border-radius: 10px;
    border: 1px solid var(--ts-border);
    background: var(--ts-card-bg);
    overflow: hidden;
}

.ts-card-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ts-border);
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ts-text-soft);
}

.ts-card-body {
    padding: 16px;
}

.ts-table-wrap {
    overflow-x: auto;
}

.ts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ts-table th,
.ts-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ts-border);
    text-align: left;
    vertical-align: middle;
    color: var(--ts-text);
}

.ts-table th {
    font-size: .82rem;
    font-weight: 500;
    color: var(--ts-text-soft);
    background: var(--ts-overlay-1);
}

.ts-table tr:hover td {
    background: var(--ts-overlay-1);
}

.ts-badge,
.ts-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--ts-border-strong);
    background: var(--ts-overlay-2);
    color: var(--ts-text-soft);
}

.ts-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .78rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--ts-border-strong);
    background: var(--ts-overlay-2);
    color: var(--ts-text);
}

.ts-empty {
    padding: 24px 16px;
    color: var(--ts-text-soft);
}

.ts-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.ts-stat-tile {
    background: var(--ts-card-bg);
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.ts-stat-label {
    font-size: .78rem;
    color: var(--ts-text-soft);
    margin-bottom: 6px;
}

.ts-stat-value {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ts-text);
}

.ts-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ts-quick-tile {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--ts-card-bg);
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
}

.ts-quick-tile:hover {
    border-color: var(--ts-border-strong);
    background: var(--ts-overlay-1);
    color: inherit;
}

.ts-quick-tile:focus-visible {
    outline: 3px solid var(--ts-accent);
    outline-offset: 2px;
}

.ts-quick-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ts-overlay-2);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.ts-quick-tile h3 {
    margin: 0;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ts-text);
}

.ts-quick-tile p {
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--ts-text-soft);
}

.ts-section-label {
    font-size: .78rem;
    color: var(--ts-text-soft);
    margin-bottom: 8px;
}

.ts-expiry-cell-ok,
.ts-expiry-cell-expired,
.ts-expiry-cell-soon,
.ts-expiry-cell-missing {
    font-weight: 500;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
}

.ts-expiry-cell-ok::before,
.ts-expiry-cell-expired::before,
.ts-expiry-cell-soon::before,
.ts-expiry-cell-missing::before {
    margin-right: 6px;
}

.ts-expiry-cell-ok {
    background: var(--ts-success-bg);
    color: var(--ts-success-text);
}

.ts-expiry-cell-ok::before { content: "✔"; }

.ts-expiry-cell-expired {
    background: var(--ts-danger-bg);
    color: var(--ts-danger-text);
}

.ts-expiry-cell-expired::before { content: "✖"; }

.ts-expiry-cell-soon {
    background: var(--ts-warn-bg);
    color: var(--ts-warn-text);
}

.ts-expiry-cell-soon::before { content: "⚠"; }

.ts-expiry-cell-missing {
    background: var(--ts-info-bg);
    color: var(--ts-info-text);
}

.ts-expiry-cell-missing::before { content: "•"; }