/*
 * Export Connect admin skin — aligns the Sylius admin UI with the public
 * shop's editorial charter (templates/shop/base.html.twig). Same palette,
 * same typography family, same shadow/radius vocabulary so the admin
 * cockpit and the marketing site feel like one product.
 *
 * Loaded via importmap('app') in templates/admin/base.html.twig.
 *
 * Strategy: variables first, then a thin layer of overrides on Sylius's
 * Tabler-based defaults. Sylius components keep working, just on a
 * different visual language.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
    /* Mirrored from templates/shop/base.html.twig so any future palette
       change in the shop ripples here too. */
    --ec-black: #1a1a1a;
    --ec-dark: #2d2d2d;
    --ec-text: #4a4a4a;
    --ec-muted: #888888;
    --ec-border: #e5e5e5;
    --ec-light: #f8f8f8;
    --ec-white: #ffffff;
    --ec-accent: #8b2635;
    --ec-accent-dark: #6d1e2a;
    --ec-gold: #b8956e;

    --ec-font-serif: 'Playfair Display', Georgia, serif;
    --ec-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --ec-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ec-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
    --ec-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);
    --ec-radius: 14px;
}

/* Page background — neutral light gray rather than the stock skyblue
   AssetMapper demo body color. */
body,
.page-wrapper,
.page-body,
.page {
    background-color: var(--ec-light) !important;
    font-family: var(--ec-font-sans);
}

/* Headings adopt the editorial serif used on the shop so the typographic
   identity carries into the admin. Sylius widget labels stay on the sans
   stack via the body inheritance. */
h1, h2, h3, .page-title, .card-title {
    font-family: var(--ec-font-serif);
    font-weight: 500;
    color: var(--ec-black);
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    font-family: var(--ec-font-sans);
}

/* Generic card refresh: rounder corners, layered shadow instead of the
   flat 1px border. Sylius grids and forms use .card heavily — only the
   chrome changes. */
.card {
    border: 0 !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: var(--ec-shadow-subtle);
}

.card-header {
    border-bottom: 1px solid var(--ec-border);
    background: transparent;
}

/* Page header (h1 + subtitle blocks): tighter, more typographic. */
.page-header .page-title {
    font-weight: 500;
}

.page-header .page-subtitle,
.page-header .text-secondary {
    color: var(--ec-muted) !important;
}

/* Hero band utility — single source of truth for the editorial dark
   strip at the top of dashboards (Statistics, Dashboard). Same palette
   as the shop's CTA section so it reads as one product. */
.stats-card {
    background: var(--ec-white);
    border-radius: var(--ec-radius);
}

.stats-card-dark {
    background: var(--ec-black);
    border-radius: var(--ec-radius);
    color: var(--ec-white);
    box-shadow: var(--ec-shadow-medium);
}

