/* ============================================================================
   Attendance Component
   Styles for attendance management, marking, and reports
   ============================================================================ */

/* ============================================================================
   Attendance Header
   ============================================================================ */
.attendance-header {
    background: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%) !important;
    border-radius: 0 !important;
    padding: 2.5rem !important;
    color: white !important;
    margin-bottom: 0 !important;
}

.attendance-header h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.5rem 0 !important;
    display: flex !important;
    align-items: center;
    gap: 1rem;
    color: white !important;
}

/* Bulk Attendance Header (green variant) */
.bulk-attendance-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border-radius: 0;
    padding: 2.5rem;
    color: white;
    margin-bottom: 0;
}

.bulk-attendance-header .header-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

/* Report Header */
.report-header {
    background: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%);
    color: white;
    padding: 2rem;
    border-radius: 0;
    margin-bottom: 0;
}

.report-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

/* Parent Attendance Header */
.parent-attendance-header {
    background: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%);
    border-radius: 0;
    padding: 2.5rem;
    color: white;
    margin-bottom: 0;
}

.parent-attendance-header h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.parent-attendance-header p {
    opacity: 0.9;
    font-size: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   Date Picker Bar
   ============================================================================ */
.date-picker-bar {
    background: white;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #f3f4f6;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.date-navigation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-date-nav {
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-date-nav:hover {
    background: #e5e7eb;
    border-color: #00b377;
    color: #00b377;
    transform: translateY(-2px);
    text-decoration: none;
}

.date-display {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    min-width: 150px;
    text-align: center;
}

.date-picker-input {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.date-picker-input:focus {
    border-color: #00b377;
    outline: none;
}

/* Date Range Selector */
.date-range-selector {
    background: white;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-range-selector label {
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.date-range-selector input[type="date"] {
    padding: 0.5rem 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
}

.date-range-selector input[type="date"]:focus {
    border-color: #00b377;
    outline: none;
}

/* ============================================================================
   Attendance Action Buttons
   ============================================================================ */
.attendance-action-buttons {
    display: flex;
    gap: 0.75rem;
    position: relative;
    z-index: 15;
}

.btn-save-attendance {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.btn-save-attendance:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
}

.btn-view-absent {
    background: white;
    color: #ef4444;
    border: 2px solid #ef4444;
    border-radius: 10px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.btn-view-absent:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-generate {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
}

.btn-export {
    background: white;
    color: #00b377;
    border: 2px solid #00b377;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-export:hover {
    background: #00b377;
    color: white;
    text-decoration: none;
}

.btn-load {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
}

.btn-load:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    color: white !important;
}

/* ============================================================================
   Attendance Statistics
   ============================================================================ */
/* Scoped to attendance pages only */
.attendance-index .stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: #f9fafb;
    border-bottom: 2px solid #f3f4f6;
}

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: #f9fafb;
}

.stat-box {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-box.primary {
    border-color: #00b377;
}

.stat-box.primary .stat-value {
    color: #00b377;
}

.stat-box.success,
.stat-box.present {
    border-color: #10b981;
}

.stat-box.success .stat-value,
.stat-box.present .stat-value {
    color: #10b981;
}

.stat-box.danger,
.stat-box.absent {
    border-color: #ef4444;
}

.stat-box.danger .stat-value,
.stat-box.absent .stat-value {
    color: #ef4444;
}

.stat-box.info,
.stat-box.excused {
    border-color: #3b82f6;
}

.stat-box.info .stat-value,
.stat-box.excused .stat-value {
    color: #3b82f6;
}

.stat-box.warning,
.stat-box.rate,
.stat-box.late {
    border-color: #f59e0b;
}

.stat-box.warning .stat-value,
.stat-box.rate .stat-value,
.stat-box.late .stat-value {
    color: #f59e0b;
}

.stat-box.total {
    border-color: #00b377;
}

.stat-box.total .stat-value {
    color: #00b377;
}

/* ============================================================================
   Search Bar
   ============================================================================ */
.search-bar {
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 2px solid #f3f4f6;
}

.search-input {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236b7280" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #00b377;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 179, 119, 0.15);
}

/* ============================================================================
   Attendance Table
   ============================================================================ */
.attendance-table-card {
    background: white;
    padding: 2rem;
}

.attendance-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    display: table !important;
    table-layout: auto !important;
}

.attendance-table thead {
    display: table-header-group !important;
}

.attendance-table tbody {
    display: table-row-group !important;
}

.attendance-table thead tr,
.attendance-table tbody tr {
    display: table-row !important;
}

.attendance-table th,
.attendance-table td {
    display: table-cell !important;
}

.attendance-table thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
}

.attendance-table thead th:first-child {
    text-align: center;
    width: 60px;
}

.attendance-table thead th:nth-child(3) {
    text-align: center;
}

.attendance-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    display: table-row !important;
}

/* Ensure student-row class on tr doesn't get flex display */
.attendance-table tbody tr.student-row {
    display: table-row !important;
}

.attendance-table tbody tr:hover {
    background: #f0fdf4;
}

/* Highlight unmarked rows - use .unmarked class added via JS */
.attendance-table tbody tr.unmarked {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
}

.attendance-table tbody tr.unmarked:hover {
    background: #fde68a;
}

.attendance-table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

.student-number {
    text-align: center;
    font-weight: 700;
    color: #6b7280;
}

.student-name {
    font-weight: 600;
    color: #111827;
}

.ic-number {
    color: #6b7280;
    font-size: 0.875rem;
}

/* ============================================================================
   Status Buttons
   ============================================================================ */
.status-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.btn-status {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f3f4f6;
    color: #6b7280;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.btn-status:hover {
    transform: translateY(-2px);
}

.btn-status.active {
    color: white;
}

.btn-status.present {
    border-color: #10b981;
}

.btn-status.present.active {
    background: #10b981;
}

.btn-status.absent {
    border-color: #ef4444;
}

.btn-status.absent.active {
    background: #ef4444;
}

.btn-status.excused {
    border-color: #3b82f6;
}

.btn-status.excused.active {
    background: #3b82f6;
}

.btn-status.late {
    border-color: #f59e0b;
}

.btn-status.late.active {
    background: #f59e0b;
}

/* Status Select Dropdown */
.status-select {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
}

.status-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    outline: none;
}

