/*
 * Modern skin — Shopify Polaris design language.
 *
 * The dashboard is embedded in the Shopify admin, so it should look like the admin
 * it lives inside, not like the CoreUI template it started as. This file loads after
 * the CoreUI stylesheets and re-themes the Bootstrap classes every existing view
 * already uses — one file to restyle all screens, nothing per-view to maintain.
 *
 * Tokens are Polaris values: neutral greys, one green primary, pill badges, quiet
 * borders instead of shadows. All text/background pairs meet WCAG 4.5:1.
 */

:root {
    --p-bg: #f6f6f7;
    --p-surface: #ffffff;
    --p-surface-subdued: #fafbfb;
    --p-text: #202223;
    --p-text-subdued: #6d7175;
    --p-border: #e1e3e5;
    --p-border-subdued: #ebedef;
    --p-primary: #008060;
    --p-primary-hover: #006e52;
    --p-link: #2c6ecb;
    --p-focus: #458fff;

    --p-success-bg: #aee9d1;
    --p-success-text: #0e5c4a;
    --p-warning-bg: #ffd79d;
    --p-warning-text: #5e4200;
    --p-critical-bg: #fed3d1;
    --p-critical-text: #8e1f0b;
    --p-info-bg: #a4e8f2;
    --p-info-text: #00527c;
    --p-neutral-bg: #e4e5e7;
    --p-neutral-text: #42474c;

    --p-radius: 8px;
    --p-radius-lg: 12px;
    --p-shadow-card: 0 1px 0 rgba(22, 29, 37, 0.05);
    --p-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

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

body,
.wrapper,
body .bg-light {
    background-color: var(--p-bg) !important;
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: 0.875rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--p-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.container-fluid > h1,
.container-lg > h1 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

a { color: var(--p-link); }
a:hover { color: #1f5199; }

code {
    color: var(--p-text);
    background: var(--p-surface-subdued);
    border: 1px solid var(--p-border-subdued);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8125em;
}

/* Keyboard users get a clear ring; Polaris uses a 2px blue halo. */
:focus-visible {
    outline: 2px solid var(--p-focus);
    outline-offset: 1px;
    border-radius: 4px;
}

/* ---------- Sidebar (standalone view) ---------- */

.sidebar {
    background: var(--p-surface);
    border-right: 1px solid var(--p-border);
    box-shadow: none;
}

/* The logo artwork is white; it keeps its dark plate as a deliberate brand block. */
.sidebar-brand {
    background: #1a2035;
    justify-content: center;
}

.sidebar .nav-title {
    color: var(--p-text-subdued);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.sidebar .nav-link {
    color: var(--p-text);
    border-radius: var(--p-radius);
    margin: 1px 8px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.sidebar .nav-link .nav-icon { color: var(--p-text-subdued); }

.sidebar .nav-link:hover {
    background: var(--p-bg);
    color: var(--p-text);
}

.sidebar .nav-link.active,
.sidebar .nav-link.active .nav-icon {
    background: #f1f8f5;
    color: var(--p-primary);
    font-weight: 600;
}

.sidebar-toggler { background: var(--p-surface); border-top: 1px solid var(--p-border); }

/* ---------- Top bar ---------- */

.header {
    background: var(--p-surface);
    border-bottom: 1px solid var(--p-border);
    box-shadow: none;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--p-text-subdued);
    text-decoration: none;
    font-size: 0.8125rem;
}

/* ---------- Cards ---------- */

.card {
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-lg);
    box-shadow: var(--p-shadow-card);
}

.card-header {
    background: transparent !important;
    color: var(--p-text) !important;
    border-bottom: 1px solid var(--p-border-subdued);
    font-weight: 600;
    padding: 0.875rem 1.25rem;
}

/* The contractor's screens paint card headers bg-primary/bg-warning with white
   text; in this skin every card header is quiet and the content carries meaning. */
.card-header[class*='bg-'] { background: transparent !important; }
.card-header .text-white,
.card-header.text-white { color: var(--p-text) !important; }

.card-footer {
    background: var(--p-surface-subdued);
    border-top: 1px solid var(--p-border-subdued);
}

/* ---------- Tables ---------- */

.table {
    --cui-table-hover-bg: var(--p-surface-subdued);
    color: var(--p-text);
    margin-bottom: 0.5rem;
}

.table thead th {
    color: var(--p-text-subdued);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--p-border);
    padding: 0.625rem 0.75rem;
    white-space: nowrap;
}

.table tbody td {
    border-bottom: 1px solid var(--p-border-subdued);
    padding: 0.75rem;
    vertical-align: middle;
    /* Data columns line up: prices, counts, timestamps. */
    font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table-active,
.table-active > td { background: #f1f8f5 !important; }

/* ---------- Badges: Polaris pills ---------- */

.badge {
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.3em 0.75em;
    letter-spacing: 0;
}

.badge.bg-success { background: var(--p-success-bg) !important; color: var(--p-success-text) !important; }
.badge.bg-danger { background: var(--p-critical-bg) !important; color: var(--p-critical-text) !important; }
.badge.bg-warning { background: var(--p-warning-bg) !important; color: var(--p-warning-text) !important; }
.badge.bg-info { background: var(--p-info-bg) !important; color: var(--p-info-text) !important; }
.badge.bg-secondary { background: var(--p-neutral-bg) !important; color: var(--p-neutral-text) !important; }
.badge.bg-primary { background: var(--p-success-bg) !important; color: var(--p-success-text) !important; }

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--p-radius);
    font-weight: 500;
    box-shadow: none;
}

.btn-primary {
    background: var(--p-primary);
    border-color: var(--p-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--p-primary-hover);
    border-color: var(--p-primary-hover);
}

.btn-outline-primary {
    color: var(--p-text);
    border-color: #babfc3;
    background: var(--p-surface);
}

.btn-outline-primary:hover {
    background: var(--p-surface-subdued);
    border-color: #8c9196;
    color: var(--p-text);
}

.btn-danger,
.btn-outline-danger:hover {
    background: #d82c0d;
    border-color: #d82c0d;
}

/* ---------- Tabs: Polaris underline style ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--p-border);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--p-text-subdued);
    font-weight: 500;
    padding: 0.625rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--p-text);
    border-bottom-color: var(--p-border);
}

.nav-tabs .nav-link.active {
    color: var(--p-text);
    background: transparent;
    border-bottom-color: var(--p-primary);
    font-weight: 600;
}

/* ---------- Alerts: Polaris banners ---------- */

.alert {
    border-radius: var(--p-radius-lg);
    border: 1px solid transparent;
}

.alert-warning {
    background: #fff5ea;
    border-color: var(--p-warning-bg);
    color: #5e4200;
}

.alert-danger {
    background: #fff4f4;
    border-color: var(--p-critical-bg);
    color: var(--p-critical-text);
}

.alert-info {
    background: #f2f7fe;
    border-color: #a4c8f2;
    color: #00527c;
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    border-radius: var(--p-radius);
    border-color: #8c9196;
    color: var(--p-text);
    font-size: 0.875rem;
}

.form-control::placeholder { color: var(--p-text-subdued); }

.form-control:focus,
.form-select:focus {
    border-color: var(--p-focus);
    box-shadow: 0 0 0 1px var(--p-focus);
}

.form-text, .text-body-secondary, .text-muted {
    color: var(--p-text-subdued) !important;
}

/* ---------- Pagination ---------- */

.pagination .page-link {
    color: var(--p-text);
    border-color: var(--p-border);
    border-radius: var(--p-radius);
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--p-primary);
    border-color: var(--p-primary);
}

/* ---------- Definition lists (SKU inspector) ---------- */

dl.row dt {
    color: var(--p-text-subdued);
    font-weight: 500;
}

dl.row dd { color: var(--p-text); }

/* ---------- Progress ---------- */

.progress { border-radius: 999px; background: var(--p-border-subdued); }
.progress-bar.bg-success { background: var(--p-primary) !important; }

/* ---------- Footer ---------- */

.footer {
    background: transparent;
    border-top: 1px solid var(--p-border);
    color: var(--p-text-subdued);
}

/* ---------- Embedded in the Shopify admin ---------- */
/* The admin supplies navigation (ui-nav-menu) and its own chrome, so ours would be
   chrome inside chrome: a sidebar next to Shopify's sidebar, a header under
   Shopify's header. Hide both and let the content fill the frame. */

body.embedded .sidebar,
body.embedded .header,
body.embedded .footer,
body.embedded .breadcrumb {
    display: none !important;
}

body.embedded .wrapper {
    padding-left: 0 !important;
    min-height: auto;
}

body.embedded .body { padding-top: 0.5rem; }

/* Until App Bridge upgrades it, ui-nav-menu is an unknown element and its links
   would render as plain text at the top of the page. It is never meant to be
   visible here - its items appear in the admin sidebar. */
ui-nav-menu { display: none; }

/* Polaris pages are a centred column, not edge-to-edge. */
body.embedded .container-fluid,
body.embedded .container-lg {
    max-width: 1060px;
    margin-inline: auto;
}

/* Reduced motion: the skin adds no animation, but calm any underlying ones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}