/* =================================================================== * Vidyamandira Portal - Vidya Mandir Theme v2.0 * A unified and refined stylesheet for a modern,clean UI. * Inspired by the belurmath.org aesthetic. * =================================================================== */
/* --- 1. Font Imports --- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap");/* --- 2. Core Variables & Global Styles --- */
:root{/* --- Main Branding Colors --- */
 --primary:#f97316;/* Saffron:For actions,links,active states */
 --primary-dark:#d97706;/* Darker Saffron for hover */
 --primary-light:#fffbeb;/* Light Saffron for subtle backgrounds */
 --accent-maroon:#8c4d4d;/* Maroon:For headings,giving a classic,academic feel */
 --accent-maroon-dark:#7a4141;--accent-green:#046a38;/* Deep Green:For success states or secondary elements */
 /* --- UI & State Colors --- */
 --danger:#d32f2f;--warning:#f59e0b;--info:#0284c7;--success:var(--accent-green);/* --- Canvas,Text & Borders --- */
 --app-bg:#fdfcf9;/* A very light,warm off-white,like aged paper */
 --app-bg-gradient:linear-gradient(165deg,var(--app-bg) 0%,#fffaf3 100%);--card-bg:#ffffff;--text-primary:#1f2937;/* Soft,modern black */
 --text-secondary:#6b7280;/* Muted Gray for subtitles,secondary info */
 --text-tertiary:#9ca3af;/* Lighter Gray for placeholders,disabled text */
 --border-color:#e5e7eb;--divider-color:#f3f4f6;/* --- Typography & Dimensions --- */
 --font-primary:"Poppins",sans-serif;--font-secondary:"Inter",sans-serif;/* For body text for high readability */
 --radius-sm:0.25rem;--radius:0.5rem;--radius-lg:0.75rem;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow:0 4px 6px -1px rgb(0 0 0 / 0.07),0 2px 4px -2px rgb(0 0 0 / 0.07);--shadow-md:0 10px 15px -3px rgb(0 0 0 / 0.08),0 4px 6px -4px rgb(0 0 0 / 0.08);--shadow-lg:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-primary:0 4px 14px 0 rgba(249,115,22,0.15);--sidebar-width:260px;--topnav-height:65px;--transition-speed:0.3s;--accent-amber:#ffb300;--muted:var(--text-secondary);--card-border:var(--border-color);--bg:var(--card-bg);}
*,*::before,*::after{box-sizing:border-box;}
body{font-family:var(--font-secondary);background:var(--app-bg-gradient);/* Softer,more elegant gradient */
 color:var(--text-primary);margin:0;font-size:15px;/* Slightly larger base for better readability */
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:600;color:var(--accent-maroon);}
a{color:var(--primary);text-decoration:none;transition:color 0.2s ease;}
a:hover{color:var(--primary-dark);}
/* --- 3. Main Layout & Structure --- */
.app-container{display:flex;min-height:100vh;}
.main-content{flex:1;margin-left:var(--sidebar-width);transition:margin-left var(--transition-speed) ease;display:flex;flex-direction:column;min-height:100vh;}
.content-area{padding:30px;flex-grow:1;}
.app-footer{text-align:center;padding:15px 30px;border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:0.85rem;background:var(--card-bg);}
/* Dashboard Mode - Hide sidebar and use full width */
.dashboard-mode .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none;}
.dashboard-mode .sidebar-overlay{display:none;}
.dashboard-mode .main-content{margin-left:0;}
.dashboard-mode .menu-toggle{display:none;}
.dashboard-mode .top-nav{background:linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);border-bottom:none;position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.dashboard-mode .top-nav .nav-left{padding-left:20px;}
.dashboard-mode .page-title{display:none;}
.dashboard-mode .content-area{padding:0;}
.dashboard-mode .app-footer{display:none;}
/* Dashboard compact logo - only visible in dashboard mode */
.dashboard-logo-compact{display:none;align-items:center;gap:10px;text-decoration:none;margin-right:15px;}
.dashboard-logo-img{height:36px;width:36px;object-fit:contain;}
.dashboard-logo-text{font-family:var(--font-primary);font-weight:700;font-size:1rem;color:white;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.dashboard-mode .dashboard-logo-compact{display:flex;}
.dashboard-mode .notification-bell{color:rgba(255,255,255,0.9);}
.dashboard-mode .notification-bell:hover{color:white;}
.dashboard-mode .user-profile{background:rgba(255,255,255,0.1);border-radius:50px;padding:6px 12px;}
.dashboard-mode .user-profile:hover{background:rgba(255,255,255,0.2);}
.dashboard-mode .user-name,.dashboard-mode .user-role{color:white;}
.dashboard-mode .user-avatar{border-color:rgba(255,255,255,0.3);}
.dashboard-mode .dropdown-arrow{color:rgba(255,255,255,0.7);}
@media (max-width:768px){.dashboard-mode .top-nav{padding:0 15px;}.dashboard-logo-text{display:none;}.dashboard-mode .user-info{display:none;}.dashboard-mode .dropdown-arrow{display:none;}}
/* --- 4. Sidebar --- */
.sidebar{width:var(--sidebar-width);height:100vh;position:fixed;top:0;left:0;background:var(--card-bg);z-index:1100;display:flex;flex-direction:column;transition:transform var(--transition-speed) ease,width var(--transition-speed) ease;border-right:1px solid var(--border-color);}
.sidebar-header{padding:15px 20px;border-bottom:1px solid var(--divider-color);flex-shrink:0;}
.logo-container{display:flex;align-items:center;text-decoration:none;gap:12px;}
.sidebar-logo{height:45px;width:45px;object-fit:contain;}
.logo-text{line-height:1.2;}
.sidebar-title{font-weight:700;color:var(--accent-maroon);margin:0;font-size:1.1rem;}
.sidebar-subtitle{color:var(--primary);font-size:0.75rem;margin:0;font-weight:500;}
.sidebar-menu{flex-grow:1;overflow-y:auto;padding:10px 0;}
.menu-title{color:var(--text-tertiary);font-size:0.7rem;font-weight:600;text-transform:uppercase;padding:12px 20px 8px 20px;letter-spacing:0.5px;}
.menu-item{display:flex;align-items:center;padding:12px 20px;color:var(--text-secondary);text-decoration:none;border-left:4px solid transparent;transition:all 0.2s ease;margin:2px 10px;border-radius:0 var(--radius) var(--radius) 0;}
.menu-item:hover{background-color:var(--primary-light);color:var(--primary-dark);}
.menu-item.active{background-color:var(--primary-light);color:var(--primary);border-left-color:var(--primary);font-weight:600;}
.menu-icon{width:20px;text-align:center;margin-right:15px;font-size:0.95rem;}
.menu-item-text{flex-grow:1;}
/* Menu Notification Badge */
.menu-notif-badge{background-color:var(--danger);color:white;font-size:0.65rem;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:600;margin-left:auto;animation:badge-pulse 2s ease-in-out infinite;}
@keyframes badge-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
/* Menu Item with Notification - Glowing Border Animation */
.menu-item.has-notification{position:relative;background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(90deg,transparent,rgba(211,47,47,0.6),transparent) border-box;border:2px solid transparent;animation:glow-wave 2s ease-in-out infinite;}
.menu-item.has-notification::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(211,47,47,0.3),rgba(211,47,47,0.5),rgba(211,47,47,0.3),transparent);background-size:200% 100%;animation:shimmer 2s linear infinite;z-index:-1;filter:blur(4px);}
@keyframes glow-wave{0%,100%{box-shadow:0 0 5px rgba(211,47,47,0.2),0 0 10px rgba(211,47,47,0.1);}50%{box-shadow:0 0 10px rgba(211,47,47,0.4),0 0 20px rgba(211,47,47,0.2),0 0 30px rgba(211,47,47,0.1);}}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.sidebar-footer{padding:10px 0;border-top:1px solid var(--divider-color);margin-top:auto;}
/* --- 5. Top Navigation Bar --- */
.top-nav{display:flex;justify-content:space-between;align-items:center;height:var(--topnav-height);padding:0 30px;position:sticky;top:0;z-index:1000;background-color:rgba(253,252,249,0.85);/* --app-bg with opacity */
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);flex-shrink:0;}
.page-title{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin:0;}
.user-nav{display:flex;align-items:center;gap:1rem;}
.notification-bell{color:var(--text-secondary);font-size:1.2rem;position:relative;}
.notification-bell:hover{color:var(--text-primary);}
.notification-badge{position:absolute;top:-5px;right:-8px;background-color:var(--danger);color:white;font-size:0.65rem;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--app-bg);}
/* --- 6. User Profile Dropdown --- */
.user-profile-dropdown{position:relative;}
.user-profile{cursor:pointer;display:flex;align-items:center;gap:10px;background:none;border:none;padding:5px;border-radius:50px;transition:background-color 0.2s ease;}
.user-profile:hover{background-color:var(--divider-color);}
.user-avatar-img,.user-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--divider-color);}
.user-avatar{background-color:var(--accent-green);color:white;display:flex;align-items:center;justify-content:center;font-weight:600;}
.user-info{display:flex;flex-direction:column;text-align:left;line-height:1.2;}
.user-name{font-weight:600;color:var(--text-primary);}
.user-role{font-size:0.8rem;color:var(--text-secondary);text-transform:capitalize;}
.user-profile .dropdown-arrow{margin-left:5px;transition:transform 0.2s ease;color:var(--text-tertiary);}
.dropdown-menu{position:absolute;top:calc(100% + 12px);right:0;width:240px;background-color:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:1200;border:1px solid var(--border-color);opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.25s ease;}
.user-profile-dropdown.active .dropdown-menu{opacity:1;transform:translateY(0);visibility:visible;}
.user-profile-dropdown.active .dropdown-arrow{transform:rotate(180deg);}
.dropdown-header{padding:1rem;border-bottom:1px solid var(--divider-color);font-size:0.9rem;color:var(--text-secondary);}
.dropdown-header strong{color:var(--text-primary);}
.dropdown-item{display:flex;align-items:center;gap:12px;padding:0.75rem 1rem;font-size:0.9rem;color:var(--text-secondary);text-decoration:none;transition:background-color 0.2s ease,color 0.2s ease;}
.dropdown-item i{width:16px;text-align:center;}
.dropdown-item:hover{background-color:var(--primary-light);color:var(--primary);}
.dropdown-divider{height:1px;background-color:var(--divider-color);margin:0.5rem 0;}
.dropdown-item.text-danger:hover{background-color:#fee2e2;color:var(--danger);}
/* --- 7. Generic Components --- */
.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:1.5rem;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease;animation:fadeInUp 0.5s cubic-bezier(0.39,0.575,0.565,1) 0.1s both;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card-header{padding:1.25rem 1.5rem;background-color:transparent;border-bottom:1px solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.card-title{font-size:1.1rem;font-weight:600;margin:0;color:var(--accent-maroon);}
.card-subtitle{font-size:0.9rem;color:var(--text-secondary);margin-top:4px;}
.card-body{padding:1.5rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:600;padding:0.6rem 1.2rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all 0.2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background-color:var(--primary);color:white;border-color:var(--primary);box-shadow:var(--shadow-primary);}
.btn-primary:hover{background-color:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-md);}
.btn-secondary{background-color:var(--card-bg);color:var(--text-secondary);border-color:var(--border-color);box-shadow:var(--shadow-sm);}
.btn-secondary:hover{background-color:var(--divider-color);color:var(--text-primary);border-color:var(--border-color);box-shadow:var(--shadow);}
.form-label{display:block;margin-bottom:0.5rem;font-weight:500;font-size:0.9rem;}
.form-control,.form-select{display:block;width:100%;padding:0.6rem 0.85rem;font-size:0.9rem;font-family:var(--font-secondary);color:var(--text-primary);background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.form-control:focus,.form-select:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 0.2rem rgba(249,115,22,0.25);}
.badge{padding:6px 12px;font-weight:600;font-size:0.8rem;border-radius:50px;}
.badge-maroon{background-color:#f1eaea;color:var(--accent-maroon);}
/* --- 8. Responsive Layout --- */
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--text-primary);cursor:pointer;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1099;}
.sidebar-overlay.active{display:block;}
body.sidebar-collapsed .sidebar{width:80px;}
body.sidebar-collapsed .sidebar-header{padding:15px 17px;}
body.sidebar-collapsed .sidebar .logo-text,body.sidebar-collapsed .sidebar .menu-item-text{display:none;}
body.sidebar-collapsed .main-content{margin-left:80px;}
@media (max-width:992px){.menu-toggle{display:block;}
.sidebar{transform:translateX(-100%);width:var(--sidebar-width) !important;}
.sidebar.active{transform:translateX(0);box-shadow:var(--shadow-lg);}
.main-content{margin-left:0 !important;}
}
@media (max-width:576px){.content-area,.top-nav{padding:15px;}
.page-title{font-size:1.1rem;}
.user-info{display:none;}
body{font-size:14px;}
}
/* --- 9. DASHBOARD ENHANCEMENTS (NEW & IMPROVED) --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
.dashboard-grid-layout{display:grid;grid-template-columns:1fr;gap:30px;}
@media (min-width:1200px){.dashboard-grid-layout{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);}
}
/* Refined Section Header */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.section-title{font-size:1.5rem;font-weight:500;color:var(--accent-maroon);position:relative;padding-bottom:0.5rem;margin:0;}
.section-title::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--primary);border-radius:2px;}
/* Enhanced Welcome Card */
.welcome-card{position:relative;overflow:hidden;background:linear-gradient(110deg,#e9e786 60%,var(--primary-light) 100%);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;border:1px solid var(--primary-light);padding:2rem;}
.welcome-card::before{/* Subtle background pattern */
 content:"";position:absolute;top:-50%;right:-30%;width:80%;height:200%;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F97316' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");transform:rotate(15deg);z-index:0;}
.welcome-content,.welcome-actions{position:relative;z-index:1;}
.welcome-content{display:flex;align-items:center;gap:1.5rem;}
.welcome-avatar{width:64px;height:64px;border-radius:50%;background-color:var(--accent-green);color:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:600;flex-shrink:0;border:3px solid var(--card-bg);box-shadow:var(--shadow);}
.welcome-avatar-container{margin-right:20px;flex-shrink:0;}
.welcome-avatar{width:64px;height:64px;border-radius:50%;background:var(--card-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:600;border:3px solid var(--primary-light);}
.welcome-avatar-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--card-bg);box-shadow:var(--shadow-sm);}
.welcome-text h2{font-size:2rem;font-weight:600;margin:0 0 4px 0;color:var(--text-primary);}
.welcome-text p{color:var(--text-secondary);margin:0;font-size:1rem;}
.user-info-pills{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.btn.btn-outline-primary{border-radius:50px;font-weight:600;padding:10px 20px;color:var(--primary);border-color:var(--primary);background-color:transparent;box-shadow:none;}
.btn.btn-outline-primary:hover{background-color:var(--primary);color:white;transform:translateY(-2px);box-shadow:var(--shadow-primary);}
/* Upgraded Dashboard Action Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.dashboard-action-card{display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;text-decoration:none;color:var(--text-primary);position:relative;}
.dashboard-action-card:hover{border-color:var(--primary);background:linear-gradient( 135deg,var(--card-bg) 80%,var(--primary-light) 100% );transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-md);}
.action-card-icon{width:52px;height:52px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1rem;background-image:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%);color:var(--primary);}
.action-card-title{font-size:1.1rem;font-weight:600;margin:0 0 8px 0;color:var(--text-primary);}
.action-card-text{font-size:0.9rem;color:var(--text-secondary);line-height:1.5;margin:0;}
.dashboard-action-card::after{/* Hover Arrow */
 content:"→";position:absolute;top:1.5rem;right:1.5rem;color:var(--text-tertiary);font-size:1.2rem;font-weight:bold;opacity:0;transform:translateX(-10px);transition:opacity 0.3s ease,transform 0.3s ease;}
.dashboard-action-card:hover::after{opacity:1;transform:translateX(0);}
/* Upgraded Stat Cards */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.stat-card{display:flex;flex-direction:column;padding:1.25rem 1rem;text-align:left;background:linear-gradient(90deg,var(--card-bg) 70%,#fcfcfc 100%);border-left:4px solid;}
.stat-card.border-primary{border-color:var(--primary);}
.stat-card.border-green{border-color:var(--accent-green);}
.stat-card.border-info{border-color:var(--info);}
.stat-card.border-warning{border-color:var(--warning);}
.stat-number{font-size:2rem;font-weight:700;font-family:var(--font-primary);color:var(--text-primary);line-height:1;}
.stat-label{font-size:0.85rem;color:var(--text-secondary);margin-top:0.25rem;}
/* --- Sidebar Collapsed (For Menu Toggle) --- */
body.sidebar-collapsed .sidebar{transform:translateX(-100%);}
body.sidebar-collapsed .sidebar-overlay{opacity:1;visibility:visible;}
/* --- Sidebar Overlay --- */
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(31,41,55,0.4);z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition-speed) ease;}
.sidebar-overlay.active{opacity:1;visibility:visible;}
/* --- Nav Alignment Fix --- */
.top-nav .nav-left{display:flex;align-items:center;gap:1rem;}
.menu-toggle{background:none;border:none;font-size:1.25rem;color:var(--text-secondary);transition:color 0.2s ease;}
.menu-toggle:hover{color:var(--primary-dark);}
.page-title{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin:0;white-space:nowrap;}
/* Upgraded Activity Feed */
.activity-feed{list-style:none;padding:0;margin:0;}
.activity-feed-item{display:flex;gap:1rem;padding:0.85rem 0.25rem;border-bottom:1px solid var(--divider-color);}
.activity-feed-item:last-child{border-bottom:none;padding-bottom:0;}
.activity-feed-item:first-child{padding-top:0;}
.activity-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--primary-light);color:var(--primary);}
.activity-content{font-size:0.9rem;color:var(--text-secondary);}
.activity-content strong{font-weight:500;color:var(--text-primary);}
.activity-time{font-size:0.8rem;color:var(--text-tertiary);margin-top:2px;}
/* =================================================================== * 10. PAGE-SPECIFIC STYLES * Consolidated styles for individual pages to avoid repetition. * =================================================================== */
/* --- 10.1 Generic Page Components --- */
.card-empty-state{padding:3rem 1.5rem;text-align:center;background-color:transparent;border:1px dashed var(--border-color);box-shadow:none;}
.card-empty-state .icon{font-size:2.5rem;color:var(--primary);opacity:0.5;margin-bottom:1rem;}
.card-empty-state h4{font-size:1.25rem;color:var(--accent-maroon);}
.card-empty-state p{color:var(--text-secondary);max-width:400px;margin:0.5rem auto 0;}
/* --- 10.2 Calendar (Combined Grid & Timeline) --- */
.page-header .btn-group .btn{background-color:var(--card-bg);border-color:var(--border-color);color:var(--text-secondary);}
.page-header .btn-group .btn:hover{background-color:var(--divider-color);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow);}
.page-header .btn-group .btn.active{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary);box-shadow:none;}
.card-calendar .card-body{padding:0.75rem;}
.calendar-grid{width:100%;border-collapse:collapse;table-layout:fixed;}
.calendar-grid thead th{text-align:center;font-weight:600;color:var(--text-secondary);font-size:0.8rem;padding:0.75rem 0.25rem;border-bottom:2px solid var(--divider-color);}
.calendar-grid tbody td{border:1px solid var(--divider-color);vertical-align:top;height:110px;padding:0.5rem;position:relative;transition:background-color 0.2s ease,border-color 0.2s ease;}
.calendar-grid tbody td:not(.is-empty){cursor:pointer;}
.calendar-grid tbody td:not(.is-empty):hover{background-color:var(--primary-light);}
.calendar-grid .day-number{font-size:0.85rem;font-weight:500;color:var(--text-secondary);position:absolute;top:0.5rem;right:0.5rem;}
.calendar-grid .today .day-number{background-color:var(--primary);color:white;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.calendar-grid .event-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.calendar-grid .event-dot{width:6px;height:6px;border-radius:50%;background-color:var(--primary);}
.calendar-grid .event-dot.is-holiday{background-color:var(--accent-maroon);}
.calendar-grid td.selected{background-color:var(--primary-light) !important;border:2px solid var(--primary);}
.calendar-filter-actions{display:none;justify-content:space-between;align-items:center;padding:0.75rem 1.25rem;background-color:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius);margin:1.5rem 0;}
.filter-status-text{color:var(--primary-dark);font-weight:500;}
.filter-status-text strong{font-weight:700;}
.event-timeline-container{position:relative;padding-left:50px;margin-top:2rem;}
.event-timeline-container::before{content:"";position:absolute;top:15px;left:15px;width:2px;height:calc(100% - 15px);background-color:var(--border-color);z-index:0;}
.event-timeline-item{position:relative;margin-bottom:2rem;display:flex;align-items:flex-start;gap:20px;transition:opacity 0.4s ease,transform 0.3s ease;}
.event-date-marker{position:absolute;left:-50px;top:0;width:42px;height:42px;background-color:var(--card-bg);border:2px solid var(--border-color);border-radius:50%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:600;flex-shrink:0;}
.event-date-marker .month{font-size:0.7rem;text-transform:uppercase;color:var(--text-tertiary);line-height:1;}
.event-date-marker .day{font-size:1.1rem;color:var(--accent-maroon);line-height:1.2;}
.event-timeline-item.is-filtered{opacity:0.4;transform:scale(0.98);}
.event-timeline-item.is-highlighted .event-card{border-left-color:var(--primary-dark);box-shadow:var(--shadow-md);transform:scale(1.02);}
.event-timeline-item.is-highlighted.is-holiday .event-card{border-left-color:var(--accent-maroon-dark);}
.event-timeline-item .event-card{flex-grow:1;margin-bottom:0;border:1px solid var(--border-color);border-left:4px solid var(--primary);transition:all 0.3s ease;}
.event-timeline-item.is-holiday .event-card{border-left-color:var(--accent-maroon);}
.event-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--divider-color);}
.event-card-header .card-title{font-size:1.2rem;color:var(--text-primary);margin:0;}
.event-details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:1.25rem 1.5rem;}
.event-detail-item{display:flex;flex-direction:column;}
.event-detail-label{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.25rem;}
.event-detail-value{font-size:0.95rem;color:var(--text-primary);}
.event-description{padding:1.25rem 1.5rem;border-top:1px solid var(--divider-color);font-size:0.95rem;line-height:1.6;color:var(--text-secondary);}
/* --- 10.3 Profile View --- */
.profile-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.profile-header{padding:2rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%);}
.profile-avatar-large,.profile-avatar-large-img{width:100px;height:100px;border-radius:50%;object-fit:cover;flex-shrink:0;border:4px solid var(--card-bg);box-shadow:var(--shadow);}
.profile-avatar-large{display:flex;align-items:center;justify-content:center;background-color:var(--accent-green);color:var(--card-bg);font-size:3rem;font-weight:600;}
.profile-identity .profile-name{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin:0 0 0.5rem 0;}
.profile-identity .profile-role-badge{background-color:var(--accent-maroon);color:white;padding:0.3rem 0.8rem;border-radius:50px;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.profile-nav-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border-color);background-color:var(--app-bg);padding:0 1.5rem;}
.profile-tab{display:flex;align-items:center;gap:0.6rem;padding:1rem 1.25rem;color:var(--text-secondary);text-decoration:none;font-weight:500;border-bottom:3px solid transparent;transition:all 0.2s ease;white-space:nowrap;}
.profile-tab:hover{color:var(--primary);background-color:var(--primary-light);}
.profile-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
.profile-tab i{width:16px;text-align:center;}
.tab-pane{display:none;padding:1.5rem;animation:fadeInUp 0.5s ease;}
.tab-pane.active{display:block;}
.tab-pane-title{font-size:1.25rem;font-weight:500;color:var(--accent-maroon);margin:0 0 1.5rem 0;padding-bottom:0.75rem;border-bottom:1px solid var(--divider-color);}
.profile-details-list{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.profile-details-list dt{font-weight:500;color:var(--text-secondary);font-size:0.9rem;grid-column:1;}
.profile-details-list dd{margin:0;font-weight:500;color:var(--text-primary);grid-column:1;}
.profile-details-list dd i.fa-lock{color:var(--text-tertiary);font-size:0.8em;margin-left:0.5rem;cursor:help;}
.profile-actions-container .card{position:sticky;top:calc(var(--topnav-height) + 1.5rem);}
.profile-actions-container .card-header .card-title{font-size:1.1rem;color:var(--accent-maroon);}
.profile-actions-container .btn{width:100%;margin-bottom:0.75rem;}
.profile-actions-container .btn:last-child{margin-bottom:0;}
/* --- 10.4 Responsive Overrides for Page-Specifics --- */
@media (min-width:576px){.profile-header{flex-direction:row;text-align:left;}
.profile-details-list{grid-template-columns:max-content 1fr;gap:1rem 2rem;}
.profile-details-list dd{grid-column:2;}
}
@media (min-width:992px){.profile-grid{grid-template-columns:minmax(0,3fr) minmax(0,1fr);}
}
@media (max-width:768px){.calendar-grid tbody td{height:80px;}
.event-timeline-container{padding-left:0;}
.event-timeline-container::before,.event-date-marker{display:none;}
}
/* --- 10.4 Profile Edit View --- */
.profile-edit-form-container .card-header .card-title{font-size:1.5rem;color:var(--accent-maroon);}
.profile-edit-form-container .card-header .card-subtitle{font-size:0.95rem;color:var(--text-secondary);margin-top:0.25rem;}
/* Form Section Styling */
.form-section-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:1.5rem 0 1rem 0;padding-bottom:0.5rem;border-bottom:1px solid var(--divider-color);}
.form-section-title:first-of-type{margin-top:0;}
.form-divider{margin:2rem 0;border-color:var(--divider-color);}
/* Profile Picture Upload Section */
.profile-picture-edit-group{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;}
.profile-picture-edit-group .form-control-group{flex:1;min-width:200px;}
.current-profile-pic{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--border-color);}
.current-profile-pic-label{font-size:0.8rem;color:var(--text-secondary);text-align:center;margin-top:0.5rem;}
/* Official Info "Sidebar" Card */
.profile-info-container .card{position:sticky;top:calc(var(--topnav-height) + 1.5rem);/* Sticky on scroll */
 background-color:var(--app-bg);border-style:dashed;}
