/* ========================================
   CSS VARIABLES (Design System)
   ======================================== */
:root {
    /* Colors */
    --primary-color    :  #06338f;
    --secondary-color  :  #0ea5e9;
    --accent-color     :  #f59e0b;
    --success-color    :  #10b981;
    --warning-color    :  #f59e0b;
    --danger-color     :  #ef4444;
    
    /* Grays */
    --gray-50          :  #f9fafb;
    --gray-100         :  #f3f4f6;
    --gray-200         :  #e5e7eb;
    --gray-300         :  #d1d5db;
    --gray-400         :  #9ca3af;
    --gray-500         :  #6b7280;
    --gray-600         :  #4b5563;
    --gray-700         :  #374151;
    --gray-800         :  #1f2937;
    --gray-900         :  #111827;
    
    /* Spacing */
    --spacing-xs       :  0.25rem;   /* 4px */
    --spacing-sm       :  0.5rem;    /* 8px */
    --spacing-md       :  1rem;      /* 16px */
    --spacing-lg       :  1.5rem;    /* 24px */
    --spacing-xl       :  2rem;      /* 32px */
    --spacing-2xl      :  3rem;      /* 48px */
    
    /* Border Radius */
    --radius-sm        :  0.25rem;   /* 4px */
    --radius-md        :  0.5rem;    /* 8px */
    --radius-lg        :  0.75rem;   /* 12px */
    --radius-xl        :  1rem;      /* 16px */
    
    /* Shadows */
    --shadow-sm        :  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md        :  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg        :  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl        :  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast  :  150ms ease;
    --transition-base  :  200ms ease;
    --transition-slow  :  300ms ease;
}

body {
    font-family:        "Lato", sans-serif;
    background-color:   #e3f2fd;
    margin:             0;
    padding:            0;
}

hr {
    color:              lightgray;
    height:             1px;
}

h2 {
    color:              darkblue;
}

h3, h4 {
    color:              maroon;
}

p {
    text-align:         left;
}

/* --- MODERN MINIMALIST TABLE STYLING --- */
table {
    border-collapse:    separate;
    border-spacing:     0;
    border:             1px solid #e5e7eb;
    border-radius:      8px;
    padding:            0;
    margin:             0;
    font-family:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color:   white;
    overflow:           hidden;
    table-layout:       auto;
    box-sizing:         border-box;
}

table[style*="width:"] {
    margin:             0 auto;
}

th {
    border:             none;
    border-bottom:      2px solid #93c5fd;
    border-right:       1px solid #bfdbfe;
    border-radius:      0;
    padding:            12px 16px;
    font-size:          0.875rem;
    font-weight:        600;
    text-align:         left;
    vertical-align:     top;
    background-color:   #bfdbfe;
    color:              #1e40af;
    letter-spacing:     0.025em;
    position:           sticky;
    top:                0;
    z-index:            10;
}

th:last-child {
    border-right:       none;
}

td {
    border:             none;
    border-bottom:      1px solid #f3f4f6;
    border-right:       1px solid #e5e7eb;
    padding:            12px 16px;
    font-size:          0.9375rem;
    text-align:         left;
    background-color:   aliceblue;
    color:              #1f2937;
    transition:         background-color 0.15s ease;
}

td:last-child {
    border-right:       none;
}

/* Hover effect on table rows */
tbody tr:hover td {
    background-color:   #e3f2fd;
}

/* Remove underline from table content when tables are wrapped in links */
a:has(table) {
    text-decoration:    none !important;
}

a table,
a table *,
a table th,
a table td {
    text-decoration:    none !important;
}

/* --- NAVIGATION LINKS STYLING (for internal page navigation) --- */
/* Hide separator characters between navigation links */
td[style*="text-align:right"] {
    font-size:          0;
}

td[style*="text-align:right"] a,
.nav-links a {
    display:            inline-block;
    padding:            clamp(0.2rem, 0.15rem + 0.15vw, 0.35rem) clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    margin:             0.2rem 0.15rem;
    background:         linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color:              #1e40af;
    text-decoration:    none;
    border-radius:      var(--radius-md);
    border:             1px solid #93c5fd;
    font-weight:        500;
    font-size:          clamp(0.75rem, 0.7rem + 0.3vw, 0.9rem);
    transition:         all 0.2s ease;
    box-shadow:         0 1px 3px rgba(0, 0, 0, 0.1);
}

