/*
 * DHL Core admin — a calm, Shopify-inspired skin over Filament:
 * grey canvas, dark top bar, soft white cards and dark primary buttons,
 * with a matching dark mode.
 *
 * Plain CSS layered on top of Filament's compiled stylesheet, so it needs no
 * Tailwind build. Every selector is prefixed with `html:root` so it outranks
 * Filament's utilities, including its `dark:` variants. Colours live in the
 * tokens below; `.dark` swaps them. After editing, publish it with
 * `php artisan filament:assets`.
 */

:root {
    --dhl-canvas: #f1f1f1;
    --dhl-sidebar: #ebebeb;
    --dhl-surface: #ffffff;
    --dhl-surface-subdued: #f7f7f7;
    --dhl-topbar: #1a1a1a;
    --dhl-ink: #303030;
    --dhl-ink-strong: #1a1a1a;
    --dhl-ink-subdued: #616161;
    --dhl-icon: #4a4a4a;
    --dhl-group-label: #737373;
    --dhl-nav-hover: #f1f1f1;
    --dhl-nav-active: #ffffff;
    --dhl-input-border: rgb(138 138 138 / 0.6);
    --dhl-focus: #303030;
    --dhl-card-shadow:
        0 1px 0 0 rgb(26 26 26 / 0.07), inset 0 1px 0 0 rgb(204 204 204 / 0.5),
        inset 0 -1px 0 0 rgb(0 0 0 / 0.17), inset -1px 0 0 0 rgb(0 0 0 / 0.13),
        inset 1px 0 0 0 rgb(0 0 0 / 0.13);

    --dhl-btn-primary: #303030;
    --dhl-btn-primary-hover: #1a1a1a;
    --dhl-btn-primary-text: #ffffff;
    --dhl-btn-primary-shadow:
        0 -1px 0 1px rgb(0 0 0 / 0.8) inset, 0 0 0 1px #303030 inset,
        0 0.5px 0 1.5px rgb(255 255 255 / 0.25) inset;
    --dhl-btn-secondary: #ffffff;
    --dhl-btn-secondary-hover: #fafafa;
    --dhl-btn-secondary-shadow:
        0 -1px 0 0 #b5b5b5 inset, 0 0 0 1px rgb(0 0 0 / 0.1) inset,
        0 0.5px 0 1.5px #ffffff inset;

    --dhl-badge-success-bg: #cdfee1;
    --dhl-badge-success-text: #0c5132;
    --dhl-badge-warning-bg: #ffef9d;
    --dhl-badge-warning-text: #4f4700;
    --dhl-badge-danger-bg: #fedad9;
    --dhl-badge-danger-text: #8e0b21;
    --dhl-badge-info-bg: #e0f0ff;
    --dhl-badge-info-text: #00527c;
    --dhl-badge-neutral-bg: #e3e3e3;
    --dhl-badge-neutral-text: #616161;
}

:root.dark {
    --dhl-canvas: #141414;
    --dhl-sidebar: #1a1a1a;
    --dhl-surface: #1f1f1f;
    --dhl-surface-subdued: #262626;
    --dhl-topbar: #0a0a0a;
    --dhl-ink: #e3e3e3;
    --dhl-ink-strong: #ffffff;
    --dhl-ink-subdued: #a3a3a3;
    --dhl-icon: #b5b5b5;
    --dhl-group-label: #8a8a8a;
    --dhl-nav-hover: #242424;
    --dhl-nav-active: #2a2a2a;
    --dhl-input-border: rgb(255 255 255 / 0.2);
    --dhl-focus: #e3e3e3;
    --dhl-card-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 0 rgb(255 255 255 / 0.04);

    --dhl-btn-primary: #f1f1f1;
    --dhl-btn-primary-hover: #ffffff;
    --dhl-btn-primary-text: #1a1a1a;
    --dhl-btn-primary-shadow: 0 -1px 0 0 rgb(0 0 0 / 0.25) inset, 0 0 0 1px rgb(255 255 255 / 0.9) inset;
    --dhl-btn-secondary: #2a2a2a;
    --dhl-btn-secondary-hover: #303030;
    --dhl-btn-secondary-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset, 0 1px 0 0 rgb(255 255 255 / 0.06) inset;

    --dhl-badge-success-bg: rgb(41 132 90 / 0.25);
    --dhl-badge-success-text: #6fdfa2;
    --dhl-badge-warning-bg: rgb(255 184 0 / 0.18);
    --dhl-badge-warning-text: #ffd55a;
    --dhl-badge-danger-bg: rgb(199 10 36 / 0.25);
    --dhl-badge-danger-text: #ff9a9a;
    --dhl-badge-info-bg: rgb(0 148 213 / 0.2);
    --dhl-badge-info-text: #7ccbf5;
    --dhl-badge-neutral-bg: rgb(255 255 255 / 0.1);
    --dhl-badge-neutral-text: #e3e3e3;
}

