/* ==========================================================================
   Outlook / Fluent look (Phase 2v) — tokens + chrome for the «Προεπιλογή»
   and «Satin» themes. Split out of theme.css in Phase 2bw.2 so the «Tabler»
   theme can run on Tabler's own defaults: layouts load this file for every
   theme except `tabler`, right after tabler.min.css and before theme.css
   (satin's overrides in theme.css win on source order, as before).
   PDF / email templates are self-contained and are NOT affected.
   ========================================================================== */

:root {
    /* ---- Brand colours ------------------------------------------------- */
    --tblr-primary: #2564cf;
    --tblr-primary-rgb: 37, 100, 207;
    --tblr-primary-fg: #ffffff;

    --tblr-success: #107c41;
    --tblr-success-rgb: 16, 124, 65;
    --tblr-danger: #d13438;
    --tblr-danger-rgb: 209, 52, 56;
    --tblr-warning: #ca5010;
    --tblr-warning-rgb: 202, 80, 16;
}

/* Light surfaces / text (Phase 2bw.3: scoped, so dark mode gets its own below). */
:root:not([data-bs-theme="dark"]) {
    --tblr-link-color: #2564cf;
    --tblr-link-color-rgb: 37, 100, 207;
    --tblr-link-hover-color: #1b4fa8;

    /* ---- Surfaces & lines -------------------------------------------------- */
    --tblr-body-bg: #f3f3f3;
    --tblr-bg-surface: #ffffff;
    --tblr-bg-surface-primary: #ffffff;
    --tblr-bg-surface-secondary: #faf9f8;
    --tblr-bg-surface-tertiary: #f3f2f1;

    --tblr-border-color: #e1dfdd;
    --tblr-border-color-translucent: rgba(96, 94, 92, .18);

    --tblr-body-color: #242424;
    --tblr-secondary: #605e5c;
    --tblr-muted: #605e5c;
    --tblr-secondary-color: #605e5c;

    /* Fluent-only chrome colours (sidebar, labels) — the dark block restates them. */
    --app-nav-bg: #f3f2f1;
    --app-nav-color: #242424;
    --app-nav-hover: #e8e6e4;
    --app-nav-active: #e1eafb;
    --app-nav-active-color: var(--tblr-primary);
    --app-section-label: #424242;
}

/* Dark (Phase 2bw.3) — Outlook-dark neutrals on top of Tabler's own dark
   tokens (Tabler's [data-bs-theme=dark] block supplies everything not here). */
:root[data-bs-theme="dark"] {
    --tblr-link-color: #6ea6f5;
    --tblr-link-color-rgb: 110, 166, 245;
    --tblr-link-hover-color: #9cc2f8;

    --tblr-body-bg: #1b1b1b;
    --tblr-body-bg-rgb: 27, 27, 27;
    --tblr-bg-surface: #262626;
    --tblr-bg-surface-primary: #262626;
    --tblr-bg-surface-secondary: #2d2d2d;
    --tblr-bg-surface-tertiary: #333333;
    --tblr-bg-forms: #1f1f1f;

    --tblr-border-color: #3d3d3d;
    --tblr-border-color-translucent: rgba(255, 255, 255, .12);

    --tblr-body-color: #e6e6e6;
    --tblr-body-color-rgb: 230, 230, 230;
    --tblr-secondary: #a8a8a8;
    --tblr-muted: #a8a8a8;
    --tblr-secondary-color: #a8a8a8;

    --app-nav-bg: #202020;
    --app-nav-color: #e6e6e6;
    --app-nav-hover: #2f2f2f;
    --app-nav-active: #1d3557;
    --app-nav-active-color: #9cc2f8;
    --app-section-label: #c8c8c8;

    --app-elevation: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
    --app-elevation-overlay: 0 4px 12px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .55);
}

:root {
    /* ---- Corner radius (Phase 2ab): softer, deeper boxes ------------------- */
    --tblr-border-radius: 6px;        /* inputs, selects, small controls */
    --tblr-border-radius-sm: 6px;
    --tblr-border-radius-md: 8px;
    --tblr-border-radius-lg: 10px;    /* cards / panels */
    --tblr-border-radius-xl: 14px;

    /* ---- Elevation (Phase 2ab) — one token, reused by every box ----------- */
    --app-elevation: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06);
    --app-elevation-overlay: 0 4px 12px rgba(0, 0, 0, .10), 0 14px 36px rgba(0, 0, 0, .14);

    /* ---- Typography: system Segoe stack, 14px, dense --------------------- */
    --tblr-font-sans-serif: "Segoe UI Variable", "Segoe UI", -apple-system,
        BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-body-font-size: 0.875rem;
    --tblr-body-line-height: 1.35;

    /* Fluent tops out at semibold — no 700/800 anywhere. */
    --tblr-font-weight-bold: 600;
    --tblr-font-weight-bolder: 600;
}

