/* ============================================
   FOREVERSORTED - MOBILE-FIRST CSS
   Base styles optimized for mobile devices
   Enhanced for larger screens with min-width media queries
   ============================================ */

/* Print Styles */
@media print {
    .noprint {
        display: none;
    }
}

/* ============================================
   BASE STYLES (Mobile First - 0px+)
   ============================================ */

:root {
    font-size: 3.0mm;
}

html {
    overflow-x: hidden; /* Prevent horizontal scrolling at root level */
    overflow-y: auto; /* Allow vertical scrolling */
}

body {
    margin: 3px 1vw;
    padding: 0;
    font-family: Arial, Verdana, sans-serif;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling */
}

.gridBody {
    display: grid;
    /* Use a proper "header / scrollable content / footer" layout. */
    grid-template-rows: max-content 1fr auto;
    height: 100vh;
    height: 100dvh; /* better on mobile browsers with dynamic toolbars */
    overflow: hidden;
}

p, h1, h2, h3, ul, li, form {
    margin: 0.8em;
    padding: 0;
}

#list2 {
    margin: 0 0 0 10px;
    padding: 0;
    line-height: 20px;
}

div#A4Portrait {
    border: outset;
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
}

/* Links - Mobile optimized */
a {
    cursor: pointer;
    text-decoration: underline;
    color: #8a8a8a;
    touch-action: manipulation; /* Improve touch response */
}
th a {
	color: white;
}

a:hover {
    color: #cccccc;
}

.eventLink {
    cursor: pointer;
    color: #0099cc;
    text-decoration: none;
    background-color: white;
    min-height: 44px; /* Touch-friendly */
    display: inline-block;
    padding: 8px 12px;
}

.eventLink:hover {
    color: #00bfff;
}

.eventLink:active {
    color: #00bfff;
    background-color: #e6f7ff;
}

#wraper {
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling */
    background: #AEB0B2;
    position: relative; /* Create positioning context */
    z-index: 10050; /* Keep header layer above main content */
}

/* Menu wrap container - allow dropdowns to extend */
#menuwrap {
    overflow: visible !important; /* Ensure dropdowns can extend beyond container */
    position: relative; /* Create positioning context */
}

/* Left menu wrap - allow dropdowns */
#leftmenuwrap {
    overflow: visible !important;
    position: relative;
}

/* Menus - Mobile First */
#leftmenu {
    float: left;
    z-index: 100;
    margin: 0 auto;
    color: #611616;
    text-align: left;
    font-size: 1em;
    min-height: 1.5em;
    width: 50%;
    overflow: visible; /* Allow dropdowns to extend beyond container */
    position: relative; /* Create positioning context for absolute children */
}

/* Toggle button container - always visible even when menu is hidden */
/* TEMPORARILY HIDDEN - Not working on Samsung S22+, can be re-enabled later */
#toggle_nav_container {
    display: none !important; /* Hidden for now - can be re-enabled if needed */
}

#toggle_nav_container a {
    display: block;
    height: 100%;
    line-height: 1;
    text-decoration: none; /* Remove underline from link */
    border: none; /* Remove any border */
    outline: none; /* Remove focus outline */
    position: relative; /* Ensure proper stacking */
    z-index: 1; /* Ensure link is above container */
}

#toggle_nav_container img {
    display: block !important; /* Ensure image is visible and on top */
    width: auto;
    height: 1em; /* Size to fit within container (1.5em - 0.5em padding) */
    max-width: 1em;
    max-height: 1em;
    object-fit: contain; /* Ensure image scales properly */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    border: none; /* Remove any border */
    position: relative; /* Ensure proper stacking */
    z-index: 1; /* Ensure image is above container background */
}

/* Toggle button inside menu (for when menu is visible) - hide when menu is visible */
#leftmenu #toggle_nav,
#leftmenu #toggle-nav,
#funcmenu #toggle_nav,
#funcmenu #toggle-nav {
    width: 1.5em; /* Responsive sizing */
    height: 1.5em;
    min-width: 44px; /* Touch-friendly on mobile */
    min-height: 44px;
    cursor: pointer;
    padding: 0.25em;
    box-sizing: border-box;
}

/* Hide the toggle icon inside the menu - we use the fixed container instead */
#leftmenu li.level3,
#funcmenu li.level3 {
    display: none !important; /* Hide the entire toggle menu item - we have fixed container */
}

#rightmenu {
    float: right;
    z-index: 100;
    width: 50%;
    margin: 0 auto;
    color: #FFFFFF;
    text-align: right;
    font-size: 1em;
    min-height: 1.5em;
    overflow: visible; /* Allow menu to wrap naturally and dropdowns to show */
    box-sizing: border-box; /* Include padding in width calculation */
    position: relative; /* Create positioning context for absolute children */
}

/* Functions Menu - Mobile: Simplified */
#funcmenu {
    color: #FFFFFF;
    font-size: 1em;
    margin: 0 auto;
    height: auto;
    min-height: 1.5em;
    text-align: left;
    z-index: 100; /* Higher z-index to appear above other elements */
    position: relative; /* Ensure stacking context for absolute children */
    overflow: visible !important; /* Force visible - allow dropdowns to extend */
}

