/**
 * Depth Enhancements - Premium UI Polish
 *
 * Based on the "60-Second CSS Trick for Expensive Looking UI" article
 * Key techniques: layered shadows + inset top glow + hover lift
 *
 * To enable: Add this to any page:
 *   <link rel="stylesheet" href="css/depth-enhancements.css">
 *
 * To disable: Remove the link tag or rename this file
 */

/* =============================================================================
   CSS Variables for Depth
   ============================================================================= */
:root {
    /* Light mode depth shadows */
    --depth-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --depth-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --depth-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --depth-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
    --depth-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* Hover transition */
    --depth-transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* =============================================================================
   STUDENT CARDS - Main session/queue cards
   ============================================================================= */
.student-card {
    /* Remove flat border, add depth */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md) !important;
    transition: var(--depth-transition);
}

.student-card:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-lg) !important;
}

/* =============================================================================
   NAVIGATION BUTTONS - Primary and secondary buttons
   ============================================================================= */
.nav-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.nav-btn.primary {
    /* Slightly stronger shadow for primary buttons */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 3px 6px rgba(24, 92, 51, 0.25);
}

.nav-btn:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md) !important;
}

.nav-btn.primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 6px 12px rgba(24, 92, 51, 0.35) !important;
}

/* =============================================================================
   ACTION BUTTONS - Session action buttons
   ============================================================================= */
.action-btn,
.end-session-btn,
.notes-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.action-btn:hover,
.end-session-btn:hover,
.notes-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md);
}

/* =============================================================================
   STAT CARDS - Dashboard statistics
   ============================================================================= */
.stat-card {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md);
}

/* =============================================================================
   MODALS - Dialog boxes
   ============================================================================= */
.modal-content {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-xl) !important;
}

/* =============================================================================
   SIDEBAR / MENU - Setup sidebar items
   ============================================================================= */
.setup-menu-item {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.setup-menu-item:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md);
}

.setup-menu-item.active {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md),
        inset 3px 0 0 #185C33;
}

/* =============================================================================
   TAB BUTTONS - Tab navigation
   ============================================================================= */
.tab-btn {
    box-shadow: none;
    transition: var(--depth-transition);
}

.tab-btn.active {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
}

.tab-btn:hover:not(.active) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        var(--depth-shadow-sm);
}

/* =============================================================================
   QUEUE PANEL / AREAS
   ============================================================================= */
.queue-panel,
.session-main,
.queue-main {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
}

/* =============================================================================
   LOGIN BUTTON
   ============================================================================= */
.login-btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 8px rgba(24, 92, 51, 0.3);
    transition: var(--depth-transition);
}

.login-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 16px rgba(24, 92, 51, 0.4) !important;
}

/* =============================================================================
   SETUP PAGE - Table action buttons (.btn-icon)
   Flat pastel style matching the original system
   ============================================================================= */
.btn-icon {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Edit - light blue */
.btn-icon.edit {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e6fbd !important;
}

.btn-icon.edit:hover {
    background: #bfdbfe !important;
    border-color: #60a5fa !important;
}

/* Delete - light red/pink */
.btn-icon.delete {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #c53030 !important;
}

.btn-icon.delete:hover {
    background: #fecaca !important;
    border-color: #f87171 !important;
}

/* Link buttons (Check In Link, Wait List Link) - standard web link blue */
.btn-icon.btn-link {
    background: #e0ecff !important;
    border-color: #a9c5f3 !important;
    color: #0066cc !important;
}

.btn-icon.btn-link:hover {
    background: #cddcfb !important;
    border-color: #7fa8ea !important;
    color: #004c99 !important;
}

/* Generic action buttons (Centers, Members, Reasons, Visit Types, Purposes, Advisors) - light green */
.btn-icon:not(.edit):not(.delete):not(.btn-link) {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #15803d !important;
}

.btn-icon:not(.edit):not(.delete):not(.btn-link):hover {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
    color: #14532d !important;
}

/* =============================================================================
   SETUP PAGE - Table row hover lift effect
   ============================================================================= */
.data-table tbody tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.data-table tbody tr:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow:
        0 8px 20px rgba(24, 92, 51, 0.2),
        0 4px 10px rgba(24, 92, 51, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

/* =============================================================================
   INPUTS - Form inputs with subtle depth
   ============================================================================= */
.form-group input:focus,
.form-group select:focus {
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(24, 92, 51, 0.15);
}

/* =============================================================================
   DROPDOWN MENUS
   ============================================================================= */
.menu-dropdown,
.dropdown-menu {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-lg) !important;
}

/* =============================================================================
   HEADER - Subtle bottom shadow
   ============================================================================= */
.dashboard-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   CHECKIN PAGE - Kiosk-specific enhancements
   Note: These use body class or specific selectors to avoid conflicts with other pages
   ============================================================================= */

/* Main checkin container - only on checkin page (has .header with .uvu-logo) */
body > .container {
    box-shadow:
        var(--depth-glow),
        0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Selection buttons (Student, Prospective, Parent) */
.selection-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.selection-btn:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md);
}

.selection-btn.selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(30, 86, 49, 0.25);
}

/* Purpose buttons grid */
.purpose-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.purpose-btn:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md) !important;
}

.purpose-btn.selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(30, 86, 49, 0.25);
}

/* Reason buttons */
.reason-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.reason-btn:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md) !important;
}

.reason-btn.selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(30, 86, 49, 0.25);
}

/* Summary buttons (editable selections) */
.summary-btn {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
}

.summary-btn:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md) !important;
}

/* Advisor selection buttons */
.advisor-option {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-sm);
    transition: var(--depth-transition);
}

.advisor-option:hover {
    box-shadow:
        var(--depth-glow),
        var(--depth-shadow-md);
}

.advisor-option.selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(30, 86, 49, 0.25);
}

/* Submit/Check-in button */
.checkin-btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 12px rgba(30, 86, 49, 0.3);
    transition: var(--depth-transition);
}

.checkin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 20px rgba(30, 86, 49, 0.4) !important;
}

/* Form inputs on checkin */
.form-input:focus,
.uvid-input:focus {
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(30, 86, 49, 0.15);
}