.profile-info-container .card-header .card-title{font-size:1.1rem;color:var(--accent-maroon);}
.profile-info-container .info-lock-text{display:flex;gap:0.75rem;align-items:flex-start;padding:0.75rem 1rem;background-color:var(--divider-color);border-radius:var(--radius);font-size:0.85rem;color:var(--text-secondary);}
.profile-info-container .info-lock-text i{margin-top:3px;color:var(--text-tertiary);}
.profile-info-container .profile-details-list{margin-top:1.5rem;}
/* Form Actions (Save/Cancel buttons) */
.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color);}
/* --- 10.5 Account Security Page --- */
.security-settings-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:992px){.security-settings-grid{grid-template-columns:1fr 1fr;}
}
/* General card styling for this page */
.security-settings-grid .card{display:flex;flex-direction:column;height:100%;/* Makes cards in the same row equal height */
}
.security-settings-grid .card .card-header .card-title{font-size:1.25rem;color:var(--accent-maroon);display:flex;align-items:center;gap:0.75rem;}
/* Styled List for Activity/Sessions */
.styled-list{list-style:none;padding:0;margin:0;}
.styled-list-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--divider-color);}
.styled-list-item:last-child{border-bottom:none;}
.styled-list-item-icon{font-size:1.5rem;width:30px;text-align:center;flex-shrink:0;margin-right:0.5rem;}
.styled-list-item-content{flex:1;min-width:200px;/* Helps with wrapping */
}
.styled-list-item-content strong{font-weight:500;color:var(--text-primary);}
.styled-list-item-content .meta-text{font-size:0.85rem;color:var(--text-secondary);}
.styled-list-item-action{flex-shrink:0;}
/* Specific colors for icons */
.icon-success{color:var(--accent-green);}
.icon-danger{color:var(--danger);}
.icon-device{color:var(--text-tertiary);}
/* Custom badge for "Current Session" */
.badge.badge-current-session{background-color:var(--accent-green);color:white;font-weight:500;border-radius:50px;padding:0.4rem 0.8rem;font-size:0.8rem;}
/* Revoke Button styling */
.btn-revoke{background-color:transparent;border:1px solid var(--danger);color:var(--danger);font-weight:600;padding:0.3rem 0.8rem;border-radius:var(--radius);transition:all 0.2s ease;}
.btn-revoke:hover{background-color:var(--danger);color:white;transform:translateY(-2px);box-shadow:0 4px 8px rgba(211,47,47,0.2);}
/* "Log out of all" button section */
.revoke-all-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color);}
/* --- 10.6 Change Password Page --- */
.change-password-form-container{max-width:600px;margin:0 auto;/* Center the form card on the page */
}
/* Password strength meter */
.password-strength-meter{height:10px;background-color:var(--divider-color);border-radius:var(--radius-sm);margin-top:0.5rem;overflow:hidden;}
.strength-bar{height:100%;width:0;border-radius:var(--radius-sm);transition:width 0.3s ease,background-color 0.3s ease;}
.strength-bar.weak{width:33%;background-color:var(--danger);}
.strength-bar.medium{width:66%;background-color:var(--warning);}
.strength-bar.strong{width:100%;background-color:var(--accent-green);}
.strength-text{margin-top:0.5rem;font-size:0.85rem;font-weight:500;color:var(--text-secondary);}
/* Password requirements list */
.password-requirements{font-size:0.85rem;color:var(--text-secondary);list-style-type:none;padding-left:0;margin-top:0.5rem;}
.password-requirements li{margin-bottom:0.25rem;transition:color 0.3s ease;}
.password-requirements li.met{color:var(--accent-green);text-decoration:line-through;}
.password-requirements li.met i{font-weight:900;/* Make the checkmark bold */
}
/* Re-using form-actions from profile edit */
.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color);}
/* --- 10.7 Data Export Page --- */
.export-data-container{max-width:700px;margin:2rem auto 0;/* Center the card and add space from header */
}
.export-data-container .card{text-align:center;}
.export-data-container .card-body{padding:2.5rem;}
.export-icon-wrapper{width:80px;height:80px;margin:0 auto 1.5rem;background-color:var(--primary-light);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;box-shadow:0 0 0 8px var(--primary-light);}
.export-data-container .card-title{font-size:1.75rem;color:var(--accent-maroon);margin-bottom:0.75rem;}
.export-data-container .card-subtitle{max-width:500px;margin:0 auto 2rem;color:var(--text-secondary);line-height:1.6;}
/* Styled list for data details */
.data-details-list{list-style:none;padding:0;margin:2rem 0;display:inline-block;/* Allows the list to be centered */
 text-align:left;/* Align text within the list to the left */
}
.data-details-list li{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;color:var(--text-secondary);}
.data-details-list li i{color:var(--primary);width:20px;text-align:center;}
/* Card footer for actions */
.export-data-container .card-footer{background-color:var(--app-bg);border-top:1px solid var(--divider-color);padding:1.5rem;}
.export-data-container .form-actions{justify-content:center;padding-top:0;border-top:none;margin-top:0;}
/* --- 10.8 Admin View Student Detail Page --- */
.admin-actions-container .card{position:sticky;top:calc(var(--topnav-height) + 1.5rem);/* Sticky on scroll */
}
.admin-actions-container .card-header .card-title{font-size:1.1rem;color:var(--accent-maroon);}
.admin-actions-container .card-body p{font-size:0.9rem;color:var(--text-secondary);}
/* --- 10.9 Superintendent Dashboard --- */
/* Themed Stat Cards */
.stat-card{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background-color:var(--card-bg);}
.stat-card-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;}
.stat-card-info .stat-value{font-size:2.25rem;font-weight:700;color:var(--text-primary);line-height:1;}
.stat-card-info .stat-label{font-size:0.9rem;color:var(--text-secondary);margin-top:0.25rem;}
/* Stat Card Color Modifiers */
.stat-card-icon.icon-total{background-color:#e0f2fe;color:#0284c7;}
/* info */
.stat-card-icon.icon-present{background-color:#f0fdf4;color:#16a34a;}
/* success */
.stat-card-icon.icon-on-leave{background-color:#fffbeb;color:#f59e0b;}
/* warning */
/* DataTables Filter Bar */
.datatable-filter-bar{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius) var(--radius) 0 0;border-bottom:none;/* The table itself has the bottom border */
}
.datatable-filter-bar .filter-group{flex:1 1 180px;/* Flex-grow,flex-shrink,flex-basis */
}
.datatable-filter-bar .filter-group label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.25rem;display:block;}
/* Ensure card-body has no top padding when a filter bar is present */
.card-body-no-top-padding{padding-top:0 !important;}
/* DataTables Action Buttons */
.table-actions{display:flex;gap:0.5rem;justify-content:center;}
.btn-action{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease;border:none;font-size:0.9rem;}
.btn-action-view{background-color:var(--primary-light);color:var(--primary);}
.btn-action-view:hover{background-color:var(--primary);color:white;transform:scale(1.1);}
.btn-action-leave{background-color:#fef2f2;color:var(--danger);}
.btn-action-leave:hover{background-color:var(--danger);color:white;transform:scale(1.1);}
/* Themed Modal Form */
.modal-content .form-section-title{margin-top:1.5rem;}
.modal-content .form-section-title:first-child{margin-top:0;}
/* --- 10.9 Superintendent Meal Management --- */
/* Tab Navigation */
.nav.nav-tabs.meal-tabs{border-bottom:2px solid var(--border-color);}
.nav.meal-tabs .nav-link{font-weight:500;color:var(--text-secondary);padding:0.75rem 1.5rem;border:none;border-bottom:2px solid transparent;border-radius:0;}
.nav.meal-tabs .nav-link:hover{background-color:var(--primary-light);border-bottom-color:var(--primary-light);}
.nav.meal-tabs .nav-link.active{color:var(--primary);background-color:transparent;border-bottom-color:var(--primary);font-weight:600;}
/* "Already Submitted" Alert Box */
.alert-submitted-info{background-color:var(--primary-light);border-left:4px solid var(--primary);border-radius:var(--radius);padding:1rem 1.25rem;}
.alert-submitted-info .alert-heading{color:var(--primary-dark);}
/* Meal Count Cards & Tables */
.meal-count-card .card-header .card-title{font-size:1.25rem;color:var(--accent-maroon);display:flex;align-items:center;gap:0.75rem;}
.meal-count-table{border-bottom:none;/* Remove default table border */
}
.meal-count-table th{background-color:var(--app-bg) !important;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.5px;font-weight:600;color:var(--text-secondary);}
.meal-count-table .final-count-input{width:80px;text-align:center;font-weight:500;}
.meal-count-table tfoot td{font-weight:600;background-color:var(--app-bg);}
.meal-count-table .final-total{color:var(--primary-dark);font-size:1.1rem;}
/* On Leave Info Cards */
.on-leave-card .card-header{display:flex;align-items:center;gap:0.75rem;color:#14532d;/* Custom dark green */
 background-color:#dcfce7;/* Light green */
 border-bottom-color:#a7f3d0;}
.on-leave-card.type-warning .card-header{color:#854d0e;/* Custom dark yellow */
 background-color:#fef9c3;/* Light yellow */
 border-bottom-color:#fde68a;}
.on-leave-card.type-info .card-header{color:#1e40af;/* Custom dark blue */
 background-color:#dbeafe;/* Light blue */
 border-bottom-color:#bfdbfe;}
.on-leave-card .card-header h5{color:inherit;font-size:1.1rem;font-weight:600;}
/* Preference Management Table (DataTables styling is in the core CSS) */
#mealPreferenceTable th,#mealPreferenceTable td{white-space:nowrap;}
#mealPreferenceTable .form-select-sm{min-width:150px;}
/* --- 10.10 Superintendent Review Leave Page (COMPACT REDESIGN) --- */
.review-requests-container{display:flex;flex-direction:column;gap:1.5rem;}
.request-review-card-compact{border-left-width:5px;border-left-style:solid;border-color:var(--primary);transition:box-shadow 0.2s ease,transform 0.2s ease;overflow:hidden;/* Important for clean corners */
}
.request-review-card-compact:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.request-review-card-compact .card-header{background-color:var(--app-bg);}
.request-review-card-compact .card-title{font-size:1.25rem;color:var(--accent-maroon);margin:0;}
.request-review-card-compact .card-subtitle{font-size:0.85rem;color:var(--text-secondary);}
/* Badge for "New" vs "Modification" */
.badge.badge-leave-type{font-weight:600;padding:0.4rem 0.8rem;font-size:0.8rem;border-radius:50px;}
.badge-leave-type.is-new{background-color:#dbeafe;color:#1e40af;}
.badge-leave-type.is-modification{background-color:#fef9c3;color:#854d0e;}
/* Main content layout inside the card */
.review-card-content-grid{display:grid;grid-template-columns:1fr;/* Default to single column */
}
@media (min-width:992px){.review-card-content-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);/* 3:2 ratio for details vs actions */
}
}
/* Key Details Section */
.review-key-details{padding:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;border-right:1px solid var(--border-color);}
.detail-item{display:flex;flex-direction:column;}
.detail-item-label{font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px;}
.detail-item-value{font-size:0.95rem;font-weight:500;color:var(--text-primary);}
/* Action Form Styling */
.action-form-container-compact{background-color:var(--app-bg);padding:1.5rem;}
.action-form-container-compact .form-label{font-weight:600;}
.action-form-container-compact .form-actions{display:flex;flex-direction:column;gap:0.75rem;margin-top:1rem;}
@media (min-width:576px){.action-form-container-compact .form-actions{flex-direction:row;}
}
/* Modal Styling */
.modal-body .profile-details-list{margin-top:1rem;}
/* Status Badge Classes (reusing from previous) */
.badge-status-approved{background-color:#dcfce7;color:#166534;}
.badge-status-pending{background-color:#fef9c3;color:#854d0e;}
.badge-status-rejected{background-color:#fee2e2;color:#991b1b;}
/* --- 10.10 Superintendent Review Leave (COLLAPSIBLE COMPACT DESIGN) --- */
.review-requests-container{display:flex;flex-direction:column;gap:1rem;/* Reduced gap for a tighter list */
}
.request-review-card-collapsible{border:1px solid var(--border-color);border-left-width:4px;border-left-color:var(--primary);border-radius:var(--radius-lg);background-color:var(--card-bg);transition:box-shadow 0.2s ease;}
.request-review-card-collapsible.is-open{box-shadow:var(--shadow-md);border-color:var(--primary-dark);}
/* The part of the card that is always visible */
.review-card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;cursor:pointer;}
.review-card-header:hover{background-color:var(--app-bg);}
.review-card-title-group{flex:1;min-width:200px;}
.review-card-title{font-size:1.1rem;font-weight:600;color:var(--accent-maroon);margin:0;}
.review-card-subtitle{font-size:0.85rem;color:var(--text-secondary);}
/* Action buttons in the header */
.review-card-actions{display:flex;gap:0.75rem;align-items:center;flex-shrink:0;}
.review-card-actions .btn-details-toggle{border-radius:50%;width:36px;height:36px;padding:0;background-color:var(--divider-color);color:var(--text-secondary);border:none;transition:transform 0.3s ease,background-color 0.2s ease,color 0.2s ease;}
.is-open .review-card-actions .btn-details-toggle{transform:rotate(180deg);background-color:var(--primary-light);color:var(--primary);}
/* The collapsible body of the card */
.review-card-body-collapsible{display:grid;grid-template-rows:0fr;/* Collapsed by default */
 transition:grid-template-rows 0.4s ease-in-out;}
.is-open .review-card-body-collapsible{grid-template-rows:1fr;/* Expanded */
}
.review-card-body-inner{overflow:hidden;/* Crucial for the grid transition */
 background-color:var(--app-bg);border-top:1px solid var(--border-color);}
/* Layout inside the collapsible area */
.review-details-grid{display:grid;grid-template-columns:1fr;/* Single column on mobile */
 gap:1.5rem;padding:1.5rem;}
@media (min-width:768px){.review-details-grid{grid-template-columns:1fr 1fr;/* Two columns on larger screens */
}
}
/* Remarks form inside the collapsible area */
.review-remarks-form{padding:1.5rem;border-top:1px solid var(--divider-color);}
.review-remarks-form .form-label{font-weight:600;}
/* --- 12. PAGE & PROFILE STYLES --- */
/* Page Header */
.page-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border-color);}
.page-header-title{font-size:1.8rem;margin:0;display:flex;align-items:center;gap:0.75rem;}
.page-header-subtitle{margin:0;font-size:1rem;color:var(--text-secondary);}
/* Profile Grid Layout */
.profile-grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media (min-width:992px){.profile-grid{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);}
}
/* Main Profile Card Header */
.profile-header{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background-color:var(--app-bg);border-bottom:1px solid var(--border-color);flex-wrap:wrap;}
.profile-avatar-large{width:90px;height:90px;border-radius:50%;flex-shrink:0;border:4px solid var(--card-bg);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;background:var(--accent-green);color:white;font-size:2.5rem;font-weight:600;}
.profile-info{flex-grow:1;}
.profile-name{font-size:2rem;margin:0;color:var(--text-primary);}
.profile-meta{display:flex;gap:1rem;color:var(--text-secondary);margin-top:0.25rem;flex-wrap:wrap;}
.profile-meta span{display:flex;align-items:center;gap:0.5rem;}
/* Profile Navigation Tabs */
.profile-nav-tabs{display:flex;border-bottom:1px solid var(--border-color);padding:0 1.5rem;}
.profile-nav-tabs a{padding:1rem 1.25rem;text-decoration:none;color:var(--text-secondary);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px;/* Overlap border */
 transition:all 0.2s ease;}
.profile-nav-tabs a:hover{color:var(--primary-dark);}
.profile-nav-tabs a.active{color:var(--primary);border-bottom-color:var(--primary);}
/* Tab Content */
.tab-content{padding-top:1rem;}
.tab-pane{display:none;animation:fadeIn 0.5s ease;}
@keyframes fadeIn{from{opacity:0;}
to{opacity:1;}
}
/* Profile Details List (Key-Value) */
.profile-details-list{display:grid;grid-template-columns:180px 1fr;gap:1rem 1.5rem;}
@media (max-width:576px){.profile-details-list{grid-template-columns:1fr;gap:0.5rem;}
}
.profile-details-list dt{font-weight:500;color:var(--text-secondary);}
.profile-details-list dd{font-weight:500;color:var(--text-primary);margin:0;}
/* Profile Sidebar Info */
.quick-info-list{list-style:none;padding:0;margin:0;}
.quick-info-list li{display:flex;justify-content:space-between;padding:0.75rem 0;border-bottom:1px solid var(--divider-color);}
.quick-info-list li:last-child{border-bottom:none;}
.quick-info-list li strong{color:var(--text-secondary);}
/* Status Badges for Leave History */
.badge.badge-pending,.badge.badge-awaiting_admin_reply{background-color:#fffbeb;color:#b45309;}
.badge.badge-approved,.badge.badge-resolved{background-color:#f0fdf4;color:#15803d;}
.badge.badge-rejected{background-color:#fef2f2;color:#b91c1c;}
.badge.badge-acknowledged{background-color:#eff6ff;color:#1d4ed8;}
.badge.badge-in_progress{background-color:#fefce8;color:#a16207;}
/* --- 13. PROFILE PAGE V2.3 ENHANCEMENTS --- */
/* Main content area gets a flex layout for spacing cards */
.profile-main-content{display:flex;flex-direction:column;gap:1.5rem;/* Spacing between the profile header card and details cards */
}
/* Card header with icon */
.card-header-icon{display:flex;align-items:center;gap:0.75rem;font-size:1.1rem;font-weight:600;}
.card-header-icon i{color:var(--primary);}
/* Tweak the details list for better alignment */
.profile-details-list{grid-template-columns:160px 1fr;/* Give labels a consistent width */
}
/* --- 14. NOTIFICATIONS PAGE --- */
.notification-container{max-width:900px;margin:0 auto;}
/* Toolbar */
.notification-toolbar{padding:1rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.notification-filters .btn-group .btn-filter{background-color:var(--card-bg);color:var(--text-secondary);border:1px solid var(--border-color);padding:0.4rem 1rem;font-weight:500;}
.notification-filters .btn-group .btn-filter.active,.notification-filters .btn-group .btn-filter:hover{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary-light);box-shadow:none;}
.notification-actions,.notification-actions-selected{display:flex;gap:0.75rem;}
/* Notification List */
.notification-list{display:flex;flex-direction:column;gap:2px;}
.notification-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background-color:var(--card-bg);border:1px solid var(--border-color);border-left-width:4px;border-left-color:transparent;border-radius:var(--radius);text-decoration:none;color:inherit;transition:all 0.2s ease;position:relative;}
.notification-item:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-left-color:var(--primary);}
.notification-item.unread{background-color:var(--primary-light);border-left-color:var(--primary);}
.notification-item.unread .notification-message{font-weight:600;color:var(--text-primary);}
/* Selection Mode */
.selection-mode-active .notification-item{cursor:pointer;}
.notification-checkbox{display:none;width:0;opacity:0;transition:all 0.3s ease;}
.selection-mode-active .notification-checkbox{display:block;width:auto;opacity:1;margin-right:0.5rem;}
.selection-mode-active .notification-actions-item{display:none;}
.notification-item.selected{background-color:#e0e9f8 !important;border-color:#3b82f6 !important;}
/* Notification Item Components */
.notification-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;}
.notification-icon.icon-green{background-color:#dcfce7;color:#16a34a;}
.notification-icon.icon-danger{background-color:#fee2e2;color:#dc2626;}
.notification-icon.icon-info{background-color:#e0f2fe;color:#0284c7;}
.notification-icon.icon-warning{background-color:#fefce8;color:#ca8a04;}
.notification-icon.icon-secondary{background-color:#f1f5f9;color:#64748b;}
.notification-content{flex-grow:1;}
.notification-message{margin:0;color:var(--text-primary);}
.notification-timestamp{font-size:0.8rem;color:var(--text-secondary);}
.notification-actions-item .btn-icon{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:0.5rem;border-radius:50%;}
.notification-actions-item .btn-icon:hover{background-color:var(--divider-color);color:var(--text-primary);}
/* Empty State */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-secondary);}
.empty-state i{font-size:3rem;color:var(--text-tertiary);margin-bottom:1rem;}
.empty-state h3{color:var(--text-primary);}
/* --- 15. MEAL CHANGE REQUEST PAGE --- */
.request-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;}
.meal-request-card .card-header{background-color:var(--card-bg);}
.request-reason{background-color:var(--app-bg);border:1px solid var(--border-color);padding:1rem;border-radius:var(--radius);}
.request-reason p{margin:0;}
.request-reason blockquote{margin:0.5rem 0 0 0;padding-left:1rem;border-left:3px solid var(--border-color);font-style:italic;color:var(--text-secondary);}
/* Comparison Table */
.preference-comparison-table{font-size:0.9rem;}
.preference-comparison-table th{background-color:var(--app-bg);color:var(--text-secondary);font-weight:500;}
.preference-comparison-table td{vertical-align:middle;}
.preference-comparison-table .old-choice,.preference-comparison-table .new-choice{padding:0.5rem 0.75rem;border-radius:var(--radius-sm);}
.preference-comparison-table .old-choice{background-color:#fee2e2;/* Red-ish background */
 color:#991b1b;text-decoration:line-through;}
.preference-comparison-table .new-choice{background-color:#dcfce7;/* Green-ish background */
 color:#166534;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.slot-badge{font-size:0.75rem;padding:0.25rem 0.5rem;font-weight:500;}
/* Action Form */
.meal-request-card .card-footer{background-color:var(--app-bg);}
.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
/* General BG/Text Color utilities for badges */
.bg-success-subtle{background-color:#f0fdf4;}
.text-success-emphasis{color:#15803d;}
.bg-warning-subtle{background-color:#fefce8;}
.text-warning-emphasis{color:#a16207;}
/* --- 16. APPLY LEAVE FORM PAGE --- */
/* Two-Column Layout for Forms */
.form-layout-grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media (min-width:992px){.form-layout-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
}
/* Form Step Styling */
.form-step{margin-bottom:1.5rem;}
.form-step-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;}
.form-step-number{width:32px;height:32px;border-radius:50%;background-color:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--font-primary);}
.form-section-title{margin:0;padding-bottom:0;border:none;}
.form-section-title::after{display:none;}
/* Enhanced Meal Option Cards */
.meal-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.form-check-card{position:relative;}
.form-check-card .form-check-input{position:absolute;top:1rem;right:1rem;width:1.5em;height:1.5em;}
.form-check-card .form-check-label{display:block;padding:1rem;border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:all 0.2s ease;}
.form-check-card .form-check-label i{font-size:1.25rem;margin-right:0.75rem;color:var(--text-tertiary);}
.form-check-card .form-check-input:checked + .form-check-label{border-color:var(--primary);background-color:var(--primary-light);color:var(--primary-dark);}
.form-check-card .form-check-input:checked + .form-check-label i{color:var(--primary);}
/* "Unknown Return" Interaction */
.return-field,.return-meal-option{transition:opacity 0.3s ease,transform 0.3s ease;}
body.return-unknown .return-field,body.return-unknown .return-meal-option{opacity:0.4;pointer-events:none;transform:scale(0.98);}
body.return-unknown .return-field input,body.return-unknown .return-meal-option input{background-color:var(--divider-color);}
/* Summary Card */
.summary-list{display:grid;grid-template-columns:1fr;gap:1rem;}
.summary-list dt{font-weight:500;color:var(--text-secondary);font-size:0.85rem;}
.summary-list dd{font-weight:500;color:var(--text-primary);margin:0;padding-bottom:1rem;border-bottom:1px solid var(--divider-color);min-height:24px;/* prevent layout shifts */
}
.summary-list dd:last-child{border-bottom:none;padding-bottom:0;}
/* --- 17. LEAVE HISTORY PAGE --- */
.leave-history-container{display:flex;flex-direction:column;gap:1.5rem;}
.leave-card{border-left-width:5px;transition:all 0.2s ease-in-out;}
.leave-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
/* Status Borders */
.status-border-pending,.status-border-awaiting_admin_reply{border-left-color:var(--warning);}
.status-border-approved,.status-border-resolved{border-left-color:var(--success);}
.status-border-rejected,.status-border-modification_rejected_super{border-left-color:var(--danger);}
.status-border-acknowledged{border-left-color:var(--info);}
.status-border-superseded{border-left-color:var(--text-tertiary);}
.leave-card-main{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.leave-card-details{display:flex;flex-direction:column;gap:0.25rem;}
.leave-card-title{display:flex;align-items:center;gap:0.5rem;font-size:1.1rem;}
.leave-card-dates{display:flex;align-items:center;gap:0.5rem;color:var(--text-secondary);}
.leave-card-id{font-size:0.8rem;color:var(--text-tertiary);}
.leave-card-actions{display:flex;gap:0.5rem;flex-shrink:0;/* Prevents wrapping on small screens */
}
/* Modification History Toggle */
.leave-history-toggle{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--divider-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text-secondary);font-weight:500;font-size:0.9rem;}
.leave-history-toggle:hover{color:var(--primary);}
.leave-history-toggle i{transition:transform 0.3s ease;}
.leave-history-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.leave-history-details{padding-top:1rem;}
.leave-history-details ul{list-style:none;padding:0 0 0 1rem;margin:0;border-left:2px solid var(--border-color);}
.leave-history-details li{position:relative;padding:0.25rem 0 0.75rem 1.5rem;display:flex;align-items:center;gap:0.75rem;}
.leave-history-details li::before{content:"";position:absolute;left:-7px;/* (12px width / 2) + 1px border */
 top:9px;width:12px;height:12px;border-radius:50%;background-color:var(--card-bg);border:2px solid var(--border-color);}
.history-item-text{color:var(--text-secondary);}
.badge.badge-superseded{background-color:#e5e7eb;color:#4b5563;}
/* --- 17. LEAVE HISTORY PAGE (Addition) --- */
.leave-history-details .btn-history-details{padding:0.1rem 0.5rem;font-size:0.75rem;line-height:1.5;}
/* --- 19. MEAL PREFERENCE PAGE --- */
.meal-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;padding-top:1rem;}
.meal-category-card{background-color:var(--app-bg);border:1px solid var(--border-color);transition:all 0.2s ease-in-out;}
.meal-category-card .form-label{font-weight:600;color:var(--text-primary);}
.card-footer{background-color:var(--app-bg);border-top:1px solid var(--border-color);}
.form-actions-footer{display:flex;justify-content:flex-end;padding-top:1rem;}
@media (max-width:767px){.form-actions-footer{padding-top:0;}
}
/* Styling for Select2 to match the theme */
.select2-container--bootstrap-5 .select2-selection{display:block;width:100%;padding:0.6rem 0.85rem;font-size:0.9rem;font-family:var(--font-secondary);color:var(--text-primary);background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;min-height:calc(1.5em + 1.2rem + 2px);}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,.select2-container--bootstrap-5.select2-container--open .select2-selection{border-color:var(--primary);outline:0;box-shadow:0 0 0 0.2rem rgba(249,115,22,0.25);}
.select2-container--bootstrap-5 .select2-dropdown{border-color:var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);}
.select2-container--bootstrap-5 .select2-results__option--highlighted{background-color:var(--primary-light);color:var(--primary-dark);}
.select2-container--bootstrap-5 .select2-results__option--selected{background-color:var(--divider-color);}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{padding-left:0;padding-right:0;}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);}
.empty-state-small{grid-column:1 / -1;text-align:center;padding:2rem;color:var(--text-secondary);}
/* --- 20. MEAL PREFERENCE PAGE V2.4 --- */
.meal-category-grid{display:grid;grid-template-columns:1fr;/* Single column inside cards */
 gap:1.5rem;}
#changes-summary-list{margin-top:1rem;}
.summary-change-item{font-size:0.9rem;padding:0.75rem 0;border-bottom:1px solid var(--divider-color);}
.summary-change-item:last-child{border-bottom:none;}
.summary-change-item .category-name{display:block;font-weight:600;color:var(--text-primary);}
.summary-change-item .change-details{display:flex;align-items:center;gap:0.5rem;color:var(--text-secondary);}
.change-old{text-decoration:line-through;}
.change-new{font-weight:500;color:var(--accent-green);}
/* --- 21. MEAL REQUEST HISTORY PAGE --- */
.request-history-container{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
.request-card{border-left-width:5px;transition:all 0.2s ease-in-out;}
.request-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
/* Status Borders - Reusing from leave history for consistency */
.status-border-pending{border-left-color:var(--warning);}
.status-border-approved{border-left-color:var(--success);}
.status-border-rejected{border-left-color:var(--danger);}
/* Add more status border colors if needed */
.request-card-main{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:0.5rem;}
.request-card-info{display:flex;flex-direction:column;gap:0.25rem;}
.request-card-status .badge{font-size:0.8rem;}
.request-card-meta{color:var(--text-secondary);font-size:0.9rem;}
.request-card-actions .btn{padding:0.25rem 0.75rem;font-size:0.8rem;}
.request-card-remarks{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--divider-color);}
.request-card-remarks p{margin:0;font-size:0.9rem;color:var(--text-primary);}
.request-card-remarks blockquote{margin:0.5rem 0 0 0;padding-left:1rem;border-left:3px solid var(--border-color);font-style:italic;color:var(--text-secondary);font-size:0.9rem;}
/* Using existing badge styles from profile/leave pages. Ensure these are in your CSS from previous steps */
.badge.badge-pending{background-color:#fffbeb;color:#b45309;}
.badge.badge-approved{background-color:#f0fdf4;color:#15803d;}
/* --- 22. MEAL REQUEST HISTORY V2.4 --- */
.request-changes-toggle{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--divider-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text-secondary);font-weight:500;font-size:0.9rem;}
.request-changes-toggle:hover{color:var(--primary);}
.request-changes-toggle i{transition:transform 0.3s ease;}
.request-changes-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.request-changes-details{padding-top:1rem;}
.change-list{list-style:none;padding:0;margin:0;font-size:0.9rem;}
.change-list li{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid var(--divider-color);}
.change-list li:last-child{border-bottom:none;}
.change-list .category-name{color:var(--text-secondary);}
.change-list .change-diff{display:flex;align-items:center;gap:0.5rem;}
.change-list .change-old{color:#b91c1c;text-decoration:line-through;}
.change-list .change-new{color:#166534;font-weight:600;}
/* --- 23. SPECIAL MEALS PAGE --- */
.special-meal-container{display:flex;flex-direction:column;gap:1rem;max-width:900px;margin:0 auto;}
.special-meal-card{display:flex;transition:all 0.2s ease-in-out;border-radius:var(--radius-lg);overflow:hidden;/* Important for the date block's radius */
}
.special-meal-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.special-meal-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--primary-light);color:var(--primary-dark);padding:1rem;width:120px;flex-shrink:0;text-align:center;border-right:1px solid var(--border-color);}
.special-meal-date .day-number{font-size:2.5rem;font-weight:700;line-height:1;color:var(--primary);}
.special-meal-date .month-name{font-size:1rem;font-weight:600;text-transform:uppercase;}
.special-meal-date .day-week{font-size:0.8rem;color:var(--text-secondary);}
.special-meal-icon{display:flex;align-items:center;justify-content:center;padding:0 1.5rem;font-size:1.5rem;color:var(--warning);}
.special-meal-content{padding:1.25rem;flex-grow:1;}
.special-meal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0.5rem;}
.special-meal-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0;}
.special-meal-description{font-size:0.95rem;color:var(--text-secondary);margin:0;}
/* Specific badges for meal periods */
.badge.badge-lunch{background-color:#fefce8;color:#a16207;}
.badge.badge-dinner{background-color:#eef2ff;color:#4338ca;}
/* Responsive Adjustments for Mobile */
@media (max-width:576px){.special-meal-card{flex-direction:column;}
.special-meal-date{width:100%;border-right:none;border-bottom:1px solid var(--border-color);flex-direction:row;justify-content:center;gap:1rem;}
.special-meal-date .day-week{display:none;/* Hide day of week on mobile to save space */
}
.special-meal-icon{display:none;/* Hide the star icon on mobile */
}
.special-meal-content{padding:1rem;}
.special-meal-header{flex-direction:column-reverse;align-items:flex-start;gap:0.5rem;}
}
/* --- 24. APPLY DOCUMENT PAGE --- */
#document-details-section .alert{margin-bottom:1.5rem;}
#application-summary-card{transition:opacity 0.3s ease-in-out;}
.summary-list .badge{font-size:0.8rem;}
/* --- 28. MY MESSAGES PAGE --- */
.message-list{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--card-bg);}
.message-item-link{text-decoration:none;color:inherit;display:block;transition:background-color 0.15s ease-in-out;}
.message-item-link:not(:last-child){border-bottom:1px solid var(--divider-color);}
.message-item-link:hover{background-color:var(--app-bg);}
.message-item{display:flex;align-items:center;padding:1rem 1.5rem;gap:1rem;}
.message-status-dot-container{display:flex;align-items:center;justify-content:center;}
.status-dot{width:12px;height:12px;border-radius:50%;}
.status-dot.status-info{background-color:var(--info);}
.status-dot.status-danger{background-color:var(--danger);}
.status-dot.status-warning{background-color:var(--warning);}
.status-dot.status-success{background-color:var(--success);}
.status-dot.status-secondary{background-color:var(--text-tertiary);}
.message-content{flex-grow:1;}
.message-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.25rem;}
.message-subject{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0;}
.message-meta{font-size:0.85rem;color:var(--text-secondary);}
.message-item.action-needed .message-subject,.message-item.action-needed .message-meta strong{font-weight:700;}
.message-item.action-needed{background-color:var(--primary-light);}
.message-timestamp{display:flex;align-items:center;gap:1rem;color:var(--text-secondary);font-size:0.85rem;margin-left:auto;}
.message-timestamp i{color:var(--text-tertiary);}
/* Responsive adjustments */
@media (max-width:576px){.message-item{padding:1rem;}
.message-timestamp{display:none;/* Hide timestamp on mobile to save space */
}
}
/* Badge color utilities using existing variables */
.bg-secondary-subtle{background-color:#f1f5f9;}
.text-secondary-emphasis{color:#475569;}
/* --- 29. DOCUMENT TRACKER PAGE --- */
#applicationsTable td{vertical-align:middle;}
.document-status-cell .badge{font-size:0.8rem;}
.document-status-cell .text-muted{font-size:0.85rem;}
/* Specific badge colors for this page */
.badge.badge-warning{background-color:#fefce8;color:#a16207;}
/* .badge-success and .badge-danger should already be defined */
/* --- 30. DOCUMENT DETAIL PAGE --- */
/* Reusing status-header styles from leave detail */
.status-header-card blockquote{margin:1rem 0 0 0;padding-left:1rem;border-left:3px solid var(--border-color);font-size:0.95rem;color:var(--text-secondary);}
/* Enhancing the timeline for document statuses */
.timeline-item.status-submitted-by-student .timeline-icon{border:2px solid var(--primary);color:var(--primary);}
.timeline-item.status-approved-and-forwarded .timeline-icon,.timeline-item.status-completed .timeline-icon{border:2px solid var(--success);color:var(--success);}
.timeline-item.status-rejected .timeline-icon{border:2px solid var(--danger);color:var(--danger);}
.timeline-item.status-information-requested .timeline-icon,.timeline-item.status-student-responded .timeline-icon{border:2px solid var(--info);color:var(--info);}
.timeline-attachment{margin-top:0.5rem;font-size:0.85rem;}
.timeline-attachment a{text-decoration:none;color:var(--text-secondary);}
.timeline-attachment a:hover{color:var(--primary);}
/* Action Required Card Styling */
.card.border-primary .card-header-icon.text-white{color:white !important;}
/* --- 31. DATATABLES FILTER BAR & BUTTONS (Updated) --- */
.datatable-filter-bar{display:flex;flex-wrap:wrap;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--app-bg);}
.filter-group{flex:1 1 180px;}
.filter-group label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.25rem;display:block;}
.card-body-no-top-padding{padding-top:0 !important;}
/* Header for DataTables */
.datatable-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem 0 1.5rem;/* Match card padding */
}
/* Custom styling for DataTables Export Buttons to match our theme */
.dt-buttons .btn{background-color:var(--card-bg);color:var(--text-secondary);border-color:var(--border-color);}
.dt-buttons .btn:hover{background-color:var(--divider-color);color:var(--text-primary);border-color:var(--border-color);}
.dataTables_filter input{/* Search input styling */
 border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:0.4rem 0.75rem;margin-left:0.5rem;}
.dataTables_filter input:focus{border-color:var(--primary);box-shadow:0 0 0 0.2rem rgba(249,115,22,0.25);outline:none;}
/* Status Badges */
.badge.badge-success{background-color:#f0fdf4;color:#15803d;}
.badge.badge-warning{background-color:#fefce8;color:#a16207;}
/* --- 32. LEAVE REVIEW PAGES (HOD/SUPERINTENDENT) --- */
.review-requests-container{display:flex;flex-direction:column;gap:1.5rem;}
.request-review-card .card-header{background-color:var(--app-bg);}
/* A smaller,less prominent version of the section title */
.form-section-title-sm{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.5px;}
.request-review-card blockquote{font-size:0.9rem;font-style:italic;color:var(--text-primary);}
/* Vertical divider for two-column layout inside card */
@media (min-width:992px){.border-end-lg{border-right:1px solid var(--border-color);padding-right:2rem !important;}
}
/* --- 34. MANAGE CALENDAR PAGE --- */
.event-list{list-style:none;padding:0;margin:0;}
.event-item{display:flex;align-items:center;gap:1rem;padding:0.75rem 0;border-bottom:1px solid var(--divider-color);}
.event-item:last-child{border-bottom:none;}
.event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;flex-shrink:0;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-secondary);}
.event-date .day{font-size:1.25rem;font-weight:700;color:var(--primary);line-height:1;}
.event-date .month{font-size:0.75rem;font-weight:500;text-transform:uppercase;}
.event-details{flex-grow:1;}
.event-title{display:block;color:var(--text-primary);font-weight:500;}
.event-meta{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--text-tertiary);}
.event-meta .badge{font-size:0.7rem;padding:0.2em 0.5em;}
.event-actions{display:flex;gap:0.5rem;}
/* --- 35. MANAGE DOCUMENT TYPES PAGE --- */
/* Accordion Styling for the form */
.accordion-button{font-weight:600;color:var(--text-primary);}
.accordion-button:not(.collapsed){background-color:var(--primary-light);color:var(--primary-dark);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.125);}
.accordion-button:focus{box-shadow:0 0 0 0.25rem rgba(249,115,22,0.25);}
/* Workflow Builder Styling */
#workflow-builder-container{display:flex;flex-direction:column;gap:0.5rem;}
.workflow-step-row{display:flex;align-items:center;gap:0.75rem;padding:0.5rem;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);}
.step-handle{cursor:grab;color:var(--text-tertiary);}
.step-handle:active{cursor:grabbing;}
.step-label{font-size:0.85rem;font-weight:500;color:var(--text-secondary);}
.workflow-step-row .form-select{flex-grow:1;}
/* --- 31. REVIEW LEAVE PAGE --- */
#reviewLeaveTable td{vertical-align:middle;}
.review-card-avatar{/* Reusing from previous designs */
 flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--accent-green);color:white;font-weight:600;font-size:1.1rem;}
.badge-leave-type{font-size:0.7rem;font-weight:600;text-transform:uppercase;padding:0.2em 0.5em;}
.badge-leave-type.is-new{background-color:var(--primary-light);color:var(--primary-dark);}
.badge-leave-type.is-modification{background-color:#fffbeb;color:#b45309;}
/* Soft-colored buttons for quick actions */
.btn-success-soft{background-color:#dcfce7;color:#166534;}
.btn-success-soft:hover{background-color:#16a34a;color:white;}
.btn-danger-soft{background-color:#fee2e2;color:#b91c1c;}
.btn-danger-soft:hover{background-color:#dc2626;color:white;}
/* Modal specific styles */
.meal-choice-list{list-style:none;padding:0;margin:0;}
.meal-choice-list li{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;}
.meal-choice-list li:not(:last-child){margin-bottom:0.5rem;}
.meal-choice-list .fa-check-circle{color:var(--accent-green);}
.meal-choice-list .fa-times-circle{color:var(--danger);}
/* --- 31. REVIEW LEAVE QUEUE V3.0 --- */
.review-queue-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;}
.review-queue-card{display:flex;flex-direction:column;text-decoration:none;color:var(--text-primary);background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all 0.2s ease-in-out;}
.review-queue-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.queue-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;}
.queue-card-title{font-size:1.1rem;font-weight:600;margin:0;}
.queue-card-body{padding:0 1rem 1rem 1rem;flex-grow:1;}
.badge-leave-type{font-size:0.75rem;font-weight:600;text-transform:uppercase;padding:0.25em 0.6em;color:#212529;}
.queue-card-footer{padding:0.75rem 1rem;background-color:var(--app-bg);border-top:1px solid var(--divider-color);text-align:right;font-weight:500;color:var(--text-secondary);transition:color 0.2s ease;}
.review-queue-card:hover .queue-card-footer{color:var(--primary);}
.queue-card-footer i{transition:transform 0.2s ease;margin-left:0.25rem;}
.review-queue-card:hover .queue-card-footer i{transform:translateX(4px);}
#modal_hod_status_badge{font-size:1rem;}
/* Make the HOD status badge bigger in the modal */
/* --- 31. REVIEW LEAVE QUEUE V3.1 --- */
.queue-card-footer{display:flex;justify-content:space-between;align-items:center;}
.quick-actions{display:flex;gap:0.5rem;}
.quick-actions .btn{display:flex;align-items:center;gap:0.5rem;}
/* Soft-colored buttons (if not already defined) */
.btn-success-soft{background-color:#dcfce7;color:#166534;}
/* In /public/assets/css/app.css */
/* --- HANDSONTABLE (Meal Preference Grid) STYLES --- */
/* The main container for the grid */
#mealPreferenceGrid{width:100%;height:600px;/* A fixed height is good for vertical scrolling within the grid */
 overflow:hidden;/* Let Handsontable manage its own internal scrollbars */
}
/* Handsontable library overrides for a better look */
.handsontable .htCore{/* Style the main table area */
 border-radius:var(--radius-sm);border:1px solid var(--border-color);}
.handsontable .htCore th{/* Style column headers */
 background-color:var(--app-bg);font-weight:600;color:var(--text-primary);vertical-align:middle;}
.handsontable .htCore th .small{/* Style the "(Lunch)" subtext */
 font-weight:400;color:var(--text-secondary);}
.handsontable .htCore .htDimmed{/* Style the fixed columns */
 background-color:#fdfdfd;font-weight:600 !important;}
/* This is the key for mobile responsiveness */
@media (max-width:768px){#mealPreferenceGrid{height:70vh;/* Use viewport height on mobile to prevent excessive page length */
}
/* Add a visual cue for horizontal scrolling on mobile */
 .handsontable-wrapper{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;/* Smooth scrolling on iOS */
 border:1px solid var(--border-color);border-radius:var(--radius);padding:5px;background-color:var(--card-bg);}
.handsontable-wrapper::after{content:"⟷ Scroll Horizontally ⟷";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.6);color:white;padding:4px 10px;border-radius:10px;font-size:0.75rem;font-weight:500;pointer-events:none;/* Make it non-interactive */
 opacity:0;animation:fadeInOut 5s ease-in-out;}
@keyframes fadeInOut{0%,100%{opacity:0;}
10%,90%{opacity:1;}
}
}
/* In /public/assets/css/app.css */
/* Add with other Handsontable styles */
.ht-loading-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;background-color:var(--app-bg);border:1px dashed var(--border-color);border-radius:var(--radius);}
/* Make the remark badge text color consistent and readable */
.badge.bg-info-subtle.text-info-emphasis{color:#055160 !important;/* A dark teal/blue for info text */
 /* If you want pure black,use:color:#000000 !important;*/
}
.compact-card{padding:0.75rem 1rem;}
/* ============================ DASHBOARD PAGE (ENHANCED) ============================ */
.dashboard-container{max-width:1300px;margin:0 auto;padding:2rem 1.5rem;}
/* Welcome Card */
.welcome-card{background:linear-gradient(145deg,#ffffff,var(--primary-light));color:var(--text-primary);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;transition:all var(--transition-speed) ease;border:1px solid var(--divider-color);}
.welcome-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.welcome-title{font-family:var(--font-primary);font-size:1.8rem;font-weight:700;color:var(--accent-maroon);margin-bottom:0.4rem;}
.welcome-subtitle{font-size:1rem;color:var(--text-secondary);}
.welcome-avatar-img,.welcome-avatar-fallback{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--border-color);display:flex;align-items:center;justify-content:center;background:var(--primary-light);color:var(--accent-maroon-dark);font-size:2rem;font-weight:600;transition:transform var(--transition-speed),border-color var(--transition-speed);}
.welcome-avatar-img:hover,.welcome-avatar-fallback:hover{transform:scale(1.05);border-color:var(--primary);}
/* Section Title */
.section-title{font-size:1.3rem;font-weight:600;color:var(--accent-maroon);margin-top:2.5rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;}
.section-title::before{content:"";width:6px;height:22px;background:var(--primary);border-radius:3px;box-shadow:0 0 8px rgba(249,115,22,0.3);}
/* Action Grid */
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.action-card{background:var(--card-bg);border:1px solid var(--divider-color);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:all var(--transition-speed) ease;position:relative;overflow:hidden;}
.action-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary);background:linear-gradient(145deg,#fff,var(--primary-light));}
.action-card::after{content:"";position:absolute;inset:0;background:linear-gradient( 135deg,rgba(249,115,22,0.06),rgba(255,255,255,0) );opacity:0;transition:opacity var(--transition-speed);}
.action-card:hover::after{opacity:1;}
.action-icon{font-size:1.8rem;color:var(--primary);flex-shrink:0;transition:transform var(--transition-speed),color var(--transition-speed);position:relative;}
.action-card:hover .action-icon{color:var(--accent-maroon);transform:scale(1.15);}
/* Action Card Notification Badge */
.action-notif-badge{position:absolute;top:-8px;right:-8px;background-color:var(--danger);color:white;font-size:0.65rem;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:600;border:2px solid var(--card-bg);animation:badge-pulse 2s ease-in-out infinite;z-index:1;}
/* Action Card with Notification - Glowing Border Animation */
.action-card.has-notification{position:relative;border:2px solid transparent;background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(90deg,transparent,rgba(211,47,47,0.6),transparent) border-box;animation:glow-wave 2s ease-in-out infinite;}
.action-card.has-notification::before{content:"";position:absolute;inset:-3px;border-radius:var(--radius-lg);background:linear-gradient(90deg,transparent,rgba(211,47,47,0.2),rgba(211,47,47,0.4),rgba(211,47,47,0.2),transparent);background-size:200% 100%;animation:shimmer 2s linear infinite;z-index:-1;filter:blur(6px);}
.action-card.has-notification:hover{border-color:rgba(211,47,47,0.6);transform:translateY(-4px);}
.action-info h4{margin:0;font-size:1.05rem;font-weight:600;color:var(--text-primary);}
.action-info p{margin:0.25rem 0 0;font-size:0.9rem;color:var(--text-secondary);}
/* Empty State */
.empty-state{text-align:center;padding:3rem 2rem;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px dashed var(--divider-color);color:var(--text-secondary);transition:all var(--transition-speed);}
.empty-state:hover{transform:scale(1.01);border-color:var(--primary);color:var(--accent-maroon-dark);}
/* Responsive */
@media (max-width:768px){.welcome-card{flex-direction:column;align-items:center;/* Center content horizontally */
 text-align:center;gap:1rem;padding:1.75rem 1rem;}
.welcome-avatar-img,.welcome-avatar-fallback{margin:0 auto;/* Ensures the avatar stays centered */
 display:block;}
.welcome-title{font-size:1.6rem;}
.welcome-subtitle{font-size:0.95rem;}
}
/* Page container and header */
.page-container{max-width:1200px;margin:0 auto;padding:1.5rem;font-family:"Inter",system-ui,sans-serif;}
.page-header h1{font-weight:600;color:#8c4d4d;}
.page-header p{color:var(--muted);}
/* UPGRADE 3:Responsive Stat Card Group */
.stat-card-group{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.stat-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);border-radius:12px;}
.stat-card-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;color:#fff;flex-shrink:0;}
.icon-total{background:#0d6efd;}
.icon-present{background:#198754;}
.icon-on-leave{background:#dc3545;}
.stat-value{font-size:1.8rem;font-weight:700;}
.stat-label{font-size:0.95rem;color:var(--muted);}
@media (max-width:767.98px){.stat-card-group{grid-template-columns:1fr;display:flex;justify-content:space-around;padding:1rem;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);border-radius:12px;}
.stat-card{flex-direction:column;padding:0;border:none;box-shadow:none;text-align:center;gap:0.25rem;}
.stat-card-icon{width:40px;height:40px;font-size:1rem;}
.stat-value{font-size:1.5rem;}
.stat-label{font-size:0.8rem;}
}
/* UPGRADE 2:Avatar Styles */
.student-avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 5px rgba(0,0,0,0.1);}
.student-avatar-initials{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:white;background-color:#6c757d;}
/* Control Hub & Responsive Layout */
.control-hub{background:var(--card-bg);border-radius:12px;padding:0.75rem 1rem;margin-bottom:1.5rem;border:1px solid var(--card-border);box-shadow:var(--shadow-sm);}
.control-hub-desktop{display:flex;width:100%;gap:0.75rem;align-items:center;}
.control-hub-desktop .search-input{flex:1 1 40%;}
.control-hub-desktop input,.control-hub-desktop select{padding:0.5rem 0.8rem;border-radius:8px;border:1px solid var(--card-border);background:var(--card-bg);}
.control-hub-mobile{display:none;width:100%;justify-content:space-around;}
.control-hub-mobile button{background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer;}
.student-card-grid{display:grid;gap:1rem;}
.student-card{background:var(--card-bg);border-radius:12px;padding:1rem;border:1px solid var(--card-border);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:0.75rem;}
.student-card-header{display:flex;align-items:center;gap:1rem;}
.student-card-name{font-size:1.1rem;font-weight:600;margin:0;}
.student-card-sub{font-size:0.9rem;color:var(--muted);margin:0;}
.student-card-body{border-top:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);padding:0.75rem 0;}
.student-card-actions{display:flex;gap:0.5rem;justify-content:flex-end;}
.badge-present{background-color:#d1e7dd;color:#0f5132;}
.badge-on-leave{background-color:#f8d7da;color:#842029;}
@media (max-width:991.98px){.control-hub-desktop{display:none;}
.control-hub-mobile{display:flex;}
.desktop-table-container{display:none;}
.mobile-card-container{display:block !important;}
}
/* End of integrated snippet */
/* =================================================================== MOBILE CONTROL MODALS (Page-Specific Component) =================================================================== */
.mobile-modal{display:none;/* Hidden by default */
 position:fixed;/* THIS IS THE MOST CRITICAL RULE - it makes the element float */
 top:15%;/* Position it from the top */
 left:50%;/* Center it horizontally */
 transform:translateX(-50%);/* Fine-tune the horizontal centering */
 background:var(--card-bg);/* Use theme variable for background */
 border-radius:var(--radius-lg);/* Use theme variable for border radius */
 padding:1.5rem;z-index:1050;/* Puts the modal on top of all other content */
 width:90%;/* Responsive width */
 max-width:350px;/* But don't let it get too wide on tablets */
 box-shadow:var(--shadow-lg);/* Use a prominent shadow to make it pop */
 border:1px solid var(--border-color);}
.mobile-modal-title{margin-top:0;margin-bottom:1rem;font-family:var(--font-primary);color:var(--accent-maroon);font-size:1.2rem;}
.mobile-modal-close{background:none;border:none;font-size:1.8rem;position:absolute;top:0.5rem;right:0.75rem;color:var(--text-tertiary);cursor:pointer;line-height:1;}
.mobile-modal-close:hover{color:var(--text-primary);}
/* 36. NEW MESSAGE PAGE ENHANCEMENTS (V2.5 Student-Focused UI)*/
/* Main composer card styling to look like stationery */
.message-composer-card{background-color:var(--card-bg);/* Subtle pattern to evoke paper texture */
 background-image:linear-gradient(rgba(249,115,22,0.02) 1px,transparent 1px),linear-gradient(to right,rgba(249,115,22,0.02) 1px,var(--card-bg) 1px);background-size:20px 20px;}
/* Recipient Display (Static) */
.recipient-display-card{display:flex;align-items:center;gap:1.25rem;background-color:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius-lg);padding:1.25rem;}
.recipient-display-icon{font-size:2rem;color:var(--primary);}
.recipient-display-info{display:flex;flex-direction:column;}
.recipient-display-name{font-weight:600;font-size:1.1rem;color:var(--text-primary);}
.recipient-display-desc{font-size:0.85rem;color:var(--primary-dark);}
/* "Coming Soon" Notice */
.coming-soon-notice{margin-top:1rem;padding:0.75rem 1rem;background-color:var(--app-bg);border-radius:var(--radius);display:flex;align-items:center;gap:0.75rem;font-size:0.85rem;color:var(--text-secondary);border:1px solid var(--divider-color);}
.coming-soon-notice i{color:var(--text-tertiary);}
.coming-soon-notice p{margin:0;}
/* Custom File Upload Area */
.custom-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;border:2px dashed var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease;background-color:var(--app-bg);}
.custom-file-upload:hover,.custom-file-upload.dragover{border-color:var(--primary);background-color:var(--primary-light);}
.custom-file-upload i{font-size:2rem;color:var(--primary);margin-bottom:0.75rem;}
.custom-file-upload .file-upload-text{font-weight:500;color:var(--text-secondary);}
.custom-file-upload small{margin-top:0.25rem;color:var(--text-tertiary);}
#attachment{display:none;/* Hide the default ugly input */
}
/* Enhanced Guidelines Sidebar */
.guidelines-card{border-top:4px solid var(--primary);}
.guidelines-list{list-style:none;padding:0;margin:1rem 0 0 0;display:flex;flex-direction:column;gap:1rem;}
.guidelines-list li{display:flex;align-items:flex-start;gap:0.85rem;font-size:0.9rem;color:var(--text-secondary);}
.guidelines-list i{width:20px;text-align:center;font-size:1rem;margin-top:2px;color:var(--primary);}
.guidelines-list strong{color:var(--text-primary);}
/* Make the send button more prominent */
.message-composer-card .card-footer{background-color:var(--app-bg);padding:1rem 1.5rem;}
@media (max-width:576px){.message-composer-card .card-footer .btn{width:100%;/* Full width button on mobile */
}
}
/* =================================================================== 37. MY MESSAGES PAGE ENHANCEMENTS (V2.4 Inbox UI) =================================================================== */
.messages-container{max-width:1000px;margin:0 auto;}
.message-card-list{display:flex;flex-direction:column;gap:0.5rem;}
.message-card-link{text-decoration:none;color:inherit;display:block;}
.message-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all 0.2s ease-in-out;border-left:5px solid transparent;}
.message-card-link:hover .message-card{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary);}
/* Action Needed State */
.message-card-action-needed{border-left-color:var(--danger);background-color:#fef2f2;/* Subtle red background */
}
.message-card-link:hover .message-card-action-needed{border-color:var(--danger);}
/* Status Icon Avatar */
.message-card-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:white;}
.status-bg-info{background-color:var(--info);}
.status-bg-danger{background-color:var(--danger);}
.status-bg-warning{background-color:var(--warning);}
.status-bg-success{background-color:var(--success);}
.status-bg-secondary{background-color:var(--text-tertiary);}
/* Main Content Area */
.message-card-content{flex-grow:1;}
.message-card-header{display:flex;align-items:center;margin-bottom:0.25rem;}
.message-card-subject{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0;/* Truncate long subjects */
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.message-card-action-needed .message-card-subject{font-weight:700;}
.message-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;font-size:0.85rem;color:var(--text-secondary);}
.last-reply strong{font-weight:500;color:var(--text-primary);}
/* Timestamp Area */
.message-card-timestamp{display:flex;align-items:center;gap:1rem;color:var(--text-secondary);font-size:0.85rem;flex-shrink:0;margin-left:auto;}
.message-card-timestamp i{color:var(--text-tertiary);transition:transform 0.2s ease;}
.message-card-link:hover .message-card-timestamp i{transform:translateX(4px);}
/* Status Badges */
.badge[class*="badge-status-"]{font-weight:600;font-size:0.75rem;padding:0.3em 0.7em;border-radius:50px;}
.badge-status-info{background-color:#e0f2fe;color:#0284c7;}
.badge-status-danger{background-color:#fee2e2;color:#b91c1c;}
.badge-status-warning{background-color:#fefce8;color:#a16207;}
.badge-status-success{background-color:#f0fdf4;color:#15803d;}
.badge-status-secondary{background-color:#f1f5f9;color:#475569;}
/* Enhanced Empty State */
.message-empty-state{padding:3rem 2rem;border-style:dashed;}
.empty-state-icon{width:80px;height:80px;margin:0 auto 1.5rem;background-color:var(--primary-light);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;}
/* Responsive Adjustments */
@media (max-width:768px){.message-card{padding:1rem;gap:0.75rem;}
.message-card-timestamp{display:none;/* Hide timestamp on small screens */
}
.message-card-subject{font-size:1rem;}
}
/* =================================================================== 38. APPLY DOCUMENT PAGE ENHANCEMENTS (V2.4 Interactive Form) =================================================================== */
/* Student ID Card Component */
.student-id-card{display:flex;align-items:center;gap:1.5rem;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem;}
.id-card-avatar{flex-shrink:0;}
.id-card-avatar-img,.id-card-avatar-fallback{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--card-bg);box-shadow:var(--shadow);}
.id-card-avatar-fallback{display:flex;align-items:center;justify-content:center;background-color:var(--accent-green);color:white;font-size:2rem;font-weight:600;}
.id-card-details{display:flex;flex-direction:column;}
.id-card-name{margin:0 0 0.25rem 0;font-size:1.25rem;font-weight:600;color:var(--text-primary);}
.id-card-meta{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;color:var(--text-secondary);font-size:0.85rem;}
.id-card-meta strong{color:var(--text-primary);}
/* Document Selection Grid & Cards */
.document-selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}
.doc-card{position:relative;}
.doc-card-input{position:absolute;opacity:0;width:0;height:0;}
.doc-card-label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem 1rem;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease-in-out;background-color:var(--card-bg);height:100%;}
.doc-card-label:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.doc-card-input:checked + .doc-card-label{border-color:var(--primary);background-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-primary);}
.doc-card-icon{font-size:2rem;margin-bottom:0.75rem;color:var(--primary);transition:transform 0.2s ease;}
.doc-card-input:checked + .doc-card-label .doc-card-icon{transform:scale(1.1);}
.doc-card-name{font-weight:600;color:var(--text-primary);line-height:1.3;}
/* Application Details Wrapper (for animation) */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px);}
to{opacity:1;transform:translateY(0);}
}
.application-details-wrapper{display:none;/* Hidden by default */
}
.application-details-wrapper.active{display:block;animation:fadeInDown 0.5s ease;}
/* Document Description Info Box */
.document-description-box{display:flex;align-items:flex-start;gap:0.75rem;background-color:var(--app-bg);border-radius:var(--radius);padding:1rem;border:1px solid var(--border-color);color:var(--text-secondary);font-size:0.9rem;}
.document-description-box i{color:var(--info);margin-top:3px;}
.document-description-box p{margin:0;}
/* Reusing file upload styles from message page */
.custom-file-upload{/* Ensure this is defined from previous steps */
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;border:2px dashed var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease;background-color:var(--app-bg);}
.custom-file-upload:hover{border-color:var(--primary);background-color:var(--primary-light);}
.custom-file-upload i{font-size:2rem;color:var(--primary);margin-bottom:0.75rem;}
.custom-file-upload .file-upload-text{font-weight:500;color:var(--text-secondary);}
.custom-file-upload small{margin-top:0.25rem;color:var(--text-tertiary);}
#supporting_document{display:none;}
/* Reusing guidelines list styles from message page */
.guidelines-card{border-top:4px solid var(--primary);}
.guidelines-list{list-style:none;padding:0;margin:1rem 0 0 0;display:flex;flex-direction:column;gap:1rem;}
.guidelines-list li{display:flex;align-items:flex-start;gap:0.85rem;font-size:0.9rem;color:var(--text-secondary);}
.guidelines-list i{width:20px;text-align:center;font-size:1rem;margin-top:2px;color:var(--primary);}
.guidelines-list strong{color:var(--text-primary);}
/* Ensure button state is clear */
#submit-btn:disabled{background-color:var(--text-tertiary);border-color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none;}
/* =================================================================== 39. DOCUMENT TRACKER PAGE ENHANCEMENTS (V2.4 Timeline UI) =================================================================== */
.application-tracker-container{max-width:800px;margin:0 auto;}
.application-timeline{position:relative;padding:1rem 0;}
/* The vertical line running through the timeline */
.application-timeline::before{content:'';position:absolute;top:0;left:20px;height:100%;width:3px;background-color:var(--divider-color);border-radius:2px;}
.timeline-item{position:relative;display:flex;gap:1.5rem;margin-bottom:1.5rem;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-marker{position:relative;z-index:1;width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;border:3px solid var(--app-bg);}
.timeline-content{flex-grow:1;}
.application-tracker-card{border:1px solid var(--border-color);border-left-width:5px;transition:all 0.2s ease-in-out;}
.application-tracker-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md);}
/* Status Border Colors */
.status-border-warning{border-left-color:var(--warning);}
.status-border-success{border-left-color:var(--success);}
.status-border-danger{border-left-color:var(--danger);}
.tracker-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:0.75rem;margin-bottom:0.75rem;border-bottom:1px solid var(--divider-color);}
.tracker-card-title{margin:0;font-size:1.2rem;font-weight:600;color:var(--text-primary);}
.tracker-card-meta{font-size:0.8rem;color:var(--text-tertiary);}
.tracker-card-status{margin-bottom:1rem;}
.status-description{font-size:0.95rem;color:var(--text-secondary);font-weight:500;margin:0;}
.tracker-card-actions{text-align:right;}
/* Reusing badge styles from messages page */
.badge[class*="badge-status-"]{font-weight:600;font-size:0.8rem;padding:0.4em 0.8em;border-radius:50px;flex-shrink:0;}
.badge-status-warning{background-color:#fefce8;color:#a16207;}
.badge-status-success{background-color:#f0fdf4;color:#15803d;}
.badge-status-danger{background-color:#fef2f2;color:#b91c1c;}
/* Reusing Status BG Colors from Messages Page */
.status-bg-warning{background-color:var(--warning);}
.status-bg-success{background-color:var(--success);}
.status-bg-danger{background-color:var(--danger);}
/* Enhanced Empty State for Documents */
.document-empty-state{padding:3rem 2rem;border-style:dashed;}
/* Responsive */
@media (max-width:576px){.application-timeline::before{left:20px;}
.timeline-item{gap:1rem;}
.tracker-card-header{flex-direction:column;align-items:flex-start;gap:0.5rem;}
}
/* =================================================================== 39. DOCUMENT TRACKER PAGE ENHANCEMENTS (V2.4 Timeline UI) =================================================================== */
.application-tracker-container{max-width:800px;margin:0 auto;}
.application-timeline{position:relative;padding:1rem 0;}
/* The vertical line running through the timeline */
.application-timeline::before{content:'';position:absolute;top:0;left:20px;height:100%;width:3px;background-color:var(--divider-color);border-radius:2px;}
.timeline-item{position:relative;display:flex;gap:1.5rem;margin-bottom:1.5rem;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-marker{position:relative;z-index:1;width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;border:3px solid var(--app-bg);}
.timeline-content{flex-grow:1;}
.application-tracker-card{border:1px solid var(--border-color);border-left-width:5px;transition:all 0.2s ease-in-out;}
.application-tracker-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md);}
/* Status Border Colors */
.status-border-warning{border-left-color:var(--warning);}
.status-border-success{border-left-color:var(--success);}
.status-border-danger{border-left-color:var(--danger);}
.tracker-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:0.75rem;margin-bottom:0.75rem;border-bottom:1px solid var(--divider-color);}
.tracker-card-title{margin:0;font-size:1.2rem;font-weight:600;color:var(--text-primary);}
.tracker-card-meta{font-size:0.8rem;color:var(--text-tertiary);}
.tracker-card-status{margin-bottom:1rem;}
.status-description{font-size:0.95rem;color:var(--text-secondary);font-weight:500;margin:0;}
.tracker-card-actions{text-align:right;}
/* Reusing badge styles from messages page */
.badge[class*="badge-status-"]{font-weight:600;font-size:0.8rem;padding:0.4em 0.8em;border-radius:50px;flex-shrink:0;}
.badge-status-warning{background-color:#fefce8;color:#a16207;}
.badge-status-success{background-color:#f0fdf4;color:#15803d;}
.badge-status-danger{background-color:#fef2f2;color:#b91c1c;}
/* Reusing Status BG Colors from Messages Page */
.status-bg-warning{background-color:var(--warning);}
.status-bg-success{background-color:var(--success);}
.status-bg-danger{background-color:var(--danger);}
/* Enhanced Empty State for Documents */
.document-empty-state{padding:3rem 2rem;border-style:dashed;}
/* Responsive */
@media (max-width:576px){.application-timeline::before{left:20px;}
.timeline-item{gap:1rem;}
.tracker-card-header{flex-direction:column;align-items:flex-start;gap:0.5rem;}
}
/* =================================================================== 39. VIEW MESSAGE THREAD PAGE (V2.4 Immersive Chat UI) =================================================================== */
/* Page Header Back Link */
.page-header-title .back-link{color:var(--text-tertiary);margin-right:1rem;text-decoration:none;transition:color 0.2s ease;}
.page-header-title .back-link:hover{color:var(--primary);}
/* Two-Column Layout */
.conversation-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:992px){.conversation-grid{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);}
}
/* Main Chat Card */
.chat-card{display:flex;flex-direction:column;height:100%;}
.chat-card .card-body{flex-grow:1;overflow-y:auto;max-height:70vh;/* Control max height */
 padding:1.5rem;}
/* Chat Transcript Styles */
.chat-transcript{display:flex;flex-direction:column;gap:1.5rem;}
.chat-message-group{display:flex;gap:1rem;max-width:85%;}
.chat-message-group.sent{align-self:flex-end;flex-direction:row-reverse;}
.chat-message-group.received{align-self:flex-start;}
/* Chat Avatar Styles */
.chat-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600;}
.chat-message-group.sent .chat-avatar{background-color:var(--accent-green);color:white;}
.chat-message-group.received .chat-avatar{background-color:var(--divider-color);color:var(--accent-maroon);}
/* Chat Bubble Styles */
.chat-message-content{display:flex;flex-direction:column;}
.chat-bubble{padding:0.75rem 1.25rem;border-radius:1.25rem;line-height:1.6;word-break:break-word;}
.chat-message-group.sent .chat-bubble{background-color:var(--primary);color:white;border-bottom-right-radius:0.25rem;}
.chat-message-group.received .chat-bubble{background-color:var(--divider-color);color:var(--text-primary);border-bottom-left-radius:0.25rem;}
.chat-meta{font-size:0.8rem;color:var(--text-secondary);margin-top:0.5rem;padding:0 0.5rem;}
.chat-message-group.sent .chat-meta{text-align:right;}
/* Chat Attachment Chip */
.chat-attachment-chip{margin-top:0.75rem;border-top:1px solid rgba(255,255,255,0.2);padding-top:0.75rem;}
.chat-message-group.received .chat-attachment-chip{border-top:1px solid var(--border-color);}
.chat-attachment-chip a{display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;color:rgba(255,255,255,0.8);background-color:rgba(0,0,0,0.15);padding:0.4rem 0.8rem;border-radius:50px;transition:all 0.2s ease;}
.chat-attachment-chip a:hover{background-color:rgba(0,0,0,0.3);color:white;}
.chat-message-group.received .chat-attachment-chip a{color:var(--text-secondary);background-color:var(--card-bg);}
.chat-message-group.received .chat-attachment-chip a:hover{color:var(--primary);background-color:var(--primary-light);}
/* Reply Composer */
.chat-composer{display:flex;align-items:flex-end;gap:0.5rem;padding:0.75rem 1rem;background-color:var(--app-bg);}
.composer-input{flex-grow:1;border-radius:20px !important;resize:none;max-height:150px;overflow-y:auto;}
.btn-icon{width:40px;height:40px;border-radius:50% !important;flex-shrink:0;padding:0;}
/* Resolved Banner */
.conversation-resolved-banner{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:#f0fdf4;/* Light green */
 border-radius:var(--radius);color:#15803d;/* Dark green */
}
.conversation-resolved-banner i{font-size:1.5rem;}
.conversation-resolved-banner h5{margin:0;font-weight:600;color:#14532d;}
.conversation-resolved-banner p{margin:0.25rem 0 0 0;font-size:0.9rem;}
/* Sidebar Details */
.sidebar-section-title{font-size:1rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;}
.attachment-list{display:flex;flex-direction:column;gap:0.5rem;}
.attachment-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-secondary);transition:background-color 0.2s ease;}
.attachment-item:hover{background-color:var(--divider-color);color:var(--primary);}
/* =================================================================== 40. VIEW MESSAGE THREAD PAGE (Sidebar Correction) =================================================================== */
/* Sidebar Details List (dl,dt,dd structure) */
.details-list{display:grid;grid-template-columns:max-content 1fr;/* Label column and Value column */
 gap:1rem 1.5rem;align-items:center;}
.details-list dt{font-weight:500;color:var(--text-secondary);font-size:0.9rem;}
.details-list dd{font-weight:500;color:var(--text-primary);margin:0;text-align:right;/* Align values to the right for a clean look */
 font-size:0.9rem;}
.details-list dd .badge{font-size:0.8rem;padding:0.4em 0.8em;}
/* =================================================================== 41. CHAT COMPOSER ENHANCEMENTS (Attachment Preview) =================================================================== */
.chat-composer form{display:flex;flex-direction:column;gap:0.5rem;}
.composer-main-input{display:flex;align-items:flex-end;/* Aligns textarea and buttons */
 gap:0.5rem;}
.composer-actions{display:flex;gap:0.5rem;flex-shrink:0;}
/* Attachment Preview Area */
.attachment-preview{display:flex;/* managed by JS */
 align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius);font-size:0.9rem;}
