@charset "UTF-8";

/* 1. Font Definitions */
@font-face {
    font-family: 'NotoSansLao';
    src: url('../fonts/NotoSansLao-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansLao-Bold';
    src: url('../fonts/NotoSansLao-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Phosphor";
    src: url("../Phosphor.woff2") format("woff2"), 
    url("../Phosphor.woff") format("woff"), 
    url("../Phosphor.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.la-normal,.swal2-html-container,.swal2-default-outline,.swal2-styled, .swal2-textarea{font-family: 'NotoSansLao' !important;}
.la-bold,.swal2-title{font-family: 'NotoSansLao-Bold' !important;}

.font-number{
    font-family: "Times New Roman", Times, serif;
}

/* 2. Apply font to your navigation strip and Lao text */
.sidebar, .sidebar-nav, .nav-menu, .nav-item, .nav-link, .nav-text {
  font-family: 'NotoSansLao', sans-serif; font-size: larger;
}

a.nav-link{font-size:large;}

/* Apply bold font weights specifically if needed */
.aside strong, .navmenu .active {
  font-family: 'NotoSansLao-Bold', sans-serif;
  font-weight: bold;
}

 .validation-feedback {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
.is-invalid {
    border-color: #dc3545;
}
.is-valid {
    border-color: #198754;
}
.login-notification {
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}


/* ==========================================================================
   Master CSS Grid Configuration (Mobile First: 2 Columns)
   ========================================================================== */

/* 1. Vehicles Plates Grid Layout */
.plates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items on mobile */
    gap: 12px;
    padding: 12px 0;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Business KPI Grid Layout */
.fx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items on mobile */
    gap: 12px;
    padding: 12px 0;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Responsive Media Queries (Laptop / PC Monitor: 4 Columns)
   ========================================================================== */
@media (min-width: 992px) {
    /* Auto scale plates display structure directly to 4 items per row */
    .plates-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    /* Auto scale business KPI display structure directly to 4 items per row */
    .fx-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* ==========================================================================
   Card Layouts & Structural Component Designs
   ========================================================================== */

/* Shared Base Layout Cards (Plates and KPIs) */
.plate-card, 
.fx-kpi-item {
    /* background: #ffffff; */
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(240, 244, 248, 0.8);
    border: 1px solid rgba(230, 235, 242, 0.6);
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plate-card:hover,
.fx-kpi-item:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 24px rgba(220, 228, 238, 0.9); */
}

/* Base License Badge Dimensions Layout */
.plate-badge, 
.fx-kpi-plate-badge {
    width: 90%;
    max-width: 180px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin-bottom: 14px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Typography Controls (Plates, Meta Data and KPIs Labels)
   ========================================================================== */
.plate-province, .fx-kpi-label-top { font-size: 13px; margin-bottom: 2px; }
.plate-number, .fx-kpi-label-bottom { font-size: 18px; text-transform: uppercase; letter-spacing: 0.3px; }
.plate-text-main { font-size: 18px; font-weight: 700; }
.plate-text-sub { font-size: 18px; font-weight: 700; margin-top: 1px; }

/* Sub-card Meta Text Descriptions Layout */
.plate-info-time, .fx-kpi-value-text {
    font-size: 13px;
    color: #758a99;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Bottom pricing & tracking strings badges options */
.plate-info-price, .fx-kpi-trend-badge {
    font-size: 14px;
    font-weight: 700;
    color: #92a4b0;
}

/* Highlighted currency or active metric indicators */
.plate-card:has(.plate-info-price:not(:text-content("0 ກີບ"))) .plate-info-price,
.fx-kpi-trend-badge.active-metric {
    color: #5c6b73;
}

/* ==========================================================================
   Color Theme Implementations
   ========================================================================== */

/* Theme: Yellow Border / Transparent Fill (No Plate / Net Revenue) */
.plate-yellow-border, .plate-theme-yellow-border {
    /* background-color: #fffbfa; */
    border: 3.5px solid #ffcc00;
    /* color: #000000; */
}

/* Theme: Cyan Border / Yellow Fill (Xiengkhouang / Active Users) */
.plate-cyan-yellow, .plate-theme-cyan-yellow {
    background-color: #ffcc00;
    border: 3.5px solid #00bcd4;
    color: #00bcd4;
}

/* Theme: Solid Yellow License Plate (Champasak) */
.plate-yellow-fill {
    background-color: #ffcc00;
    border: 2px solid #000000;
    color: #000000;
}

/* Theme: Solid Red License Plate (Orders) */
.plate-red-fill, .plate-theme-red-fill {
    background-color: #ff0000;
    border: 1.5px solid #e60000;
    color: #ffffff;
}

/* Theme: Solid Blue License Plate (Vientiane Capital / Conversion) */
.plate-blue-fill, .plate-theme-blue-fill {
    background-color: #0033cc;
    border: 1.5px solid #0022aa;
    color: #ffffff;
}

/* ==========================================================================
   Hero Briefing Headers Cleanup
   ========================================================================== */
.fx-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 24px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(230, 235, 242, 0.5);
}
.fx-overline { font-size: 11px; text-transform: uppercase; color: #94a3b8; font-weight: 600; letter-spacing: 0.5px; }
.fx-hero-title { font-weight: 700; color: #1e293b; margin-top: 2px; }
.fx-hero-text { font-size: 14px; color: #64748b; margin-bottom: 0; }