/* --- MAIN CONTENT & SHARED COMPONENTS --- */

/* Base Styles */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- SHARED UTILITIES --- */
.custom-scrollbar::-webkit-scrollbar,
.scrollable-body::-webkit-scrollbar,
.scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.scrollable-body::-webkit-scrollbar-thumb,
.scrollable-content::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* --- PREMIUM COMPONENTS --- */
.card-premium {
    background-color: #ffffff;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.btn-standard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.input-premium {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

/* --- DARK MODE OVERRIDES (MAIN) --- */
html.dark body { background-color: var(--bg); color: var(--text); }
html.dark .card-premium { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; }
html.dark .input-premium { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; }

/* ... (Remaining styles will stay in app-bundle.css or be moved gradually) ... */

/* --- SHARED COMPONENTS (Migrated from Modules) --- */

/* Custom Checkbox Styles */
.cb-container {
    --size: 20px;
    display: block;
    position: relative;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
}
.cb-container input {
    position: absolute;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
}
.cb-container svg {
    width: var(--size);
    height: var(--size);
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: all 0.3s ease;
    background: transparent;
    border-radius: 6px;
    border: 2px solid #e2e8f0;
}
.cb-container input:checked ~ svg {
    stroke: #f97316;
    background: #fff7ed;
    border-color: #fdba74;
    stroke-dashoffset: 0;
}
html.dark .cb-container svg { border-color: var(--border); }
html.dark .cb-container input:checked ~ svg { background: rgba(249, 115, 22, 0.1); }

/* Floating Actions Panel removed (managed by Tailwind in views) */

/* Filter components */
.filter-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-right: 8px;
}
.filter-select {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    background-color: #f8fafc;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
}
.filter-select:hover { border-color: #cbd5e1; background-color: #f1f5f9; }
.filter-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
html.dark .filter-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); }

/* Feedback card */
.feedback-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feedback-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ── FullCalendar base overrides ────────────────────────── */
.fc { font-family: inherit; }
.fc .fc-toolbar { padding: 1rem 1.25rem 0.75rem; background: #fff; border-bottom: 1px solid #f1f5f9; border-radius: 1rem 1rem 0 0; flex-wrap: wrap; gap: 0.5rem; }
.fc .fc-toolbar-title { font-size: 1.125rem; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
.fc .fc-button { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; padding: 0.35rem 0.75rem !important; border-radius: 0.6rem !important; box-shadow: none !important; transition: all 0.15s !important; }
.fc .fc-button:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: #111827 !important; border-color: #111827 !important; color: #fff !important; }
.fc .fc-today-button { background: #fff7ed !important; border-color: #fed7aa !important; color: #ea580c !important; }
.fc .fc-today-button:hover { background: #ffedd5 !important; }
.fc .fc-col-header-cell { background: #f8fafc; padding: 0.5rem 0; }
.fc .fc-col-header-cell-cushion { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; padding: 0.4rem 0.5rem; text-decoration: none !important; }
.fc-theme-standard td, .fc-theme-standard th { border-color: #f1f5f9; }
.fc .fc-daygrid-day { transition: background 0.15s; }
.fc .fc-daygrid-day:hover { background: #fafafa; }
.fc .fc-daygrid-day-number { font-size: 0.8rem; font-weight: 700; color: #64748b; padding: 0.4rem 0.6rem; text-decoration: none !important; }
.fc .fc-day-today { background: linear-gradient(135deg, #fff7ed 0%, #fff 100%) !important; }
.fc .fc-day-today .fc-daygrid-day-number { background: #f97316; color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin: 4px 6px; }
.fc .fc-event { border: none !important; border-radius: 0.4rem !important; padding: 0.1rem 0.4rem !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; cursor: pointer !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important; transition: transform 0.1s, box-shadow 0.1s !important; }
.fc .fc-event:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; }
.fc .fc-event-title { font-weight: 700 !important; overflow: hidden; text-overflow: ellipsis; }
.fc .fc-daygrid-more-link { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.fc .fc-timegrid-slot { height: 2.5rem; border-color: #f1f5f9 !important; }
.fc .fc-timegrid-slot-label-cushion { font-size: 0.65rem; font-weight: 700; color: #cbd5e1; letter-spacing: 0.03em; }
.fc .fc-list-day-cushion { background: #f8fafc; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
.fc .fc-list-event:hover td { background: #f8fafc !important; }

/* Dark mode extras for FullCalendar */
.dark .fc .fc-toolbar { background: #1e293b; border-color: #334155; }
.dark .fc .fc-toolbar-title { color: #f1f5f9; }
.dark .fc .fc-button { background: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important; }
.dark .fc-theme-standard td, .dark .fc-theme-standard th { border-color: #334155; }
.dark .fc .fc-col-header-cell { background: #1e293b; }
.dark .fc .fc-daygrid-day-number { color: #94a3b8; }
.dark .fc .fc-day-today { background: linear-gradient(135deg, #431407 0%, #1e293b 100%) !important; }

/* Password visibility toggle */
.password-wrapper {
    position: relative;
    display: block;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
}

.password-toggle:hover {
    color: #64748b;
}

html.dark .password-toggle {
    color: #64748b;
}

html.dark .password-toggle:hover {
    color: #94a3b8;
}