/*
 *
 *  This is file is part of DGL's tech stack.
 *
 *  @copyright (c) 2024, Deadan Group Limited (DGL).
 *  @link https://www.dgl.co.ke/apps
 *  All rights reserved.
 *
 *  <code>Build something people want!</code>
 *
 *  Public Portal Styles
 *
 *  Table of Contents:
 *  1. Body & Layout
 *  2. Navbar
 *  3. Live Indicator & Clock
 *  4. Welcome Banner
 *  5. Stat Tiles
 *  6. Widget Panel Overrides
 *  7. Candidate Results
 *  8. Geographic Drill-down
 *  9. Scrolling Ticker
 *  10. Footer
 *  11. Responsive
 */

/* ==========================================================================
   1. Body & Layout
   ========================================================================== */
.portal-body {
    background: linear-gradient(135deg, #f8f9fa, #ecf0f5);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.portal-content {
    flex: 1;
}

/* ==========================================================================
   2. Navbar
   ========================================================================== */
.portal-navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portal-navbar .navbar-brand img {
    border-radius: 4px;
}

/* ==========================================================================
   3. Live Indicator & Clock
   ========================================================================== */
.portal-live-indicator {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

.portal-live-indicator.is-final {
    background: #198754;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.portal-live-indicator.is-final .bi-circle-fill {
    animation: none;
    visibility: visible;
}

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    to { visibility: hidden; }
}

.portal-clock {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   4. Welcome Banner
   ========================================================================== */
.portal-welcome {
    background: linear-gradient(135deg, var(--votrack-primary, #312783), var(--votrack-primary-dark, #261d6a));
}

.portal-welcome h5 {
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   5. Stat Tiles
   ========================================================================== */
.stat-tile {
    border-radius: 0.5rem;
    padding: 14px 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-tile-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-tile-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 2px;
}

/* ==========================================================================
   6. Widget Panel Overrides (reuse dashboard-widgets.css base)
   ========================================================================== */
.portal-content .widget-panel {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   7. Candidate Results
   ========================================================================== */
.candidate-results-widget .progress {
    border-radius: 4px;
}

.candidate-results-widget .candidate-row {
    transition: background 0.15s;
    padding: 4px 0;
    border-radius: 4px;
}

.candidate-results-widget .candidate-row:hover {
    background-color: #f8f9fa;
}

/* ==========================================================================
   8. Geographic Drill-down
   ========================================================================== */
.geographic-drilldown .breadcrumb {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
}

.geographic-drilldown .table th {
    font-size: 13px;
    white-space: nowrap;
}

.geographic-drilldown .table td {
    font-size: 13px;
}

.geographic-drilldown .geo-link {
    color: var(--votrack-primary, #312783);
    text-decoration: none;
    cursor: pointer;
}

.geographic-drilldown .geo-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   9. Scrolling Ticker & Animations
   ========================================================================== */
.scrolling-ticker {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
    font-size: 0.82rem;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Spin animation (for loading indicators) */
.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.portal-footer {
    margin-top: auto;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .portal-clock {
        display: none;
    }

    .stat-tile {
        padding: 12px 14px;
    }

    .stat-tile-value {
        font-size: 20px;
    }

    .stat-tile-label {
        font-size: 11px;
    }

    .portal-welcome h5 {
        font-size: 14px;
    }
}