/* Mobile-only function menu entries are hidden by default (desktop/tablet). */
#funcmenu > li.nav-mobile-only {
    display: none !important;
}

/* Mobile: keep the top nav minimal (Contacts / Tutoring / Activities) */
@media (max-width: 520px) {
    #funcmenu > li {
        display: none !important;
    }
    #funcmenu > li.nav-mobile-keep {
        display: inline !important;
        float: left;
    }
    #funcmenu > li.nav-mobile-only.nav-mobile-keep {
        display: inline !important;
        float: left;
    }
    /* Group selector pinned under PWA/BROWSER badge, outside menu flow. */
    #fs_mobile_group_slot {
        position: fixed;
        top: 22px;
        right: 8px;
        z-index: 10058;
        display: flex !important;
        align-items: center;
        gap: 0.25em;
        color: #fff;
        font-size: 0.86em;
        line-height: 1.7em;
    }
    #fs_mobile_group_slot .fs-mobile-group-label {
        white-space: nowrap;
    }
    #fs_mobile_group_slot select {
        max-width: 8.5em;
        min-height: 1.7em;
        font-size: 0.96em;
        padding: 0 0.2em;
    }
    #fs_mobile_group_slot.fs-mobile-group-single .fs-mobile-group-value {
        color: #fff;
        font-weight: 700;
    }
    /* Very narrow screens: avoid overlap with top nav text by simplifying control. */
    @media (max-width: 420px) {
        #fs_mobile_group_slot {
            top: 30px;
            right: 6px;
            font-size: 0.8em;
            gap: 0.15em;
        }
        #fs_mobile_group_slot .fs-mobile-group-label {
            display: none;
        }
        #fs_mobile_group_slot select {
            max-width: 7.2em;
            min-height: 1.55em;
            font-size: 0.92em;
        }
    }

    /* Hide the global hamburger on mobile portrait (it can hide the whole menu and strand users) */
    #funcmenu > li.level3,
    #toggle_nav_container {
        display: none !important;
    }

    /* Mobile: hide right menu to reduce header height */
    #rightmenu {
        display: none !important;
    }
    #leftmenu {
        width: 100% !important;
        z-index: 10050 !important;
    }
    #funcmenu {
        z-index: 10050 !important;
    }
    #funcmenu div {
        z-index: 10055 !important;
    }
}

/* Keep mobile pinned group selector hidden on wider layouts. */
@media (min-width: 521px) {
    #fs_mobile_group_slot {
        display: none !important;
    }
}

#funcmenu li {
    margin: 0 0 0 8px;
    list-style: none;
    display: inline;
    color: #FFFFFF;
    float: left;
    text-align: right;
    position: relative; /* Create positioning context for dropdown */
}

#funcmenu li.level2 {
    display: none; /* Hidden on mobile */
}

#funcmenu li.level3 {
    display: initial; /* Show toggle on mobile */
}

#funcmenu li a {
    display: block;
    margin: 0 1px 0 0;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    padding: 8px 12px; /* Touch-friendly */
    min-height: 44px;
    line-height: 28px;
}

/* Study Planner nav attention cue (clears after first click post-activation). */
#funcmenu li a.fs-nav-attn {
    position: relative;
}
#funcmenu li a.fs-nav-attn::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f7c948;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.28);
}

#funcmenu div {
    position: fixed; /* Fixed positioning to escape overflow constraints */
    visibility: hidden;
    z-index: 10055 !important; /* Above header + module bars */
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border-bottom: 1px solid #FFF;
    min-width: 200px; /* Wider for touch */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Visual separation */
    overflow: visible; /* Ensure dropdown content is visible */
    white-space: nowrap; /* Prevent text wrapping in dropdown */
    display: none; /* Hidden by default, JavaScript will show */
}

/* Dropdown portal styling
   Some screens create complex stacking contexts; `dev/js/menus.js` may move dropdown panels
   to `document.body` to ensure they always render above content. */
.fs-dropdown-menu {
    position: fixed; /* required for viewport-based positioning */
    visibility: hidden;
    z-index: 10055 !important; /* Above header + module bars */
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border-bottom: 1px solid #FFF;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    overflow: visible;
    white-space: nowrap;
    display: none;
}

#funcmenu div a {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 16px; /* Larger touch targets */
    padding-left: 40px; /* Space for checkmark */
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #dfe1e1;
    color: #00788B;
    font: 14px arial; /* Larger font for mobile */
    min-height: 44px;
}

/* When dropdown is portaled to body, keep link styling consistent */
.fs-dropdown-menu a {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 16px;
    padding-left: 40px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #dfe1e1;
    color: #00788B;
    font: 14px arial;
    min-height: 44px;
}

.fs-dropdown-menu a:hover {
    background: #00788B;
    color: #FFF;
}

.fs-dropdown-menu a.current-screen::before {
    content: "✓";
    position: absolute;
    left: 12px;
    color: #9c27b0;
    font-weight: bold;
    font-size: 16px;
}

.fs-dropdown-menu a.current-screen:hover::before {
    color: #FFF;
}

/* Current screen indicator in dropdown */
#funcmenu div a.current-screen::before {
    content: "✓";
    position: absolute;
    left: 12px;
    color: #9c27b0;
    font-weight: bold;
    font-size: 16px;
}

