/* ===========================================================================
   Movssy admin — design system
   ---------------------------------------------------------------------------
   Loaded AFTER tailwind.css so it overrides the stock template.

   Everything is a token first and a component second: changing a radius or an
   accent here changes every screen, instead of hunting through markup.

   Font files go in assets/fonts/lufga/. Until they are there the stack falls
   back to a geometric sans so layout and spacing stay correct.
   =========================================================================== */

/* ---------- Lufga -------------------------------------------------------- */
/*
 * Only the Regular weight is installed. Each @font-face below therefore points
 * at the same file, with font-weight set so the browser treats it as that
 * weight rather than synthesising a fake bold — synthetic bold smears the
 * letterforms and is the main thing that makes a typeface look cheap on screen.
 *
 * Hierarchy is carried by size, colour and spacing instead of weight, which is
 * also how the reference designs read: the large headings there are light, not
 * bold.
 *
 * When the other weights are licensed, replace the src of each block with its
 * own file (Light 300, Medium 500, SemiBold 600, Bold 700) and nothing else
 * needs to change.
 */

@font-face {
    font-family: 'Lufga';
    font-weight: 300 700;          /* variable range: one file serves all */
    font-style: normal;
    font-display: swap;
    src: url('../fonts/lufga/Lufga-Regular.woff2') format('woff2'),
         url('../fonts/lufga/Lufga-Regular.otf') format('opentype');
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
    /* Surfaces. The page is a soft neutral gradient, cards sit on top in
       near-white — the contrast between them is what gives the depth in the
       reference designs, not borders. */
    --mv-page-a:     #F4F3F6;
    --mv-page-b:     #EDEBF0;
    --mv-surface:    #FFFFFF;
    --mv-surface-2:  #FAFAFC;
    --mv-ink-surface:#0C0C0E;   /* selected / emphasis cards */

    /* Ink */
    --mv-ink:        #0B0B0C;
    --mv-ink-soft:   #40414A;
    --mv-muted:      #8A8A94;
    --mv-faint:      #B4B4BE;
    --mv-on-ink:     #FFFFFF;

    /* Lines. Deliberately very light: the design separates with space, not rules. */
    --mv-line:       #ECEBF0;
    --mv-line-soft:  #F3F2F6;

    /* Brand */
    --mv-lavender:   #DAD5E3;
    --mv-accent:     #86FF7B;
    --mv-accent-ink: #0B3D06;
    --mv-danger:     #FF6262;
    --mv-danger-ink: #5C0F0F;
    --mv-warn:       #FFC978;
    --mv-warn-ink:   #4A3000;

    /* Radii */
    --mv-r-sm:  12px;
    --mv-r-md:  18px;
    --mv-r-lg:  24px;
    --mv-r-xl:  32px;
    --mv-r-pill: 999px;

    /* Shadows: wide and very soft, never dark. */
    --mv-shadow-sm: 0 1px 2px rgba(16, 16, 24, .04), 0 4px 12px rgba(16, 16, 24, .04);
    --mv-shadow-md: 0 2px 4px rgba(16, 16, 24, .04), 0 12px 32px rgba(16, 16, 24, .07);
    --mv-shadow-lg: 0 4px 8px rgba(16, 16, 24, .05), 0 24px 56px rgba(16, 16, 24, .10);

    /* Type scale */
    --mv-text-xs:  11px;
    --mv-text-sm:  13px;
    --mv-text-md:  14px;
    --mv-text-lg:  16px;
    --mv-h3:       20px;
    --mv-h2:       28px;
    --mv-h1:       36px;
    --mv-display:  46px;

    --mv-font: 'Lufga', 'Plus Jakarta Sans', 'Outfit', ui-sans-serif,
               system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --mv-gap:  16px;
    --mv-pad:  24px;
}

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

