/* Medical Center Management System — Custom Styles
   Supplements TailwindCSS + DaisyUI
   ============================================================ */

/* ─── CSS Variables ──────────────────────────────────────────── */
:root {
    --sidebar-width: 16rem;
    --topbar-height: 4rem;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
    --shadow-modal: 0 20px 60px rgba(0,0,0,.2);
}

/* ─── Base ───────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.animate-fade-in   { animation: fadeIn 300ms ease both; }
.animate-slide-in  { animation: slideInLeft 300ms ease both; }

/* ─── Card Enhancements ──────────────────────────────────────── */
.card {
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ─── Stat Cards ─────────────────────────────────────────────── */
.stat-card-gradient {
    position: relative;
    overflow: hidden;
}
.stat-card-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.stat-card-gradient::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: 10%;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
}

/* ─── Table Enhancements ─────────────────────────────────────── */
.table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.table-row-link {
    cursor: pointer;
    transition: background var(--transition-fast);
}
.table-row-link:hover { background: rgba(0,0,0,0.02); }

/* ─── Form Controls ──────────────────────────────────────────── */
.input, .select, .textarea {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .select:focus, .textarea:focus {
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}

/* ─── Badge Enhancements ─────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ─── Status Indicators ──────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.status-dot.active  { background: #10b981; animation: pulse-ring 2s infinite; }
.status-dot.inactive { background: #94a3b8; }
.status-dot.warning { background: #f59e0b; }
.status-dot.danger  { background: #ef4444; }

/* ─── Avatar ─────────────────────────────────────────────────── */
.avatar-ring {
    box-shadow: 0 0 0 3px hsl(var(--p)), 0 0 0 5px hsl(var(--b1));
}

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumbs > ul > li + li::before {
    content: '/';
    opacity: 0.4;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-box {
    box-shadow: var(--shadow-modal);
    animation: fadeIn 200ms ease both;
}

/* ─── Print Styles ───────────────────────────────────────────── */
@media print {
    .sidebar, header, .no-print { display: none !important; }
    main { padding: 0 !important; }
    body { background: white !important; }
    .print-break { page-break-after: always; }
    .card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .card-body { padding: 1rem !important; }
    .table-compact th, .table-compact td { padding: 0.5rem 0.75rem; }
}

/* ─── Loading Skeleton ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Toast Notifications ────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 22rem;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.pagination .btn.active {
    background: hsl(var(--p));
    color: hsl(var(--pc));
    border-color: hsl(var(--p));
}

/* ─── Dark Mode Adjustments ──────────────────────────────────── */
[data-theme="dark"] .glass-card {
    background: rgba(15, 23, 42, 0.95);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

/* ─── Light Mode Safety Net ──────────────────────────────────── */
/* Prevent text from being invisible on light backgrounds when
   buttons use dark-only color classes like bg-slate-850 etc.   */
html:not(.dark) button.text-white:not([class*="bg-"]),
html:not(.dark) a.text-white:not([class*="bg-"]) {
    color: #1e293b !important;
}
/* Ensure all form inputs always have readable text in light mode */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    color: #1e293b;
}