/* ================================================================
   EK SE SRESHTHA - REUSABLE COMPONENT STYLES
   ----------------------------------------------------------------
   Shared component classes used across all pages:
   Buttons, form fields, cards, tables, badges, modals, tabs.
   ================================================================ */

/* ================================================================
   1. BUTTONS
   ================================================================ */

/* Base button - all button variants extend from this */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Primary action button - deep brand blue */
.btn-primary {
    background-color: var(--brand-blue);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--brand-blue-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secondary button - outlined */
.btn-secondary {
    background-color: var(--white);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.btn-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
}

/* Danger button for destructive actions */
.btn-danger {
    background-color: var(--brand-red);
    color: var(--white);
}

.btn-danger:hover {
    background-color: var(--brand-red-dark);
}

/* Success button */
.btn-success {
    background-color: var(--success);
    color: var(--white);
}

.btn-success:hover {
    filter: brightness(0.9);
}

/* Ghost/text button - no background */
.btn-ghost {
    background-color: transparent;
    color: var(--gray-600);
}

.btn-ghost:hover {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* Icon-only button */
.btn-icon {
    padding: var(--space-2);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

/* Size variants */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
}

/* ================================================================
   2. FORM FIELDS
   ================================================================ */

/* Form group wraps label + input */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

/* Field label */
.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);
}

/* Required indicator */
.form-label .required {
    color: var(--brand-red);
    margin-left: var(--space-1);
}

/* Text input, textarea, select share the same base look */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--gray-800);
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--gray-400);
}

.form-textarea {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
}

/* Select field with custom arrow */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: var(--space-10);
}

/* Field error state */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--danger);
}

/* Error message text under field */
.form-error {
    font-size: var(--text-xs);
    color: var(--danger);
    margin-top: var(--space-1);
}

/* Helper hint text */
.form-hint {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

/* Grid layout for form fields */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

/* Form actions row (submit / cancel) */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

/* ================================================================
   3. CARDS
   ================================================================ */

/* Base content card */
.card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(30, 58, 138, 0.06), 0 4px 14px rgba(30, 58, 138, 0.05);
    border: 1px solid rgba(30, 58, 138, 0.1);
    overflow: hidden;
}

/* Card header with title - very light blue wash ties the cards
   to the brand palette without darkening the interface. */
.card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid rgba(30, 58, 138, 0.1);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.card-subtitle {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* ================================================================
   4. TABLES
   ================================================================ */

/* Table wrapper handles horizontal scroll on mobile */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.table {
    width: 100%;
    background-color: var(--white);
}

.table thead {
    /* Brand blue header band, matching the reference attendance UI */
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark));
}

.table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    border-bottom: 1px solid var(--brand-blue-dark);
    white-space: nowrap;
}

.table td {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: var(--gray-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Empty table state */
.table-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--gray-400);
}

/* Row actions column - align icons */
.table-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

/* ================================================================
   5. BADGES
   ================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    line-height: 1.4;
}

.badge-success {
    background-color: var(--success-light);
    color: var(--success);
}

.badge-danger {
    background-color: var(--brand-red-light);
    color: var(--brand-red-dark);
}

.badge-warning {
    background-color: var(--warning-light);
    color: var(--warning);
}

.badge-info {
    background-color: var(--info-light);
    color: var(--brand-blue);
}

.badge-neutral {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

/* ================================================================
   6. TOGGLE SWITCH
   ================================================================ */

.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    border-radius: 50%;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-slider {
    background-color: var(--success);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* ================================================================
   7. MODAL
   ================================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform var(--transition-base);
}

.modal-backdrop.active .modal {
    transform: scale(1);
}

.modal-lg {
    max-width: 900px;
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.modal-close {
    padding: var(--space-2);
    color: var(--gray-500);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* When a <form> wraps modal-body + modal-footer, the form becomes
   the flex child of .modal. It must forward the flex layout so the
   body can shrink and scroll. Without this, long forms overflow and
   scrolling breaks inside the popup. */
.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ================================================================
   8. TABS
   ================================================================ */

.tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}

.tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-600);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab:hover {
    color: var(--brand-blue);
}

.tab.active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ================================================================
   9. SEARCH BAR
   ================================================================ */

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
    width: 100%;
}

.search-bar input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    font-size: var(--text-sm);
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.search-bar-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--gray-400);
    pointer-events: none;
}

/* ================================================================
   10. AVATAR / PROFILE IMAGE
   ================================================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: var(--white);
    font-weight: 600;
    font-size: var(--text-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: var(--text-lg);
}

.avatar-xl {
    width: 96px;
    height: 96px;
    font-size: var(--text-2xl);
}

/* ================================================================
   11. TOAST NOTIFICATIONS
   ================================================================ */

.toast-container {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast {
    background-color: var(--white);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--brand-blue);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 280px;
    animation: slideIn var(--transition-base);
    pointer-events: auto;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.danger {
    border-left-color: var(--danger);
}

.toast.warning {
    border-left-color: var(--warning);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================================================
   12. IMAGE UPLOAD FIELD
   ================================================================ */

.image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    background-color: var(--gray-50);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.image-upload:hover {
    border-color: var(--brand-blue);
    background-color: var(--info-light);
}

.image-upload-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--gray-400);
}

.image-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-upload input[type="file"] {
    display: none;
}

.image-upload-label {
    font-size: var(--text-sm);
    color: var(--brand-blue);
    font-weight: 500;
}

.image-upload-hint {
    font-size: var(--text-xs);
    color: var(--gray-500);
}