/* ============================================
   fago.css – Tema för fago.se
   Bootstrap 5 override + egna komponenter
   ============================================ */

/* --- Typsnitt (lokalt hostade) --- */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal;
}
@font-face {
    font-family: 'Spectral';
    src: url('../fonts/spectral/Spectral-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'Spectral';
    src: url('../fonts/spectral/Spectral-Italic.ttf') format('truetype');
    font-weight: 400; font-style: italic;
}
@font-face {
    font-family: 'Spectral';
    src: url('../fonts/spectral/Spectral-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal;
}

/* --- CSS-variabler --- */
:root {
    --fa-darkblue:  #17384a;
    --fa-darkblue-dark: #0d2230;
    --fa-gray:      #678d9c;
    --fa-orange:    #FF9600;
    --fa-pink:      #d16ebf;
    --fa-teal:      #4DB5A1;
    --fa-brown:     #B39E66;
    --fa-red:       #FE3535;
    --fa-green:     #92d050;
    --fa-light:     #f8f6f2;
    --fa-black:     #080808;

    --bs-primary:       var(--fa-darkblue);
    --bs-primary-rgb:   23, 56, 74;
    --bs-body-font-family: 'Spectral', Georgia, serif;
    --bs-body-bg:       var(--fa-light);
    --bs-body-color:    var(--fa-black);
}

/* --- Bas --- */
body {
    font-family: 'Spectral', Georgia, serif;
    background-color: var(--fa-light);
    color: var(--fa-black);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn, label, th {
    font-family: 'Poppins', sans-serif;
}

/* --- Navbar --- */
.navbar-fago {
    background-color: var(--fa-darkblue);
}
.navbar-fago .navbar-brand,
.navbar-fago .nav-link {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.navbar-fago .nav-link:hover,
.navbar-fago .nav-link.active {
    color: var(--fa-orange) !important;
}

/* --- Knappar --- */
.btn-primary {
    background-color: var(--fa-darkblue);
    border-color: var(--fa-darkblue);
}
.btn-primary:hover {
    background-color: var(--fa-darkblue-dark);
    border-color: var(--fa-darkblue-dark);
}
.btn-accent {
    background-color: var(--fa-orange);
    border-color: var(--fa-orange);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.btn-accent:hover {
    background-color: #e08500;
    border-color: #e08500;
    color: #fff;
}

/* --- Kort --- */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(23,56,74,0.08);
    border-radius: 8px;
}
.card-header {
    background-color: var(--fa-darkblue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 8px 8px 0 0 !important;
}

/* --- Tabeller --- */
.table thead th {
    background-color: var(--fa-darkblue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border: none;
}
.table-hover tbody tr:hover {
    background-color: rgba(23,56,74,0.05);
}

/* --- Statusbrickor --- */
.badge-alive  { background-color: var(--fa-green);  color: var(--fa-black); }
.badge-dead   { background-color: var(--fa-red);    color: #fff; }
.badge-grey   { background-color: var(--fa-gray);   color: #fff; }
.badge-inactive { background-color: var(--fa-brown); color: #fff; }

/* --- Formulär --- */
.form-control:focus,
.form-select:focus {
    border-color: var(--fa-gray);
    box-shadow: 0 0 0 0.2rem rgba(103,141,156,0.25);
}

/* --- Sidebar (adminpanel) --- */
.sidebar {
    background-color: var(--fa-darkblue);
    min-height: 100vh;
    padding-top: 1rem;
}
.sidebar .nav-link {
    color: rgba(255,255,255,0.75);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    margin: 2px 8px;
    transition: all 0.2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(255,255,255,0.1);
    color: var(--fa-orange);
}
.sidebar .nav-link i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}
.sidebar-brand {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    padding: 1rem 1.2rem;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1rem;
}
.sidebar-brand span {
    color: var(--fa-orange);
}

/* --- Statistikkort --- */
.stat-card {
    border-left: 4px solid var(--fa-orange);
}
.stat-card .stat-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--fa-darkblue);
}
.stat-card .stat-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--fa-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Landningssida --- */
.hero {
    background-color: var(--fa-darkblue);
    color: #fff;
    padding: 5rem 0;
}
.hero h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
}
.hero h1 span {
    color: var(--fa-orange);
}
.hero p {
    font-family: 'Spectral', serif;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
}

/* --- Footer --- */
footer {
    background-color: var(--fa-darkblue);
    color: rgba(255,255,255,0.6);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    padding: 1.5rem 0;
}
footer a {
    color: var(--fa-orange);
    text-decoration: none;
}

/* --- Alerts / Notiser --- */
.alert-fago-info {
    background-color: rgba(77,181,161,0.15);
    border-color: var(--fa-teal);
    color: var(--fa-darkblue);
}
.alert-fago-warn {
    background-color: rgba(255,150,0,0.15);
    border-color: var(--fa-orange);
    color: var(--fa-darkblue);
}

/* --- Redirect/felssida --- */
.redirect-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fa-light);
}
.redirect-box {
    text-align: center;
    max-width: 500px;
}
.redirect-box .countdown {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: var(--fa-orange);
}