#funcmenu div a:hover {
    background: #00788B;
    color: #FFF;
}

#funcmenu div a.current-screen:hover {
    background: #00788B;
    color: #FFF;
}

#funcmenu div a.current-screen:hover::before {
    color: #FFF;
}

/* Top Menu - Mobile: Simplified */
#topmenu {
    color: #FFFFFF;
    font-size: 1em;
    margin: 0 auto;
    height: auto;
    min-height: 1.5em;
    text-align: right;
    z-index: 100; /* Higher z-index to appear above other elements */
    position: relative; /* Ensure stacking context for absolute children */
    clear: both; /* Prevent overlap */
    padding-bottom: 0.5em; /* Space for wrapped items, prevents scrollbar interference */
    overflow: visible !important; /* Force visible - allow natural wrapping and dropdowns */
    width: 100%; /* Ensure it takes full width of container */
    box-sizing: border-box; /* Include padding in width calculation */
}

#topmenu li {
    margin: 0 0 0 8px;
    list-style: none;
    display: inline-block; /* Changed from inline to allow better wrapping */
    color: #FFFFFF;
    float: left;
    text-align: right;
    clear: none; /* Allow wrapping */
    position: relative; /* Create positioning context for dropdown */
}

#topmenu li.level2 {
    display: none; /* Hidden on mobile */
}

#topmenu li a {
    display: block;
    margin: 0 1px 0 0;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    padding: 8px 12px; /* Touch-friendly */
    min-height: 44px;
    line-height: 28px;
}

#topmenu div {
    position: fixed; /* Fixed positioning to escape overflow constraints */
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border-bottom: 1px solid #FFF;
    min-width: 200px; /* Wider for touch */
    z-index: 10055 !important; /* Above header + module bars */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Visual separation */
    overflow: visible; /* Ensure dropdown content is visible */
    white-space: nowrap; /* Prevent text wrapping in dropdown */
    display: none; /* Hidden by default, JavaScript will show */
}

#topmenu div a {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 16px; /* Larger touch targets */
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #dfe1e1;
    color: #00788B;
    font: 14px arial; /* Larger font for mobile */
    min-height: 44px;
}

#topmenu div a:hover {
    background: #00788B;
    color: #FFF;
}

/* Footer - Hidden on mobile */
#footer {
    display: none;
}

/* Images - Responsive sizing */
img {
    border: none;
    max-width: 100%;
    height: auto;
}

/* Icon sizing - use relative units for responsive behavior */
/* Override inline height/width attributes with max constraints for icons */
img[height],
img[width] {
    max-height: 1.5em;
    max-width: 1.5em;
}

/* Invoices: never treat the company logo as a tiny UI icon */
.sls_invoice img[height],
.sls_invoice img[width] {
	max-height: none;
	max-width: none;
}

/* Invoice logo should be a predictable size (not icon-sized, not full-width) */
.sls_invoice .invoice-logo {
	/* Responsive but capped: scales with viewport, never exceeds target 130px */
	height: clamp(4em, 12vw, 120px);
	max-height: 120px;
	max-width: 260px;
	width: auto;
}

/* General icon sizing - applies to all images that might be icons */
img.icon,
img[src*="icon"],
img[src*="toggle"] {
    max-height: 1.5em;
}
img[src*="images/"] {
}

.opsicondiv {
    border: none;
    cursor: pointer;
    padding: 0 0.5rem;
    min-height: 44px; /* Touch-friendly on mobile */
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon images inside opsicondiv - responsive sizing */
.opsicondiv img {
    max-height: 1.5em;
    max-width: 1.5em;
    height: auto;
    width: auto;
}

.fileFound {
    border: solid thin gray;
    border-bottom: thick solid green;
    vertical-align: top;
    position: relative;
    z-index: 1;
    max-height: 1.5em; /* Responsive icon sizing */
    max-width: 1.5em;
}

.fileLost {
    border: solid thin gray;
    border-bottom: thick dashed red;
    position: relative;
    z-index: 1;
    max-height: 1.5em; /* Responsive icon sizing */
    max-width: 1.5em;
}

.fileDeleted {
    border: solid thin gray;
    border-bottom: thick solid grey;
    position: relative;
    z-index: 1;
    max-height: 1.5em; /* Responsive icon sizing */
    max-width: 1.5em;
}

/* Form Inputs - Mobile optimized */
input:disabled {
    background-color: #F4F4F4;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 8px 12px;
    min-height: 44px; /* Touch-friendly */
    width: 100%;
    box-sizing: border-box;
}

/* Tables - Mobile: Stack on small screens */
table {
    border: solid thin black;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

th {
    background-color: gray;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px 4px;
    white-space: nowrap;
}

td {
    vertical-align: top;
    padding: 8px 4px;
}

/* Lists */
ol.a {
    list-style-type: decimal;
}

ol.b {
    list-style-type: lower-roman;
}

#SettingsToggle {
    cursor: pointer;
    background-color: LightGray;
    color: white;
    min-height: 44px;
    padding: 8px 12px;
    display: inline-block;
}

/* Login and Input Styles */
.DateOutOfRange {
    background-color: #EBFFEB;
    color: #CC0099;
}

.inputDisallowedFuture {
    background-color: #FFE6E6;
    color: #CC0099;
}

.inputinline {
    border: solid thin blue;
    font-size: 1.0em;
    width: 100%;
    display: none;
}

.inputOK {
    background-color: #EBFFEB;
    color: black;
}

.inputNotOK {
    background-color: #FFE6E6;
    color: black;
}

/* PIN Input - Mobile optimized */
.pin-input-wrapper {
    position: relative;
    display: inline-block;
    width: 2em;
    min-width: 44px; /* Touch-friendly */
}

.pin-input-wrapper .pin-star {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 1.8em;
    font-weight: bold;
    pointer-events: none;
    line-height: 1;
    display: none;
    margin-top: -1px;
}

.pin-input-wrapper.has-value .pin-star {
    display: block;
}

.inputMasked {
    background-color: #f5f5f5;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px;
}

/* Logo */
#logo {
    position: relative;
    float: left;
    top: 10px;
    left: 10px;
    display: block;
    max-width: 100px;
}