/* Cap heading / emphasis weight at semibold. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title, .navbar-brand,
b, strong, .fw-bold, .fw-bolder {
    font-weight: 600;
}

/* ==========================================================================
   App chrome — ribbon, light sidebar, topbar (Phase 2v.2)
   ========================================================================== */

/* Microsoft-365-style ribbon strip, fixed above everything. */
.app-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: var(--tblr-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
/* Desktop: fixed ribbon on top, everything else tucked below it. */
@media (min-width: 992px) {
    body {
        padding-top: 34px;
    }
    /* Beat Tabler's own `.navbar-vertical.navbar-expand-lg { top: 0 }`. */
    .navbar-vertical.navbar-expand-lg {
        top: 34px;
    }
    /* The ribbon already carries the app name — drop the redundant
       sidebar brand so the nav starts flush under the ribbon. */
    .navbar-vertical .navbar-brand {
        display: none;
    }
}
/* Mobile already stacks two Tabler bars — the ribbon would be a third. */
@media (max-width: 991.98px) {
    .app-ribbon {
        display: none;
    }
}
@media print {
    body { padding-top: 0; }
    .app-ribbon { display: none; }
    .navbar-vertical.navbar-expand-lg { top: 0; }
}

/* Light sidebar with a blue left-accent active state. */
.navbar-vertical {
    --tblr-navbar-bg: var(--app-nav-bg);
    --tblr-navbar-border-color: var(--tblr-border-color);
    --tblr-navbar-color: var(--app-nav-color);
    --tblr-navbar-hover-color: var(--app-nav-color);
    --tblr-navbar-active-color: var(--app-nav-active-color);
    --tblr-navbar-brand-color: var(--tblr-primary);
    --tblr-navbar-brand-hover-color: var(--tblr-primary);
}
.navbar-vertical .navbar-nav .nav-link {
    border-radius: 4px;
    margin-bottom: 1px;
    font-weight: 400;
}
.navbar-vertical .navbar-nav .nav-link:hover {
    background: var(--app-nav-hover);
}
.navbar-vertical .navbar-nav .nav-item.active .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
    background: var(--app-nav-active);
    font-weight: 600;
}
.navbar-vertical .navbar-nav .nav-item.active .nav-link .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon {
    color: var(--app-nav-active-color);
}

/* Slightly larger sidebar type — desktop only. Below lg the vertical nav
   collapses into the mobile menu, which keeps the default size. */
@media (min-width: 992px) {
    .navbar-vertical .navbar-nav .nav-link {
        font-size: .9375rem;
    }
}

/* Topbar pinned just under the ribbon (desktop) so the page title stays put. */
@media (min-width: 992px) {
    :root {
        --app-topbar-top: 34px;
    }
}

/* Trim the dead space above the first nav item (the brand is hidden). */
@media (min-width: 992px) {
    .navbar-vertical .navbar-nav.pt-lg-3 {
        padding-top: .5rem;
    }
}

/* ==========================================================================
   Surfaces, buttons, badges (Phase 2v.3)
   ========================================================================== */

/* Cards / panels / KPI cards / the "Σήμερα" block / form + list wrappers —
   every .card gets the same rounded, elevated Fluent box (Phase 2ab). */
.card {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--tblr-border-color);
    box-shadow: var(--app-elevation);
}
.btn {
    box-shadow: none;
    border-radius: 8px;
}
/* Primary action buttons carry a small tinted shadow of their own. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    box-shadow: 0 2px 6px rgba(var(--tblr-primary-rgb), .3);
}
/* Overlays sit above everything — a deeper shadow. */
.dropdown-menu,
.popover {
    box-shadow: var(--app-elevation);
    border: 1px solid var(--tblr-border-color);
}
.modal-content {
    box-shadow: var(--app-elevation-overlay);
    border: 1px solid var(--tblr-border-color);
}