/**
 * Eduware — CSS principal
 * Dashboard de contrôle parental
 * Thème sombre par défaut
 */

/* ── Variables ──────────────────────────── */
:root {
    --edw-bg: #0f172a;
    --edw-bg-card: #1e293b;
    --edw-bg-input: #334155;
    --edw-border: #334155;
    --edw-text: #e2e8f0;
    --edw-text-muted: #94a3b8;
    --edw-primary: #3b82f6;
    --edw-primary-hover: #2563eb;
    --edw-success: #22c55e;
    --edw-warning: #f59e0b;
    --edw-danger: #ef4444;
    --edw-sidebar-width: 240px;
    --edw-header-height: 56px;
    --edw-radius: 8px;
    --edw-radius-sm: 4px;
    --edw-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ── Reset / Base ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--edw-bg);
    color: var(--edw-text);
    line-height: 1.5;
    min-height: 100vh;
}

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

/* ── Layout ────────────────────────────── */
.edw-layout {
    display: grid;
    grid-template-columns: var(--edw-sidebar-width) 1fr;
    grid-template-rows: var(--edw-header-height) 1fr;
    min-height: 100vh;
}

/* ── Header ────────────────────────────── */
.edw-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--edw-bg-card);
    border-bottom: 1px solid var(--edw-border);
    height: var(--edw-header-height);
    z-index: 100;
}
.edw-header__left { display: flex; align-items: center; gap: .75rem; }
.edw-header__brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1.1rem; color: var(--edw-text);
}
.edw-header__brand:hover { text-decoration: none; }
.edw-header__brand svg { color: var(--edw-primary); }
.edw-header__toggle { display: none; background: none; border: none; color: var(--edw-text); cursor: pointer; }
.edw-header__right { display: flex; align-items: center; gap: .75rem; }
.edw-header__user { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--edw-text-muted); }
.edw-header__btn {
    background: none; border: none; color: var(--edw-text-muted); cursor: pointer;
    padding: .35rem; border-radius: var(--edw-radius-sm);
}
.edw-header__btn:hover { color: var(--edw-text); background: var(--edw-bg-input); }

/* ── Sidebar ───────────────────────────── */
.edw-sidebar {
    background: var(--edw-bg-card);
    border-right: 1px solid var(--edw-border);
    padding: 1rem 0;
    overflow-y: auto;
}
.edw-sidebar__nav { display: flex; flex-direction: column; gap: .15rem; }
.edw-sidebar__item {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 1.25rem;
    color: var(--edw-text-muted);
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.edw-sidebar__item:hover { background: var(--edw-bg-input); color: var(--edw-text); text-decoration: none; }
.edw-sidebar__item.active {
    color: var(--edw-primary);
    background: rgba(59, 130, 246, .1);
    border-right: 3px solid var(--edw-primary);
}
.edw-sidebar__item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Main content ──────────────────────── */
.edw-main {
    padding: 1.5rem;
    overflow-y: auto;
    max-width: 1200px;
}

.edw-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.edw-page-header h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; }
.edw-page-header h2 svg { color: var(--edw-primary); }
.edw-page-header__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── Cards ─────────────────────────────── */
.edw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.edw-card {
    background: var(--edw-bg-card); border: 1px solid var(--edw-border);
    border-radius: var(--edw-radius); padding: 1rem;
    box-shadow: var(--edw-shadow);
}
.edw-card--placeholder { text-align: center; color: var(--edw-text-muted); padding: 2rem; }
.edw-card__header {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .75rem; font-size: .9rem; color: var(--edw-text-muted);
}
.edw-card__header strong { color: var(--edw-text); font-size: 1rem; }
.edw-card__body { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; font-size: .85rem; color: var(--edw-text-muted); }
.edw-card__body > div { display: flex; align-items: center; gap: .3rem; }
.edw-card__body svg { width: 14px; height: 14px; }
.edw-card__actions { display: flex; gap: .5rem; }
.edw-card__value { font-size: 1.8rem; font-weight: 700; color: var(--edw-text); }