/* Header */
#header {
    height: auto;
    min-height: 80px;
    padding: 10px;
    text-align: right;
    float: right;
    width: 100%;
    box-sizing: border-box;
}

#header p, #header h1, #header h2 {
    width: 100%;
    float: right;
    text-align: right;
    color: #fff;
}

#header p {
    margin: 0;
    padding: 10px 0;
    display: block;
}

/* Container */
#container1 {
    padding: 20px 10px;
    height: auto;
    min-height: 150px;
}

#container1 h1, #container1 h2 {
    width: 100%;
    color: white;
    margin-bottom: 10px;
    font-size: 1.2em;
}

#container1 h1, #container1 h2, #header h1, #header h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 500;
}

/* Main Container */
#maincontainer {
    padding: 0.5rem 10px 1.5rem 10px;
    color: #4b4b4b;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* Body uses overflow:hidden (grid layout), so main content must be scrollable. */
    min-height: 0; /* required so grid item can shrink and scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none; /* prevent scroll anchoring jumps during async renders */
    position: relative;
    z-index: 1;
}

#maincontainer h1 {
    font-weight: 100;
    margin-top: 1.0em;
    margin-bottom: 0.2em;
    font-size: 1.5em;
}

#maincontainer h3 {
    font-family: Georgia;
    font-size: 16px;
    font-weight: 100;
    margin-bottom: 7px;
    border-bottom: 1px solid #E2E2E2;
    background-color: #E5E5E5;
    padding: 8px;
    padding-left: 13px;
}

#maincontainer p {
    line-height: 20px;
}

/* Footer Container */
#footercontainer {
    clear: left;
    padding: 10px;
    height: auto;
    width: 100%;
}

.box {
    float: left;
    width: 100%;
    padding: 0 10px 10px 0;
    color: #75746f;
    margin-bottom: 20px;
}

.box a {
    color: #75746f;
    padding-left: 15px;
}

.box a:hover {
    text-decoration: underline;
}

h3.sifr07 {
    font-weight: normal;
}

.line {
    border-bottom: 1px solid #CCCCCC;
}

.pad2 {
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.pad1 {
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Side Menu */
#sidemenu {
    position: fixed;
    width: 100%;
    max-width: 280px;
    height: auto;
    list-style: none;
    background: white;
    z-index: 1000;
}

#sidemenu a {
    padding: 12px 0;
    color: #00788B;
    border-bottom: 1px solid #e9e9e8;
    display: block;
    min-height: 44px;
    line-height: 20px;
}

#sidemenu a:hover {
    border-bottom: 1px solid #7f7f7f;
}

/* Gadget Container */
#GadgetContainer {
    width: 100%;
    font-size: 0.8em;
    float: left;
    height: 100%;
    overflow: auto;
    margin-bottom: 20px;
}

/* Page Grid - Mobile: Vertical layout */
.pageGrid-normal {
    display: flex; /* Changed to flex for better control */
    flex-direction: column; /* Stack vertically */
    height: 100%;
    width: 100%;
    /* Important: keep overflow visible so sticky tab bars behave
       and we don't create a second nested scroll container. */
    overflow: visible;
}

.pageGrid-ForceOn {
    display: flex; /* Changed to flex for better control */
    flex-direction: column; /* Stack vertically */
    height: 100%;
    width: 100%;
    overflow: visible;
}

.toc {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

#toggle-nav {
    width: 1.5em; /* Responsive sizing */
    height: 1.5em;
    min-width: 44px; /* Touch-friendly on mobile */
    min-height: 44px;
    cursor: pointer;
    padding: 0.25em;
    box-sizing: border-box;
}

/* Toggle nav image inside */
#toggle-nav img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

.toggle-menu {
    overflow-x: hidden;
    height: max-content;
    width: 100%;
    position: sticky; /* Sticky positioning to stay visible when scrolling */
    top: 0; /* Stick to top when scrolling */
    /* Always keep module tab bars above page body content. Dropdowns remain above this. */
    z-index: 10040; /* Below header (10050) and dropdowns (10055), above content */
    isolation: isolate; /* prevent unexpected stacking context interactions */
    background: white; /* Ensure it has a background so content doesn't show through */
    padding: 0.5rem 0; /* Add some padding */
    margin-bottom: 0.5rem; /* Space before content */
    flex: 0 0 auto;
}

