/* ==========================================================================
   Responsive Master CSS - Modern Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background: #f0f2f5 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

center {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    text-align: left;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.school-header {
    background: linear-gradient(135deg, #0c1929 0%, #162544 50%, #1a3058 100%);
    padding: 0;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    width: 100%;
    position: relative;
    z-index: 50;
}

.school-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4a84b, #e8b84a, #f0c850, #e8b84a, #d4a84b);
}

.school-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 25px;
}

.school-header .logo-circle {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 2px solid rgba(212,168,75,0.5);
    padding: 4px;
}

.school-header .logo-circle img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: contain;
}

.school-header .school-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    color: #fff;
}

.school-header .school-subtitle {
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-top: 3px;
    font-weight: 500;
    color: #d4a84b;
}

/* ==========================================================================
   LOGIN INFO BAR
   ========================================================================== */

.loginInfo {
    background: linear-gradient(to right, #1a3058, #0f2240) !important;
    padding: 8px 25px !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 12px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    border-bottom: 1px solid rgba(212,168,75,0.3) !important;
    text-align: right !important;
}

.loginInfo a,
.loginInfo a:visited {
    color: #90caf9 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
}

.loginInfo a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   MENU STYLING - Modern Navbar
   ========================================================================== */

/* Hide old menu corner images and separator lines */
img[src*="menu_bottom"],
img[src*="menu_top"],
img[src*="line.JPG"],
img[src*="line.jpg"] {
    display: none !important;
}

/* Hide the cells containing menu images */
td:has(> img[src*="menu_bottom"]),
td:has(> img[src*="menu_top"]) {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
}

.Menu {
    background: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
    background-image: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
    height: auto !important;
    min-height: 30px !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 10px !important;
    display: block !important;
    position: relative;
    z-index: 40;
    overflow: visible !important;
}

/* Menu table - allow wrapping */
.Menu > table,
.Menu > table > tbody,
.Menu > table > tbody > tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.Menu table {
    width: auto !important;
    background: transparent !important;
}

.Menu td {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}

.Menu a,
.Menu a:link,
.Menu a:visited {
    color: #fff !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    line-height: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.Menu a:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-bottom: 2px solid #42a5f5 !important;
    text-decoration: none !important;
    transform: none !important;
}

/* ==========================================================
   ASP.NET Menu - Dynamic Dropdown Sub-menus
   ASP.NET renders dropdowns as absolutely positioned divs
   with tables inside, NOT as ul/li lists.
   ========================================================== */

/* The popup div container for sub-menus */
div[id*="Menu1"][class*="dynamic"],
div[class*="dynamic"] {
    background: #1565c0 !important;
    border: none !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    z-index: 99999 !important;
    min-width: 200px !important;
    padding: 4px 0 !important;
}

/* Sub-menu table inside popup */
div[id*="Menu1"][class*="dynamic"] table,
div[class*="dynamic"] table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

/* Sub-menu table rows */
div[id*="Menu1"][class*="dynamic"] tr,
div[class*="dynamic"] tr {
    border: none !important;
}

/* Sub-menu table cells */
div[id*="Menu1"][class*="dynamic"] td,
div[class*="dynamic"] td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Sub-menu links */
div[id*="Menu1"][class*="dynamic"] a,
div[class*="dynamic"] a,
a[class*="dynamic"] {
    color: rgba(255,255,255,0.95) !important;
    padding: 9px 18px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
}

/* Sub-menu link hover */
div[id*="Menu1"][class*="dynamic"] a:hover,
div[class*="dynamic"] a:hover,
a[class*="dynamic"]:hover {
    background-color: #0d47a1 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Ensure parent menu container has proper z-index */
div[id*="Menu1"] {
    z-index: 100 !important;
}

/* Static top-level menu items - ensure proper line height for 35px bar */
.Menu a[class*="static"],
a[class*="static"] {
    line-height: 19px !important;
}

/* ==========================================================================
   LAYOUT - Remove old fixed-width table layout
   ========================================================================== */

/* Override the 930px width tables */
table[width="930"],
table[width="930px"] {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Menu container table - full width */
table[width="930"] > tbody > tr > td > table:first-child,
table[width="930px"] > tbody > tr > td > table:first-child {
    width: 100% !important;
}

/* ==========================================================================
   CONTENT AREA - Push footer to bottom
   ========================================================================== */

/* The table wrapping menu + content should grow to fill space */
center > table:has(.fontStyle),
center > table:has(td[height="480"]) {
    flex: 1 !important;
}

/* Also target by structure: the 3rd table in center (after header-table, loginInfo-table) */
center > table:nth-of-type(2) {
    flex: 1 !important;
}

/* Inner td should expand */
center > table:nth-of-type(2) > tbody > tr > td {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Menu table inside - no grow */
center > table:nth-of-type(2) > tbody > tr > td > table:first-child {
    flex-shrink: 0 !important;
}

/* Content fontStyle table - grow */
center > table:nth-of-type(2) > tbody > tr > td > table.fontStyle {
    flex: 1 !important;
}

td[height="480"],
td[valign="top"][height="480"] {
    height: auto !important;
    padding: 20px 15px !important;
    background: #fff !important;
}

.fontStyle {
    background-color: #fff !important;
    border: none !important;
    font-size: 12px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, Verdana, sans-serif !important;
    min-height: 60vh !important;
}

.fontStyle td[valign="top"] {
    height: auto !important;
    padding: 20px 15px !important;
}

/* ==========================================================================
   FOOTER - Sticky at bottom
   ========================================================================== */

.footer {
    background: linear-gradient(135deg, #0c1929 0%, #162544 100%) !important;
    color: rgba(255,255,255,0.9) !important;
    text-align: center !important;
    padding: 14px 20px !important;
    height: auto !important;
    border-top: 2px solid #d4a84b !important;
    margin-top: auto !important;
    clear: both !important;
    width: 100% !important;
    font-size: 12px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    flex-shrink: 0 !important;
}

.footer a {
    color: #d4a84b !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.footer div {
    color: rgba(255,255,255,0.9) !important;
}

/* ==========================================================================
   ALL FORM CONTROLS - GLOBAL STYLING
   ========================================================================== */

/* BUTTONS */
input[type="submit"],
input[type="button"],
.ASPbutton,
.button {
    margin: 3px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    border: none !important;
    min-height: 32px !important;
    padding: 6px 20px !important;
    background: linear-gradient(to bottom, #1e88e5 0%, #1565c0 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.ASPbutton:hover,
.button:hover {
    background: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: translateY(-1px) !important;
}

input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* DROPDOWNS */
select {
    font-size: 12px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    padding: 6px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    min-height: 30px !important;
    transition: border-color 0.2s ease !important;
}

select:hover,
select:focus {
    border-color: #1565c0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(21,101,192,0.1) !important;
}

/* TEXTBOXES */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea {
    font-size: 12px !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    padding: 6px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
    border-color: #1565c0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(21,101,192,0.1) !important;
}

/* CHECKBOXES & RADIO */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer !important;
    width: 15px !important;
    height: 15px !important;
    accent-color: #1565c0 !important;
}

/* ==========================================================================
   GRIDVIEW / TABLE STYLING
   ========================================================================== */

.GridView,
.GridView1,
.grid_G,
.grid_View1 {
    border-collapse: collapse !important;
    border: 1px solid #e0e0e0 !important;
    width: 100% !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    background: #fff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* GridView Header */
.GridView th,
.GridView1 th,
.grid_G th,
.grid_View1 th {
    background: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
    color: #FFFFFF !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: left !important;
    border: 1px solid #0d47a1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* GridView Rows */
.GridView td,
.GridView1 td,
.grid_G td,
.grid_View1 td {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border: 1px solid #e8e8e8 !important;
    background-color: #fff !important;
    color: #333 !important;
}

/* GridView Alternate Rows */
.GridView tr:nth-child(even) td,
.GridView1 tr:nth-child(even) td {
    background-color: #f8f9fa !important;
}

/* GridView Row Hover */
.GridView tr:hover td,
.GridView1 tr:hover td {
    background-color: #e3f2fd !important;
}

/* GridView Pager */
.GridView .pgr,
.GridView1 .pgr {
    background: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
}

.GridView .pgr td {
    border: none !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: transparent !important;
}

.GridView .pgr a {
    color: #90caf9 !important;
    font-weight: 600 !important;
}

.GridView .pgr a:hover {
    color: #fff !important;
}

/* ==========================================================================
   TITLE / PANEL HEADERS
   ========================================================================== */

.title,
.Paneltitle {
    background: linear-gradient(to bottom, #1565c0 0%, #0d47a1 100%) !important;
    color: #FFFFFF !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
    border-bottom: 2px solid #42a5f5 !important;
    border-radius: 4px 4px 0 0 !important;
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: 0.3px !important;
}

.subtitle {
    color: #1565c0 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #e3f2fd !important;
    padding: 8px 10px !important;
}

/* ==========================================================================
   PANEL STYLING
   ========================================================================== */

.panel,
.Panel1 {
    border: 1px solid #e0e0e0 !important;
    background-color: #fff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   SCROLL CONTAINER
   ========================================================================== */

.scroll,
.scroll1 {
    border: 1px solid #e0e0e0 !important;
    background-color: #fff !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
    color: #1565c0;
    text-decoration: none;
}

a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* ==========================================================================
   TAB CONTROL STYLING
   ========================================================================== */

.fancy .ajax__tab_header {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
}

.fancy .ajax__tab_body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    padding: 12px !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1024px) {
    table[width="930"],
    table[width="930px"] {
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .Menu a {
        padding: 10px 10px !important;
        font-size: 11px !important;
    }
}

@media screen and (max-width: 768px) {
    .school-header-inner {
        padding: 8px 15px;
        gap: 10px;
    }

    .school-header .logo-circle {
        width: 44px;
        height: 44px;
        padding: 3px;
    }

    .school-header .school-title {
        font-size: 16px;
    }

    .school-header .school-subtitle {
        font-size: 10px;
    }

    .loginInfo {
        text-align: center !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .Menu {
        padding: 0 4px !important;
        overflow: visible !important;
    }

    /* Menu items wrap to multiple lines on tablet/mobile */
    .Menu a,
    .Menu a:link,
    .Menu a:visited {
        padding: 8px 10px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    td[height="480"],
    .fontStyle td[valign="top"] {
        padding: 10px !important;
    }

    select,
    input[type="text"],
    textarea {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .school-header-inner {
        padding: 6px 10px;
        gap: 8px;
    }

    .school-header .logo-circle {
        width: 38px;
        height: 38px;
        padding: 2px;
    }

    .school-header .school-title {
        font-size: 13px;
        letter-spacing: 0.3px;
    }

    .school-header .school-subtitle {
        font-size: 9px;
    }

    .loginInfo {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }

    .Menu {
        padding: 0 2px !important;
    }

    .Menu a,
    .Menu a:link,
    .Menu a:visited {
        padding: 7px 6px !important;
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }

    .footer {
        font-size: 10px !important;
        padding: 10px 8px !important;
    }

    td[height="480"],
    .fontStyle td[valign="top"] {
        padding: 8px !important;
    }

    /* Make tables scroll horizontally on mobile */
    .fontStyle td[valign="top"] {
        overflow-x: auto !important;
    }
}

/* ==========================================================================
   UTILITY - Hide old decorative elements
   ========================================================================== */

/* Hide old menu background images */
td[width="24px"] {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

td[width="24px"] img {
    display: none !important;
}