body.mv,
.mv-scope {
    font-family: var(--mv-font);
    color: var(--mv-ink);
    background: linear-gradient(160deg, var(--mv-page-a) 0%, var(--mv-page-b) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

.mv-scope h1, .mv-scope h2, .mv-scope h3,
.mv-scope h4, .mv-scope h5, .mv-scope h6 { font-family: var(--mv-font); }

/* Page heading, as in the references: large, light weight, tight tracking. */
.mv-title {
    font-size: var(--mv-h1);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--mv-ink);
}
.mv-subtitle { font-size: var(--mv-text-md); color: var(--mv-muted); margin-top: 4px; }

/* Small uppercase label above a value. The spaced tracking is what makes it
   read as a label rather than as content. */
.mv-label {
    font-size: var(--mv-text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mv-faint);
}

.mv-value     { font-size: var(--mv-h3); font-weight: 500; letter-spacing: -0.02em; }
.mv-value-lg  { font-size: var(--mv-h2); font-weight: 500; letter-spacing: -0.03em; }
.mv-value-xl  { font-size: var(--mv-display); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.mv-muted     { color: var(--mv-muted); }
.mv-faint     { color: var(--mv-faint); }
.mv-num       { font-variant-numeric: tabular-nums; }

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

.mv-card {
    background: var(--mv-surface);
    border-radius: var(--mv-r-lg);
    box-shadow: var(--mv-shadow-sm);
    padding: var(--mv-pad);
    border: 1px solid rgba(255, 255, 255, .6);
}
.mv-card-flush { padding: 0; overflow: hidden; }
.mv-card-hover { transition: box-shadow .18s ease, transform .18s ease; }
.mv-card-hover:hover { box-shadow: var(--mv-shadow-md); transform: translateY(-1px); }

/* The selected / emphasis card: black, as in the flight list. */
.mv-card-ink {
    background: var(--mv-ink-surface);
    color: var(--mv-on-ink);
    border-color: transparent;
    box-shadow: var(--mv-shadow-md);
}
.mv-card-ink .mv-label { color: rgba(255,255,255,.45); }
.mv-card-ink .mv-muted { color: rgba(255,255,255,.6); }

/* Stat tile */
.mv-stat { display: flex; flex-direction: column; gap: 6px; }
.mv-stat .mv-value { line-height: 1.1; }
.mv-stat-note { font-size: var(--mv-text-xs); color: var(--mv-faint); }

/* ---------- Pills and tabs ---------------------------------------------- */

.mv-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--mv-r-pill);
    background: var(--mv-surface);
    color: var(--mv-ink-soft);
    font-size: var(--mv-text-md);
    font-weight: 500;
    box-shadow: var(--mv-shadow-sm);
    border: 1px solid rgba(255,255,255,.7);
    transition: background .15s ease, color .15s ease;
}
.mv-tab:hover { color: var(--mv-ink); }
.mv-tab.is-active { background: var(--mv-ink-surface); color: var(--mv-on-ink); }

/* ---------- Badges ------------------------------------------------------- */

.mv-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: var(--mv-r-pill);
    font-size: var(--mv-text-xs);
    font-weight: 600;
    letter-spacing: .02em;
}
.mv-badge-ok     { background: var(--mv-accent);  color: var(--mv-accent-ink); }
.mv-badge-bad    { background: var(--mv-danger);  color: #fff; }
.mv-badge-warn   { background: var(--mv-warn);    color: var(--mv-warn-ink); }
.mv-badge-ink    { background: var(--mv-ink-surface); color: var(--mv-on-ink); }
.mv-badge-quiet  { background: var(--mv-line-soft); color: var(--mv-muted); }
.mv-badge-lav    { background: var(--mv-lavender); color: var(--mv-ink); }

/* A dot that carries the state without a whole pill. */
.mv-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mv-dot-ok  { background: var(--mv-accent); }
.mv-dot-bad { background: var(--mv-danger); }

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

.mv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px;
    border-radius: var(--mv-r-pill);
    font-size: var(--mv-text-md);
    font-weight: 500;
    border: 1px solid var(--mv-line);
    background: var(--mv-surface);
    color: var(--mv-ink);
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.mv-btn:hover { box-shadow: var(--mv-shadow-sm); }
.mv-btn-ink    { background: var(--mv-ink-surface); color: var(--mv-on-ink); border-color: transparent; }
.mv-btn-ink:hover { opacity: .9; }
.mv-btn-accent { background: var(--mv-accent); color: var(--mv-accent-ink); border-color: transparent; font-weight: 600; }
.mv-btn-danger { background: var(--mv-danger); color: #fff; border-color: transparent; }
.mv-btn-ghost  { background: transparent; border-color: transparent; color: var(--mv-muted); }
.mv-btn-ghost:hover { color: var(--mv-ink); box-shadow: none; }
.mv-btn-sm { padding: 7px 14px; font-size: var(--mv-text-sm); }

/* Round icon button, as in the top-right of the references. */
.mv-icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--mv-surface);
    box-shadow: var(--mv-shadow-sm);
    color: var(--mv-ink-soft);
    border: 1px solid rgba(255,255,255,.7);
}
.mv-icon-btn:hover { color: var(--mv-ink); }

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

.mv-field { display: block; }
.mv-field > .mv-label { margin-bottom: 7px; display: block; }

.mv-input, .mv-select, .mv-textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--mv-r-md);
    border: 1px solid var(--mv-line);
    background: var(--mv-surface);
    font-family: var(--mv-font);
    font-size: var(--mv-text-md);
    color: var(--mv-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mv-input::placeholder, .mv-textarea::placeholder { color: var(--mv-faint); }
.mv-input:focus, .mv-select:focus, .mv-textarea:focus {
    outline: none;
    border-color: var(--mv-ink);
    box-shadow: 0 0 0 3px rgba(12,12,14,.06);
}
.mv-input-sm { padding: 8px 12px; font-size: var(--mv-text-sm); border-radius: var(--mv-r-sm); }
.mv-input-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tables ------------------------------------------------------- */
/* Rows separated by space and a hairline, never by heavy borders. */

.mv-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.mv-table thead th {
    font-size: var(--mv-text-xs);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mv-faint);
    text-align: left;
    padding: 14px 18px;
    background: var(--mv-surface-2);
    border-bottom: 1px solid var(--mv-line);
    white-space: nowrap;
}
.mv-table tbody td {
    padding: 16px 18px;
    font-size: var(--mv-text-md);
    border-bottom: 1px solid var(--mv-line-soft);
    vertical-align: middle;
}
.mv-table tbody tr:last-child td { border-bottom: 0; }
.mv-table tbody tr { transition: background .12s ease; }
.mv-table tbody tr:hover { background: var(--mv-surface-2); }
.mv-table .mv-right { text-align: right; }
.mv-table .mv-center { text-align: center; }
.mv-table tfoot td {
    padding: 14px 18px;
    font-size: var(--mv-text-md);
    border-top: 1px solid var(--mv-line);
}