.attachment-preview-icon{color:var(--primary);}
.attachment-preview-name{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary);}
.attachment-preview-remove{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--text-tertiary);cursor:pointer;padding:0 0.25rem;}
.attachment-preview-remove:hover{color:var(--danger);}
/* =================================================================== 42. PRINCIPAL MESSAGE VIEW ENHANCEMENTS (Action Hub UI) =================================================================== */
/* Custom badge color for "awaiting_admin_reply" */
.badge-status-primary{background-color:#e0e7ff;/* light indigo */
 color:#3730a3;/* dark indigo */
}
.text-primary{color:var(--primary) !important;}
/* Ensure avatar for received student messages is distinct */
.chat-message-group.received .chat-avatar{background-color:var(--accent-maroon);color:white;}
/* Ensure avatar for sent admin messages is distinct */
.chat-message-group.sent .chat-avatar{background-color:var(--accent-green);color:white;}
/* Sidebar Info Cards */
.anonymous-info-box{display:flex;align-items:center;gap:0.75rem;padding:1rem;background-color:var(--app-bg);border-radius:var(--radius);color:var(--text-secondary);font-weight:500;}
.anonymous-info-box i{color:var(--text-tertiary);font-size:1.2rem;}
.card-body .form-text{font-size:0.9rem;margin-bottom:1rem;}
.card-body .form-text strong{font-weight:600;}
/* Uniform styling for sidebar action buttons */
.d-grid .btn{text-align:left;display:flex;align-items:center;gap:0.75rem;font-weight:500;}
/* =================================================================== 43. DOCUMENT DETAIL PAGE ENHANCEMENTS (Timeline UI) =================================================================== */
/* Status Header Card */
.status-header-card{color:white;padding:1.5rem;border:none;}
.status-header-content{display:flex;align-items:center;gap:1.5rem;}
.status-header-icon{font-size:2.5rem;opacity:0.8;}
.status-header-title{margin:0;font-weight:600;}
.status-header-text p{margin:0.25rem 0 0 0;opacity:0.9;font-size:0.95rem;}
/* Status Colors */
.status-bg-warning{background:linear-gradient(135deg,#f59e0b,#d97706);}
.status-bg-success{background:linear-gradient(135deg,#16a34a,#059669);}
.status-bg-danger{background:linear-gradient(135deg,#ef4444,#dc2626);}
.status-bg-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);}
/* For Action Required */
/* Action Form inside Status Header */
.status-action-form{margin-top:1.5rem;padding:1.25rem;background-color:rgba(0,0,0,0.1);border-radius:var(--radius);}
.status-action-form p{color:white;}
.status-action-form .form-control{background-color:rgba(255,255,255,0.9);color:var(--text-primary);}
.status-action-form .form-label{color:rgba(255,255,255,0.9);}
/* General Application Details */
.app-blockquote{border-left:4px solid var(--primary);background-color:var(--app-bg);padding:1rem;margin:0;font-size:0.95rem;color:var(--text-secondary);}
.attachment-pill{display:inline-flex;align-items:center;gap:0.5rem;background-color:var(--divider-color);padding:0.5rem 1rem;border-radius:50px;text-decoration:none;font-weight:500;color:var(--text-secondary);transition:all 0.2s ease;}
.attachment-pill:hover{background-color:var(--border-color);color:var(--text-primary);}
.details-list hr.grid-span-2{grid-column:1 / -1;margin:0.5rem 0;border-color:var(--divider-color);}
/* Vertical Timeline */
.application-timeline{position:relative;padding-left:1.5rem;}
/* The main vertical line */
.application-timeline::before{content:'';position:absolute;left:21px;/* (Icon Width 42px / 2) */
 top:10px;bottom:10px;width:3px;background-color:var(--divider-color);border-radius:2px;}
.timeline-item{position:relative;padding-left:3rem;padding-bottom:2rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-icon{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:3px solid var(--divider-color);background-color:var(--card-bg);}
.timeline-content{position:relative;top:-4px;}
.timeline-title{font-weight:600;color:var(--text-primary);font-size:1.05rem;}
.timeline-meta{font-size:0.85rem;color:var(--text-secondary);margin:0.1rem 0 0.5rem 0;}
.timeline-meta strong{color:var(--text-primary);}
.timeline-forwarded{font-size:0.9rem;color:var(--text-secondary);margin-bottom:0.5rem;}
.timeline-remarks{margin:0.5rem 0;padding:0.75rem 1rem;background-color:var(--app-bg);border-left:3px solid var(--border-color);font-style:italic;font-size:0.9rem;}
.timeline-date{display:block;margin-top:0.5rem;font-size:0.8rem;color:var(--text-tertiary);}
/* Timeline Item Status Colors */
.timeline-item.status-submitted-by-student .timeline-icon,.timeline-item.status-student-responded .timeline-icon{color:var(--primary);border-color:var(--primary);}
.timeline-item.status-approved-and-forwarded .timeline-icon,.timeline-item.status-completed .timeline-icon{color:var(--success);border-color:var(--success);}
.timeline-item.status-rejected .timeline-icon{color:var(--danger);border-color:var(--danger);}
.timeline-item.status-information-requested .timeline-icon{color:var(--info);border-color:var(--info);}
/* =================================================================== 44. ADMIN DOCUMENT REVIEW PAGE ENHANCEMENTS (Action Hub UI) =================================================================== */
/* Status Header color for "Action Required by Admin" */
.status-bg-primary{background:linear-gradient(135deg,#60a5fa,#3b82f6);/* Brighter blue */
}
/* Action Hub Accordion Styling */
.accordion-item{border:none;border-bottom:1px solid var(--divider-color);}
.accordion-item:first-of-type,.accordion-item:last-of-type{border-radius:0;}
.accordion-item:last-of-type{border-bottom:none;}
.accordion-button{font-weight:600;color:var(--text-primary);background-color:var(--card-bg);padding:1rem 1.25rem;}
.accordion-button:not(.collapsed){background-color:var(--primary-light);color:var(--primary-dark);box-shadow:inset 0 -1px 0 var(--border-color);}
.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d97706'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
.accordion-button:focus{z-index:3;border-color:var(--primary-light);outline:0;box-shadow:0 0 0 0.25rem rgba(249,115,22,0.25);}
.accordion-body{background-color:var(--app-bg);padding:1.25rem;}
.accordion-body .form-label{font-weight:500;font-size:0.9rem;}
.accordion-body .btn{width:100%;}
/* =================================================================== 45. PRINCIPAL VIEW ENHANCEMENT (Add "Currently With") =================================================================== */
.status-header-meta{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;gap:0.6rem;font-size:0.9rem;font-weight:500;opacity:0.95;}
.status-header-meta strong{font-weight:700;}
/* =================================================================== 38. APPLY DOCUMENT PAGE ENHANCEMENTS (V2.4 Interactive Form) =================================================================== */
/* Student ID Card Component */
.student-id-card{display:flex;align-items:center;gap:1.5rem;background-color:var(--app-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem;}
.id-card-avatar{flex-shrink:0;}
.id-card-avatar-img,.id-card-avatar-fallback{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--card-bg);box-shadow:var(--shadow);}
.id-card-avatar-fallback{display:flex;align-items:center;justify-content:center;background-color:var(--accent-green);color:white;font-size:2rem;font-weight:600;}
.id-card-details{display:flex;flex-direction:column;}
.id-card-name{margin:0 0 0.25rem 0;font-size:1.25rem;font-weight:600;color:var(--text-primary);}
.id-card-meta{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;color:var(--text-secondary);font-size:0.85rem;}
.id-card-meta strong{color:var(--text-primary);}
/* Document Selection Grid & Cards */
.document-selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}
.doc-card{position:relative;}
.doc-card-input{position:absolute;opacity:0;width:0;height:0;}
.doc-card-label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem 1rem;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease-in-out;background-color:var(--card-bg);height:100%;}
.doc-card-label:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.doc-card-input:checked + .doc-card-label{border-color:var(--primary);background-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-primary);}
.doc-card-icon{font-size:2rem;margin-bottom:0.75rem;color:var(--primary);transition:transform 0.2s ease;}
.doc-card-input:checked + .doc-card-label .doc-card-icon{transform:scale(1.1);}
.doc-card-name{font-weight:600;color:var(--text-primary);line-height:1.3;}
/* Application Details Wrapper (for animation) */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px);}
to{opacity:1;transform:translateY(0);}
}
.application-details-wrapper{display:none;/* Hidden by default */
}
.application-details-wrapper.active{display:block;animation:fadeInDown 0.5s ease;}
/* Document Description Info Box */
.document-description-box{display:flex;align-items:flex-start;gap:0.75rem;background-color:var(--app-bg);border-radius:var(--radius);padding:1rem;border:1px solid var(--border-color);color:var(--text-secondary);font-size:0.9rem;}
.document-description-box i{color:var(--info);margin-top:3px;}
.document-description-box p{margin:0;}
/* Reusing file upload styles from message page */
.custom-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;border:2px dashed var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease;background-color:var(--app-bg);}
.custom-file-upload:hover{border-color:var(--primary);background-color:var(--primary-light);}
.custom-file-upload i{font-size:2rem;color:var(--primary);margin-bottom:0.75rem;}
.custom-file-upload .file-upload-text{font-weight:500;color:var(--text-secondary);}
.custom-file-upload small{margin-top:0.25rem;color:var(--text-tertiary);}
#supporting_document{display:none;}
/* Reusing guidelines list styles from message page */
.guidelines-card{border-top:4px solid var(--primary);}
.guidelines-list{list-style:none;padding:0;margin:1rem 0 0 0;display:flex;flex-direction:column;gap:1rem;}
.guidelines-list li{display:flex;align-items:flex-start;gap:0.85rem;font-size:0.9rem;color:var(--text-secondary);}
.guidelines-list i{width:20px;text-align:center;font-size:1rem;margin-top:2px;color:var(--primary);}
.guidelines-list strong{color:var(--text-primary);}
/* Ensure button state is clear */
#submit-btn:disabled{background-color:var(--text-tertiary);border-color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none;}
/* =================================================================== 46. ADMIN DATA TABLE PAGE ENHANCEMENTS (Control Hub UI) =================================================================== */
/* Unified Control Hub / Filter Bar */
.datatable-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--app-bg);}
.datatable-filter-bar .filter-group{flex:1 1 200px;/* Grow,shrink,and basis */
}
.datatable-filter-bar .filter-group label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.25rem;display:block;}
/* DataTables elements moved into the hub */
.datatable-filter-bar .dt-buttons{flex:0 1 auto;/* Don't grow,allow shrinking */
}
.datatable-filter-bar .dataTables_filter{flex:1 1 300px;text-align:right;}
.datatable-filter-bar .dataTables_filter label{width:100%;font-weight:normal;}
.datatable-filter-bar .dataTables_filter input{width:100%;margin-left:0;border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:0.5rem 0.75rem;}
.datatable-filter-bar .dataTables_filter input:focus{border-color:var(--primary);box-shadow:0 0 0 0.2rem rgba(249,115,22,0.25);outline:none;}
/* Ensure card-body has no top padding when a filter bar is present */
.card-body-no-top-padding{padding-top:0 !important;}
/* Enhanced Table Cell Styles */
#allAppsTable td{vertical-align:middle;}
.avatar-cell{flex-shrink:0;margin-right:0.75rem;}
.avatar-initials{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;background-color:var(--accent-maroon);color:white;font-size:0.9rem;}
/* Status Badges for table view */
.badge-status-danger{background-color:#fef2f2;color:#b91c1c;}
.badge-status-success{background-color:#f0fdf4;color:#15803d;}
.badge-status-warning{background-color:#fefce8;color:#a16207;}
/* Action Button Styling */
.btn-action{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease;border:none;font-size:0.9rem;}
.btn-action-view{background-color:var(--primary-light);color:var(--primary);}
.btn-action-view:hover{background-color:var(--primary);color:white;transform:scale(1.1);}
/* =================================================================== 47. INTERACTIVE CALENDAR PAGE (V2.4 UI/UX) =================================================================== */
/* Modern Calendar Card */
.calendar-card{padding:1.5rem;}
.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:0.75rem;}
.day-name{font-size:0.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;}
.calendar-grid-body{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.day-cell{position:relative;aspect-ratio:1 / 1;/* Makes the cells square */
 display:flex;flex-direction:column;align-items:center;padding-top:0.5rem;border-radius:var(--radius);transition:background-color 0.2s ease;}
.day-cell:not(.is-empty){cursor:pointer;}
.day-cell:not(.is-empty):hover{background-color:var(--divider-color);}
.day-cell.is-empty{pointer-events:none;}
.day-number{font-weight:500;color:var(--text-primary);font-size:0.9rem;}
/* Calendar Day States */
.day-cell.is-today .day-number{background-color:var(--primary);color:white;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
.day-cell.is-holiday{background-color:#f1eaea;/* Subtle maroon */
 color:var(--accent-maroon);}
.day-cell.is-holiday .day-number{font-weight:600;color:var(--accent-maroon);}
.day-cell.is-selected{background-color:var(--primary-light) !important;box-shadow:0 0 0 2px var(--primary);}
.event-dots{display:flex;gap:4px;margin-top:0.5rem;}
.event-dot{width:6px;height:6px;border-radius:50%;background-color:var(--primary);}
/* Refined Event Timeline */
.timeline-container{position:relative;padding-left:3rem;/* Space for date markers */
 display:flex;flex-direction:column;gap:1.5rem;}
/* The main vertical line */
.timeline-container::before{content:'';position:absolute;left:21px;/* Center on the 42px date marker */
 top:10px;bottom:10px;width:2px;background-color:var(--divider-color);}
.timeline-container.is-filtered::before{background-color:var(--primary-light);}
.timeline-event-item{display:flex;gap:1rem;position:relative;transition:opacity 0.3s ease,transform 0.3s ease;}
.timeline-container.is-filtered .timeline-event-item{animation:fadeInUp 0.5s;}
.timeline-date{position:absolute;left:-3rem;top:0;width:42px;height:42px;border-radius:50%;background-color:var(--card-bg);border:2px solid var(--divider-color);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1;}
.timeline-date .day{font-size:1.2rem;font-weight:700;line-height:1;color:var(--accent-maroon);}
.timeline-date .month{font-size:0.7rem;text-transform:uppercase;color:var(--text-tertiary);}
.timeline-event-item.is-holiday .timeline-date{border-color:var(--accent-maroon);}
.timeline-card{flex-grow:1;border:1px solid var(--border-color);border-left:4px solid var(--primary);transition:all 0.2s ease;}
.timeline-event-item.is-holiday .timeline-card{border-left-color:var(--accent-maroon);}
.timeline-event-item:hover .timeline-card{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary);}
.timeline-card-title{margin:0;font-size:1.1rem;font-weight:600;}
.timeline-card-meta{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;margin-top:0.5rem;font-size:0.9rem;color:var(--text-secondary);}
.timeline-card-meta i{color:var(--text-tertiary);}
.timeline-card-desc{font-size:0.95rem;line-height:1.6;color:var(--text-secondary);}
/* =================================================================== 48. MEAL CHANGE REQUESTS PAGE (Superintendent UI) =================================================================== */
.meal-request-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:1.5rem;}
.meal-request-card .card-header{display:flex;justify-content:space-between;align-items:center;}
.profile-avatar-small{width:40px;height:40px;border-radius:50%;background-color:var(--accent-maroon);color:white;display:flex;align-items:center;justify-content:center;font-weight:600;}
.request-reason blockquote{margin:0.25rem 0 0 0;padding-left:1rem;border-left:3px solid var(--border-color);font-style:italic;color:var(--text-secondary);font-size:0.9rem;}
.preference-comparison-table{font-size:0.9rem;margin-top:1rem;}
.preference-comparison-table td{vertical-align:middle;padding:0.75rem 0.5rem;}
.preference-comparison-table tr:last-child td{border-bottom:none;}
.change-diff-compact{display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;}
.change-diff-compact .old-choice,.change-diff-compact .new-choice{padding:0.2rem 0.6rem;border-radius:var(--radius-sm);font-weight:500;}
.change-diff-compact .old-choice{background-color:#fee2e2;/* Red-ish */
 color:#991b1b;text-decoration:line-through;}
.change-diff-compact .new-choice{background-color:#dcfce7;/* Green-ish */
 color:#166534;}
.change-diff-compact i{color:var(--text-tertiary);}
.slot-check-cell{width:80px;text-align:right;}
.slot-badge{font-weight:600;font-size:0.8rem;}
.meal-request-card .card-footer{background-color:var(--app-bg);}
/* Soft-colored buttons (if not already defined) */
.btn-success-soft{background-color:#dcfce7;color:#166534;border-color:#dcfce7;}
.btn-success-soft:hover{background-color:#16a34a;color:white;border-color:#16a34a;}
.btn-danger-soft{background-color:#fee2e2;color:#b91c1c;border-color:#fee2e2;}
.btn-danger-soft:hover{background-color:#dc2626;color:white;border-color:#dc2626;}
/* ===================================================================
   49. CREATE LEAVE PAGE (Superintendent UI/UX)
   =================================================================== */

/* Visual Leave Type Selection */
.leave-type-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.leave-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--card-bg);
    text-align: center;
    font-weight: 600;
}
.leave-type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.leave-type-card i {
    font-size: 1.5rem;
    color: var(--text-tertiary);
}

input[type="radio"]:checked + .leave-type-card {
    border-color: var(--primary);
    background-color: var(--primary-light);
    color: var(--primary-dark);
}
input[type="radio"]:checked + .leave-type-card i {
    color: var(--primary);
}

/* Real-time Summary List */
.summary-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.summary-list dt {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: -0.75rem; /* Pull the value up */
}
.summary-list dd {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--divider-color);
    min-height: 24px; /* Prevent layout shifts */
}
.summary-list dd:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

/* Invalid state for date inputs */
.form-control.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

/* ===================================================================
   48. MEAL CHANGE REQUESTS PAGE (Superintendent UI)
   =================================================================== */

.meal-request-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.5rem;
}

.meal-request-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-maroon);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.request-reason blockquote {
    margin: 0.25rem 0 0 0;
    padding-left: 1rem;
    border-left: 3px solid var(--border-color);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.preference-comparison-table {
    font-size: 0.9rem;
    margin-top: 1rem;
}
.preference-comparison-table td {
    vertical-align: middle;
    padding: 0.75rem 0.5rem;
}
.preference-comparison-table tr:last-child td {
    border-bottom: none;
}

.change-diff-compact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.change-diff-compact .old-choice,
.change-diff-compact .new-choice {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.change-diff-compact .old-choice {
    background-color: #fee2e2; /* Red-ish */
    color: #991b1b;
    text-decoration: line-through;
}
.change-diff-compact .new-choice {
    background-color: #dcfce7; /* Green-ish */
    color: #166534;
}
.change-diff-compact i {
    color: var(--text-tertiary);
}

.slot-check-cell {
    width: 80px;
    text-align: right;
}
.slot-badge {
    font-weight: 600;
    font-size: 0.8rem;
}

.meal-request-card .card-footer {
    background-color: var(--app-bg);
}

/* Soft-colored buttons (if not already defined) */
.btn-success-soft {
  background-color: #dcfce7;
  color: #166534;
  border-color: #dcfce7;
}
.btn-success-soft:hover {
  background-color: #16a34a;
  color: white;
  border-color: #16a34a;
}
.btn-danger-soft {
  background-color: #fee2e2;
  color: #b91c1c;
  border-color: #fee2e2;
}
.btn-danger-soft:hover {
  background-color: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* Enhanced Empty State */
.card-empty-state {
    padding: 3rem 2rem;
    border-style: dashed;
    text-align: center;
}
.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

/* ===================================================================
 * HOSTEL MEAL MANAGEMENT PAGE STYLES
 * =================================================================== */

/* ===== Responsive Display Classes ===== */
.d-none-mobile { display: block !important; }
.d-mobile-only { display: none !important; }
@media (max-width: 768px) {
    .d-none-mobile { display: none !important; }
    .d-mobile-only { display: flex !important; }
}

/* ===== Leave Status Card Styling ===== */
.leave-status-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.leave-status-card .bg-gradient-lunch {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
    color: #1e40af;
    padding: 1.25rem 1.5rem;
}
.leave-status-card .bg-gradient-dinner {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%);
    color: #5b21b6;
    padding: 1.25rem 1.5rem;
}
.leave-table-controls {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.leave-table-container {
    max-height: 400px;
    overflow-y: auto;
}
.leave-table-container::-webkit-scrollbar { width: 6px; }
.leave-table-container::-webkit-scrollbar-track { background: #f1f1f1; }
.leave-table-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.leave-status-table { margin: 0; }
.leave-status-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%);
}
.leave-status-table thead th {
    padding: 0.85rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.leave-status-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}
.leave-status-table tbody tr:hover { background-color: #f0f9ff; }
.leave-status-table tbody td { padding: 0.75rem; vertical-align: middle; }
.leave-status-table .row-number {
    font-weight: 600;
    color: #64748b;
    text-align: center;
    width: 40px;
}
.student-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.dept-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f1f5f9;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #475569;
}
.pref-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pref-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 1rem;
    font-size: 0.75rem;
    color: #065f46;
    font-weight: 500;
}
.leave-period-badge-v2 {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: #475569;
    background: #f1f5f9;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
}
.leave-period-badge-v2 i { font-size: 0.65rem; opacity: 0.6; }

.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { background-color: #e2e8f0; }
.sortable-header .sort-icon { font-size: 0.7rem; opacity: 0.4; margin-left: 4px; }
.sortable-header.asc .sort-icon,
.sortable-header.desc .sort-icon { opacity: 1; color: #3b82f6; }

/* ===== Mobile Card View for Leave Status ===== */
.leave-card-container { display: flex; flex-direction: column; gap: 0.75rem; }
.leave-student-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
}
.leave-student-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.leave-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    margin-right: 0.5rem;
}
.student-photo-card {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
}
.student-avatar-card {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}
.leave-card-body { padding: 0.75rem; }
.card-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 0.85rem;
}
.card-info-row:last-child { border-bottom: none; }
.info-label { color: #64748b; font-weight: 500; }

/* ===== Skipping Meals Card Styling ===== */
.skipping-meals-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.skipping-meals-card .bg-gradient-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    color: #92400e;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}
.skipping-meals-card .bg-gradient-warning h5 { color: #92400e; }
.meal-skip-section { padding: 0.5rem 0; }
.skip-table-container {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
}
.skip-table-container::-webkit-scrollbar { width: 6px; }
.skip-table-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.skip-table-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.skip-table-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.skip-meals-table { margin: 0; border-collapse: separate; border-spacing: 0; }
.skip-meals-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%);
}
.skip-meals-table thead th {
    border-bottom: 2px solid #e2e8f0;
    padding: 0.85rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    white-space: nowrap;
}
.skip-meals-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}
.skip-meals-table tbody tr:hover { background-color: #fefce8; }
.skip-meals-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
}
.student-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.student-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}
.leave-period-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: #475569;
    background: #f1f5f9;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
}
.leave-period-badge i { font-size: 0.7rem; }