td[style*="text-align:right"] a:hover,
.nav-links a:hover {
    background:         linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color:              white;
    transform:          translateY(-2px);
    box-shadow:         0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Special styling for "top" link */
td[style*="text-align:right"] a[href="#ref_first_line"],
.nav-links a[href="#ref_first_line"],
.page-navigation .nav-top {
    background:         linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color:              #065f46;
    border-color:       #6ee7b7;
}

td[style*="text-align:right"] a[href="#ref_first_line"]:hover,
.nav-links a[href="#ref_first_line"]:hover,
.page-navigation .nav-top:hover {
    background:         linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color:              white;
}

/* --- PAGE NAVIGATION (top, prev, next, page numbers) --- */
.page-navigation {
    display:            inline-block;
    font-size:          0;
    line-height:        0;
    margin:             0.3rem 0;
}

.page-navigation a,
.page-navigation .nav-disabled {
    display:            inline-block;
    padding:            0.15rem 0.4rem;
    margin:             0.1rem 0.08rem;
    background:         linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color:              #1e40af;
    text-decoration:    none;
    border-radius:      0.25rem;
    border:             1px solid #93c5fd;
    font-weight:        500;
    font-size:          0.8rem;
    transition:         all 0.2s ease;
    box-shadow:         0 1px 2px rgba(0, 0, 0, 0.08);
    line-height:        normal;
}

.page-navigation a:hover {
    background:         linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color:              white;
    transform:          translateY(-1px);
    box-shadow:         0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Active/current page button styling */
.page-navigation .nav-active {
    background:         linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color:              #9a3412;
    border-color:       #fb923c;
    font-weight:        600;
    box-shadow:         0 2px 4px rgba(249, 115, 22, 0.25);
}

.page-navigation .nav-active:hover {
    background:         linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color:              white;
    transform:          translateY(-1px);
    box-shadow:         0 3px 6px rgba(249, 115, 22, 0.35);
}

.page-navigation .nav-disabled {
    background:         #e5e7eb;
    color:              #9ca3af;
    border-color:       #d1d5db;
    cursor:             not-allowed;
    opacity:            0.6;
}

/* --- TOP NAVIGATION BAR (Title Block) --- */
.topnav {
    background:         var(--bg-primary);
    color:              var(--text-primary);
    padding:            0;
    box-shadow:         var(--shadow-lg);
    border-radius:      0;
    margin:             0;
    overflow:           hidden;
}

.topnav-content {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            1.2rem 1.5rem;
    background:         linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    gap:                1rem;
}

.topnav-text {
    flex:               1;
}

.topnav-content h1 {
    color:              white;
    font-size:          clamp(1.4rem, 1.2rem + 1vw, 2.0rem);
    font-weight:        700;
    margin:             0;
    text-shadow:        0 2px 4px rgba(0, 0, 0, 0.1);
}

.topnav-content .subtitle {
    color:              rgba(255, 255, 255, 0.9);
    font-size:          clamp(0.75rem, 0.65rem + 0.5vw, 1.0rem);
    font-weight:        300;
    margin-top:         0.75rem;
}

/* Logo styling */
.topnav-logo-link {
    display:            flex;
    align-items:        center;
    transition:         transform 0.3s ease;
}

.topnav-logo-link:hover {
    transform:          scale(1.05);
}

.topnav-logo {
    width:              clamp(143px, 130px + 4vw, 208px);
    height:             auto;
    object-fit:         contain;
    display:            block;
    background:         white;
    border-radius:      var(--radius-md);
    padding:            0.3rem;
    box-shadow:         0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- CONTENT WRAPPER - Flex container for sidebar and main --- */
.content-wrapper {
    display:            flex;
    gap:                var(--spacing-md);
    padding:            var(--spacing-md);
    max-width:          100%;
    box-sizing:         border-box;
}

.main {
    flex:               1;
    min-width:          0;
    margin:             0;
    background:         white;
    border:             1px solid var(--gray-200);
    border-radius:      var(--radius-xl);
    padding:            var(--spacing-lg);
    box-shadow:         var(--shadow-lg);
    overflow:           visible;
}

/* Tables: Full width by default with normal table layout */
.main table:not([style*="width:"]) {
    width:              100%;
    min-width:          100%;
    table-layout:       auto;
}

/* Tables with explicit width: respect that width and center */
.main table[style*="width:"] {
    width:              auto;
    margin:             0 auto;
    table-layout:       auto;
}

/* Tables display at full height - no internal scrolling */
.main table {
    display:            table;
    width:              100%;
}

.main table thead,
.main table tbody {
    display:            table-header-group;
}

.main table tbody {
    display:            table-row-group;
}

.main table tr {
    display:            table-row;
}

.main table th,
.main table td {
    display:            table-cell;
}

/* --- SIDEBAR CONTAINER - Vertical stack for sidebar --- */
.sidebar-container {
    display:            flex;
    flex-direction:     column;
    gap:                var(--spacing-md);
    flex-shrink:        0;
    position:           sticky;
    top:                var(--spacing-md);
    align-self:         flex-start;
    max-height:         calc(100vh - 2rem);
    overflow-y:         auto;
}

/* --- SIDEBAR - Modern Card-based Navigation --- */
.sidemenu {
    background-color:   white;
    width:              clamp(200px, 15vw + 50px, 280px);
    min-width:          clamp(200px, 15vw + 50px, 280px);
    padding:            clamp(0.5rem, 0.8vw + 0.2rem, 1rem) clamp(1rem, 1.2vw + 0.4rem, 1.8rem);
    border-radius:      var(--radius-xl);
    box-shadow:         var(--shadow-lg);
    border:             1px solid var(--gray-200);
}

/* Sidebar Sections */
.sidebar-section {
    margin-top:         0rem;
    margin-bottom:      0.25rem;
}

.sidebar-section:last-child {
    margin-bottom:      0;
}

/* First section (Home/Contact) - left aligned */
.sidebar-section:first-child .sidebar-menu a {
    padding-left:       0rem;
    text-decoration:    none !important;
}

.sidebar-section:first-child .sidebar-menu a:hover {
    padding-left:       0.125rem;
    text-decoration:    none !important;
}

.sidebar-section:first-child .sidebar-menu a span {
    text-decoration:    none !important;
}

.sidebar-section h4 {
    margin-top:         clamp(0.8rem, 1vw + 0.8rem, 2.5rem);
    margin-bottom:      clamp(0.15rem, 0.2vw + 0.15rem, 0.55rem);
    font-size:          clamp(0.85rem, 0.7vw + 0.4rem, 1.3rem);
    font-weight:        600;
    color:              maroon;
    letter-spacing:     0.025em;
}

.sidebar-section h5 {
    margin-top:         clamp(0.5rem, 0.5vw + 0.4rem, 1.16rem);
    margin-bottom:      clamp(0.15rem, 0.2vw + 0.15rem, 0.55rem);
    font-size:          clamp(0.65rem, 0.5vw + 0.35rem, 1rem);
    font-weight:        600;
    color:              var(--primary-color);
}

/* Sidebar Menu List */
.sidebar-menu {
    list-style:         none;
    padding:            clamp(0.02rem, 0.05vw, 0.10rem) 0;
    margin:             0;
}

.sidebar-menu li {
    margin-bottom:      clamp(0.15rem, 0.2vw + 0.1rem, 0.3rem);
}

.sidebar-menu a {
    display:            block;
    color:              var(--gray-700);
    text-decoration:    none;
    font-size:          clamp(0.6rem, 0.5vw + 0.3rem, 0.95rem);
    margin-top:         0rem;
    margin-bottom:      0rem;
    border-radius:      var(--radius-md);
    padding:            clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0rem clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0.875rem;
    transition:         all 0.2s ease;
    border-left:        3px solid transparent;
}

.sidebar-menu a:hover {
    background:         var(--gray-100);
    color:              var(--primary-color);
    border-left-color:  var(--primary-color);
    padding-left:       1rem;
}

.sidebar-menu a.active {
    background:         linear-gradient(90deg, var(--gray-100) 0%, transparent 100%);
    color:              #047857;
    border-left-color:  transparent;
    font-weight:        500;
}

/* Disabled/Inactive Items */
.sidebar-menu .disabled {
    display:            flex;
    align-items:        center;
    padding:            clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0rem clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0.875rem;
    color:              var(--gray-400);
    font-size:          clamp(0.6rem, 0.5vw + 0.3rem, 0.95rem);
}

/* Legacy p1, p2, p3 for backward compatibility - now styled as sections/headings */
.sidemenu p1 {
    margin-top:         clamp(0.8rem, 1vw + 0.8rem, 2.5rem);
    margin-bottom:      clamp(0.15rem, 0.2vw + 0.15rem, 0.55rem);
    font-size:          clamp(0.85rem, 0.7vw + 0.4rem, 1.3rem);
    font-weight:        600;
    color:              maroon;
    letter-spacing:     0.025em;
    padding:            0;
    text-decoration:    none;
    display:            block;
}

.sidemenu p2 {
    margin-top:         clamp(0.5rem, 0.5vw + 0.4rem, 1.16rem);
    margin-bottom:      clamp(0.15rem, 0.2vw + 0.15rem, 0.55rem);
    font-size:          clamp(0.65rem, 0.5vw + 0.35rem, 1rem);
    font-weight:        600;
    color:              var(--primary-color);
    padding:            0;
    text-decoration:    none;
    display:            block;
}

.sidemenu p3 {
    padding:            clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0rem clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0.875rem;
    text-decoration:    none;
    font-size:          clamp(0.6rem, 0.5vw + 0.3rem, 0.95rem);
    color:              var(--gray-700);
    display:            block;
    margin:             0;
}

.sidemenu p3:hover {
    color:              var(--primary-color);
}

.sidemenu a:not(.sidebar-menu a) {
    padding:            0;
    margin:             0;
    text-decoration:    none;
    display:            inline;
}

.sidemenu a:not(.sidebar-menu a):hover {
    color:              var(--primary-color);
}

.sidemenu form {
    padding:            0;
    margin:             0;
}

/* Updated button styling for sidebar - buttons inside list items */
.sidebar-menu button {
    font-family:        "Lato", sans-serif;
    padding:            clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0rem clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0.875rem;
    text-decoration:    none;
    font-size:          clamp(0.6rem, 0.5vw + 0.3rem, 0.95rem);
    color:              var(--gray-700);
    display:            block;
    background-color:   transparent;
    background-repeat:  no-repeat;
    border:             none;
    border-left:        3px solid transparent;
    border-radius:      var(--radius-md);
    cursor:             pointer;
    overflow:           hidden;
    outline:            none;
    text-align:         left;
    width:              100%;
    transition:         all 0.2s ease;
    margin:             0;
}

.sidebar-menu button:hover {
    color:              var(--primary-color);
    background:         var(--gray-100);
    border-left-color:  var(--primary-color);
    padding-left:       1rem;
}

/* Legacy class support for backward compatibility */
.model_data_form,
.herd_immunity,
.summary_form,
.software {
    padding:            0;
    margin:             0;
}

.data_scope_selection,
.date_range_selection,
.country_selection {
    font-family:        "Lato", sans-serif;
    padding:            clamp(0.2rem, 0.25vw + 0.1rem, 0.35rem) 0rem;
    text-decoration:    none;
    font-size:          clamp(0.6rem, 0.5vw + 0.3rem, 0.95rem);
    color:              var(--gray-700);
    display:            block;
}

.country_selection select {
    padding:            0.4rem 0.6rem;
    border:             1.5px solid var(--primary-color);
    border-radius:      var(--radius-sm);
    font-size:          0.9rem;
    color:              var(--gray-700);
    font-weight:        500;
    background-color:   #f8f9fa;
    cursor:             pointer;
    transition:         all 0.2s ease;
    min-width:          160px;
}

.country_selection select:hover {
    background-color:   #e9ecef;
    border-color:       maroon;
}

.country_selection input[type="submit"] {
    margin-top:         0.5rem;
    padding:            0.4rem 0.8rem;
    font-size:          0.85rem;
    font-weight:        600;
    color:              white;
    background-color:   #5b9bd5;
    border:             none;
    border-radius:      var(--radius-md);
    cursor:             pointer;
    transition:         all 0.2s ease;
    box-shadow:         var(--shadow-sm);
}

.country_selection input[type="submit"]:hover {
    background-color:   #042b73;
    box-shadow:         var(--shadow-md);
    transform:          translateY(-1px);
}