/* ── Badges ────────────────────────────── */
.edw-badge {
    display: inline-flex; align-items: center;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
}
.edw-badge--success { background: rgba(34,197,94,.15); color: var(--edw-success); }
.edw-badge--muted { background: rgba(148,163,184,.15); color: var(--edw-text-muted); }
.edw-badge--info { background: rgba(59,130,246,.15); color: var(--edw-primary); }
.edw-badge--danger { background: rgba(239,68,68,.15); color: var(--edw-danger); }

/* ── Section ───────────────────────────── */
.edw-section {
    background: var(--edw-bg-card); border: 1px solid var(--edw-border);
    border-radius: var(--edw-radius); padding: 1.25rem;
    margin-bottom: 1.5rem; box-shadow: var(--edw-shadow);
}
.edw-section h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: 1rem; }
.edw-section h3 svg { width: 18px; height: 18px; color: var(--edw-primary); }

/* ── Map ───────────────────────────────── */
.edw-map { height: 350px; border-radius: var(--edw-radius); overflow: hidden; }
.edw-map--large { height: 500px; margin-bottom: 1.5rem; }

/* ── Table ─────────────────────────────── */
.edw-table-wrap { overflow-x: auto; }
.edw-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.edw-table th { text-align: left; padding: .6rem .75rem; color: var(--edw-text-muted); font-weight: 600; border-bottom: 1px solid var(--edw-border); }
.edw-table td { padding: .6rem .75rem; border-bottom: 1px solid rgba(51,65,85,.5); }
.edw-table tr:hover td { background: rgba(59,130,246,.04); }

/* ── Alerts ────────────────────────────── */
.edw-alerts { display: flex; flex-direction: column; gap: .5rem; }
.edw-alert {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem; border-radius: var(--edw-radius-sm);
    background: var(--edw-bg-input); font-size: .875rem;
}
.edw-alert--unread { border-left: 3px solid var(--edw-warning); }
.edw-alert svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--edw-warning); }
.edw-alert small { display: block; color: var(--edw-text-muted); margin-top: .15rem; }

/* ── Timeline ──────────────────────────── */
.edw-timeline { display: flex; flex-direction: column; gap: .35rem; max-height: 400px; overflow-y: auto; }
.edw-timeline__item {
    display: flex; align-items: center; gap: 1rem;
    padding: .4rem .75rem; font-size: .85rem;
    border-left: 2px solid var(--edw-border);
}
.edw-timeline__time { font-weight: 600; color: var(--edw-primary); min-width: 50px; }
.edw-timeline__coords { color: var(--edw-text-muted); }
.edw-timeline__speed { color: var(--edw-success); }

/* ── Forms / Inputs ────────────────────── */
.edw-form-group { margin-bottom: 1rem; }
.edw-form-group label { display: block; margin-bottom: .35rem; font-size: .875rem; color: var(--edw-text-muted); }
.edw-input, .edw-select {
    display: block; width: 100%;
    padding: .5rem .75rem;
    background: var(--edw-bg-input); border: 1px solid var(--edw-border);
    border-radius: var(--edw-radius-sm); color: var(--edw-text);
    font-size: .9rem;
}
.edw-input:focus, .edw-select:focus { outline: none; border-color: var(--edw-primary); box-shadow: 0 0 0 2px rgba(59,130,246,.25); }
.edw-select { width: auto; min-width: 120px; cursor: pointer; }

.edw-inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }

.edw-checkbox { display: flex; align-items: center; gap: .35rem; font-size: .875rem; cursor: pointer; color: var(--edw-text-muted); }
.edw-checkbox input { accent-color: var(--edw-primary); }