/* Purple accent for dinner */
.text-purple { color: #7c3aed !important; }
.bg-purple { background-color: #7c3aed !important; color: white !important; }

/* Responsive adjustments for skip tables */
@media (max-width: 768px) {
    .skip-meals-table thead th,
    .skip-meals-table tbody td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }
    .student-avatar, .student-photo { width: 28px; height: 28px; font-size: 0.7rem; }
    .leave-period-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
    .skip-meals-table .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
}
@media (max-width: 576px) {
    .skip-table-container { max-height: 250px; }
    .meal-skip-section .d-flex { flex-direction: column; gap: 0.5rem; }
}

/* ===== Meal Submission Info ===== */
.meal-submission-info {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border-left: 4px solid var(--primary);
}
.meal-submission-info .info-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
}
.skip-lunch-text { color: #f59e0b; font-weight: 600; }
.skip-dinner-text { color: #8b5cf6; font-weight: 600; }

/* ===== Meal Count Cards Styling ===== */
.meal-count-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.meal-count-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.meal-count-card .card-header {
    padding: 1.5rem;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.meal-count-card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: -20%;
    width: 300px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
}
.bg-gradient-primary {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 50%, #f0f9ff 100%);
    color: #0369a1;
}
.bg-gradient-secondary {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 50%, #faf5ff 100%);
    color: #6d28d9;
}
.meal-count-card .card-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}
.meal-count-card .card-title i { font-size: 1.5rem; }
.bg-gradient-primary .card-title { color: #0369a1; }
.bg-gradient-secondary .card-title { color: #6d28d9; }
.meal-count-card .card-header .badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    border-radius: 50px;
    position: relative;
    z-index: 1;
}
.bg-gradient-primary .badge { background-color: rgba(2, 132, 199, 0.15); color: #0369a1; }
.bg-gradient-secondary .badge { background-color: rgba(109, 40, 217, 0.15); color: #6d28d9; }

/* ===== Table Responsive Container ===== */
.table-responsive-dynamic {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 1rem 1rem;
}
.table-responsive-dynamic::-webkit-scrollbar { height: 6px; }
.table-responsive-dynamic::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.table-responsive-dynamic::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.table-responsive-dynamic::-webkit-scrollbar-thumb:hover { background: #888; }

/* ===== Meal Count Table (Enhanced) ===== */
.meal-count-table { border-collapse: collapse; width: 100%; margin: 0; }
.meal-count-table thead {
    background: linear-gradient(to bottom, rgba(249, 115, 22, 0.04) 0%, rgba(249, 115, 22, 0.02) 100%);
    position: sticky;
    top: 0;
}
.meal-count-table th {
    background-color: transparent !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.85rem 0.6rem !important;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}
.meal-count-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.meal-count-table tbody tr:hover { background-color: rgba(249, 115, 22, 0.03); }
.meal-count-table td { padding: 0.85rem 0.6rem; vertical-align: middle; }
.meal-item-name { font-weight: 600; color: var(--text-primary); min-width: 140px; }
.meal-count-table .final-count-input {
    width: 75px;
    max-width: 100%;
    text-align: center;
    font-weight: 700;
    border: 2px solid #ddd;
    border-radius: 0.5rem;
    padding: 0.5rem 0.4rem;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--text-primary);
}
.final-count-input-animated { border-color: #ddd; }
.final-count-input-animated:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
    outline: none;
    background-color: rgba(249, 115, 22, 0.02);
}

/* ===== Roti Multiplier Styling ===== */
.roti-row .meal-item-name::after { content: ' 🌾'; margin-left: 0.3rem; font-size: 0.9em; }
.roti-row .meal-item-name { font-weight: 700; color: var(--primary); }
.multiplier-input-group { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.roti-multiplier {
    width: 70px;
    text-align: center;
    font-weight: 600;
    border: 2px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.4rem 0.3rem;
    background-color: #fffbeb;
    color: #92400e;
    transition: all 0.2s ease;
}
.roti-multiplier:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    outline: none;
    background-color: #fef3c7;
}
.roti-multiplier:hover { border-color: #d97706; }
.multiplier-cell small { font-size: 0.7rem; font-weight: 500; }
.roti-display-count { color: #059669; font-size: 0.8rem; }

/* Visual indicator for Roti rows */
.roti-row td { background-color: rgba(245, 158, 11, 0.03); }
.roti-row:hover td { background-color: rgba(245, 158, 11, 0.06); }

.meal-count-table tfoot {
    background-color: rgba(249, 115, 22, 0.08);
    border-top: 2px solid var(--border-color);
}
.meal-count-table tfoot td {
    font-weight: 700;
    padding: 1rem 0.6rem !important;
    color: var(--text-primary);
}
.final-total-cell { font-size: 1.4rem; color: var(--primary-dark); }
.totals-row td { border-top: 2px solid var(--border-color); }

/* ===== Roaster styling ===== */
.student-list { display: flex; flex-direction: column; gap: 0.75rem; }
.student-item {
    padding: 0.75rem;
    border-left: 4px solid #0d6efd;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}
.student-item:hover { background-color: #e9ecef; border-left-color: #0d6efd; }
.student-item.student-absent { border-left-color: #dc3545; background-color: #fff5f5; }
.student-item.student-absent:hover { background-color: #ffe0e0; }
.student-name { font-weight: 500; color: #212529; display: block; }
.student-item.student-absent .student-name { color: #dc3545; text-decoration: line-through; }
.card-header h5 { font-size: 1.1rem; }

/* ===== Handsontable roaster styling ===== */
.roaster-absent {
    background-color: #ffcccc !important;
    color: #dc3545 !important;
    font-weight: 500;
}

/* ===== Responsive Handsontable grids ===== */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
}
.table-responsive-wrapper::-webkit-scrollbar { height: 8px; }
.table-responsive-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.table-responsive-wrapper::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }
.table-responsive-wrapper { scrollbar-color: #888 #f1f1f1; scrollbar-width: thin; }
#todays-lunch-roaster-grid,
#todays-dinner-roaster-grid,
#tomorrows-lunch-roaster-grid,
#tomorrows-dinner-roaster-grid,
#mealPreferenceGrid { min-width: 1000px; width: 100%; }

/* ===== Handsontable Loading Placeholder ===== */
.ht-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
}

/* ===== Animations ===== */
@keyframes totalUpdatePulse {
    0% { transform: scale(1); color: var(--text-primary); }
    50% { transform: scale(1.15); color: var(--primary-dark); font-weight: 900; }
    100% { transform: scale(1); color: var(--text-primary); }
}
@keyframes badgeUpdatePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
.total-update-pulse { animation: totalUpdatePulse 0.6s ease-in-out; }
.badge-update-pulse { animation: badgeUpdatePulse 0.6s ease-in-out; }

/* ===== Mobile Responsive Styles for Meal Count ===== */
@media (max-width: 992px) {
    .row.g-4 { gap: 1.5rem !important; }
    .meal-count-card .card-header { flex-direction: column; align-items: flex-start; }
    .meal-count-card .card-title { width: 100%; }
    .meal-count-card .card-header .badge { align-self: flex-start; }
}
@media (max-width: 768px) {
    .meal-submission-info { padding: 1rem 1.25rem; }
    .meal-submission-info .info-text { font-size: 0.9rem; }
    .meal-count-card .card-header { padding: 1.25rem; }
    .meal-count-card .card-title { font-size: 1.15rem; }
    .meal-count-table th { padding: 0.65rem 0.4rem !important; font-size: 0.7rem; }
    .meal-count-table td { padding: 0.65rem 0.4rem; }
    .meal-item-name { min-width: 110px; font-size: 0.9rem; }
    .meal-count-table .final-count-input { width: 65px; padding: 0.4rem 0.3rem; font-size: 0.9rem; }
    .final-total-cell { font-size: 1.2rem; }
    .d-none.d-md-table-cell { display: none !important; }
}
@media (max-width: 576px) {
    .meal-submission-info .info-text { font-size: 0.85rem; }
    .meal-count-card { border-radius: 0.75rem; }
    .meal-count-card .card-header { padding: 1rem; }
    .meal-count-card .card-title { font-size: 1.05rem; }
    .meal-count-card .card-title i { font-size: 1.25rem; }
    .meal-count-table th { padding: 0.5rem 0.25rem !important; font-size: 0.65rem; }
    .meal-count-table td { padding: 0.5rem 0.25rem; }
    .meal-count-table tfoot td { padding: 0.8rem 0.25rem !important; }
    .meal-item-name { min-width: 90px; font-size: 0.8rem; }
    .meal-count-table .final-count-input { width: 60px; padding: 0.35rem 0.25rem; font-size: 0.8rem; }
    .final-total-cell { font-size: 1.05rem; }
    .d-none.d-sm-table-cell { display: none !important; }
    .d-none.d-md-table-cell { display: none !important; }
}
@media (max-width: 360px) {
    .meal-count-table { font-size: 0.7rem; }
    .meal-count-table th { padding: 0.4rem 0.15rem !important; }
    .meal-count-table td { padding: 0.4rem 0.15rem; }
    .meal-count-table .final-count-input { width: 50px; padding: 0.3rem 0.2rem; font-size: 0.7rem; }
    .meal-item-name { min-width: 70px; }
}
@media (prefers-reduced-motion: no-preference) {
    .meal-count-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .meal-count-card:hover { transform: translateY(-8px); }
}

/* ===================================================================
 * INVENTORY MODULE V4.0 PREMIUM UI
 * Mobile-responsive styles for the inventory management system
 * Consolidated Global Styles
 * =================================================================== */

:root {
    /* Inventory Color Palette */
    --inv-primary: #046a38;        /* Sacred Green - Primary Action */
    --inv-primary-dark: #065f46;
    --inv-primary-light: #dcfce7;
    --inv-secondary: #0369a1;      /* Ocean Blue - Secondary Action */
    --inv-accent: #f97316;         /* Saffron - Highlights */
    --inv-danger: #dc2626;         /* Red - Errors/Alerts */
    --inv-success: #16a34a;        /* Green - Success */
    --inv-warning: #d97706;        /* Amber - Warnings */
    --inv-gold: #d4a574;           /* Gold - Premium/Special */
    --inv-maroon: #8c4d4d;         /* Maroon - Headers */
    
    /* UI Variables */
    --inv-text: #1f2937;
    --inv-text-muted: #6b7280;
    --inv-text-light: #9ca3af;
    --inv-border: #e5e7eb;
    --inv-bg: #f9fafb;
    --inv-card-bg: #ffffff;
    --inv-cream: #fffbf5;
}

/* --- Global Container & Page Wrapper --- */
.inv-page-wrapper {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--inv-cream) 0%, #fef3e6 50%, #fff9f0 100%);
}

.inv-page-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.inv-bg-pattern {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: radial-gradient(circle at 25% 25%, var(--inv-secondary) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

.inv-main-content {
    background: var(--inv-card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid var(--inv-border);
}

/* --- Page Header --- */
.inv-page-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.inv-header-purchases {
    background: linear-gradient(135deg, var(--inv-secondary) 0%, #024e7c 100%);
}

.inv-page-header h1 { 
    font-size: 1.75rem; 
    font-weight: 700; 
    margin: 0 0 0.25rem 0; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    color: white;
}

.inv-page-subtitle { 
    font-size: 0.95rem; 
    color: rgba(255,255,255,0.8); 
    margin: 0;
}

.inv-header-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    flex-wrap: wrap; 
    gap: 1rem; 
    margin-bottom: 1rem;
}

/* --- Buttons & Actions --- */
.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
    font-size: 0.9rem;
}

.inv-btn:hover { opacity: 0.95; transform: translateY(-1px); }

.inv-btn-primary { background: var(--inv-primary); color: white; }
.inv-btn-secondary { background: white; color: var(--inv-primary); border: 1px solid var(--inv-primary); }
.inv-btn-danger { background: var(--inv-danger); color: white; }
.inv-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; }
.inv-btn-outline:hover { background: rgba(255,255,255,0.1); color: white; }

.inv-btn-back {
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}
.inv-btn-back:hover { background: rgba(255,255,255,0.25); color: white; }

/* --- Controls & Utilities --- */
.inv-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.inv-search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}
.inv-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--inv-text-muted);
}
.inv-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--inv-border);
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.inv-search-input:focus { border-color: var(--inv-primary); }

.inv-filter-group select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--inv-border);
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
}

/* --- Dashboard Specifics --- */
.inv-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.inv-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    padding: 1.5rem;
    border: 1px solid var(--inv-border);
    transition: transform 0.2s, box-shadow 0.2s;
}
.inv-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.inv-stat-card { display: flex; align-items: center; gap: 1.5rem; }
.inv-stat-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.inv-stat-icon.primary { background: var(--inv-primary-light); color: var(--inv-primary); }
.inv-stat-icon.secondary { background: #e0f2fe; color: var(--inv-secondary); }
.inv-stat-icon.accent { background: #fff7ed; color: var(--inv-accent); }

.inv-stat-content h3 { font-size: 1.75rem; font-weight: 700; margin: 0; color: var(--inv-text); }
.inv-stat-content p { color: var(--inv-text-muted); margin: 0.25rem 0 0 0; font-size: 0.9rem; }

/* --- Tables --- */
.inv-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--inv-border);
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.inv-table thead { background: var(--inv-bg); }
.inv-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--inv-text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--inv-border);
}

.inv-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--inv-border);
    color: var(--inv-text);
}