/* Critical: prevent menu height collapse (floats/odd markup).
   If the menu container collapses, body content can appear "under" it. */
.toggle-menu::after {
    content: "";
    display: table;
    clear: both;
}

/* Keep menu lists from floating out of their container (module CSS can override to flex on desktop). */
.toggle-menu .MenuList {
    float: none;
    display: block;
    width: 100%;
}

/* Menu toggle row (hamburger) */
.toggle-menu .MenuList > li.fs-menu-toggle {
    float: none;
    display: block;
    width: 100%;
}

.toggle-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    position: relative; /* Ensure proper stacking */
    z-index: 1; /* Below menu */
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Specific styling for tra_menu */
#tra_menu {
    position: sticky;
    top: 0;
    z-index: 10040;
    isolation: isolate;
    background: white;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ccc; /* Visual separator */
}

/* Ensure Tra_body appears below tra_menu */
#Tra_body {
    position: relative;
    z-index: 1;
    width: 100%;
}

.MenuList {
    float: left;
    list-style: none;
    min-height: 1.6rem;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    position: relative; /* Ensure proper positioning */
    z-index: 10040; /* keep above body content */
    background: transparent; /* Ensure visibility */
}

.MenuList li {
    float: none;
    color: black;
    line-height: 2rem;
    margin-right: 0;
    margin-bottom: 8px;
}

.inactive a, .current a {
    display: block;
    padding: 0 1em;
    text-decoration: none;
    line-height: 1.3rem;
    border: none;
    color: gray;
    background-color: white;
    border-top-right-radius: 0em;
    border-top-left-radius: 0em;
    min-height: 44px;
    line-height: 44px;
}

.inactive a:hover {
    background-color: #3cf;
    color: gray;
    text-decoration: none;
}

.current a {
    height: auto;
    min-height: 44px;
    background-color: transparent;
    color: black;
    border-bottom: 2px solid #00788B;
}

.current a:hover {
    background-color: #39C;
    color: #fff;
}

.MenuSelect {
    color: blue;
    height: auto;
    min-height: 44px;
    float: none;
    width: 100%;
}

/* Financial Control Styles */
.accdiv {
    margin: 0;
    padding: 8px;
    background-color: white;
    color: black;
    min-height: 44px;
}

.accdiv:hover {
    cursor: pointer;
    background-color: #F5ECCE;
}

.selecteddiv {
    background-color: blue;
    color: white;
}

.selecteddiv:hover {
    cursor: pointer;
    background-color: blue;
}

.NewAccount {
    color: gray;
}

.EditAccount {
    color: black;
}

.EditableField {
    color: blue;
    min-height: 44px;
    padding: 8px;
    display: inline-block;
}

.EditableField:hover {
    cursor: pointer;
    background-color: #F5ECCE;
    color: green;
}

.FieldNotEditable {
    color: gray;
}

.editField {
    display: none;
    color: blue;
    border: none;
    border-bottom: solid thin blue;
    font-size: 16px;
    min-height: 44px;
    padding: 8px;
}

.activeCheck {
    color: green;
    font-weight: bolder;
}

.activeSetPrimary {
    background-color: #FFFAFF;
    color: red;
    cursor: pointer;
    min-height: 44px;
    padding: 8px;
}

.pflag {
    font-size: 1.2em;
    font-weight: bolder;
    color: red;
    vertical-align: middle;
}

.OddRow {
    background-color: #F0F8FF;
}

.EvenRow {
    background-color: white;
}

.TextHighlight {
    color: blue;
    font-weight: bolder;
}

.TextLowlight {
    color: LightGray;
}

.Amounts {
    margin-left: 0;
    text-align: right;
    padding: 8px;
}

