/* =========================================================
   Horizon Transport - UI Global
   Fichier : /assets/css/horizon-ui.css
========================================================= */

/* =========================
   VARIABLES GLOBALES
========================= */
:root {

    --hz-primary: #0d6efd;
    --hz-primary-dark: #0b5ed7;

    --hz-success: #198754;
    --hz-warning: #fd7e14;
    --hz-danger: #dc3545;

    --hz-dark: #1f2937;
    --hz-dark-2: #111827;

    --hz-bg: #f3f6fb;
    --hz-card: #ffffff;

    --hz-border: #dbe3ec;

    --hz-text: #1f2937;
    --hz-text-light: #6b7280;

    --hz-radius: 14px;

    --hz-shadow:
        0 4px 14px rgba(15, 23, 42, 0.08);

    --hz-shadow-hover:
        0 10px 24px rgba(15, 23, 42, 0.12);

    --hz-transition: 0.2s ease;

}

/* =========================
   BODY
========================= */
body {

    background: var(--hz-bg);

    color: var(--hz-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}

/* =========================
   TITRES
========================= */
h1, h2, h3, h4, h5 {

    font-weight: 700;
    color: var(--hz-dark);

}

/* =========================
   NAVBAR
========================= */
.horizon-navbar {

    background:
        linear-gradient(
            90deg,
            #111827,
            #1f2937
        ) !important;

    box-shadow: var(--hz-shadow);

    padding-top: 10px;
    padding-bottom: 10px;

}

.horizon-navbar .navbar-brand {

    font-size: 1.1rem;
    letter-spacing: 0.3px;

}

.horizon-navbar .nav-link {

    color: rgba(255,255,255,0.85) !important;

    transition: var(--hz-transition);

}

.horizon-navbar .nav-link:hover {

    color: #ffffff !important;

}

.horizon-navbar .nav-link.active {

    color: #ffffff !important;

    font-weight: 600;

}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu {

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.25);

}

.dropdown-item {

    transition: var(--hz-transition);

}

.dropdown-item:hover {

    background: rgba(255,255,255,0.08);

}

.dropdown-item.active {

    background: var(--hz-primary);

}

/* =========================
   CARDS
========================= */
.horizon-card {

    background: var(--hz-card);

    border-radius: var(--hz-radius);

    border: 1px solid var(--hz-border);

    box-shadow: var(--hz-shadow);

    padding: 20px;

    transition: var(--hz-transition);

}

.horizon-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--hz-shadow-hover);

}

/* =========================
   TABLEAUX
========================= */
.table {

    background: #ffffff;

    border-radius: var(--hz-radius);

    overflow: hidden;

}

.table thead {

    background: #f8fafc;

}

.table thead th {

    border-bottom: 1px solid var(--hz-border);

    font-weight: 700;

    color: var(--hz-dark);

}

.table tbody tr {

    transition: var(--hz-transition);

}

.table tbody tr:hover {

    background: rgba(13,110,253,0.04);

}

/* =========================
   FORMULAIRES
========================= */
.form-control,
.form-select {

    border-radius: 10px;

    border: 1px solid var(--hz-border);

    min-height: 44px;

    transition: var(--hz-transition);

}

.form-control:focus,
.form-select:focus {

    border-color: var(--hz-primary);

    box-shadow:
        0 0 0 0.2rem rgba(13,110,253,0.15);

}

/* =========================
   LABELS
========================= */
.form-label {

    font-weight: 600;

    color: var(--hz-dark);

}

/* =========================
   ALERTES
========================= */
.alert {

    border-radius: 12px;

    border: none;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.06);

}

/* =========================
   BADGES
========================= */
.badge {

    border-radius: 999px;

    padding:
        0.45rem
        0.75rem;

    font-weight: 600;

}

/* =========================
   STATUTS TRAJETS
========================= */
.status-prevu {

    border-left:
        4px solid #0d6efd;

}

.status-en-cours {

    border-left:
        4px solid #198754;

}

.status-retard {

    border-left:
        4px solid #fd7e14;

}

.status-urgent {

    border-left:
        4px solid #dc3545;

}

/* =========================
   BLOCS DASHBOARD
========================= */
.dashboard-widget {

    background: #ffffff;

    border-radius: var(--hz-radius);

    border: 1px solid var(--hz-border);

    padding: 20px;

    box-shadow: var(--hz-shadow);

}

.dashboard-widget-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--hz-text-light);

    margin-bottom: 10px;

}

.dashboard-widget-value {

    font-size: 2rem;

    font-weight: 700;

    color: var(--hz-dark);

}

/* =========================
   CONTAINERS
========================= */
.horizon-container {

    padding-top: 24px;
    padding-bottom: 24px;

}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

    .horizon-card {

        padding: 16px;

    }

    .dashboard-widget-value {

        font-size: 1.5rem;

    }

}
/* =========================
   DROPDOWN CANTON
========================= */
.canton-menu {

    max-height: 220px;

    overflow-y: auto;

    z-index: 1055;

}

.canton-option,
.canton-facturation-option {

    padding: 10px 14px;

    transition: 0.15s ease;

}

.canton-option:hover,
.canton-facturation-option:hover {

    background: #1f2937 !important;

    color: #ffffff !important;

}
/* =========================
   BOUTON DROPDOWN CANTON
========================= */
.btn-horizon-light {

    background: #ffffff;

    border: 1px solid var(--hz-border);

    border-radius: 10px;

    min-height: 44px;

    color: var(--hz-dark);

    transition: var(--hz-transition);

}

.btn-horizon-light:hover {

    background: #f8fafc;

    border-color: #cbd5e1;

    color: var(--hz-dark);

}

.btn-horizon-light:focus {

    border-color: var(--hz-primary);

    box-shadow:
        0 0 0 0.2rem rgba(13,110,253,0.15);

}
/* =========================
   FOOTER GLOBAL
========================= */
.horizon-footer {
    background: #ffffff;
    border-top: 1px solid var(--hz-border);
    color: var(--hz-text);
}

.horizon-footer-link {
    color: var(--hz-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0 4px;
}

.horizon-footer-link:hover {
    color: var(--hz-dark);
    text-decoration: underline;
}

.horizon-footer-separator {
    color: #cbd5e1;
    margin: 0 4px;
}
/* =========================
   LAYOUT GLOBAL
========================= */

html {
    height: 100%;
}

body {
    min-height: 100vh;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;
}