.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr:hover td { background-color: #f9fafb; }

.inv-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.inv-badge-success { background: #dcfce7; color: #166534; }
.inv-badge-warning { background: #fef3c7; color: #92400e; }
.inv-badge-danger { background: #fee2e2; color: #b91c1c; }
.inv-badge-outline { border: 1px solid var(--inv-border); color: var(--inv-text-muted); }

/* --- Forms --- */
.inv-form-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.inv-form-header {
    background: linear-gradient(135deg, var(--inv-maroon), #7c3f3f);
    color: white;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.inv-form-body { padding: 2rem; }

.inv-form-group { margin-bottom: 1.5rem; }
.inv-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--inv-text);
}
.inv-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--inv-border);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.inv-form-control:focus { outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 2px var(--inv-primary-light); }

/* --- Mobile Components --- */
.inv-mobile-only { display: none; }

.inv-list-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid var(--inv-border);
}

.inv-list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--inv-border);
}
.inv-list-card-title { font-weight: 600; color: var(--inv-text); }

.inv-list-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.inv-list-label { color: var(--inv-text-muted); }
.inv-list-val { font-weight: 500; }

/* --- Modals --- */
.inv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}
.inv-modal-overlay.show { opacity: 1; visibility: visible; }

.inv-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.inv-modal.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.inv-modal-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--inv-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inv-modal-title { font-weight: 600; font-size: 1.1rem; margin: 0; }
.inv-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--inv-text-muted); }