html:root .fi-body {
    background-color: var(--dhl-canvas);
    color: var(--dhl-ink);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

html:root .fi-main {
    padding-top: 0.5rem;
}

/* Top bar */

html:root .fi-topbar > nav,
html:root .fi-sidebar-header {
    background-color: var(--dhl-topbar);
    box-shadow: none;
}

html:root .fi-topbar > nav {
    color: #fff;
}

html:root .fi-topbar .fi-icon-btn,
html:root .fi-sidebar-header .fi-icon-btn {
    color: rgb(255 255 255 / 0.8);
}

html:root .fi-topbar .fi-icon-btn:hover,
html:root .fi-sidebar-header .fi-icon-btn:hover {
    color: #fff;
    background-color: rgb(255 255 255 / 0.1);
}

html:root .fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.1);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15);
}

html:root .fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.5) !important;
}

html:root .fi-topbar .fi-global-search-field input {
    color: #fff;
}

html:root .fi-topbar .fi-global-search-field input::placeholder {
    color: rgb(255 255 255 / 0.5);
}

html:root .fi-topbar .fi-global-search-field .fi-input-wrp-prefix svg {
    color: rgb(255 255 255 / 0.6);
}

html:root .fi-topbar .fi-user-avatar {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}

html:root .fi-topbar .fi-logo,
html:root .fi-sidebar-header .fi-logo {
    color: #fff;
}

/* Sidebar */

html:root .fi-sidebar,
html:root .fi-sidebar-nav {
    background-color: var(--dhl-sidebar);
    box-shadow: none;
}

html:root .fi-sidebar-nav {
    row-gap: 1rem;
    padding: 1rem 0.75rem;
}

html:root .fi-sidebar-nav-groups {
    row-gap: 1rem;
}

html:root .fi-sidebar-group-button {
    padding: 0.25rem 0.625rem;
}

html:root .fi-sidebar-group-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--dhl-group-label);
}

html:root .fi-sidebar-group-items {
    row-gap: 0.25rem;
}

html:root .fi-sidebar-item-button {
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
}

html:root .fi-sidebar-item-button:hover,
html:root .fi-sidebar-item-button:focus-visible {
    background-color: var(--dhl-nav-hover);
}

html:root .fi-sidebar-item-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.42857;
    color: var(--dhl-ink);
}

html:root .fi-sidebar-item-icon {
    color: var(--dhl-icon);
}

html:root .fi-sidebar-item-active > .fi-sidebar-item-button,
html:root .fi-sidebar-item-active > .fi-sidebar-item-button:hover {
    background-color: var(--dhl-nav-active);
}

html:root .fi-sidebar-item-active .fi-sidebar-item-label,
html:root .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--dhl-ink-strong);
}

html:root .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-weight: 500;
    color: var(--dhl-ink-subdued);
}

/* Page header */

html:root .fi-header-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--dhl-ink);
}

html:root .fi-header-subheading {
    font-size: 13px;
    color: var(--dhl-ink-subdued);
}

/* Cards: sections, tables, widgets */

html:root .fi-section:not(.fi-aside),
html:root .fi-section.fi-aside > .fi-section-content-ctn,
html:root .fi-ta-ctn,
html:root .fi-wi-stats-overview-stat,
html:root .fi-fo-repeater-item,
html:root .fi-fo-tabs,
html:root .fi-in-tabs {
    border-radius: 0.75rem;
    background-color: var(--dhl-surface);
    box-shadow: var(--dhl-card-shadow);
}

html:root .fi-section,
html:root .fi-ta-ctn {
    font-size: 14px;
    line-height: 20px;
    color: var(--dhl-ink);
}

html:root .fi-ta-ctn {
    overflow: hidden;
}