.Add2BundleHandle {
    position: relative;
    left: -6px;
    top: 0px;
    height: 0rem;
    width: 1rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

/* Records Editors */
.editorDiv {
    display: initial;
    position: absolute;
    border: solid medium blue;
    background: white;
    top: 1.5rem;
    left: 5%;
    right: 5%;
    width: 90%;
    max-width: 500px;
    z-index: 1000;
}

.editorDivOff {
    display: none;
    position: relative;
}

.editorLabel {
    text-align: right;
    color: blue;
    font-size: 1.1rem;
    padding-right: 0.5rem; /* Reduced from 1rem */
    padding-bottom: 0.25rem; /* Reduced from 1rem */
}

.editorView {
    text-align: left;
    color: darkgray;
    font-size: 1.1rem;
    padding-left: 0.2em; /* Reduced for better alignment */
    padding-bottom: 0.25rem; /* Reduced from 1rem */
    vertical-align: middle; /* Center align vertically */
}

.editorInput {
    text-align: left;
    color: black;
    font-size: 1.1rem;
    border: none;
    border-bottom: solid thin blue;
    width: 100%;
    min-height: 44px;
    padding: 0.25rem 0.2em; /* Reduced left padding for better alignment */
    font-size: 16px;
    vertical-align: middle; /* Center align vertically */
}

/* Ensure select and input elements in editor are properly aligned */
.editorDiv select,
.editorDiv input[type="text"],
.editorDiv input[type="date"],
.editorDiv input[type="number"],
.editorDiv input[type="email"] {
    padding-left: 0.2em;
    vertical-align: middle;
}

.editorRadio {
    text-align: left;
    color: darkgray;
    font-size: 1.1rem;
    border: none;
    min-height: 44px;
    padding: 8px;
}

.editorClose {
    cursor: pointer;
    height: 44px;
    width: 44px;
    padding: 8px;
}

/* ============================================
   TABLET STYLES (min-width: 601px)
   ============================================ */

/* Tablet/desktop layout should not kick in on touch phones in landscape.
   Use pointer/hover to keep "mobile" layout on coarse pointers even when wide. */
@media (min-width: 601px) and (pointer: fine) and (hover: hover) {
    #list2 {
        margin: 0 0 0 20px;
    }
    
    div#A4Portrait {
        width: 210mm;
    }
    
    a {
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    .eventLink {
        background-color: white;
        min-height: auto;
        padding: 0;
    }
    
    .eventLink:hover {
        background-color: #FFFFCC;
    }
    
    .eventLink:active {
        background-color: #DDDDAA;
    }
    
    #funcmenu {
        margin: 0 auto 0 0px;
        height: 1.5em;
    }
    
    #funcmenu li {
        margin: 0 0 0 18px;
    }
    
    #funcmenu li.level2 {
        display: initial;
    }
    
    #funcmenu li.level3 {
        display: none;
    }
    
    #funcmenu li a {
        padding: 0;
        min-height: auto;
        line-height: normal;
    }
    
    #funcmenu div a {
        padding: 5px 10px;
        font: 11px arial;
        min-height: auto;
    }
    
    #topmenu {
        margin: 0 auto 0 36px;
        height: auto; /* Changed from fixed 1.5em to auto to accommodate wrapping */
        min-height: 1.5em;
        padding-bottom: 0.5em; /* Space for wrapped items */
        overflow: visible; /* Ensure dropdowns can extend below */
    }
    
    /* Ensure dropdowns are visible on tablet */
    #topmenu div,
    #funcmenu div {
        z-index: 10055 !important; /* Above header + module bars */
        top: 100%;
    }
    
    #topmenu li {
        margin: 0 0 0 18px;
    }
    
    #topmenu li.level2 {
        display: initial;
        overflow: hidden;
    }
    
    #topmenu li a {
        padding: 0;
        min-height: auto;
        line-height: normal;
    }
    
    #topmenu div a {
        padding: 5px 10px;
        font: 11px arial;
        min-height: auto;
    }
    
    #footer {
        display: block;
        position: absolute;
        bottom: 3px;
        right: 3px;
        height: max-content;
        padding: 15px 20px 0px 0px;
        color: #8a8a8a;
        font-size: 10px;
        font-family: Tahoma, verdana;
    }
    
    #footer a {
        color: #8a8a8a;
    }
    
    #footer a:hover {
        color: #CCCCCC;
        border-bottom: 1px dashed #FFFFFF;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: inherit;
        min-height: auto;
    }
    
    .inputMasked {
        font-size: inherit;
        min-height: auto;
    }
    
    table {
        display: table;
    }
    
    #logo {
        top: 30px;
        left: 35px;
        max-width: none;
    }
    
    #header {
        height: 100px;
        padding-right: 20px;
        padding-top: 0px;
        width: auto;
    }
    
    #header p, #header h1, #header h2 {
        width: 470px;
    }
    
    #container1 {
        padding: 60px 0 10px 35px;
        height: 192px;
    }
    
    #container1 h1, #container1 h2 {
        width: 550px;
        font-size: inherit;
    }
    
    #maincontainer {
        padding: 0.5rem 0px 1.5rem 0px;
    }
    
    #maincontainer h1 {
        font-size: inherit;
    }
    
    #maincontainer h3 {
        font-size: 17px;
    }
    
    #footercontainer {
        padding-top: 10px;
        padding-left: 35px;
        height: 245px;
        width: 995px;
    }
    
    .box {
        width: 310px;
        margin-bottom: 0;
    }
    
    #sidemenu {
        width: 280px;
        height: 280px;
    }
    
    #sidemenu a {
        padding: 5px 0;
        min-height: 18px;
        line-height: 18px;
    }
    
    /* Toggle nav container - tablet */
    #toggle_nav_container {
        height: 1.5em;
        padding: 0.25em;
    }
    
    #toggle_nav_container img {
        height: 1em;
        max-width: 1em;
        max-height: 1em;
    }
    
    #GadgetContainer {
        width: 35em;
        font-size: 0.9em; /* Slightly smaller font for more compact display */
    }
    
    /* Gadget spacing on tablet - balanced for readability */
    .GadgetTable td, .GadgetTable th {
        padding: 0.2em 0.4em !important; /* Comfortable padding */
    }
    
    .GdtText {
        padding-left: 0.5em !important;
        padding-right: 0.25em !important;
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
        margin-top: 0.5em !important; /* Add top margin for spacing between lines */
    }
    
    .GdtAmount {
        padding-left: 0.25em !important;
        padding-right: 0.25em !important;
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    .GdtDetails {
        padding-left: 0.5em !important;
    }
    
    /* Add padding to company lines */
    .CmpText {
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    .CmpAmount {
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    .toc {
        width: 8em;
    }
    
    #toggle-nav {
        width: 1.5em; /* Responsive sizing */
        height: 1.5em;
        min-width: auto;
        min-height: auto;
        padding: 0.25em;
    }
    
    #toggle-nav img {
        max-height: 100%;
        max-width: 100%;
    }
    
    .toggle-menu {
        width: max-content;
        position: sticky;
        top: 0;
        z-index: 10040;
        isolation: isolate;
        background: white;
    }
    
    /* Ensure tra_menu stays visible on tablet */
    #tra_menu {
        position: sticky;
        top: 0;
        z-index: 10040;
        isolation: isolate;
        background: white;
        border-bottom: 1px solid #ccc;
        width: 100%;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
    }
    
    /* Ensure Tra_body appears below tra_menu */
    #Tra_body {
        position: relative;
        z-index: 1;
        width: 100%;
    }
    
    .MenuList {
        width: auto;
    }
    
    .MenuList li {
        float: left;
        margin-right: 0.13rem;
        margin-bottom: 0;
    }
    
    .inactive a, .current a {
        padding: 0 1em;
        line-height: 1.6rem;
        border: 0.06em solid #000;
        color: #000;
        background-color: #ccc;
        border-top-right-radius: 0.50em;
        border-top-left-radius: 0.50em;
        min-height: auto;
        line-height: 1.6rem;
    }
    
    .inactive a:hover {
        background-color: #3cf;
        color: #fff;
    }
    
    .current a {
        height: 1.65rem;
        background-color: white;
        color: black;
        border-bottom: 0;
        border: 0.06em solid #000;
        border-bottom: 0;
    }
    
    .current a:hover {
        background-color: #39C;
        color: #fff;
    }
    
    .MenuSelect {
        float: left;
        width: auto;
        min-height: auto; /* Override mobile min-height for tablet */
        height: auto; /* Allow natural height on tablet */
    }
    
    .accdiv {
        padding: 0;
        min-height: auto;
    }
    
    .EditableField {
        min-height: auto;
        padding: 0;
    }
    
    .activeSetPrimary {
        min-height: auto;
        padding: 0;
    }
    
    .editField {
        min-height: auto;
        padding: 0;
        font-size: inherit;
    }
    
    .editorRadio {
        min-height: auto;
        padding: 0;
    }
    
    .editorClose {
        height: 1.2em;
        width: auto;
        padding: 0;
    }
    
    .opsicondiv {
        min-height: auto; /* Smaller on tablet/desktop */
        min-width: auto;
    }
    
    .opsicondiv img {
        max-height: 1.5em; /* Responsive icon sizing */
        max-width: 1.5em;
    }
    
    .fileFound,
    .fileLost,
    .fileDeleted {
        max-height: 1.5em; /* Responsive icon sizing */
        max-width: 1.5em;
    }
    
    .Amounts {
        margin-left: 1em;
    }
    
    .Add2BundleHandle {
        min-width: 1rem;
        min-height: 0rem;
    }
    
    .editorDiv {
        left: 5rem;
        right: auto;
        width: auto;
        max-width: none;
    }
    
    .editorLabel {
        padding-right: 0.5rem; /* Reduced from 2rem */
        padding-bottom: 0.15rem; /* Reduced from 1rem */
    }
    
    .editorView {
        padding-left: 0.2em !important; /* Reduced for better alignment */
        padding-bottom: 0.15rem; /* Reduced from 1rem */
        vertical-align: middle !important; /* Center align vertically */
    }
    
    .editorInput {
        width: auto;
        min-height: auto;
        padding: 0.15rem 0.2em !important; /* Reduced left padding for better alignment */
        font-size: inherit;
        vertical-align: middle !important; /* Center align vertically */
    }
    
    /* Reduce spacing in editor rows and fix alignment */
    .editorDiv table td {
        padding: 0.15rem 0.2em !important; /* Reduced left padding */
        vertical-align: middle !important; /* Center align vertically */
    }
    
    /* Ensure select and input elements are properly aligned */
    .editorDiv select,
    .editorDiv input[type="text"],
    .editorDiv input[type="date"],
    .editorDiv input[type="number"] {
        padding-left: 0.2em !important;
        vertical-align: middle !important;
    }
    
    .editorDiv table tr {
        margin-bottom: 0.05rem; /* Minimal row spacing */
    }
    
    .editorDiv table {
        border-spacing: 0; /* Remove spacing between cells */
        border-collapse: collapse; /* Collapse borders */
    }
    
    /* Gadget spacing on desktop - balanced for readability */
    .GadgetTable td, .GadgetTable th {
        padding: 0.2em 0.3em !important; /* Comfortable padding for readability */
    }
    
    .GdtText {
        padding-left: 0.5em !important;
        padding-right: 0.25em !important;
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
        margin-top: 0.5em !important; /* Add top margin for spacing between lines */
    }
    
    .GdtAmount {
        padding-left: 0.25em !important;
        padding-right: 0.25em !important;
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    .GdtDetails {
        padding-left: 0.5em !important;
    }
    
    /* Add padding to company lines for better spacing */
    .CmpText {
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    .CmpAmount {
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    
    /* Reduce spacing in editor rows and fix alignment */
    .editorDiv table td {
        padding: 0.25rem 0.2em !important; /* Reduced left padding for better alignment */
        vertical-align: middle !important; /* Center align vertically */
    }
    
    .editorDiv table tr {
        margin-bottom: 0.25rem; /* Reduce row spacing */
    }
    
    /* Ensure select and input elements are properly aligned on tablet */
    .editorDiv select,
    .editorDiv input[type="text"],
    .editorDiv input[type="date"],
    .editorDiv input[type="number"] {
        padding-left: 0.2em !important;
        vertical-align: middle !important;
    }
}

/* ============================================
   DESKTOP STYLES (min-width: 1001px)
   ============================================ */

@media (min-width: 1001px) {
    /* Left Menu system for desktop */
    .pageGrid-normal {
        display: flex;
        flex-direction: column; /* Stack tra_menu and Tra_body vertically */
        height: 100%;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }
    
    .pageGrid-ForceOn {
        display: flex;
        flex-direction: column; /* Stack tra_menu and Tra_body vertically */
        height: 100%;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }
    
    .toc {
        float: left;
        width: 8em;
    }
    
    #toggle-nav {
        width: 1.5em; /* Responsive sizing */
        height: 1.5em;
        min-width: auto;
        min-height: auto;
        padding: 0.25em;
        cursor: pointer;
    }
    
    #toggle-nav img {
        max-height: 100%;
        max-width: 100%;
    }
    
    .toggle-menu {
        overflow-x: hidden;
        height: max-content;
        width: auto;
        position: sticky;
        top: 0;
        z-index: 10040;
        isolation: isolate;
        background: white;
    }
    
    .toggle-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        position: relative;
        z-index: 1;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure tra_menu stays visible and above Tra_body on desktop */
    #tra_menu {
        position: sticky;
        top: 0;
        z-index: 10040;
        isolation: isolate;
        background: white;
        border-bottom: 1px solid #ccc;
        width: 100%;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
    }
    
    /* Ensure Tra_body appears below tra_menu and scrolls */
    #Tra_body {
        position: relative;
        z-index: 1;
        width: 100%;
        flex: 1;
        overflow-y: auto; /* Allow scrolling of body content */
        min-height: 0; /* Important for flex scrolling */
    }
    
    #funcmenu li.level3 {
        display: initial;
    }
    
    .MenuList {
        float: initial;
        list-style: none;
        min-height: 1.6rem;
        padding: 0;
        margin: 0;
        border: none;
    }
    
    .MenuList li {
        float: left;
        color: black;
        line-height: 1.63rem;
        margin-right: 0.13rem;
    }
    
    .inactive a, .current a {
        display: block;
        padding: 0 1em;
        text-decoration: none;
        line-height: 1.6rem;
        border: 0.06em solid #000;
        color: #000;
        background-color: #ccc;
        border-top-right-radius: 0.50em;
        border-top-left-radius: 0.50em;
    }
    
    .inactive a:hover {
        background-color: #3cf;
        color: #fff;
        text-decoration: none;
    }
    
    .current a {
        height: 1.65rem;
        background-color: white;
        color: black;
        border-bottom: 0;
    }
    
    .current a:hover {
        background-color: #39C;
        color: #fff;
    }
    
    .MenuSelect {
        color: blue;
        height: 1.5em; /* Match menu bar height (1.5em) */
        min-height: auto; /* Override mobile min-height of 44px */
        line-height: 1.5em; /* Center text vertically */
        padding: 0 0.5em; /* Add horizontal padding */
        float: left;
        box-sizing: border-box; /* Include padding in height */
        font-size: 1em; /* Match menu font size */
    }
    
    /* Ensure icons are properly sized on desktop */
    .opsicondiv img,
    .fileFound,
    .fileLost,
    .fileDeleted,
    img[height],
    img[width] {
        max-height: 1.5em;
        max-width: 1.5em;
    }
    
    /* Toggle nav container - desktop */
    #toggle_nav_container {
        height: 1.5em;
        padding: 0.25em;
    }
    
    #toggle_nav_container img {
        height: 1em;
        max-width: 1em;
        max-height: 1em;
    }
    
    /* Ensure menu visibility on desktop */
    #funcmenu,
    #topmenu {
        z-index: 100;
        position: relative;
        overflow: visible; /* Ensure dropdowns can extend below */
    }
    
    /* Ensure dropdowns are visible on desktop */
    #topmenu div,
    #funcmenu div {
        z-index: 10055 !important; /* Above header + module bars */
        top: 100%; /* Position below menu item */
        left: 0; /* Align with menu item */
    }
    
    .MenuList {
        z-index: 10040;
        position: relative;
    }
}

/* Class/event notes in week and day calendar views (overflow-y:auto set via JS when notes appended) */
.fs-event-notes {
    font-size: 0.85em;
    opacity: 0.95;
    margin-top: 2px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
}