.stats-card-dark a:not(.btn) {
    color: var(--ec-white);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.stats-eyebrow {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-family: var(--ec-font-sans);
    color: var(--ec-muted);
}

.stats-card-dark .stats-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.stats-title {
    font-family: var(--ec-font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ec-black);
    margin: 0.4rem 0 1rem;
    letter-spacing: -0.01em;
}

.stats-card-dark .stats-title {
    color: var(--ec-white);
}

.stats-metric {
    font-family: var(--ec-font-serif);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.1;
}

/* Buttons used inside the hero bands echo the shop's pill primary on
   black background. */
.btn-light.rounded-pill {
    background: var(--ec-white);
    color: var(--ec-black);
    border-color: var(--ec-white);
    font-weight: 500;
    font-family: var(--ec-font-sans);
}

/* Accent color on links and selected nav items — wine. */
.btn-primary {
    background: var(--ec-black);
    border-color: var(--ec-black);
}

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

.btn-outline-primary {
    color: var(--ec-black);
    border-color: var(--ec-border);
}

.btn-outline-primary:hover {
    background: var(--ec-black);
    border-color: var(--ec-black);
    color: var(--ec-white);
}

/* ------------------------------------------------------------------------
   Sidebar (navbar-vertical) — pulled in line with the wine/editorial
   charter. Sylius declares `data-bs-theme="dark"` so Bootstrap already
   handles dark text on the navbar; we just swap the chrome colors.
   ------------------------------------------------------------------------ */

.navbar.navbar-vertical {
    background-color: var(--ec-black) !important;
    border-right: 0 !important;
    box-shadow: var(--ec-shadow-soft);
}

.navbar.navbar-vertical .navbar-brand,
.navbar.navbar-vertical .navbar-brand a {
    font-family: var(--ec-font-serif);
    font-weight: 500;
    color: var(--ec-white) !important;
    letter-spacing: -0.01em;
}

/* Replace the stock Sylius logo image with a compact wordmark when the
   sidebar is in our admin. Keeps the existing image hidden so we don't
   touch the host template. */
.navbar.navbar-vertical .navbar-brand-image {
    display: none;
}

.navbar.navbar-vertical .navbar-brand::after {
    content: 'EC';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ec-white);
    color: var(--ec-black);
    border-radius: 8px;
    font-family: var(--ec-font-serif);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Nav links: soft white at rest, full white on hover, wine accent for
   the active route. Padding and radius give the items a "chip" feel. */
.navbar.navbar-vertical .nav-link {
    color: rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    margin: 2px 8px;
    padding: 0.55rem 0.75rem;
    font-family: var(--ec-font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar.navbar-vertical .nav-link:hover,
.navbar.navbar-vertical .nav-link:focus {
    color: var(--ec-white);
    background: rgba(255, 255, 255, 0.06);
}

.navbar.navbar-vertical .nav-link.active,
.navbar.navbar-vertical .nav-item.active > .nav-link {
    color: var(--ec-white);
    background: var(--ec-accent);
    font-weight: 500;
}

.navbar.navbar-vertical .nav-link-icon {
    opacity: 0.7;
}

.navbar.navbar-vertical .nav-link.active .nav-link-icon,
.navbar.navbar-vertical .nav-link:hover .nav-link-icon {
    opacity: 1;
}

/* Search input and version pill embedded in the sidebar. */
.navbar.navbar-vertical .form-control {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--ec-white);
}

.navbar.navbar-vertical .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Top "Hello sylius" user navbar — light surface, sit cleanly above the
   black sidebar without picking up the dark theme glow. */
.navbar.navbar-light,
.page > .navbar:not(.navbar-vertical) {
    background: var(--ec-white) !important;
    border-bottom: 1px solid var(--ec-border);
}

/* Accent badges (wine) for highlights without overriding all Bootstrap
   bg-* utilities Sylius relies on. */
.bg-accent,
.badge.bg-accent {
    background-color: var(--ec-accent) !important;
    color: var(--ec-white);
}

.text-accent {
    color: var(--ec-accent) !important;
}

/* ------------------------------------------------------------------------
   CRUD grid polish — applies to every Sylius admin index page (Countries,
   Tariff Rules, API Clients…). We don't touch the markup, just soften
   the chrome to match the wine charter.
   ------------------------------------------------------------------------ */

/* Page-header h1 in CRUD grids: bigger Playfair, no link underline. */
.page-header .page-title {
    font-family: var(--ec-font-serif);
    font-size: 1.6rem;
    font-weight: 500;
}

/* Filters card chevron + label */
.card-header .form-label,
.card-header .accordion-button {
    font-family: var(--ec-font-sans);
}

/* Grid tables: editorial headers + neutral row dividers. */
.card-table thead th,
.table thead th {
    font-family: var(--ec-font-sans);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ec-muted);
    border-bottom: 1px solid var(--ec-border);
    background: transparent;
}

.card-table tbody td,
.table tbody td {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--ec-text);
}

/* Status "Yes/No" pills replace Tabler's flat green/red. */
.badge.bg-success,
.bg-success.text-white {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--ec-black) !important;
    font-weight: 500;
}

.badge.bg-danger,
.bg-danger.text-white {
    background-color: var(--ec-accent) !important;
    color: #fff !important;
}

/* Row action buttons (eye / edit / delete) become slim outlined squares. */
.card-table .btn,
.btn-group-sm > .btn {
    border-radius: 8px !important;
}

/* Pagination — minimal, no boxy borders. */
.pagination .page-item .page-link {
    color: var(--ec-muted);
    border: 0;
    background: transparent;
    border-radius: 8px;
    margin: 0 2px;
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background: var(--ec-black);
    color: #fff;
}

/* "Show 10" dropdown */
.dataTables_length .form-select,
select.form-select-sm {
    border-color: var(--ec-border);
    border-radius: 8px;
}

/* Breadcrumb: smaller and quieter. */
.breadcrumb {
    font-family: var(--ec-font-sans);
    font-size: 0.8rem;
    color: var(--ec-muted);
}

.breadcrumb a {
    color: var(--ec-muted);
}

.breadcrumb-item.active {
    color: var(--ec-text);
}

/* "Create" call-to-action at top right of grids. */
.page-header .btn-primary,
.page-header .btn-secondary {
    border-radius: 100px;
    padding: 0.45rem 1.2rem;
    background: var(--ec-black);
    border-color: var(--ec-black);
    color: #fff;
    font-family: var(--ec-font-sans);
    font-weight: 500;
}

.page-header .btn-primary:hover {
    background: var(--ec-dark);
}