html:root .fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dhl-ink);
}

html:root .fi-section-header-description {
    font-size: 13px;
    color: var(--dhl-ink-subdued);
}

html:root .fi-section:not(.fi-aside) > .fi-section-header {
    padding-bottom: 0;
}

html:root .fi-section:not(.fi-aside) > .fi-section-content-ctn {
    border-top-width: 0;
}

/* Form fields */

html:root .fi-fo-field-wrp-label span {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.42857;
    color: var(--dhl-ink);
}

html:root .fi-fo-field-wrp-helper-text,
html:root .fi-fo-field-wrp-hint {
    color: var(--dhl-ink-subdued);
}

html:root .fi-input-wrp {
    border-radius: 0.5rem;
}

html:root .fi-input-wrp:not(.fi-invalid) {
    box-shadow: 0 0 0 1px var(--dhl-input-border);
}

html:root .fi-input-wrp:not(.fi-invalid):focus-within {
    box-shadow: 0 0 0 2px var(--dhl-focus) !important;
}

/* Buttons: dark, softly bevelled primary like Polaris (light in dark mode) */

html:root .fi-btn {
    border-radius: 0.5rem;
    font-size: 13px;
    font-weight: 600;
}

html:root .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background-color: var(--dhl-btn-primary);
    color: var(--dhl-btn-primary-text);
    box-shadow: var(--dhl-btn-primary-shadow);
}

html:root .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background-color: var(--dhl-btn-primary-hover);
}

html:root .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-label,
html:root .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-icon {
    color: var(--dhl-btn-primary-text);
}

html:root .fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    background-color: var(--dhl-btn-secondary);
    color: var(--dhl-ink);
    box-shadow: var(--dhl-btn-secondary-shadow);
}

html:root .fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background-color: var(--dhl-btn-secondary-hover);
}

html:root .fi-btn.fi-color-gray:not(.fi-btn-outlined) .fi-btn-label,
html:root .fi-btn.fi-color-gray:not(.fi-btn-outlined) .fi-btn-icon {
    color: var(--dhl-ink);
}

/* Tables */

html:root .fi-ta-header-cell {
    background-color: var(--dhl-surface-subdued);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

html:root .fi-ta-header-cell,
html:root .fi-ta-header-cell span,
html:root .fi-ta-header-cell button {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dhl-ink-subdued);
}

html:root .fi-ta-text-item-label {
    font-size: 14px;
}

html:root .fi-ta-row {
    transition: background-color 150ms ease;
}

html:root .fi-ta-row:hover {
    background-color: var(--dhl-surface-subdued);
}

/* Badges: soft Polaris-style pills */

html:root .fi-badge {
    border-radius: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: none;
}

html:root .fi-badge span,
html:root .fi-badge .fi-badge-icon {
    color: inherit;
}

html:root .fi-badge.fi-color-success {
    background-color: var(--dhl-badge-success-bg);
    color: var(--dhl-badge-success-text);
}

html:root .fi-badge.fi-color-warning {
    background-color: var(--dhl-badge-warning-bg);
    color: var(--dhl-badge-warning-text);
}

html:root .fi-badge.fi-color-danger {
    background-color: var(--dhl-badge-danger-bg);
    color: var(--dhl-badge-danger-text);
}

html:root .fi-badge.fi-color-info {
    background-color: var(--dhl-badge-info-bg);
    color: var(--dhl-badge-info-text);
}

html:root .fi-badge.fi-color-gray,
html:root .fi-badge.fi-color-primary {
    background-color: var(--dhl-badge-neutral-bg);
    color: var(--dhl-badge-neutral-text);
}

/* Stats */

html:root .fi-wi-stats-overview-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dhl-ink-subdued);
}

html:root .fi-wi-stats-overview-stat-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--dhl-ink);
}

/* Auth screens */

html:root .fi-simple-layout {
    background-color: var(--dhl-canvas);
}

html:root .fi-simple-main {
    border-radius: 1rem;
    background-color: var(--dhl-surface);
    box-shadow: var(--dhl-card-shadow);
}

html:root .fi-simple-header-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--dhl-ink);
}

html:root .fi-simple-main .fi-logo {
    color: var(--dhl-ink);
}

/* Brand mark */

.dhl-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.dhl-brand-mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #36fba1 0%, #00a47c 100%);
    color: #0a2e22;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}