/* ============================================================================
   Remarks Input
   ============================================================================ */
.remarks-input {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.remarks-input:focus {
    border-color: #00b377;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 179, 119, 0.1);
}

/* ============================================================================
   Filter Card
   ============================================================================ */
.filter-card {
    background: white;
    padding: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

.filter-card label {
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-card .form-control {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.filter-card .form-control:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    outline: none;
}

/* ============================================================================
   Class Info Header
   ============================================================================ */
.class-info-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    padding: 1.5rem 2rem;
    color: white;
}

.class-info-header h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.class-info-header small {
    opacity: 0.9;
    font-size: 1rem;
}

/* ============================================================================
   Quick Actions Bar
   ============================================================================ */
.quick-actions-bar {
    background: #f9fafb;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-actions-bar strong {
    color: #374151;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-quick {
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.btn-quick-present {
    background: #10b981 !important;
    color: white !important;
}

.btn-quick-present:hover {
    background: #059669 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.btn-quick-absent {
    background: #f59e0b !important;
    color: white !important;
}

.btn-quick-absent:hover {
    background: #d97706 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* ============================================================================
   Table Wrapper
   ============================================================================ */
.table-wrapper {
    padding: 2rem;
    overflow-x: auto;
}

/* ============================================================================
   Action Buttons (Form)
   ============================================================================ */
.attendance-form-actions {
    padding: 2rem;
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
    display: flex;
    gap: 1rem;
}

.btn-save {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    color: white !important;
}

.btn-cancel {
    background: #6b7280 !important;
    color: white !important;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel:hover {
    background: #4b5563 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107, 114, 128, 0.3);
    color: white !important;
}

/* ============================================================================
   Alert Info Custom
   ============================================================================ */
.alert-info-custom {
    background: #eff6ff;
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-info-custom i {
    font-size: 1.5rem;
}

.alert-warning-modern {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-warning-modern i {
    font-size: 2rem;
    color: #d97706;
}

/* ============================================================================
   Charts Section
   ============================================================================ */
.charts-section {
    padding: 2rem;
    background: white;
}

.chart-container {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 2px solid #f3f4f6;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-canvas {
    max-height: 400px;
}

/* ============================================================================
   Student Table Section
   ============================================================================ */
.student-table-section {
    padding: 2rem;
    background: white;
}

.student-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
}

.student-table thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
}

.student-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.student-table tbody tr:hover {
    background: #f0fdf4;
}

.student-table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

/* ============================================================================
   Percentage Badges
   ============================================================================ */
.percentage-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

.percentage-excellent {
    background: #d1fae5;
    color: #065f46;
}

.percentage-good {
    background: #bfdbfe;
    color: #1e40af;
}

.percentage-fair {
    background: #fed7aa;
    color: #92400e;
}

.percentage-poor {
    background: #fecaca;
    color: #991b1b;
}

/* ============================================================================
   Student Card (Parent View)
   ============================================================================ */
.student-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.student-card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    padding: 1.5rem;
    color: white;
}

.student-card-header h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.student-card-header small {
    opacity: 0.9;
    font-size: 0.95rem;
}

/* Parent Action Buttons */
.btn-action-parent {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary-parent {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.btn-primary-parent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    color: white !important;
    text-decoration: none;
}

.btn-secondary-parent {
    background: #6b7280 !important;
    color: white !important;
}

.btn-secondary-parent:hover {
    background: #4b5563 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    color: white !important;
    text-decoration: none;
}

/* ============================================================================
   Attendance Table Section
   ============================================================================ */
.attendance-table-section {
    padding: 2rem;
}

.attendance-table-section h5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Table Modern */
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-modern thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.table-modern tbody tr:hover {
    background: #f9fafb;
}

.table-modern tbody td {
    padding: 1rem;
    vertical-align: middle;
}

/* ============================================================================
   Print Styles
   ============================================================================ */
@media print {
    @page {
        size: auto;
        margin: 10mm;
    }

    .date-range-selector,
    .btn-export,
    .btn-generate {
        display: none !important;
    }

    .report-header,
    .stats-overview,
    .chart-container,
    .student-table-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .chart-container {
        page-break-before: auto;
        page-break-after: auto;
    }

    .student-table-section {
        page-break-before: auto;
    }

    .student-table tbody tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    canvas {
        max-height: 300px !important;
    }

    body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ============================================================================
   View Page Styles
   ============================================================================ */
.view-header {
    background: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%);
    border-radius: 0;
    padding: 2.5rem;
    color: white;
    margin-bottom: 0;
}

.view-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.view-subtitle {
    opacity: 0.9;
    font-size: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.action-bar {
    background: white;
    padding: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-action-bar {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-back {
    background: #6b7280 !important;
    color: white !important;
}

.btn-back:hover {
    background: #4b5563 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    color: white !important;
    text-decoration: none;
}

.btn-edit-action {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.btn-edit-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    color: white !important;
    text-decoration: none;
}

.btn-delete-action {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

.btn-delete-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    color: white !important;
    text-decoration: none;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.info-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 1.5rem;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: #00b377;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.info-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

/* ============================================================================
   Create/Update Form Styles
   ============================================================================ */
.attendance-create-header,
.attendance-update-header {
    background: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%);
    border-radius: 0;
    padding: 2rem;
    color: white;
    margin-bottom: 0;
}

.attendance-create-header h1,
.attendance-update-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.form-card {
    background: white;
    border-radius: 0 0 20px 20px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.form-card label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-card .form-control,
.form-card .form-select {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    transition: all 0.3s ease;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: #00b377;
    box-shadow: 0 0 0 0.2rem rgba(0, 179, 119, 0.15);
}

/* ============================================================================
   Header Subtitle
   NOTE: .empty-state is defined in empty-states.css (single source of truth)
   ============================================================================ */
.header-subtitle {
    opacity: 0.9;
    font-size: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 768px) {
    .date-picker-bar,
    .attendance-action-buttons {
        flex-direction: column;
    }

    .attendance-index .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-table {
        font-size: 0.875rem;
    }

    .status-buttons {
        flex-direction: column;
    }

    .quick-actions-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}