/* ============================================================
   عيادتي — نظام إدارة العيادات الطبية
   الهوية البصرية (Teal / أخضر مزرقّ)
   ============================================================ */

:root {
    --teal-900: #0a4f43;
    --teal-800: #0c5c4e;
    --teal-700: #0f766e;
    --teal-600: #128574;
    --teal-500: #159b86;
    --teal-050: #e6f4f1;

    --brand: #0f766e;
    --brand-grad: linear-gradient(135deg, #17a88e 0%, #0f766e 55%, #0b5f52 100%);
    --nav-grad: linear-gradient(90deg, #0b5f52 0%, #0f766e 50%, #12907c 100%);

    --ink: #123634;
    --muted: #6b8583;
    --line: #e5eceb;
    --bg: #f4f8f7;
    --card: #ffffff;

    --green: #16a34a;
    --amber: #d97706;
    --blue: #2563eb;
    --red: #dc2626;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 10px 30px -12px rgba(15, 118, 110, .18);
    --shadow-sm: 0 4px 14px -8px rgba(15, 118, 110, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ---------- شريط التنقل ---------- */
.navbar {
    background: var(--nav-grad);
    color: #fff;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 20px -8px rgba(11, 95, 82, .55);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .3px;
}
.navbar .brand .logo-badge {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    font-size: 22px;
}

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #e8fbf6;
    transition: .18s;
}
.nav-links a:hover { background: rgba(255,255,255,.12); }
.nav-links a.active { background: rgba(255,255,255,.18); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

.nav-user { display: flex; align-items: center; gap: 14px; }
.nav-user .uname { display:flex; align-items:center; gap:7px; font-weight:700; }
.nav-user .logout {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12); color:#fff; border: none;
    transition:.18s;
}
.nav-user .logout:hover { background: rgba(220,38,38,.85); }

/* ---------- الحاوية ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px;
}
.page-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 30px; font-weight: 800; color: var(--teal-800);
}
.page-title .ico { color: var(--teal-600); }
.page-date { color: var(--muted); font-weight: 600; }

/* ---------- الأزرار ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px;
    border-radius: 14px;
    font-weight: 700; font-size: 15px;
    border: none; transition: .18s;
    white-space: nowrap;
}
.btn-primary { background: var(--brand-grad); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-outline { background:#fff; color: var(--teal-700); box-shadow: inset 0 0 0 1.5px var(--teal-600); }
.btn-outline:hover { background: var(--teal-050); }
.btn-ghost { background: var(--teal-050); color: var(--teal-700); }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 11px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- كروت الإحصائيات ---------- */
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--card); border-radius: var(--radius);
    padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: var(--shadow);
    border-inline-end: 5px solid var(--teal-600);
    transition: .2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card .info .num { font-size: 30px; font-weight: 800; color: var(--ink); line-height:1.1; }
.stat-card .info .label { color: var(--muted); font-weight: 600; margin-top: 4px; }
.stat-card .icon {
    width: 58px; height: 58px; border-radius: 16px;
    display: grid; place-items: center; font-size: 26px; color:#fff;
}
.ic-teal { background: linear-gradient(135deg,#17a88e,#0f766e); }
.ic-blue { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.ic-amber{ background: linear-gradient(135deg,#fbbf24,#d97706); }
.ic-green{ background: linear-gradient(135deg,#34d399,#059669); }
.stat-card.b-blue { border-color:#2563eb; }
.stat-card.b-amber{ border-color:#d97706; }
.stat-card.b-green{ border-color:#059669; }

/* ---------- الكروت العامة ---------- */
.card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 22px;
}
.card-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 16px;
}
.card-head .title { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; color: var(--teal-800); }
.card-head .link { color: var(--teal-600); font-weight:700; font-size:14px; }

/* ---------- شبكة اللوحة ---------- */
.dash-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items:start; }

/* ---------- الجداول ---------- */
.table-wrap { overflow-x: auto; }
table.data { width:100%; border-collapse: collapse; }
table.data thead th {
    background: #f1f7f6; color: var(--muted);
    font-weight: 700; font-size: 14px;
    padding: 15px 16px; text-align: right;
}
table.data thead th:first-child { border-start-start-radius: 12px; }
table.data thead th:last-child  { border-start-end-radius: 12px; }
table.data tbody td {
    padding: 16px; border-bottom: 1px solid var(--line);
    font-weight: 600; font-size: 15px; color: var(--ink);
}
table.data tbody tr { transition:.15s; }
table.data tbody tr:hover { background: #f7fbfa; }
table.data tbody tr:last-child td { border-bottom: none; }

/* ---------- الشارات ---------- */
.badge {
    display:inline-flex; align-items:center; gap:5px;
    padding: 6px 14px; border-radius: 999px;
    font-weight: 700; font-size: 13px;
}
.badge-code { background: var(--teal-050); color: var(--teal-700); }
.badge-blue { background:#e0edff; color:#1d4ed8; }
.badge-green{ background:#dcfce7; color:#15803d; }
.badge-amber{ background:#fef3c7; color:#b45309; }
.badge-gray { background:#eef2f2; color:#64748b; }
.badge-red  { background:#fee2e2; color:#b91c1c; }
.badge-med  { background:#e6f4f1; color:#0f766e; margin: 2px; }
.badge-teal { background:#d1f0ea; color:#0b5f52; }

/* ---------- أزرار الإجراءات ---------- */
.actions { display:flex; gap:8px; }
.act-btn {
    width: 38px; height: 38px; border-radius: 11px; border:none;
    display:grid; place-items:center; font-size: 15px; transition:.15s;
}
.act-view  { background:#e0edff; color:#2563eb; }
.act-edit  { background:#fef3c7; color:#b45309; }
.act-print { background:#e6f4f1; color:#0f766e; }
.act-del   { background:#fee2e2; color:#dc2626; }
.act-ok    { background:#dcfce7; color:#16a34a; }
.act-btn:hover { transform: translateY(-2px); filter:brightness(.97); }

/* ---------- شريط البحث ---------- */
.search-bar { position: relative; flex: 1; }
.search-bar input {
    width:100%; padding: 15px 20px 15px 48px;
    border: 1.5px solid var(--line); border-radius: 14px;
    font-family: inherit; font-size: 15px; background:#fbfdfc;
    transition:.15s;
}
.search-bar input:focus { outline:none; border-color: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-050); }
.search-bar .s-ico { position:absolute; inset-inline-start: 16px; top:50%; transform: translateY(-50%); color: var(--muted); }
.filter-row { display:flex; gap: 14px; align-items:center; margin-bottom: 6px; }

/* ---------- النماذج ---------- */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form-group { display:flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-weight: 700; color: var(--teal-800); font-size: 15px; }
.form-group label .opt { color: var(--muted); font-weight: 500; font-size: 13px; }
.input, .form-group input, .form-group select, .form-group textarea {
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px;
    font-family: inherit; font-size: 15px; background:#fbfdfc; color: var(--ink);
    transition:.15s; width:100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .input:focus {
    outline:none; border-color: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-050);
}
.form-group textarea { resize: vertical; min-height: 96px; }
.form-actions { display:flex; gap: 14px; justify-content:flex-start; margin-top: 26px; }

/* ---------- التنبيهات ---------- */
.alert {
    display:flex; align-items:center; gap:10px;
    padding: 15px 20px; border-radius: 14px; font-weight:700;
    margin-bottom: 22px;
}
.alert-success { background:#dcfce7; color:#15803d; border: 1px solid #bbf7d0; }
.alert-error   { background:#fee2e2; color:#b91c1c; border: 1px solid #fecaca; }

/* ---------- الاختصارات السريعة ---------- */
.shortcut {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px; border-radius: 14px; margin-bottom: 12px;
    background:#fbfdfc; border:1.5px solid var(--line);
    font-weight: 700; color: var(--teal-800); transition:.18s;
}
.shortcut:hover { border-color: var(--teal-500); background: var(--teal-050); transform: translateX(-4px); }
.shortcut .sc-ico { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; }

.empty { text-align:center; padding: 50px 20px; color: var(--muted); }
.empty .big { font-size: 46px; margin-bottom: 10px; }

/* ---------- المودال ---------- */
.modal-overlay {
    position: fixed; inset:0; background: rgba(10,40,36,.55);
    display:none; align-items:center; justify-content:center; z-index: 500;
    padding: 20px; backdrop-filter: blur(3px);
}
.modal-overlay.open { display:flex; }
.modal {
    background:#fff; border-radius: 22px; width: 100%; max-width: 560px;
    max-height: 92vh; overflow-y:auto; box-shadow: 0 30px 70px -20px rgba(0,0,0,.4);
}
.modal-head {
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 26px; border-bottom: 1px solid var(--line);
}
.modal-head .title { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; color: var(--teal-800); }
.modal-head .close { width:36px; height:36px; border-radius:10px; border:none; background:#f1f5f4; color:#64748b; font-size:18px; }
.modal-head .close:hover { background:#fee2e2; color:#dc2626; }
.modal-body { padding: 24px 26px; }
.modal-foot { display:flex; gap: 12px; justify-content:flex-start; padding: 18px 26px; border-top:1px solid var(--line); }
.divider-label { display:flex; align-items:center; gap:8px; color: var(--teal-700); font-weight:800; margin: 20px 0 4px; font-size:15px; }

.mt-0 { margin-top:0; }
.text-income { color: var(--green); font-weight:800; }
.text-expense{ color: var(--red); font-weight:800; }

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .dash-grid, .form-grid { grid-template-columns: 1fr; }
    .nav-links a span { display:none; }
    .navbar { padding: 0 16px; }
    .nav-links a { padding: 9px 11px; }
}