/* ============================================================
   HCFM Admin Dashboard - Stylesheet
   ============================================================ */
:root {
    --navy: #0b4db8;
    --navy-light: #1a66d8;
    --gold: #f28c28;
    --gold-rgb: 242, 140, 40;
    --gold-light: #ffab57;
    --cream: #faf7f0;
    --sidebar-w: 260px;
    --white: #ffffff;
    --text: #2c2c2c;
    --text-muted: #6b7080;
    --border: #e0d8c8;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --font: 'Jost', sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --radius: 8px;
    --shadow: 0 2px 16px rgba(11,77,184,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body { font-family: var(--font); color: var(--text); background: #f0f2f7; display:flex; min-height:100vh; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ---- SIDEBAR ---- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--navy);
    color: rgba(255,255,255,0.75);
    display: flex; flex-direction:column;
    position: fixed; top:0; left:0; bottom:0;
    z-index: 200; overflow-y: auto;
    transition: transform 0.3s ease;
}
.sidebar-logo {
    padding: 1.5rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items:center; gap:0.75rem;
}
.sidebar-logo .cross { font-size:1.5rem; color:var(--gold); }
.sidebar-logo strong { font-family:var(--font-display); font-size:1rem; color:var(--white); display:block; line-height:1.2; }
.sidebar-logo small { font-size:0.65rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; }

.sidebar-nav { padding: 1rem 0; flex:1; }
.nav-section-title {
    font-size:0.65rem; text-transform:uppercase; letter-spacing:0.18em;
    color:rgba(255,255,255,0.3); padding:0.8rem 1.2rem 0.3rem;
}
.sidebar-nav a {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.65rem 1.2rem; font-size:0.88rem;
    color:rgba(255,255,255,0.65);
    transition:all 0.2s; border-left:3px solid transparent;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    background:rgba(var(--gold-rgb),0.1); color:var(--white);
    border-left-color:var(--gold);
}
.sidebar-nav a i { width:18px; text-align:center; font-size:0.95rem; }
.sidebar-footer {
    padding: 1rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size:0.82rem; color:rgba(255,255,255,0.4);
}
.sidebar-footer a { color:var(--gold); }

/* ---- MAIN CONTENT ---- */
.main-content { margin-left: var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar {
    background: var(--white);
    padding: 0 1.5rem;
    height: 64px;
    display: flex; align-items:center; justify-content:space-between;
    box-shadow: var(--shadow);
    position: sticky; top:0; z-index:100;
}
.topbar-title { font-family:var(--font-display); font-size:1.3rem; color:var(--navy); font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-right a { font-size:0.85rem; color:var(--text-muted); display:flex; align-items:center; gap:0.4rem; }
.topbar-right a:hover { color:var(--navy); }
.admin-badge {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.35rem 0.85rem;
    background:var(--cream); border-radius:30px;
    font-size:0.82rem; font-weight:600; color:var(--navy);
}
.admin-badge i { color:var(--gold); }

.page-content { padding: 2rem 1.5rem; flex:1; max-width:1400px; width:100%; }

/* ---- STAT CARDS ---- */
.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:2rem; }
.stat-card {
    background:var(--white); border-radius:var(--radius); padding:1.5rem;
    box-shadow:var(--shadow); display:flex; align-items:center; gap:1rem;
    border-left:4px solid var(--gold);
    transition:transform 0.2s;
}
.stat-card:hover { transform:translateY(-3px); }
.stat-card .icon {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0;
}
.stat-card .num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--navy); line-height:1; }
.stat-card .label { font-size:0.8rem; color:var(--text-muted); margin-top:0.2rem; }
.icon-gold { background:rgba(var(--gold-rgb),0.12); color:var(--gold); }
.icon-blue { background:rgba(13,27,62,0.08); color:var(--navy); }
.icon-green { background:rgba(25,135,84,0.1); color:var(--success); }
.icon-red { background:rgba(220,53,69,0.1); color:var(--danger); }

/* ---- CARDS ---- */
.card {
    background:var(--white); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:1.5rem; overflow:hidden;
}
.card-header {
    padding:1rem 1.5rem;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    background:var(--cream);
}
.card-header h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--navy); }
.card-body { padding:1.5rem; }

