/* =============================================================================
   theme.css — shared design-system layer (loaded LAST, after Site.css).
   Consistent, professional look across all WebPage views via shared chrome
   (typography, palette, navbar, buttons, cards, tables, forms, footer).
   Additive + low-risk: does NOT change navbar height / fixed-top offset /
   page-specific layout — only visual polish that cascades everywhere.
   Maritime palette (Antiparos Ferries / Δήμος Κισσάμου).
   ============================================================================= */

:root {
    /* ---- Brand palette (maritime) ---- */
    --c-navy: #0b3a5b;          /* deep sea — headings, navbar text, footer */
    --c-primary: #0a6cff;       /* action blue (close to legacy #006FFF) */
    --c-primary-600: #0857cc;
    --c-primary-700: #064099;
    --c-accent: #00a7b5;        /* teal accent */
    --c-success: #1f9d57;
    --c-danger: #d23b3b;
    --c-warning: #e8a13a;

    /* ---- Neutrals ---- */
    --c-bg: #f3f5f8;
    --c-surface: #ffffff;
    --c-border: #e3e8ef;
    --c-text: #1f2a37;
    --c-text-muted: #62708a;

    /* ---- Typography scale ---- */
    --font-sans: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --fs-xs: 0.78rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold: 700;

    /* ---- Spacing / shape ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 33, 56, .06), 0 1px 3px rgba(16, 33, 56, .08);
    --shadow: 0 4px 12px rgba(16, 33, 56, .10);
    --shadow-lg: 0 12px 32px rgba(16, 33, 56, .16);
    --transition: 160ms ease;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-navy);
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-700); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Consistent page title helper (use <h1 class="page-title"> in views) */
.page-title {
    font-size: var(--fs-2xl);
    margin: var(--space-5) 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--c-border);
    color: var(--c-navy);
}

/* ---------- Navbar (visual only — no height/position change) ---------- */
.custom-navbar {
    background-color: var(--c-surface);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--c-border);
}

/* Equalize ALL top-menu entries — links and the (formerly bare) home item — to
   one consistent size/weight, overriding the legacy per-breakpoint rules. */
.custom-navbar .navbar-nav .nav-item,
.custom-navbar .navbar-nav .nav-link {
    font-size: 1rem !important;
    font-weight: var(--fw-medium);
    letter-spacing: .2px;
    line-height: 1.4;
}

.custom-navbar .navbar-nav { gap: var(--space-4); align-items: center; }

.custom-navbar .nav-link {
    color: var(--c-navy);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.custom-navbar .nav-link:hover {
    color: var(--c-primary);
    background: rgba(10, 108, 255, .07);
    text-decoration: none;
}
.custom-navbar .nav-link.active,
.custom-navbar .nav-item.active > .nav-link {
    color: var(--c-primary-700);
    font-weight: var(--fw-bold);
}

/* ---------- Buttons (Bootstrap + DevExtreme) ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    transition: filter var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { filter: brightness(.96); }
.btn-primary { background-color: var(--c-primary); border-color: var(--c-primary); }
.btn-primary:hover { background-color: var(--c-primary-600); border-color: var(--c-primary-600); }
.btn-success { background-color: var(--c-success); border-color: var(--c-success); }
.btn-lg { border-radius: var(--radius); }

.dx-button { border-radius: var(--radius-sm); }
.dx-button.dx-button-mode-contained.dx-button-success { background-color: var(--c-success); }

/* ---------- Cards / surfaces ---------- */
.card,
.datagrid_container_neo {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card { transition: box-shadow var(--transition); }
.card:hover { box-shadow: var(--shadow); }

/* ---------- Forms ---------- */
.form-label { font-weight: var(--fw-medium); color: var(--c-text); margin-bottom: var(--space-1); }
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--c-border);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 .2rem rgba(10, 108, 255, .15);
}

/* ---------- Tables (plain + DevExtreme grids) ---------- */
.table { color: var(--c-text); }
.table > thead th {
    background: var(--c-navy);
    color: #fff;
    font-weight: var(--fw-medium);
    border-color: var(--c-navy);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(16, 33, 56, .03); }
.table-hover > tbody > tr:hover > * { background-color: rgba(10, 108, 255, .06); }

.dx-datagrid { border-radius: var(--radius); overflow: hidden; }
/* NOTE: do NOT override .dx-datagrid-headers text colour — DX header background
   has higher specificity, so a white-text override lands on the default light
   header and makes column captions invisible. Leave DX header styling to DX. */

/* ---------- Footer (fix: legacy used white text on a light surface = invisible) ---------- */
.footer2 {
    background-color: var(--c-navy) !important;
    color: #cdd9e8 !important;
    font-size: var(--fs-xs);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer2 a, .footer2 .minos_link0 { color: #cdd9e8 !important; text-decoration: none; }
.footer2 a:hover { color: #fff !important; }

/* ---------- Utilities ---------- */
.section { margin-bottom: var(--space-6); }
.text-muted-2 { color: var(--c-text-muted); }