/*
 * Tradie Dashboard layout.
 *
 * Two tabbed sections (Overview / Quick Order) over the Clicksteel brand
 * palette. Trade Hub and Quick Order templates handle their own internals;
 * this file is only responsible for the page chrome and tab UI.
 *
 * Brand:
 *   Red    #ff0c3a   Hover red   #e0002e
 *   Navy   #011f30   Secondary   #003857
 *   Display: Bebas Neue   Body: Montserrat
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap');

.ecml-dashboard {
    --dash-ink:         #011f30;
    --dash-ink-muted:   #5b6772;
    --dash-line:        #e3ddc9;
    --dash-accent:      #ff0c3a;
    --dash-accent-deep: #e0002e;
    --dash-surface:     #ffffff;
    --dash-font-display: 'Bebas Neue', Impact, "Arial Narrow", sans-serif;
    --dash-font-body:    'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px) clamp(60px, 8vw, 96px);
    color: var(--dash-ink);
    font-family: var(--dash-font-body);
    font-size: 15px;
    line-height: 1.55;
    background: var(--dash-surface);
}

.ecml-dashboard *, .ecml-dashboard *::before, .ecml-dashboard *::after { box-sizing: border-box; }

/* Header --------------------------------------------------------------- */

.ecml-dashboard__header {
    margin-bottom: 18px;
}

.ecml-dashboard__eyebrow {
    margin: 0 0 4px;
    color: var(--dash-ink-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ecml-dashboard__title {
    margin: 0;
    font-family: var(--dash-font-display);
    font-size: clamp(44px, 7vw, 68px);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--dash-ink);
}

/* Tabs ----------------------------------------------------------------- */

.ecml-dashboard__tabs {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-bottom: 28px;
    padding: 0;
    border-bottom: 2px solid var(--dash-line);
}

.ecml-dashboard__tab {
    flex: 0 0 auto;
    position: relative;
    padding: 14px 22px 12px;
    margin-bottom: -2px;
    color: var(--dash-ink-muted);
    font-family: var(--dash-font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.ecml-dashboard__tab:hover,
.ecml-dashboard__tab:focus-visible {
    color: var(--dash-ink);
    outline: none;
}

.ecml-dashboard__tab.is-active {
    color: var(--dash-ink);
    border-bottom-color: var(--dash-accent);
}

/* Panes ---------------------------------------------------------------- */

.ecml-dashboard__pane {
    padding: 4px 0 0;
}

/* Gate (non-trade users) ----------------------------------------------- */

.ecml-dashboard__gate {
    max-width: 560px;
    margin: 40px auto;
    padding: 36px 32px;
    text-align: center;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(1, 31, 48, 0.08);
}

.ecml-dashboard__gate-title {
    margin: 0 0 10px;
    font-family: var(--dash-font-display);
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--dash-ink);
}

.ecml-dashboard__gate-copy {
    margin: 0 0 18px;
    color: var(--dash-ink-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ecml-dashboard__gate-cta {
    display: inline-block;
    padding: 12px 22px;
    color: #ffffff;
    font-family: var(--dash-font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--dash-accent);
    border-radius: 6px;
    transition: background-color 120ms ease;
}

.ecml-dashboard__gate-cta:hover,
.ecml-dashboard__gate-cta:focus {
    background: var(--dash-accent-deep);
    color: #ffffff;
    text-decoration: none;
}

.ecml-dashboard__gate-fineprint {
    margin: 18px 0 0;
    color: var(--dash-ink-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* Embedded children: keep our chrome but neutralise their max-width so
   they sit inside the dashboard container without double-padding. */

.ecml-dashboard__pane .ecml-trade-hub,
.ecml-dashboard__pane .ecml-qo {
    margin: 0;
    padding: 0;
    max-width: none;
    background: transparent;
}

/* Overview (Trade Hub) light polish. Scoped to the dashboard pane only so the
   standalone Trade Hub My Account page keeps its existing styling. Cards each
   section, brands the headings, and tightens the vertical rhythm. */

.ecml-dashboard__pane .ecml-trade-hub__title {
    display: none; /* redundant with the dashboard "Tradie Hub" eyebrow */
}

.ecml-dashboard__pane .ecml-trade-hub__intro {
    margin: 0 0 24px;
    max-width: 62ch;
    color: var(--dash-ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ecml-dashboard__pane .ecml-trade-hub__section {
    margin: 0 0 18px;
    padding: 22px 24px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(1, 31, 48, 0.05);
}

.ecml-dashboard__pane .ecml-trade-hub__section h3 {
    display: inline-block;
    margin: 0 0 4px;
    padding-bottom: 7px;
    color: var(--dash-ink);
    font-family: var(--dash-font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--dash-accent);
}

.ecml-dashboard__pane .ecml-trade-hub__hint {
    margin: 8px 0 16px;
    color: var(--dash-ink-muted);
    font-size: 14px;
    line-height: 1.55;
}