@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- GLOBAL TWEAKS --- */

/* Safe area padding for modern mobile devices (iPhone Home Bar) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Hide scrollbar for horizontal mobile navs but keep functionality */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar (Cute & Thin) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #CBD5E1;
}

/* --- ANIMATIONS FOR MOBILE BOTTOM SHEETS --- */
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-slide-up {
    animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
    animation: fade-in 0.2s ease-out forwards;
}

/* Button Overrides */
/* Make all buttons pill-shaped by default if they aren't already */
button {
    transition: transform 0.1s active;
}
button:active {
    transform: scale(0.95);
}

/* Table Reskinning */
/* Turn boring tables into floating cards */
table {
    border-collapse: separate; 
    border-spacing: 0;
    width: 100%;
}

thead th {
    background-color: #F8FAFC;
    color: #64748B;
    font-weight: 700;
    padding: 16px;
    border-bottom: 2px solid #F1F5F9;
}

tbody tr {
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: #F8FAFC;
}

tbody td {
    padding: 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
}

/* Round the corners of the tables */
.overflow-x-auto.rounded-lg {
    border-radius: 20px;
    border: 1px solid #F1F5F9;
}

/* Input Fields - Make them chunky and friendly */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="time"],
select,
textarea {
    border-radius: 12px !important; /* Force rounding */
    border: 2px solid #E2E8F0 !important;
    padding: 12px 16px !important;
    font-size: 1rem; /* Setting to 1rem prevents iOS Safari from auto-zooming on focus */
    transition: all 0.2s;
}

input:focus, select:focus, textarea:focus {
    border-color: #6C63FF !important; /* Daycare Primary */
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
    outline: none;
}

/* --- PHASE 1: COMMAND CENTER & DASHBOARD --- */

/* 1. The Floating Nav Pills */
.nav-group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8; /* Slate 400 */
    margin-bottom: 4px;
    padding-left: 8px;
    font-weight: 800;
}

.nav-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px; /* Fixed width for uniformity */
    height: 64px;
    border-radius: 16px;
    color: #64748B; /* Slate 500 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.nav-pill:hover {
    background-color: #F1F5F9; /* Slate 100 */
    color: #334155;
    transform: translateY(-2px);
}

.nav-pill.active {
    background-color: #EEF2FF; /* Indigo 50 */
    border-color: #6366F1; /* Indigo 500 */
    color: #4F46E5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.nav-pill .icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.nav-pill .label {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Mobile Bottom Nav active states */
.nav-pill-mobile.active {
    color: #4F46E5;
}
.nav-pill-mobile.active span:first-child {
    transform: translateY(-4px) scale(1.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. LEGO Dashboard Cards */
.lego-card {
    border-radius: 24px;
    border: 2px solid #F1F5F9;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.2s;
    background: white;
    display: flex;
    flex-direction: column;
}

.lego-card:hover {
    border-color: #E2E8F0;
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.lego-header {
    padding: 16px 20px;
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3. Story Stream (Live Feed) */
.timeline-connector {
    position: absolute;
    top: 40px;
    bottom: -16px;
    left: 20px;
    width: 2px;
    background-color: #F1F5F9;
    z-index: 0;
}

.timeline-item:last-child .timeline-connector {
    display: none;
}

/* --- PHASE 2: FORMS, CHIPS & TICKETS --- */

/* 1. Chunky Inputs (The "Fill-in-the-Blank" style) */
.input-chunky {
    background-color: #F8FAFC; /* Slate 50 */
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s;
    -webkit-appearance: none; /* Removes native iOS styling */
}

.input-chunky:focus {
    background-color: #FFFFFF;
    border-color: #6366F1 !important; /* Indigo 500 */
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1) !important;
}

.input-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    margin-bottom: 6px;
    margin-left: 4px;
}

/* 2. Chips (For Teachers/Children lists) */
.chip {
    display: inline-flex;
    align-items: center;
    background-color: #EEF2FF; /* Indigo 50 */
    border: 1px solid #E0E7FF;
    border-radius: 9999px; /* Pill shape */
    padding: 6px 12px;
    margin: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4F46E5;
    transition: all 0.2s;
}

.chip:hover {
    background-color: #E0E7FF;
    transform: scale(1.02);
}

.chip .remove-btn {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    color: #EF4444; /* Red 500 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

.chip .remove-btn:hover {
    background-color: #FEE2E2;
}

/* 3. Ticket Stubs (For Fees) */
.ticket-stub {
    background-image: radial-gradient(circle at 0 50%, transparent 8px, #FFFFFF 9px), 
                      radial-gradient(circle at 100% 50%, transparent 8px, #FFFFFF 9px);
    background-position: 0 0, 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 16px 24px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E8F0; /* Fallback */
    border-left: none;
    border-right: none;
    position: relative;
}

/* 4. Sticky Action Bar (Footer) */
.modal-footer-sticky {
    position: sticky;
    bottom: -32px; /* Pulls it down to edge */
    margin: 32px -32px -32px -32px; /* Expands to edges */
    padding: 20px 32px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: 24px; /* Matches modal roundness */
    border-bottom-right-radius: 24px;
}

/* --- MOBILE RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
    
    /* Touch Target Minimums */
    button, select, .chip, input[type="checkbox"] {
        min-height: 44px;
    }

    /* Unroll the Master Schedule Table into a Vertical Timeline */
    table, thead, tbody, th, td, tr { 
        display: block; 
        width: 100%;
    }
    
    /* Hide the complex Desktop matrix headers entirely on mobile */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* Convert each row into a seamless block */
    tbody tr { 
        border: none;
        margin-bottom: 0;
        padding: 0;
        background-color: transparent !important;
    }
    
    /* Convert table cells into Cards.
       Because the JS sets data-time-slot and data-class-name on the <td>,
       we can inject them using CSS ::before to create the mobile headers! 
    */
    tbody td { 
        border: 1px solid #F1F5F9;
        border-radius: 16px;
        margin-bottom: 12px;
        padding: 16px;
        padding-top: 40px; /* Make room for the injected mobile header */
        position: relative;
        background-color: white;
        box-shadow: 0 2px 10px -2px rgba(0,0,0,0.02);
    }

    /* Target the very first cell in the row (The Time Label) and hide it on mobile 
       since we inject the time into every other cell directly. */
    tbody td:first-child {
        display: none;
    }
    
    /* Inject the Class Name and Time into the card */
    tbody td::before { 
        position: absolute;
        top: 12px;
        left: 16px;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748B;
        /* Pulls data attributes written by the JS renderScheduleGrid() */
        content: attr(data-time-slot) " \2022  " attr(data-class-name); 
    }

    /* Fix borders for the generated unstaffed/staffed cells so they look like cards */
    .schedule-cell {
        border-left-width: 4px !important; 
    }
}