/* tamayuzCore - Simple Attendance System */

/* ========================================
   HIDE UNNECESSARY FIELDS IN ATTENDANCE CREATION
   ======================================== */

/* Hide advanced settings - gradebook integration, skills, etc. */
#id_qualify,
#id_qualify_options,
#options_field,
input[name="attendance_qualify_gradebook"],
input[name="attendance_weight"],
input[name="attendance_qualify_title"],
select[name="category_id"],
.advanced_params,
.advanced_options {
    display: none !important;
}

/* Hide skills section */
#skills_section,
#skills-wrapper,
.skill_field,
.form-group:has(select[name*="skill"]) {
    display: none !important;
}

/* Hide group fields in attendance calendar and sheet */
select[name="groups"],
select[name="group_id"],
.form-group:has(select[name="groups"]),
.form-group:has(select[name="group_id"]),
div:has(> select[name="groups"]),
div:has(> select[name="group_id"]) {
    display: none !important;
}

/* Hide the entire form row containing groups */
form[name="attendance_calendar_add"] .form-group:has(select[name="groups"]),
form[name="filter"] .form-group:has(select[name="group_id"]),
form[name="filter"] select[name="group_id"],
form[name="filter"] .col-md-2:has(+ .col-md-10 select[name="group_id"]),
form[name="filter"] .col-md-10:has(select[name="group_id"]) {
    display: none !important;
}

/* ========================================
   SIMPLIFY ATTENDANCE CREATION FORM
   ======================================== */

/* Clean form layout */
form[name="attendance_add"],
form[name="attendance_edit"] {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    max-width: 800px;
}

/* Better input styling */
form[name="attendance_add"] input[type="text"],
form[name="attendance_edit"] input[type="text"] {
    font-size: 16px;
    padding: 12px 15px;
    border-radius: 6px;
    border: 2px solid #e1e8ed;
    transition: border-color 0.2s ease;
}

form[name="attendance_add"] input[type="text"]:focus,
form[name="attendance_edit"] input[type="text"]:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Clean button styling */
form[name="attendance_add"] button[type="submit"],
form[name="attendance_edit"] button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

form[name="attendance_add"] button[type="submit"]:hover,
form[name="attendance_edit"] button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* ========================================
   SIMPLIFY ATTENDANCE SHEET (TAKING ATTENDANCE)
   ======================================== */

/* Simplify filter form */
form[name="filter"] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e1e8ed;
}

form[name="filter"] > fieldset > .col-md-2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding-top: 8px !important;
}

form[name="filter"] label {
    color: #0f172a !important;
    font-weight: 600 !important;
}

form[name="filter"] select,
form[name="filter"] input[type="text"],
form[name="filter"] input[type="date"] {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

form[name="filter"] select:focus,
form[name="filter"] input[type="text"]:focus,
form[name="filter"] input[type="date"]:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

form[name="filter"] .bootstrap-select .btn {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

form[name="filter"] .bootstrap-select .filter-option-inner-inner {
    color: inherit !important;
    font-weight: 600 !important;
}

form[name="filter"] .bootstrap-select .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid #e4e4ef !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12) !important;
}

form[name="filter"] .bootstrap-select .dropdown-menu li a {
    color: #0f172a !important;
    font-weight: 500 !important;
}

form[name="filter"] .bootstrap-select .dropdown-menu li a span.text {
    color: inherit !important;
}

form[name="filter"] .bootstrap-select .bs-searchbox input {
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
}

.attendance-sheet-content fieldset .col-md-2 {
    color: #0f172a !important;
    font-weight: 600 !important;
}

.attendance-sheet-content fieldset .bootstrap-select .btn,
.attendance-sheet-content fieldset .bootstrap-select .dropdown-menu li a span.text {
    color: #111827 !important;
}

/* Clean table styling */
.attendance-sheet-content,
.attendance-users-table table {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.attendance-users-table table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.attendance-users-table table thead th {
    color: white !important;
    font-weight: 600 !important;
    padding: 15px !important;
    text-align: left !important;
}

.attendance-users-table table tbody tr {
    transition: background-color 0.2s ease !important;
}

.attendance-users-table table tbody tr:hover {
    background-color: #f8f9fa !important;
}

.attendance-users-table table tbody td {
    padding: 12px !important;
    vertical-align: middle !important;
}

/* Style checkboxes better */
.attendance-users-table input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
}

/* Clean photo display */
.attendance-users-table img {
    border-radius: 50%;
    border: 2px solid #e1e8ed;
}

/* ========================================
   SIMPLIFY ATTENDANCE LIST
   ======================================== */

/* Clean attendance list table */
.data_table {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data_table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.data_table thead th {
    color: white !important;
    font-weight: 600 !important;
    padding: 15px !important;
}

.data_table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.data_table tbody tr:hover {
    background-color: #f8f9fa;
}

.data_table tbody td {
    padding: 15px;
}

/* Clean action buttons */
.data_table a.btn,
.data_table button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin: 2px;
    transition: all 0.2s ease;
}

/* ========================================
   HIDE UNNECESSARY COLUMNS AND FEATURES
   ======================================== */

/* Hide QR code features if not needed */
.qrcode-container,
a[href*="qrcode"],
button[onclick*="qrcode"] {
    display: none !important;
}

/* Hide export options - keep only essential ones */
.attendance-sheet-content .export-options {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

/* Hide advanced filters */
.advanced-filter-options {
    display: none !important;
}

/* ========================================
   SIMPLIFY CALENDAR/DATE SELECTION
   ======================================== */

/* Clean calendar display */
.attendance-calendar {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.attendance-calendar-item {
    padding: 12px;
    margin: 8px 0;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #667eea;
    transition: all 0.2s ease;
}

.attendance-calendar-item:hover {
    background: #f0f3ff;
    transform: translateX(4px);
}

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

@media (max-width: 768px) {
    form[name="attendance_add"],
    form[name="attendance_edit"] {
        padding: 20px;
    }
    
    .attendance-sheet-content > div {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    
    .attendance-users-table {
        overflow-x: auto;
    }
}

/* ========================================
   CLEAN HEADERS AND TITLES
   ======================================== */

.page-header h2,
.page-header h3 {
    color: #333;
    font-weight: 700;
}

.page-header .label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
}

/* ========================================
   SIMPLIFY ATTENDANCE REPORTS
   ======================================== */

/* Clean report layout */
.attendance-report {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.attendance-report .well {
    background: #f8f9fa;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
}

/* Clean statistics display */
.attendance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.attendance-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.attendance-stat-card h3 {
    font-size: 32px;
    margin: 0;
    font-weight: 700;
}

.attendance-stat-card p {
    margin: 8px 0 0;
    font-size: 14px;
    opacity: 0.9;
}