/* ---- TABLE ---- */
table { width:100%; border-collapse:collapse; font-size:0.88rem; }
th { text-align:left; padding:0.75rem 1rem; background:var(--cream); color:var(--navy); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; border-bottom:2px solid var(--border); }
td { padding:0.75rem 1rem; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
tr:hover td { background:rgba(var(--gold-rgb),0.04); }
tr:last-child td { border-bottom:none; }
.table-img { width:52px; height:40px; object-fit:cover; border-radius:4px; }

/* ---- BADGES ---- */
.badge {
    display:inline-block; padding:0.22rem 0.65rem; border-radius:30px;
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.badge-success { background:#d1e7dd; color:#0f5132; }
.badge-danger { background:#f8d7da; color:#842029; }
.badge-warning { background:#fff3cd; color:#664d03; }
.badge-info { background:#cff4fc; color:#055160; }
.badge-secondary { background:#e2e3e5; color:#41464b; }

/* ---- FORMS ---- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:0.82rem; font-weight:600; color:var(--navy); }
.form-group input,
.form-group select,
.form-group textarea {
    padding:0.65rem 0.9rem;
    border:1.5px solid var(--border); border-radius:6px;
    font-family:var(--font); font-size:0.9rem; color:var(--text);
    background:var(--white); transition:border-color 0.2s;
    outline:none; width:100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color:var(--gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.1);
}
.form-group textarea { min-height:120px; resize:vertical; }
.form-hint { font-size:0.75rem; color:var(--text-muted); }
.form-actions { display:flex; gap:0.75rem; margin-top:1.5rem; }
.password-field { position:relative; }
.password-field input { padding-right: 2.75rem; }
.pw-toggle {
    position:absolute;
    top:50%;
    right:0.55rem;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.pw-toggle:hover { color:var(--navy); background:rgba(var(--gold-rgb),0.10); }
.pw-toggle:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.10); }

/* ---- BUTTONS ---- */
.btn {
    display:inline-flex; align-items:center; gap:0.4rem;
    padding:0.55rem 1.2rem; border-radius:6px;
    font-family:var(--font); font-size:0.88rem; font-weight:600;
    cursor:pointer; transition:all 0.2s; border:2px solid transparent;
    text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-primary:hover { background:var(--gold-light); }
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-light); }
.btn-danger { background:var(--danger); color:var(--white); }
.btn-danger:hover { background:#b02a37; }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--navy); color:var(--navy); }
.btn-sm { padding:0.35rem 0.8rem; font-size:0.8rem; border-radius:4px; }
.btn-icon { padding:0.35rem 0.6rem; }

/* ---- ALERTS ---- */
.alert { padding:0.85rem 1.2rem; border-radius:6px; margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem; font-size:0.9rem; }
.alert-success { background:#d1e7dd; color:#0f5132; border:1px solid #a3cfbb; }
.alert-error { background:#f8d7da; color:#842029; border:1px solid #f1aeb5; }
.alert-info { background:#cff4fc; color:#055160; border:1px solid #9eeaf9; }

/* ---- LOGIN PAGE ---- */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--navy-dark,#080f22), var(--navy)); }
.login-box {
    width:420px; background:var(--white); border-radius:12px;
    padding:2.5rem; box-shadow:0 24px 64px rgba(8,15,34,0.4);
}
.login-header { text-align:center; margin-bottom:2rem; }
.login-header .cross { width:64px; height:64px; margin:0 auto 0.75rem; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--gold); }
.login-header .cross img { width:100%; height:100%; object-fit:contain; display:block; }
.login-header h1 { font-family:var(--font-display); font-size:1.8rem; color:var(--navy); }
.login-header p { font-size:0.85rem; color:var(--text-muted); margin-top:0.3rem; }
.login-form { display:flex; flex-direction:column; gap:1rem; }

/* ---- RICH TEXT EDITOR ---- */
.ql-toolbar { border-radius:6px 6px 0 0 !important; border-color:var(--border) !important; background:var(--cream); }
.ql-container { border-radius:0 0 6px 6px !important; border-color:var(--border) !important; min-height:200px; font-family:var(--font) !important; font-size:0.9rem !important; }

/* ---- IMAGE PREVIEW ---- */
.img-preview { max-height:150px; border-radius:6px; margin-top:0.5rem; border:1px solid var(--border); }
.current-img { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.current-img img { height:60px; border-radius:4px; border:1px solid var(--border); }

/* ---- PAGINATION ---- */
.pagination { display:flex; gap:0.3rem; margin-top:1.5rem; }
.page-link {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; font-size:0.85rem; border:1px solid var(--border); color:var(--text);
    transition:all 0.2s;
}
.page-link:hover, .page-link.active { background:var(--gold); color:var(--navy); border-color:var(--gold); }

/* ---- SETTINGS ---- */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; }
    .stat-cards { grid-template-columns:repeat(2,1fr); }
    .form-grid { grid-template-columns:1fr; }
    .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:580px) {
    .stat-cards { grid-template-columns:1fr; }
}