.mv-empty { padding: 56px 24px; text-align: center; color: var(--mv-faint); }

/* ---------- Layout helpers ---------------------------------------------- */

.mv-page   { padding: 28px 28px 56px; }
.mv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.mv-row    { display: flex; align-items: center; gap: var(--mv-gap); flex-wrap: wrap; }
.mv-grid   { display: grid; gap: var(--mv-gap); }
.mv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mv-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mv-mt   { margin-top: var(--mv-gap); }
.mv-mt-lg{ margin-top: 28px; }

@media (max-width: 1100px) {
    .mv-grid-5, .mv-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .mv-page { padding: 18px 16px 40px; }
    .mv-title { font-size: var(--mv-h2); }
    .mv-grid-2, .mv-grid-3, .mv-grid-4, .mv-grid-5, .mv-grid-6 { grid-template-columns: 1fr; }
}

/* ---------- Alerts ------------------------------------------------------- */

.mv-alert {
    border-radius: var(--mv-r-md);
    padding: 14px 18px;
    font-size: var(--mv-text-md);
    display: flex; gap: 10px; align-items: flex-start;
}
.mv-alert-ok  { background: rgba(134,255,123,.18); color: #164310; }
.mv-alert-bad { background: rgba(255,98,98,.14);   color: #6B1414; }

/* ---------- Single-weight adjustments ------------------------------------
   Only Lufga Regular is licensed, so nothing asks for a weight the font does
   not have. Emphasis comes from size and colour. Remove this block once the
   full family is installed. */
.mv-scope, .mv-scope * { -webkit-font-smoothing: antialiased; }
.mv-scope strong, .mv-scope b, .mv-scope th { font-weight: 500; }
.sidebar-wrapper .sidebar-menu li.active > a { font-weight: 400 !important; }
/* ===========================================================================
   The date picker — assets/js/movssy-datepicker.js
   ---------------------------------------------------------------------------
   Replaces the browser's own control everywhere in the admin. Chrome draws a
   spinner above a grid, Firefox and Safari draw something else again; this is
   one calendar that matches the rest of the panel in all of them.
   =========================================================================== */

.mp { position: relative; display: inline-block; }

.mp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 172px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #E7E4EE;
    border-radius: 12px;
    background: #FFFFFF;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 13.5px;
    color: #14182A;
    cursor: pointer;
    text-align: left;
}
.mp-btn:hover { border-color: #CFCBDA; }
.mp-btn:focus-visible { border-color: #2575FC; box-shadow: 0 0 0 3px rgba(37, 117, 252, .16); outline: 0; }
.mp-btn.is-empty { color: #AEB3C2; }

.mp-btn > i:first-child { font-size: 16px; color: #9AA0B2; }
.mp-btn > span { flex: 1; }

.mp-clear {
    font-size: 15px;
    color: #9AA0B2;
    border-radius: 999px;
    padding: 2px;
}
.mp-clear:hover { color: #FF6262; background: #FFF0F0; }

/* ── The popover ─────────────────────────────────────────────────────── */

.mp-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 120;
    width: 282px;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    border-radius: 16px;
    box-shadow: 0 24px 48px -24px rgba(20, 24, 42, .45);
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
}
.mp-pop[hidden] { display: none; }
.mp-pop.is-up { top: auto; bottom: calc(100% + 6px); }

.mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mp-head b { font-size: 13.5px; font-weight: 600; color: #14182A; }

.mp-nav {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6B7183;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mp-nav:hover { background: #F4F5FA; color: #14182A; }

.mp-dow, .mp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.mp-dow span {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9AA0B2;
    padding-bottom: 5px;
}

.mp-grid { gap: 2px; }

.mp-day {
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: #14182A;
    cursor: pointer;
}
.mp-day:hover { background: #F4F5FA; }
.mp-day.is-out { color: #C4C8D4; }
.mp-day.is-off { color: #DCDEE6; cursor: not-allowed; }
.mp-day.is-off:hover { background: transparent; }

/* Today is outlined, the chosen day is filled — so both can show at once
   without one hiding the other. */
.mp-day.is-today { box-shadow: inset 0 0 0 1px #2575FC; color: #2575FC; }
.mp-day.is-on { background: #2575FC; color: #FFFFFF; }
.mp-day.is-on:hover { background: #1A5ED8; }

.mp-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #F0EEF5;
}

.mp-text {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: #2575FC;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}
.mp-text:hover { background: #EEF4FF; }
.mp-text[data-clear] { color: #6B7183; }
.mp-text[data-clear]:hover { background: #F4F5FA; }