body {
    background-color: #f4f6f9;
    font-family: 'Roboto', sans-serif;
}

/* Top Navy Banner Section */
.banner-container {
    background-color: #031530; /* Deep Navy Blue */
    color: #ffffff;
    padding: 20px;
}

.school-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.school-subtitle {
    /*font-family: 'Great Vibes', cursive;*/
    font-size: 1.2rem;
    color: #dfb256; /* Golden Script color */
    margin: 5px 0 0 0;
    display: inline-block;
    position: relative;
}

/* Elegant lines framing the script text */
.school-subtitle::before, .school-subtitle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background-color: #dfb256;
}
.school-subtitle::before { right: 100%; margin-right: 15px; }
.school-subtitle::after { left: 100%; margin-left: 15px; }

/* Logo Styling */
.logo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #dfb256;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #031530;
    font-weight: bold;
}

.badge-placeholder {
    width: 90px;
    height: 100px;
    background: #dfb256;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #031530;
    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
}

/* Bottom Info Bar Section */
.info-bar-container {
    background-color: #ffffff;
    border-radius: 0 0 15px 15px;
    padding: 15px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Security System Badge */
.security-badge {
    background-color: #0c2017; /* Dark Forest Green */
    border: 1px solid #1e3d2f;
    color: #55b357; /* Light Vibrant Green */
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}
.security-badge i {
    font-size: 1.5rem;
    margin-right: 12px;
}

/* Date & Time Section */
.date-time-box {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a252f;
}
.dt-segment {
    display: flex;
    align-items: center;
}
.dt-segment i {
    font-size: 1.4rem;
    margin-right: 10px;
    color: #2c3e50;
}
.divider {
    width: 1px;
    height: 30px;
    background-color: #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .school-title { font-size: 1.4rem; }
    .school-subtitle { font-size: 1.3rem; }
    .school-subtitle::before, .school-subtitle::after { width: 30px; }
    .logo-placeholder, .badge-placeholder { width: 70px; height: 70px; font-size: 0.6rem; }
    .date-time-box { margin-top: 10px; font-size: 1rem; }
    .security-badge { justify-content: center; }
}

/* Base Card Layout */
.counter-card {
    background-color: #ffffff;
    border: 1px solid #dbe3eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

/* The Header Container */
.card-header-custom {
    position: relative;
    height: 80px;
    display: flex;
    align-items: flex-start;
    padding: 0;
}

/* Left Side: Contains the Icon */
.header-icon-side {
    position: absolute;
    left: 0;
    top: 0;
    width: 95px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #ffffff;
    z-index: 3;
    border-bottom-right-radius: 28px; /* Smooth inward lower turn */
}

/* Right Side: Contains the text (IN, OUT, BALANCE) */
.header-text-side {
    width: 100%;
    left: 10px;
    height: 43px; /* Fixed shallow header height matching the original */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    padding-left: 95px; /* Offset to keep text centered in the remaining space */
    position: relative;
    z-index: 1;
    top: -10px;
}

/* The Magical S-Wave Curve Element */
.header-text-side::before {
    content: '';
    position: absolute;
    top: 43px;
    left: 72px;
    width: 40px;
    height: 40px;
    border-top-left-radius: 25px;
    z-index: 2;
}

/* --- THEMES (Colors matched precisely to the original image) --- */

/* 1. Green Theme (IN) */
.card-green .header-icon-side,
.card-green .header-text-side {
    background-color: #144d20;
}
.card-green .header-text-side::before {
    box-shadow: -15px -15px 0 0 #144d20; /* Blends the curve seamlessly */
}
.text-green-num { color: #144d20; }

/* 2. Blue Theme (OUT) */
.card-blue .header-icon-side,
.card-blue .header-text-side {
    background-color: #003399;
}
.card-blue .header-text-side::before {
    box-shadow: -15px -15px 0 0 #003399;
}
.text-blue-num { color: #003399; }

/* 3. Purple Theme (BALANCE) */
.card-purple .header-icon-side,
.card-purple .header-text-side {
    background-color: #3d007a;
}
.card-purple .header-text-side::before {
    box-shadow: -15px -15px 0 0 #3d007a;
}
.text-purple-num { color: #3d007a; }


/* --- CARD BODY TEXT & TYPOGRAPHY --- */
.counter-number {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    margin-top: 12px;
    margin-bottom: 2px;
}

.card-divider {
    width: 82%;
    height: 1px;
    background-color: #e2e8f0;
    margin: 10px auto;
}

.info-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 2px;
}

.info-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #000000;
    margin-bottom: 15px;
}

/* Icon adjustments to closely mirror your screenshot */
.fa-door-open-custom {
    border: 3px solid #ffffff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 1.6rem;
}

/* Outer Main Card Container */
.dashboard-card {
    background-color: #ffffff;
    border: 1.5px solid #dcdfdc;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Common Green Bar Style */
.panel-header-dark {
    background-color: #123e19; /* Deep Forest Green */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
}

/* ATTENDANCE SECTION */
.attendance-body {
    padding: 15px;
    display: flex;
    gap: 12px;
    flex-grow: 1;
}

/* Metric Inner Status Boxes */
.metric-box {
    flex: 1;
    border-radius: 10px;
    border: 1px solid;
    padding: 15px 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-box .box-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.metric-box .box-icon {
    font-size: 2.2rem;
    margin-bottom: 5px;
}

.metric-box .box-number {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
}

.metric-box .box-percentage {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    margin-top: 5px;
}

/* Metric Theme Specifications */
.box-total { border-color: #cdd6cd; color: #123e19; }
.box-absent { border-color: #f5cfcf; color: #ad1d1d; }
.box-leave { border-color: #faebd7; color: #d97724; }

/* SECURITY SECTION */
.security-body {
    padding: 20px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.security-title {
    color: #123e19;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Shield container styling */
.shield-wrapper {
    position: relative;
    color: #123e19;
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 8px;
}

.shield-wrapper .check-icon {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.8rem;
}

.status-secure {
    font-size: 2.2rem;
    font-weight: 900;
    color: #123e19;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.status-subtext {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1.3;
}

.panel-footer-dark {
    background-color: #123e19;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    padding: 6px;
    margin-top: auto;
}

/* Responsive scaling behavior fixes */
@media (max-width: 768px) {
    .attendance-body { flex-direction: column; }
    .metric-box { padding: 12px; }
}

/* Base Card Styling */
.dash-card {
    background-color: #ffffff;
    border: 1.5px solid #dce1e7;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Specific Header Colors based on Image */
.bg-diet { background-color: #0b004f; }
.bg-teacher { background-color: #0d4fa1; }
.bg-late { background-color: #ba2d18; }
.bg-admin { background-color: #002347; }

.card-header-custom {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    letter-spacing: 0.5px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-body-custom {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
}

/* COLUMN 1: Diet Details */
.diet-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c2d42;
    line-height: 1.6;
}
.diet-icon-top {
    font-size: 2.2rem;
    color: #0b004f;
    margin-bottom: 15px;
}
.diet-icon-bottom {
    font-size: 2.5rem;
    color: #df7a15;
    margin-top: 15px;
}

/* COLUMN 2: Teacher Presentation */
.teacher-img {
    width: 140px;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #e9ecef;
}
.teacher-name {
    font-size: 1.1rem;
    font-weight: 900;
    color: #0d4fa1;
}
.teacher-dept {
    font-size: 0.95rem;
    font-weight: 700;
    color: #555555;
}

/* Slider Layout & Dot Indicators Customization */
.custom-carousel-indicators {
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 12px;
    justify-content: center;
    gap: 6px;
}

.custom-carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e1; /* Muted gray for inactive dots */
    opacity: 1;
    transition: all 0.3s ease;
}

.custom-carousel-indicators .active {
    background-color: #0d4fa1; /* Matches your active bg-teacher color profile */
    width: 20px; /* Stretches the active dot into a pill shape */
    border-radius: 4px;
}

/* Ensures layout item structure shifts correctly for slides */
.carousel-item .card-body-custom {
    min-height: 250px;
}


/* Birthday Slider Dots Customization */
.custom-bday-indicators {
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 10px;
    justify-content: center;
    gap: 6px;
    z-index: 5;
}

.custom-bday-indicators [data-bs-target] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background-color: #fbcfe8; /* Light pink background for inactive dots */
    opacity: 1;
    transition: all 0.3s ease;
}

.custom-bday-indicators .active {
    background-color: #d1287b; /* Matches your active birthday pink text color profile */
    width: 18px; /* Stretches active dot slightly */
    border-radius: 4px;
}

/* Student Slider Navigation Customization */
.custom-student-indicators {
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 12px;
    justify-content: center;
    gap: 6px;
    z-index: 5;
}

.custom-student-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e1; /* Muted gray for inactive states */
    opacity: 1;
    transition: all 0.3s ease;
}

.custom-student-indicators .active {
    background-color: #1a421b; /* Perfectly matches your active bg-green-header layout color */
    width: 20px; /* Expands to match active indicator design language */
    border-radius: 4px;
}

/* Enforces height standard normalization over transition events */
.carousel-item .student-body {
    min-height: 220px;
}

/* Vertical Marquee Layout Adjustments */
.marquee-wrapper {
    overflow: hidden; /* Hides members that are outside the box viewport */
    position: relative;
    flex-grow: 1;
    height: 270px; /* Lock this height to align evenly with the other column items */
    padding: 0 15px;
}

.marquee-content {
    display: flex;
    flex-direction: column;
    animation: scrollUpUp 12s linear infinite; /* Adjust 12s to make it slower or faster */
}

/* Pauses the scrolling automatically when a user hovers over a name */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

.admin-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
    height: 75px; /* Fixed item height calculation anchor point */
    box-sizing: border-box;
}

/* The Keyframe Animation Logic */
@keyframes scrollUpUp {
    0% {
        transform: translateY(0);
    }
    100% {
        /* Moves up by exactly the total height of the original 4 elements (4 * 75px = 300px) */
        transform: translateY(-300px);
    }
}

/* COLUMN 3: Mini Split Cards */
.split-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}
.split-card {
    background-color: #ffffff;
    border: 1.5px solid #dce1e7;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.metric-big-num {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
}
.text-late-num { color: #ba2d18; }
.text-attn-num { color: #1c6b32; }

.metric-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #444444;
    margin-top: 2px;
}
.attendance-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c6b32;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* COLUMN 4: Admin Team List style */
.admin-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.admin-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
}
.admin-item:last-child {
    border-bottom: none;
}
.admin-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    background-color: #e9ecef;
    border: 1px solid #cbd5e1;
}
.admin-info {
    text-align: left;
}
.admin-name {
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
}
.admin-role {
    font-size: 0.85rem;
    color: #555555;
    font-weight: 500;
    margin: 0;
}

/* Clean row sizing logic override */
.row-equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* Common Card Wrappers */
.dash-card {
    background-color: #ffffff;
    border: 1.5px solid #dce1e7;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Card Headers */
.bg-purple-header { background-color: #210c5e; }
.bg-green-header { background-color: #1a421b; }

.card-header-custom {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    letter-spacing: 0.5px;
}

/* --- COLUMN 1: EVENT HIGHLIGHTS GRID --- */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 8px;
    padding: 12px;
    height: 49% !important;
    flex-grow: 1;
}
.left-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}
.grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    background-color: #e9ecef;
    min-height: 95px;
}
.center-img {
    height: 100%;
    min-height: 200px;
}

/* --- COLUMN 2: STUDENT OF THE DAY --- */
.student-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}
.student-img {
    width: 140px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #e9ecef;
    margin-bottom: 12px;
}
.student-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #143266;
    text-transform: uppercase;
    text-align: center;
}

/* --- COLUMN 3: RIGHT PANEL STACK --- */
.right-stack-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.event-list {
    padding: 12px 15px 12px 30px;
    margin: 0;
    font-weight: 700;
    color: #333333;
    font-size: 0.95rem;
}
.event-list li {
    margin-bottom: 6px;
}
.event-list li::marker {
    color: #7d26cd;
}

/* Birthday Segment Layout */
.birthday-card {
    background-color: #ffffff;
    border: 1.5px solid #dce1e7;
    border-radius: 12px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    flex-grow: 1;
}
.birthday-title {
    color: #d1287b;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.birthday-layout {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.bday-img {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #e9ecef;
    border: 1px solid #cbd5e1;
}
.bday-info {
    text-align: center;
    margin-top: 8px;
}
.bday-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: #d1287b;
    margin: 0;
}
.bday-class {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555555;
    margin: 0;
}
.bday-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ad1d1d;
    margin: 0;
}
.balloon-icon {
    font-size: 1.8rem;
}
.balloon-left { color: #d63636; }
.balloon-blue { color: #3482c4; }
.balloon-right { color: #50ad34; }

/* Layout equal heights fix wrapper */
.row-equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* Common Card Styling */
.notice-card {
    background-color: #ffffff;
    border: 1.5px solid #dce1e7;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Specific Section Header Colors */
.bg-green-header { background-color: #1a421b; }
.bg-red-header { background-color: #b01e1e; }

.card-header-custom {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 10px;
    letter-spacing: 0.5px;
}

.card-body-custom {
    padding: 15px;
    display: flex;
    align-items: center;
    flex-grow: 1;
}

/* --- PANEL 1: ANNOUNCEMENTS --- */
.announcement-card {
    border: 1.5px solid #210c5e; /* Matching purple border frame */
}
.announcement-title {
    color: #210c5e;
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}
.announcement-icon {
    font-size: 3.5rem;
    color: #551a8b;
    transform: rotate(-15deg);
    margin-right: 20px;
}
.announcement-list {
    margin: 0;
    padding-left: 15px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #333333;
    line-height: 1.4;
}
.announcement-list li {
    margin-bottom: 6px;
}
.announcement-list li:last-child {
    margin-bottom: 0;
}

/* --- PANEL 2: SAFETY INDICATOR --- */
.safety-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
}
.safety-shield-wrapper {
    position: relative;
    color: #1a421b;
    font-size: 4rem;
    line-height: 1;
}
.safety-shield-wrapper .check-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.6rem;
}
.safety-text-box {
    text-align: center;
}
.safety-status {
    font-size: 1.2rem;
    font-weight: 900;
    color: #1a421b;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.safety-subtext {
    font-size: 0.88rem;
    font-weight: 700;
    color: #444444;
    line-height: 1.3;
    margin: 0;
}

/* --- PANEL 3: EMERGENCY CONTACTS --- */
.contacts-body {
    display: flex;
    align-items: center;
    padding: 15px;
    width: 100%;
}
.phone-icon {
    font-size: 2.8rem;
    color: #b01e1e;
    margin-right: 20px;
    transform: scaleX(-1); /* Flips phone icon horizontally */
}
.contacts-table {
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #333333;
}
.contacts-table td {
    padding: 3px 0;
    vertical-align: middle;
}
.contacts-table td:nth-child(2) {
    width: 20px;
    text-align: center;
}
.contacts-table td:nth-child(3) {
    font-weight: 900;
    color: #000000;
}

/* Force row components to match heights correctly */
.row-equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}