@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');

@font-face{
    font-family:'NRT';
    src:url('../fonts/NRT-Reg.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'NRT';
    src:url('../fonts/NRT-Bd.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

:root{
    --primary: #1f616e;
    --primary-dark: #164a54;
    --accent: #f4a300;
    --bg: #eef3f4;
    --card: #ffffff;
    --border: #dbe3e5;
    --text: #223034;
    --muted: #6c7a7d;
    --danger: #d9534f;
    --radius: 14px;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    font-family:'NRT', 'Noto Kufi Arabic', Tahoma, sans-serif;
    font-size:12px;
    font-weight:700;
    background:var(--bg);
    color:var(--text);
}

.topbar{
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff;
    padding:16px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.brand{ display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; }
.brand-icon{ font-size:26px; }

/* ===== 3D Icon Badges ===== */
.icon-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow:
        0 4px 0 rgba(0,0,0,.18),
        0 8px 16px rgba(0,0,0,.18),
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -3px 6px rgba(0,0,0,.18);
    flex-shrink:0;
    transition:transform .12s ease, box-shadow .12s ease;
}
.icon-badge-xs{ width:30px; height:30px; border-radius:9px; font-size:15px; }
.icon-badge-sm{ width:38px; height:38px; border-radius:11px; font-size:18px; }
.icon-badge-md{ width:52px; height:52px; border-radius:14px; font-size:24px; }
.icon-badge-lg{ width:68px; height:68px; border-radius:18px; font-size:32px; }
.icon-badge-accent{ background:linear-gradient(160deg, #ffc74d 0%, var(--accent) 100%); }
a:hover > .icon-badge, .quick-card:hover .icon-badge{
    transform:translateY(-2px);
    box-shadow:
        0 6px 0 rgba(0,0,0,.18),
        0 12px 22px rgba(0,0,0,.22),
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -3px 6px rgba(0,0,0,.18);
}

.btn{
    border:none;
    border-radius:12px;
    padding:11px 20px;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    position:relative;
    box-shadow:
        0 4px 0 rgba(0,0,0,.20),
        0 7px 14px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.35);
    transform:translateY(0);
    transition:transform .09s ease, box-shadow .09s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{
    transform:translateY(4px);
    box-shadow:
        0 0 0 rgba(0,0,0,.20),
        0 2px 5px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:disabled{ opacity:.6; cursor:default; transform:none; }

.btn-primary{
    background:linear-gradient(180deg, #ffc74d, var(--accent));
    color:#3a2a00;
}
.btn-secondary{
    background:linear-gradient(180deg, #f5f8f8, #e2e8e9);
    color:var(--text);
}
.btn-ghost{
    background:linear-gradient(180deg, #ffffff, var(--bg));
    color:var(--primary);
    border:1px solid var(--border);
    box-shadow:
        0 3px 0 rgba(0,0,0,.10),
        0 5px 10px rgba(0,0,0,.08);
}
.btn-sm{ padding:7px 14px; font-size:12px; border-radius:10px; }
.btn-view{
    background:linear-gradient(180deg, #2a7c8c, var(--primary));
    color:#fff;
}
.btn-delete{
    background:linear-gradient(180deg, #ffffff, #fdecea);
    color:var(--danger);
    border:1px solid var(--danger);
    box-shadow:
        0 3px 0 rgba(217,83,79,.35),
        0 5px 10px rgba(217,83,79,.15);
}
.btn-delete:hover{ background:var(--danger); color:#fff; }

.page-card{
    max-width:1100px;
    margin:26px auto;
    background:var(--card);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:0 2px 14px rgba(0,0,0,.06);
    overflow:hidden;
}

.table-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}
#searchBox{
    padding:9px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    width:260px;
    font-family:inherit;
}
.count-badge{
    background:var(--bg);
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
}

.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{
    background:var(--bg);
    text-align:left;
    padding:10px 12px;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    border-bottom:2px solid var(--border);
}
.data-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    font-size:12px;
    font-weight:700;
}
.data-table tr:hover td{ background:#f7fafb; }
.empty-row{ text-align:center; color:var(--muted); padding:30px !important; }
.status-done{ color:#1c7d4d; font-weight:700; font-size:12px; }
.status-pending{ color:var(--muted); font-size:12px; font-weight:700; }
.action-group{ display:flex; gap:6px; flex-wrap:wrap; }
.btn-link{
    background:#eef5f6; color:var(--primary-dark); text-decoration:none;
    border:1px solid var(--border); display:inline-flex; align-items:center;
}
.btn-link:hover{ background:var(--bg); }

/* ===== Modal ===== */
.modal-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(20,30,32,.55);
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
}
.modal-overlay.open{ display:flex; }

.modal-box{
    background:var(--card);
    width:100%;
    max-width:1400px;
    height:95vh;
    max-height:95vh;
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 22px;
    background:var(--primary);
    color:#fff;
    flex-shrink:0;
}
#patientForm{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}
.modal-header h2{ margin:0; font-size:17px; }
.modal-close{
    background:rgba(255,255,255,.18);
    border:2px solid rgba(255,255,255,.35);
    color:#fff;
    width:38px; height:38px;
    border-radius:10px;
    cursor:pointer;
    font-size:17px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
}
.modal-close:hover{ background:var(--danger); border-color:var(--danger); transform:scale(1.05); }

.tabs{
    display:flex;
    overflow-x:auto;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:0 10px;
    flex-shrink:0;
}
.tab-btn{
    background:none;
    border:none;
    padding:14px 18px;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    flex-shrink:0;
}
.tab-btn.active{
    color:var(--primary);
    border-bottom-color:var(--accent);
    font-weight:700;
}

.tab-content-wrap{
    padding:20px 22px;
    overflow-y:auto;
    flex:1 1 auto;
    min-height:0;
    scrollbar-width:thin;
    scrollbar-color:var(--primary) var(--bg);
}
.tab-content-wrap::-webkit-scrollbar{ width:10px; }
.tab-content-wrap::-webkit-scrollbar-track{ background:var(--bg); }
.tab-content-wrap::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:10px; }
.tab-content-wrap::-webkit-scrollbar-thumb:hover{ background:var(--primary-dark); }
.tab-pane{ display:none; animation:fade .15s ease; }
.tab-pane.active{ display:block; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px 20px; }
.mb-block{ margin-bottom:20px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field-wide{ grid-column:1 / -1; }
.field label{ font-size:12px; color:var(--muted); font-weight:700; }
.field input, .field select, .field textarea{
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 11px;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    background:#fbfdfd;
}
.field textarea{ min-height:60px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--primary);
}

.grid-groups{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
.opt-group{
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px 18px;
    background:#fbfdfd;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 10px;
}
.opt-group-wide{ grid-column:1 / -1; }
.opt-title{
    font-weight:700;
    font-size:12px;
    color:var(--primary-dark);
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    min-width:190px;
    margin-right:6px;
}
.opt-title-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    width:100%;
}
.tag-multi{
    font-size:10.5px;
    font-weight:700;
    background:var(--accent);
    color:#3a2a00;
    padding:2px 8px;
    border-radius:10px;
}

.radio-pill, .check-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:6px 14px;
    margin:0;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:.12s;
}
.radio-pill:hover, .check-pill:hover{ border-color:var(--primary); }
.radio-pill input, .check-pill input{ accent-color:var(--primary); cursor:pointer; }
.radio-pill:has(input:checked), .check-pill:has(input:checked){
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.photo-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}
.photo-slot{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.photo-box{
    width:100%;
    aspect-ratio:1/1;
    border:2px dashed var(--border);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:12px;
    background:#fbfdfd;
    overflow:hidden;
}
.photo-box img{ width:100%; height:100%; object-fit:cover; }
.photo-input{ font-size:11px; width:100%; }

.modal-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 24px;
    border-top:2px solid var(--border);
    background:#fff;
    box-shadow:0 -4px 14px rgba(0,0,0,.06);
    flex-shrink:0;
}
.nav-buttons, .save-buttons{ display:flex; gap:10px; }
.save-buttons .btn{ padding:13px 28px; font-size:14px; border-radius:12px; }
.save-buttons .btn-primary{
    background:linear-gradient(180deg, #ffc74d, var(--accent));
    box-shadow:
        0 4px 0 rgba(180,120,0,.55),
        0 8px 16px rgba(244,163,0,.35),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.save-buttons .btn-primary:active{
    box-shadow:
        0 0 0 rgba(180,120,0,.55),
        0 3px 6px rgba(244,163,0,.25),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.save-buttons .btn-secondary{
    background:linear-gradient(180deg, #ffffff, #fdecea);
    border:2px solid var(--danger);
    color:var(--danger);
    box-shadow:
        0 4px 0 rgba(217,83,79,.3),
        0 6px 12px rgba(217,83,79,.15);
}
.save-buttons .btn-secondary:hover{ background:var(--danger); color:#fff; }

.toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--primary-dark);
    color:#fff;
    padding:12px 24px;
    border-radius:10px;
    font-size:14px;
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--danger); }

@media (max-width:720px){
    .grid-2, .grid-3, .grid-groups{ grid-template-columns:1fr; }
    .photo-grid{ grid-template-columns:repeat(2,1fr); }
    .opt-title{ min-width:100%; margin-bottom:2px; }
}

/* PDF / print action button */
.btn-pdf{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#3a2a00;
    text-decoration:none;
    font-weight:700;
}
.btn-pdf:hover{ filter:brightness(.94); }