/* TeamPoint360 theme layer — loaded after employee.css. Maps the TeamPoint360 template
   (docs/design/template-style.css) onto the portal's existing variables, so every screen picks it up
   without touching per-view markup. Fonts are self-hosted (no third-party font requests). */

@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/tp360/lexend-latin-wght-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/tp360/nunito-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/tp360/nunito-sans-latin-wght-italic.woff2") format("woff2");
}

:root {
    --tp-navy: #06245a;
    --tp-blue: #0b4fa8;
    --tp-blue-2: #1a6fd6;
    --tp-aqua: #14c8d8;
    --tp-gold: #f6b21a;
    --tp-ink: #0d2147;
    --tp-accent: linear-gradient(90deg, var(--tp-blue), var(--tp-aqua), var(--tp-gold));

    --bg-body: #f4f7fc;
    --color-heading: var(--tp-ink);
    --color-text: #2b3a55;
    --color-muted: #5b6b88;
    --color-border: #e3eaf5;
    --color-primary: var(--tp-blue);
    --color-primary-light: rgba(11, 79, 168, 0.09);

    --bs-primary: #0b4fa8;
    --bs-primary-rgb: 11, 79, 168;
    --bs-link-color: #0b4fa8;
    --bs-link-color-rgb: 11, 79, 168;
    --bs-link-hover-color: #06245a;
    --bs-link-hover-color-rgb: 6, 36, 90;
    --bs-body-font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.dark, body.dark {
    --bg-body: #071530;
    --bg-card: #0d2147;
    --bg-sidebar: #0a1a3a;
    --color-heading: #eef4ff;
    --color-text: #c9d6ee;
    --color-muted: #8798b8;
    --color-border: #1d3460;
    --color-primary: #5fa8ff;
    --color-primary-light: rgba(95, 168, 255, 0.12);
    --bs-primary: #3d8bf0;
    --bs-primary-rgb: 61, 139, 240;
    --bs-link-color: #7db8ff;
    --bs-link-color-rgb: 125, 184, 255;
    --bs-link-hover-color: #a9d0ff;
    --bs-link-hover-color-rgb: 169, 208, 255;
}

body { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.sidebar-title, .modal-title, .card-title, .btn {
    font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* Bootstrap primary buttons/controls in the TeamPoint360 blue */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--tp-navy);
    --bs-btn-hover-border-color: var(--tp-navy);
    --bs-btn-active-bg: var(--tp-navy);
    --bs-btn-active-border-color: var(--tp-navy);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tp-aqua);
    box-shadow: 0 0 0 0.2rem rgba(20, 200, 216, 0.25);
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }

/* Signature blue → aqua → gold line under the header and sidebar brand */
.app-header, .sidebar-header { position: relative; }
.app-header::after, .sidebar-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--tp-accent);
    pointer-events: none;
}
.sidebar-link.active { border-right-color: var(--tp-aqua); }
.emp-card { border-radius: 14px; }

/* Sign-in: the template's navy gradient with aqua/gold glows */
#login-screen {
    background:
        radial-gradient(900px 600px at 8% -10%, rgba(20, 200, 216, 0.45), transparent 60%),
        radial-gradient(700px 520px at 105% 12%, rgba(246, 178, 26, 0.35), transparent 60%),
        linear-gradient(160deg, #04173d 0%, #0a3b86 45%, #0b4fa8 70%, #0a7fb5 100%) !important;
    padding: 16px;
}
#login-screen > .emp-card {
    border-radius: 20px;
    border: 0;
    box-shadow: 0 24px 60px -20px rgba(4, 24, 66, 0.7);
    overflow: hidden;
}
html.dark #login-screen > .emp-card { background: var(--bg-card); }

@media (prefers-reduced-motion: no-preference) {
    .btn, .sidebar-link { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
}