.inv-modal-body { padding: 1.5rem; }

/* --- Responsive Helpers --- */
@media (max-width: 768px) {
    .inv-desktop-only { display: none !important; }
    .inv-mobile-only { display: block !important; }
    
    .inv-page-container { padding: 1rem; }
    .inv-page-header { padding: 1.25rem; border-radius: 16px; }
    .inv-page-header h1 { font-size: 1.25rem; }
    
    .inv-controls { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .inv-search-box { max-width: none; }
    
    .inv-dashboard-grid { grid-template-columns: 1fr; }
    
    .inv-form-body { padding: 1.25rem; }
    
    /* Tables to Cards for Mobile */
    .inv-table-responsive { display: block; overflow-x: auto; }
}

/* --- Print Styles --- */
@media print {
    .inv-btn, .inv-controls { display: none !important; }
    .sidebar { display: none !important; }
    .inv-page-container { max-width: 100%; margin: 0; padding: 0; }
    .inv-card, .inv-main-content { box-shadow: none; border: 1px solid #ddd; }
}

/* --- Alerts --- */
.inv-alert {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.inv-alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.inv-alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }

/* --- Legacy Inventory Overrides (Backward Compatibility) --- */
.inventory-dashboard { padding: 0 !important; }

/* --- End Inventory Global Styles --- */