:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent: #3b82f6;
    --border: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent: #60a5fa;
    --border: #334155;
    --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

#content {
    scrollbar-gutter: stable;
}

.app-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.app-footer a { color: inherit; }

.app-footer-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.list-scroll {
    max-height: calc(100vh - 260px);
    overflow-x: auto;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.card-scroll {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 6px;
}

@media print {
    .list-scroll {
        max-height: none;
        overflow: visible;
    }
    .card-scroll {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.border-default { border-color: var(--border) !important; }

.dark .bg-white { background-color: var(--bg-secondary) !important; }
.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.10) !important; }
.dark .bg-white\/20 { background-color: rgba(255, 255, 255, 0.14) !important; }
.dark .bg-white\/30 { background-color: rgba(255, 255, 255, 0.18) !important; }
.dark .bg-slate-50,
.dark .bg-slate-100 { background-color: rgba(15, 23, 42, 0.55) !important; }
.dark .bg-blue-50 { background-color: rgba(96, 165, 250, 0.12) !important; }
.dark .bg-blue-100 { background-color: rgba(96, 165, 250, 0.18) !important; }
.dark .bg-red-50 { background-color: rgba(248, 113, 113, 0.10) !important; }
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.10) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.14) !important; }
.dark .bg-amber-50 { background-color: rgba(251, 191, 36, 0.10) !important; }
.dark .bg-amber-100 { background-color: rgba(251, 191, 36, 0.14) !important; }

.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700 { color: var(--text-primary) !important; }
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 { color: var(--text-secondary) !important; }
.dark .text-slate-200 { color: rgba(148, 163, 184, 0.35) !important; }

.dark .border-slate-200,
.dark .border-slate-100 { border-color: var(--border) !important; }
.dark .border-blue-200 { border-color: rgba(96, 165, 250, 0.35) !important; }

.dark .hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, 0.08) !important; }
.dark .hover\:bg-blue-50:hover { background-color: rgba(96, 165, 250, 0.14) !important; }
.dark .hover\:bg-red-50:hover { background-color: rgba(248, 113, 113, 0.12) !important; }
.dark .hover\:bg-slate-100:hover { background-color: rgba(148, 163, 184, 0.12) !important; }
.dark .hover\:bg-white:hover { background-color: rgba(15, 23, 42, 0.40) !important; }
.dark .hover\:border-blue-200:hover { border-color: rgba(96, 165, 250, 0.45) !important; }

.dark .shadow-slate-200\/50 { --tw-shadow-color: rgb(0 0 0 / 0.55) !important; }
.dark .shadow-blue-100,
.dark .shadow-blue-50,
.dark .shadow-blue-200,
.dark .shadow-green-100,
.dark .shadow-green-200,
.dark .shadow-slate-100 { --tw-shadow-color: rgb(0 0 0 / 0.45) !important; }
.dark .hover\:shadow-blue-50:hover,
.dark .hover\:shadow-blue-100:hover,
.dark .hover\:shadow-blue-200:hover { --tw-shadow-color: rgb(0 0 0 / 0.55) !important; }

.dark .from-slate-50 {
    --tw-gradient-from: rgba(15, 23, 42, 0.55) !important;
    --tw-gradient-to: rgba(15, 23, 42, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.dark .to-white { --tw-gradient-to: rgba(30, 41, 59, 0.95) !important; }
.dark .ring-blue-50 { --tw-ring-color: rgba(96, 165, 250, 0.22) !important; }
.dark .ring-blue-50\/50 { --tw-ring-color: rgba(96, 165, 250, 0.18) !important; }

.dark input,
.dark select,
.dark textarea {
    background-color: rgba(148, 163, 184, 0.06) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

html.dark select option,
html.dark select optgroup {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

html.dark select option:checked {
    background-color: rgba(96, 165, 250, 0.22);
}
.dark input::placeholder,
.dark textarea::placeholder { color: rgba(148, 163, 184, 0.8) !important; }

.dark .fc { color: var(--text-primary); }
.dark .fc .fc-scrollgrid,
.dark .fc .fc-scrollgrid-section table,
.dark .fc .fc-col-header-cell,
.dark .fc .fc-daygrid-day-frame,
.dark .fc .fc-timegrid-col-frame { border-color: var(--border) !important; }
.dark .fc .fc-col-header-cell { background: rgba(148, 163, 184, 0.06) !important; }
.dark .fc .fc-toolbar-title { color: var(--text-primary) !important; }
.dark .fc .fc-button { color: var(--text-primary) !important; }
.dark .fc .fc-button-primary { background-color: #2563eb !important; border-color: #1d4ed8 !important; }
.dark .fc .fc-button-primary:hover { background-color: #1d4ed8 !important; }
.dark .fc .fc-daygrid-day-number { color: var(--text-secondary) !important; }
.dark .fc .fc-timegrid-axis-cushion,
.dark .fc .fc-timegrid-slot-label-cushion { color: var(--text-secondary) !important; }

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
}

.draggable-duty {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 12px;
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

.draggable-duty:hover {
    background-color: rgba(148, 163, 184, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.10);
}

.draggable-duty:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.10);
}

.draggable-duty .duty-swatch {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}

html.dark .draggable-duty .duty-swatch {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85);
}

.draggable-duty .duty-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    flex: 1 1 auto;
    word-break: break-word;
}

.draggable-duty .duty-grip {
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: -2px;
    line-height: 1;
    flex: 0 0 auto;
    opacity: 0.9;
    user-select: none;
}

html.dark .card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .active-nav {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: #bfdbfe !important;
}
.dark .active-nav i { color: #bfdbfe !important; }

/* Calendar Day Header Copy Button */
.fc-col-header-cell .group:hover button {
    opacity: 1;
}

.fc-col-header-cell button {
    transition: all 0.2s ease-in-out;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Sidebar transitions */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

@keyframes dashCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-card {
    opacity: 0;
    animation: dashCardIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
    will-change: transform;
}

.dash-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 18px 28px -18px rgb(15 23 42 / 0.35);
}

.dash-card:active {
    transform: translateY(-2px) scale(1.005);
}

@media (prefers-reduced-motion: reduce) {
    .dash-card {
        opacity: 1;
        animation: none;
        transition: none;
    }
}

/* Toast styling override */
.toast-root {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* Landing Page Animations */
@keyframes draw {
    0% { stroke-dashoffset: 1000; fill: transparent; }
    70% { stroke-dashoffset: 0; fill: transparent; }
    100% { stroke-dashoffset: 0; fill: currentColor; }
}

.animate-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 3s ease-in-out forwards;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.bg-dot-pattern {
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
}

.dark .bg-dot-pattern {
    background-image: radial-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px);
}

/* --- Printing Support --- */
@media print {
    aside, button, select, input, .bg-blue-600.rounded-lg, .mt-8.card, .card.bg-gradient-to-r, .no-print {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        background: white !important;
    }
    body { background: white !important; }
}