/* ── Tabs ──────────────────────────────── */
.edw-tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--edw-border); }
.edw-tab {
    padding: .6rem 1.25rem; background: none; border: none;
    color: var(--edw-text-muted); font-size: .9rem; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.edw-tab:hover { color: var(--edw-text); }
.edw-tab.active { color: var(--edw-primary); border-bottom-color: var(--edw-primary); }

/* ── Buttons ───────────────────────────── */
.edw-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem; border: none; border-radius: var(--edw-radius-sm);
    font-size: .875rem; font-weight: 500; cursor: pointer;
    background: var(--edw-bg-input); color: var(--edw-text);
    transition: background .15s;
}
.edw-btn:hover { background: var(--edw-border); }
.edw-btn svg { width: 16px; height: 16px; }
.edw-btn--primary { background: var(--edw-primary); color: #fff; }
.edw-btn--primary:hover { background: var(--edw-primary-hover); }
.edw-btn--sm { padding: .35rem .65rem; font-size: .8rem; }
.edw-btn--lg { padding: .75rem 1.5rem; font-size: 1rem; }
.edw-btn--full { width: 100%; justify-content: center; }

/* ── Pairing ───────────────────────────── */
.edw-pairing { text-align: center; margin-top: 1rem; }
.edw-pairing__code {
    font-size: 2.5rem; font-weight: 700; letter-spacing: .3em;
    color: var(--edw-primary); margin: .75rem 0;
    font-family: 'Courier New', monospace;
}
.edw-pairing small { color: var(--edw-text-muted); }

/* ── Device card (settings) ────────────── */
.edw-device-card {
    background: var(--edw-bg-card); border: 1px solid var(--edw-border);
    border-radius: var(--edw-radius); padding: 1.25rem;
    margin-bottom: 1rem; box-shadow: var(--edw-shadow);
}
.edw-device-card__header { margin-bottom: 1rem; }
.edw-device-card__header strong { display: block; font-size: 1.05rem; }
.edw-device-card__header small { color: var(--edw-text-muted); }
.edw-device-card__settings { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.edw-setting label { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--edw-text-muted); margin-bottom: .25rem; }
.edw-setting label svg { width: 14px; height: 14px; }

/* ── Download ──────────────────────────── */
.edw-download-card { text-align: center; padding: 2rem; }
.edw-download-card__icon { margin-bottom: 1rem; }
.edw-download-card h3 { margin-bottom: .5rem; }
.edw-download-card p { color: var(--edw-text-muted); margin-bottom: 1.5rem; }
.edw-download-card small { display: block; margin-top: .75rem; }

.edw-steps { padding-left: 1.5rem; }
.edw-steps li { margin-bottom: .75rem; }
.edw-steps ul { padding-left: 1.25rem; margin-top: .35rem; }

/* ── Login page ────────────────────────── */
.edw-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.edw-login { width: 100%; max-width: 400px; padding: 1rem; }
.edw-login__card {
    background: var(--edw-bg-card); border: 1px solid var(--edw-border);
    border-radius: var(--edw-radius); padding: 2rem;
    box-shadow: var(--edw-shadow);
}
.edw-login__logo { text-align: center; margin-bottom: 1.5rem; }
.edw-login__logo svg { width: 48px; height: 48px; color: var(--edw-primary); margin-bottom: .5rem; }
.edw-login__logo h1 { font-size: 1.5rem; }
.edw-login__logo p { color: var(--edw-text-muted); font-size: .9rem; }
.edw-login__error { background: rgba(239,68,68,.1); border: 1px solid var(--edw-danger); color: var(--edw-danger); padding: .5rem .75rem; border-radius: var(--edw-radius-sm); margin-bottom: 1rem; font-size: .85rem; }

/* ── Placeholder ───────────────────────── */
.edw-placeholder { color: var(--edw-text-muted); font-style: italic; text-align: center; padding: 1rem; }
.edw-text-muted { color: var(--edw-text-muted); }

/* ── Responsive ────────────────────────── */
@media (max-width: 768px) {
    .edw-layout { grid-template-columns: 1fr; }
    .edw-sidebar {
        position: fixed; left: -260px; top: var(--edw-header-height);
        width: var(--edw-sidebar-width); height: calc(100vh - var(--edw-header-height));
        z-index: 200; transition: left .25s;
    }
    .edw-sidebar.open { left: 0; box-shadow: 2px 0 10px rgba(0,0,0,.5); }
    .edw-header__toggle { display: block; }
    .edw-main { padding: 1rem; }
    .edw-map { height: 250px; }
    .edw-map--large { height: 350px; }
}