/* ==========================================================================
   Job Cart theme — "Workshop Docket"
   Shared across every Job Cart page. Uses attribute selectors that match
   the naming patterns already used throughout the module (…-submit,
   …-table, …-edit, …-delete, …-message) so it layers over existing
   per-page styles without needing to edit every file individually.
   ========================================================================== */

:root {
    --jc-navy: #0B2038;
    --jc-navy-dark: #071628;
    --jc-blue: #1976C9;
    --jc-blue-dark: #145d9d;
    --jc-amber: #E8A33D;
    --jc-amber-dark: #C67F1E;
    --jc-amber-light: #F4C989;
    --jc-paper: #F7F4EC;
    --jc-steel: #5B6B7A;
    --jc-success: #2E7D32;
    --jc-success-bg: #E7F3E8;
    --jc-error: #A92727;
    --jc-error-bg: #FBEAEA;
    --jc-radius: 10px;
    --jc-radius-sm: 6px;
    --jc-shadow: 0 2px 8px rgba(11, 32, 56, 0.10);
    --jc-shadow-lift: 0 8px 20px rgba(11, 32, 56, 0.16);
    --jc-font-heading: 'Barlow Semi Condensed', Arial, sans-serif;
    --jc-font-body: 'Inter', Arial, sans-serif;
}

@keyframes jc-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Base ---- */

.jobcart-dashboard,
.jobcart-page {
    font-family: var(--jc-font-body);
    background: var(--jc-paper) !important;
}

.jobcart-content {
    animation: jc-fade-up .45s cubic-bezier(.22, .8, .3, 1) both;
}

.jobcart-menu-title,
.jobcart-section-title,
.jobcart-page-title,
.jobcart-title {
    font-family: var(--jc-font-heading) !important;
    letter-spacing: .2px;
}

/* ---- Buttons (…-submit) ---- */

button[class*="-submit"] {
    background: var(--jc-amber) !important;
    color: var(--jc-navy) !important;
    border: none !important;
    border-radius: var(--jc-radius-sm) !important;
    padding: 10px 22px !important;
    font-family: var(--jc-font-heading);
    font-weight: 600;
    font-size: 16px !important;
    letter-spacing: .3px;
    box-shadow: 0 3px 0 var(--jc-amber-dark);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    cursor: pointer;
}

button[class*="-submit"]:hover {
    background: var(--jc-amber-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--jc-amber-dark);
}

button[class*="-submit"]:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--jc-amber-dark);
}

/* ---- Action links (…-edit, …-delete, …-back) ---- */

a[class*="-edit"],
a[class*="-delete"],
a[class*="-back"] {
    border-radius: var(--jc-radius-sm) !important;
    font-family: var(--jc-font-body);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(11, 32, 56, .15);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

a[class*="-edit"]:hover,
a[class*="-delete"]:hover,
a[class*="-back"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(11, 32, 56, .22);
    filter: brightness(1.08);
}

a[class*="-edit"]:active,
a[class*="-delete"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(11, 32, 56, .2);
}

/* ---- Message banners (…-message, …-success, …-error) ---- */

[class*="-message"] {
    border-radius: var(--jc-radius-sm) !important;
    border-width: 1px !important;
    box-shadow: var(--jc-shadow);
    animation: jc-fade-up .3s ease both;
    font-family: var(--jc-font-body);
}

/* ---- Tables (…-table) ---- */

[class*="-table"] th {
    font-family: var(--jc-font-heading) !important;
    letter-spacing: .3px;
    font-weight: 600 !important;
}

[class*="-table"] tbody tr td,
[class*="-table"] tr td {
    transition: background-color .15s ease, box-shadow .15s ease;
}

[class*="-table"] tbody tr:hover td,
[class*="-table"] tr:hover td {
    background: var(--jc-paper) !important;
    box-shadow: inset 4px 0 0 var(--jc-amber);
}

/* ---- Form inputs (inside any …-row wrapper) ---- */

[class*="-row"] input:not([type="checkbox"]):not([type="submit"]),
[class*="-row"] select,
[class*="-row"] textarea {
    transition: border-color .15s ease, box-shadow .15s ease;
    border-radius: var(--jc-radius-sm) !important;
}

[class*="-row"] input:not([type="checkbox"]):not([type="submit"]):focus,
[class*="-row"] select:focus,
[class*="-row"] textarea:focus {
    outline: none;
    border-color: var(--jc-amber) !important;
    box-shadow: 0 0 0 3px rgba(232, 163, 61, .28);
}

input[type="checkbox"] {
    accent-color: var(--jc-amber);
}

/* ---- Sidebar menu items ---- */

.jobcart-menu-item {
    transition: background-color .18s ease, padding-left .18s ease, box-shadow .18s ease !important;
}

.jobcart-menu-item:hover,
.jobcart-menu-item.active {
    box-shadow: inset 4px 0 0 var(--jc-amber);
}

/* ---- Badges (e.g. Contract Client) ---- */

[class*="-badge"] {
    font-family: var(--jc-font-body);
    letter-spacing: .2px;
    box-shadow: 0 1px 3px rgba(11, 32, 56, .15);
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .jobcart-content,
    [class*="-message"] {
        animation: none !important;
    }

    button[class*="-submit"],
    a[class*="-edit"],
    a[class*="-delete"],
    a[class*="-back"] {
        transition: none !important;
    }
}