/* DSAT School Brand Guidelines CSS */

/* Import Google Fonts - Montserrat family as per brand guidelines */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Built+Titling:wght@400;700&display=swap');

/* DSAT School Brand Colors */
:root {
    --primary-color: #9967b9;
    --primary-dark: #7c4fa3;
    --primary-light: #b584d1;
    --secondary-color: #fdcc4c;
    --accent-color: #262632;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --text-primary: #262632;
    --text-secondary: #6b7280;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --border-color: #e5e7eb;
    --purple-primary: #9967b9;
    --yellow-accent: #fdcc4c;
    --dark-gray: #262632;
}

/* Dark mode colors */
.dark {
    --primary-color: #b584d1;
    --primary-dark: #9967b9;
    --primary-light: #d1b3e3;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --bg-primary: #1e293b;
    --bg-secondary: #334155;
    --border-color: #475569;
}

/* Base font family - Montserrat as per brand guidelines */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

/* Heading fonts */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

/* Title font for special headings */
.title-font {
    font-family: 'Built Titling', 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Brand colors utility classes */
.bg-brand-purple { background-color: var(--purple-primary); }
.bg-brand-yellow { background-color: var(--yellow-accent); }
.bg-brand-dark { background-color: var(--dark-gray); }
.text-brand-purple { color: var(--purple-primary); }
.text-brand-yellow { color: var(--yellow-accent); }
.text-brand-dark { color: var(--dark-gray); }
.border-brand-purple { border-color: var(--purple-primary); }
.border-brand-yellow { border-color: var(--yellow-accent); }

/* Custom button styles following brand guidelines */
.btn-brand-primary {
    @apply bg-brand-purple hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-brand-secondary {
    @apply bg-brand-yellow hover:bg-yellow-500 text-brand-dark font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-brand-outline {
    @apply border-2 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200;
}

/* Sidebar brand styling */
.sidebar-brand {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--primary-dark) 100%);
}

/* Navigation styling */
.nav-brand {
    background-color: var(--purple-primary);
    border-bottom: 2px solid var(--yellow-accent);
}

/* Fixed navigation bar styling */
.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.dark .fixed-navbar {
    background-color: rgba(31, 41, 55, 0.95);
    border-bottom-color: rgba(75, 85, 99, 0.8);
}

/* Ensure body has proper padding for fixed navbar */
body.has-fixed-navbar {
    padding-top: 64px; /* 16 * 4 = 64px for h-16 navbar */
}

/* Sidebar positioning for fixed navbar */
.sidebar-with-fixed-navbar {
    top: 64px;
    height: calc(100vh - 64px);
}

/* Card styling with brand colors */
.card-brand {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700;
    border-top: 4px solid var(--purple-primary);
}

/* Form styling */
.form-brand input, .form-brand select, .form-brand textarea {
    @apply border-2 border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:outline-none transition-colors duration-200;
    border-color: var(--border-color);
}

.form-brand input:focus, .form-brand select:focus, .form-brand textarea:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(153, 103, 185, 0.1);
}

/* Badge styling */
.badge-brand {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    background-color: var(--purple-primary);
    color: white;
}

.badge-brand-yellow {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    background-color: var(--yellow-accent);
    color: var(--dark-gray);
}

/* Alert styling */
.alert-brand {
    @apply p-4 rounded-lg border-l-4;
    border-left-color: var(--purple-primary);
    background-color: rgba(153, 103, 185, 0.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--purple-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Sidebar Layout Management */
/* Sidebar is always an overlay - no margin adjustments */
/* Removed margin-left styles to keep sidebar as overlay */

/* Default main content positioning for authenticated users */
main {
    transition: margin-left 0.3s ease-in-out;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .sidebar-brand {
        width: 100%;
    }
}

/* Alpine.js cloak - Hide elements before Alpine.js initializes */
[x-cloak] {
    display: none !important;
}

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-in-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Focus styles for accessibility */
.focus-brand:focus {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
}

/* Loading spinner with brand colors */
.spinner-brand {
    border: 3px solid rgba(153, 103, 185, 0.3);
    border-top: 3px solid var(--purple-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tableWithBorder {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
}

.tableWithBorder th,
.tableWithBorder td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
}

/* Dark mode support */
.dark .tableWithBorder {
    border-color: #4b5563;
}

.dark .tableWithBorder th,
.dark .tableWithBorder td {
    border-color: #4b5563;
}

/* Boxicons alignment and sizing fixes */
i[class*='bx'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Size utilities for boxicons - convert Tailwind w-/h- to font-size */
i.w-3, i.h-3 { font-size: 0.75rem !important; } /* 12px */
i.w-4, i.h-4 { font-size: 1rem !important; } /* 16px */
i.w-5, i.h-5 { font-size: 1.25rem !important; } /* 20px */
i.w-6, i.h-6 { font-size: 1.5rem !important; } /* 24px */
i.w-7, i.h-7 { font-size: 1.75rem !important; } /* 28px */
i.w-8, i.h-8 { font-size: 2rem !important; } /* 32px */
i.w-10, i.h-10 { font-size: 2.5rem !important; } /* 40px */
i.w-12, i.h-12 { font-size: 3rem !important; } /* 48px */
i.w-16, i.h-16 { font-size: 4rem !important; } /* 64px */
i.w-20, i.h-20 { font-size: 5rem !important; } /* 80px */
i.w-24, i.h-24 { font-size: 6rem !important; } /* 96px */

/* Responsive sizes for boxicons */
@media (min-width: 640px) {
    i.sm\:w-4, i.sm\:h-4 { font-size: 1rem !important; }
    i.sm\:w-5, i.sm\:h-5 { font-size: 1.25rem !important; }
    i.sm\:w-6, i.sm\:h-6 { font-size: 1.5rem !important; }
    i.sm\:w-7, i.sm\:h-7 { font-size: 1.75rem !important; }
    i.sm\:w-8, i.sm\:h-8 { font-size: 2rem !important; }
    i.sm\:w-10, i.sm\:h-10 { font-size: 2.5rem !important; }
    i.sm\:w-12, i.sm\:h-12 { font-size: 3rem !important; }
    i.sm\:w-16, i.sm\:h-16 { font-size: 4rem !important; }
    i.sm\:w-20, i.sm\:h-20 { font-size: 5rem !important; }
}

@media (min-width: 1024px) {
    i.lg\:w-12, i.lg\:h-12 { font-size: 3rem !important; }
}