/*
 * X2 Doctor clinic appearance system.
 * Semantic status colors (success, warning, danger) intentionally remain
 * stable; brand, navigation, focus and decorative colors follow the theme.
 */
:root,
html[data-clinic-theme="aurora"] {
    --clinic-primary: #5f3bc1;
    --clinic-primary-rgb: 95, 59, 193;
    --clinic-primary-strong: #4020a8;
    --clinic-primary-strong-rgb: 64, 32, 168;
    --clinic-primary-deep: #321092;
    --clinic-primary-soft: #eee9ff;
    --clinic-secondary: #405ad9;
    --clinic-secondary-rgb: 64, 90, 217;
    --clinic-accent: #16a5c3;
    --clinic-accent-rgb: 22, 165, 195;
    --clinic-accent-strong: #0e7490;
    --clinic-canvas: #dff8f8;
    --clinic-canvas-soft: #f1fbfd;
    --clinic-ink: #17303b;
    --clinic-ink-soft: #526771;
    --clinic-dock-start: 24, 55, 132;
    --clinic-dock-end: 19, 139, 164;
    --clinic-glow: 163, 250, 245;
    --clinic-shadow: 5, 35, 43;
}

html[data-clinic-theme="ocean"] {
    --clinic-primary: #075985;
    --clinic-primary-rgb: 7, 89, 133;
    --clinic-primary-strong: #0c4a6e;
    --clinic-primary-strong-rgb: 12, 74, 110;
    --clinic-primary-deep: #082f49;
    --clinic-primary-soft: #e0f2fe;
    --clinic-secondary: #0e7490;
    --clinic-secondary-rgb: 14, 116, 144;
    --clinic-accent: #0891b2;
    --clinic-accent-rgb: 8, 145, 178;
    --clinic-accent-strong: #0e7490;
    --clinic-canvas: #e4f7fb;
    --clinic-canvas-soft: #f2fbfd;
    --clinic-ink: #153743;
    --clinic-ink-soft: #526d78;
    --clinic-dock-start: 7, 69, 102;
    --clinic-dock-end: 8, 126, 151;
    --clinic-glow: 125, 226, 242;
    --clinic-shadow: 7, 45, 61;
}

html[data-clinic-theme="emerald"] {
    --clinic-primary: #047857;
    --clinic-primary-rgb: 4, 120, 87;
    --clinic-primary-strong: #065f46;
    --clinic-primary-strong-rgb: 6, 95, 70;
    --clinic-primary-deep: #064e3b;
    --clinic-primary-soft: #dff7ec;
    --clinic-secondary: #0f766e;
    --clinic-secondary-rgb: 15, 118, 110;
    --clinic-accent: #0d9488;
    --clinic-accent-rgb: 13, 148, 136;
    --clinic-accent-strong: #0f766e;
    --clinic-canvas: #e8f7f1;
    --clinic-canvas-soft: #f3fbf7;
    --clinic-ink: #173a35;
    --clinic-ink-soft: #526f69;
    --clinic-dock-start: 6, 78, 59;
    --clinic-dock-end: 13, 128, 118;
    --clinic-glow: 146, 240, 205;
    --clinic-shadow: 7, 48, 40;
}

html[data-clinic-theme="royal"] {
    --clinic-primary: #1d4ed8;
    --clinic-primary-rgb: 29, 78, 216;
    --clinic-primary-strong: #1e40af;
    --clinic-primary-strong-rgb: 30, 64, 175;
    --clinic-primary-deep: #1e3a8a;
    --clinic-primary-soft: #e0e7ff;
    --clinic-secondary: #3730a3;
    --clinic-secondary-rgb: 55, 48, 163;
    --clinic-accent: #0369a1;
    --clinic-accent-rgb: 3, 105, 161;
    --clinic-accent-strong: #075985;
    --clinic-canvas: #eaf0ff;
    --clinic-canvas-soft: #f5f7ff;
    --clinic-ink: #172d48;
    --clinic-ink-soft: #53677e;
    --clinic-dock-start: 23, 37, 84;
    --clinic-dock-end: 30, 64, 175;
    --clinic-glow: 165, 190, 255;
    --clinic-shadow: 18, 34, 73;
}

html[data-clinic-theme="rose"] {
    --clinic-primary: #9d174d;
    --clinic-primary-rgb: 157, 23, 77;
    --clinic-primary-strong: #831843;
    --clinic-primary-strong-rgb: 131, 24, 67;
    --clinic-primary-deep: #701a3f;
    --clinic-primary-soft: #fce7f3;
    --clinic-secondary: #7e22ce;
    --clinic-secondary-rgb: 126, 34, 206;
    --clinic-accent: #be185d;
    --clinic-accent-rgb: 190, 24, 93;
    --clinic-accent-strong: #9d174d;
    --clinic-canvas: #fff0f5;
    --clinic-canvas-soft: #fff7fa;
    --clinic-ink: #402634;
    --clinic-ink-soft: #755967;
    --clinic-dock-start: 112, 26, 69;
    --clinic-dock-end: 126, 34, 206;
    --clinic-glow: 252, 172, 207;
    --clinic-shadow: 67, 25, 47;
}

html[data-clinic-theme="graphite"] {
    --clinic-primary: #334155;
    --clinic-primary-rgb: 51, 65, 85;
    --clinic-primary-strong: #1e293b;
    --clinic-primary-strong-rgb: 30, 41, 59;
    --clinic-primary-deep: #0f172a;
    --clinic-primary-soft: #e2e8f0;
    --clinic-secondary: #475569;
    --clinic-secondary-rgb: 71, 85, 105;
    --clinic-accent: #0f766e;
    --clinic-accent-rgb: 15, 118, 110;
    --clinic-accent-strong: #115e59;
    --clinic-canvas: #edf2f4;
    --clinic-canvas-soft: #f7f9fa;
    --clinic-ink: #1f2937;
    --clinic-ink-soft: #596574;
    --clinic-dock-start: 30, 41, 59;
    --clinic-dock-end: 51, 65, 85;
    --clinic-glow: 170, 218, 213;
    --clinic-shadow: 25, 35, 48;
}

html[data-clinic-font="tajawal"] { --clinic-font-family: "Tajawal", Arial, sans-serif; }
html[data-clinic-font="cairo"] { --clinic-font-family: "Cairo", Arial, sans-serif; }
html[data-clinic-font="noto-kufi"] { --clinic-font-family: "Noto Kufi Arabic", Tahoma, sans-serif; }
html[data-clinic-font="system"] { --clinic-font-family: Tahoma, Arial, sans-serif; }

html[data-clinic-font-scale="small"] { font-size: 14px; }
html[data-clinic-font-scale="normal"] { font-size: 16px; }
html[data-clinic-font-scale="large"] { font-size: 18px; }
html[data-clinic-font-scale="xlarge"] { font-size: 20px; }

html { color-scheme:light; }
input[type="checkbox"],
input[type="radio"] { accent-color:var(--clinic-primary); }

body {
    font-family: var(--clinic-font-family, "Tajawal", Arial, sans-serif);
    background-color: var(--clinic-canvas);
    background-blend-mode: soft-light;
    transition: background-color .24s ease, color .24s ease;
}

body::before {
    background:
        linear-gradient(135deg, rgba(var(--clinic-shadow), .4), rgba(var(--clinic-accent-rgb), .18) 48%, rgba(255,255,255,.24)),
        radial-gradient(circle at 22% 16%, rgba(var(--clinic-glow), .38), transparent 32%),
        radial-gradient(circle at 86% 72%, rgba(255,255,255,.38), transparent 34%);
}

.dashboard-page { background-color:var(--clinic-canvas); background-blend-mode:normal; }

::selection { color:#fff; background:var(--clinic-primary); }
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline:3px solid var(--clinic-accent-strong) !important;
    outline-offset:2px !important;
}

.glass-panel {
    border-color:rgba(255,255,255,.58);
    background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.2));
    box-shadow:0 24px 70px rgba(var(--clinic-shadow),.22),inset 0 1px 0 rgba(255,255,255,.48);
}

.primary-btn,
.secondary-btn {
    color:#fff;
    background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-secondary));
    box-shadow:0 18px 36px rgba(var(--clinic-primary-rgb),.22);
}

.auth-card { color:var(--clinic-ink); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.38)); }
.auth-card h1 { color:var(--clinic-ink); }
.auth-card .eyebrow { color:var(--clinic-primary); }
.auth-card .subtitle { color:var(--clinic-ink-soft); }
.auth-card .brand-mark { color:var(--clinic-primary-strong); background:linear-gradient(135deg,#fff,var(--clinic-primary-soft)); box-shadow:0 14px 34px rgba(var(--clinic-primary-rgb),.2); }
.auth-card .auth-form label > span { color:var(--clinic-ink); }
.auth-card .auth-form input { border-color:rgba(var(--clinic-primary-rgb),.2); color:var(--clinic-ink); -webkit-text-fill-color:var(--clinic-ink); background:rgba(255,255,255,.78); }
.auth-card .auth-form input:focus { border-color:var(--clinic-accent-strong); box-shadow:0 0 0 4px rgba(var(--clinic-accent-rgb),.14); }
.auth-card .primary-btn { color:#fff; background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-secondary)); box-shadow:0 18px 36px rgba(var(--clinic-primary-rgb),.22); }
.auth-card .alert-error { border-color:#e3a4ae; color:#8b1e2f; background:#fff0f2; }
.auth-card .alert-success { border-color:#91cbae; color:#12613f; background:#e8f8ef; }

.visit4-complaint-workspace > aside button { background:var(--clinic-primary); }
.visit4-add-treatment { background:var(--clinic-accent-strong); }
.visit4-toolbar-actions a:nth-of-type(1),
.visit4-next-patient-modal header > span { color:#073b2a; }
.patient-tab,
.summary-tabs button { background:rgba(var(--clinic-secondary-rgb),.76); }
.patient-section-title,
.appointments-title { color:var(--clinic-primary-strong); }

.bottom-dock {
    background:
        linear-gradient(135deg,rgba(var(--clinic-dock-start),.78),rgba(var(--clinic-dock-end),.64)),
        rgba(255,255,255,.2);
    box-shadow:0 16px 44px rgba(var(--clinic-shadow),.28),inset 0 1px 0 rgba(255,255,255,.4);
}

.dock-menu,
.mobile-home-nav {
    background:linear-gradient(160deg,rgba(var(--clinic-dock-start),.98),rgba(var(--clinic-dock-end),.96));
    box-shadow:0 24px 70px rgba(var(--clinic-shadow),.42);
}

.dock-chat-panel > header,
.doctor-entry-toast {
    background:linear-gradient(135deg,var(--clinic-secondary),var(--clinic-accent-strong));
}

.dock-chat-messages .is-sent,
.dock-chat-form button { background:var(--clinic-primary); }
.dock-chat-form input:focus { border-color:var(--clinic-primary); box-shadow:0 0 0 3px rgba(var(--clinic-primary-rgb),.12); }

/* Appearance settings */
.clinic-appearance-card > header { align-items:flex-start; }
.clinic-appearance-current { display:flex; align-items:center; gap:.75rem; padding:.65rem .85rem; border:1px solid rgba(var(--clinic-primary-rgb),.18); border-radius:1rem; color:var(--clinic-primary-strong); background:var(--clinic-primary-soft); }
.clinic-appearance-current > i { width:.8rem; height:.8rem; border-radius:50%; background:var(--clinic-primary); box-shadow:0 0 0 .3rem rgba(var(--clinic-primary-rgb),.13); }
.clinic-appearance-current span { font-weight:900; }
.clinic-appearance-form { display:grid; gap:1.4rem; padding:1.45rem 1.55rem 1.6rem; }
.clinic-appearance-section { display:grid; gap:.75rem; }
.clinic-appearance-section > header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.clinic-appearance-section h3 { margin:0; color:var(--clinic-ink); font-size:1.1rem; }
.clinic-appearance-section p { margin:.2rem 0 0; color:var(--clinic-ink-soft); font-size:.82rem; }
.clinic-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.clinic-theme-option { position:relative; display:grid; min-width:0; gap:.6rem; padding:.65rem; border:2px solid rgba(var(--clinic-primary-rgb),.1); border-radius:1.15rem; color:var(--clinic-ink); background:rgba(255,255,255,.68); cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.clinic-theme-option:hover { transform:translateY(-2px); box-shadow:0 .7rem 1.6rem rgba(var(--clinic-shadow),.12); }
.clinic-theme-option:has(input:checked) { border-color:var(--clinic-primary); box-shadow:0 0 0 .22rem rgba(var(--clinic-primary-rgb),.12),0 .8rem 1.8rem rgba(var(--clinic-shadow),.12); }
.clinic-theme-option:has(input:focus-visible),
.clinic-font-option:has(input:focus-visible),
.clinic-scale-option:has(input:focus-visible) { outline:3px solid var(--clinic-primary-strong); outline-offset:3px; }
.clinic-theme-option > input,
.clinic-font-option > input,
.clinic-scale-option > input { position:absolute; width:1px; min-height:0; height:1px; margin:0; padding:0; overflow:hidden; opacity:0; pointer-events:none; }
.clinic-theme-option > span,
.clinic-scale-option > span { margin:0; color:inherit; }
.clinic-theme-preview { position:relative; display:grid; grid-template-columns:1.2fr .7fr; grid-template-rows:.4fr 1fr; gap:.3rem; height:4.5rem; padding:.55rem; overflow:hidden; border-radius:.8rem; background:var(--preview-canvas); }
.clinic-theme-preview::before { grid-column:1/-1; border-radius:.28rem; content:""; background:linear-gradient(90deg,var(--preview-primary),var(--preview-secondary)); }
.clinic-theme-preview > i { border-radius:.4rem; background:rgba(255,255,255,.86); box-shadow:0 .15rem .45rem rgba(20,35,50,.12); }
.clinic-theme-preview > i:last-child { background:linear-gradient(180deg,var(--preview-accent),rgba(255,255,255,.9)); }
.clinic-theme-copy { display:grid; min-width:0; gap:.15rem; }
.clinic-theme-copy strong { color:var(--clinic-ink); }
.clinic-theme-copy small { overflow:hidden; color:var(--clinic-ink-soft); font-size:.72rem; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.clinic-theme-swatches { display:flex; justify-content:flex-start; gap:.3rem; }
.clinic-theme-swatches i { width:.85rem; height:.85rem; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px rgba(20,45,58,.12); }
.clinic-font-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.clinic-font-option { position:relative; display:grid; gap:.3rem; min-height:6.1rem; padding:.85rem; align-content:center; border:2px solid rgba(var(--clinic-primary-rgb),.1); border-radius:1rem; color:var(--clinic-ink); background:rgba(255,255,255,.68); cursor:pointer; text-align:center; }
.clinic-font-option:has(input:checked) { border-color:var(--clinic-primary); color:var(--clinic-primary-strong); background:var(--clinic-primary-soft); box-shadow:0 0 0 .2rem rgba(var(--clinic-primary-rgb),.1); }
.clinic-font-option strong { font-size:1rem; }
.clinic-font-option small { color:var(--clinic-ink-soft); font-size:.7rem; line-height:1.5; }
.clinic-font-option[data-font-preview="tajawal"] strong { font-family:"Tajawal",sans-serif; }
.clinic-font-option[data-font-preview="cairo"] strong { font-family:"Cairo",sans-serif; }
.clinic-font-option[data-font-preview="noto-kufi"] strong { font-family:"Noto Kufi Arabic",sans-serif; }
.clinic-font-option[data-font-preview="system"] strong { font-family:Tahoma,Arial,sans-serif; }
.clinic-scale-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.clinic-scale-option { position:relative; display:flex; min-height:3.5rem; padding:.55rem .8rem; align-items:center; justify-content:center; gap:.55rem; border:2px solid rgba(var(--clinic-primary-rgb),.1); border-radius:.9rem; color:var(--clinic-ink-soft); background:rgba(255,255,255,.68); cursor:pointer; font-weight:900; }
.clinic-scale-option:has(input:checked) { border-color:var(--clinic-primary); color:var(--clinic-primary-strong); background:var(--clinic-primary-soft); }
.clinic-scale-option b { color:var(--clinic-primary); }
.clinic-scale-option[data-scale-preview="small"] b { font-size:.78rem; }
.clinic-scale-option[data-scale-preview="normal"] b { font-size:1rem; }
.clinic-scale-option[data-scale-preview="large"] b { font-size:1.2rem; }
.clinic-scale-option[data-scale-preview="xlarge"] b { font-size:1.4rem; }
.clinic-appearance-live-preview { display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; padding:1rem; align-items:center; border:1px solid rgba(var(--clinic-primary-rgb),.15); border-radius:1.1rem; color:var(--clinic-ink); background:linear-gradient(135deg,rgba(255,255,255,.88),var(--clinic-primary-soft)); }
.clinic-appearance-live-preview > i { display:grid; width:2.7rem; height:2.7rem; place-items:center; border-radius:.85rem; color:#fff; background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-secondary)); font-style:normal; font-weight:900; }
.clinic-appearance-live-preview > span { display:grid; gap:.15rem; }
.clinic-appearance-live-preview small { color:var(--clinic-ink-soft); }
.clinic-appearance-live-preview button,
.clinic-appearance-submit { min-height:2.85rem; padding:.5rem 1.15rem; border:0; border-radius:.85rem; color:#fff; background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-secondary)); font:inherit; font-weight:900; }
.clinic-appearance-submit { justify-self:end; min-width:12rem; cursor:pointer; box-shadow:0 .55rem 1.2rem rgba(var(--clinic-primary-rgb),.2); }
.clinic-appearance-submit:disabled { cursor:not-allowed; filter:grayscale(.45); opacity:.58; box-shadow:none; }
.clinic-appearance-preview-status { min-height:1.4rem; margin:0; color:var(--clinic-primary-strong); font-size:.8rem; font-weight:800; text-align:center; }
.clinic-appearance-form :is(label,button):focus-visible { outline:3px solid var(--clinic-primary-strong); outline-offset:3px; }

@media (max-width:900px) {
    .clinic-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .clinic-font-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px) {
    .clinic-theme-grid,
    .clinic-font-grid { grid-template-columns:1fr; }
    .clinic-scale-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .clinic-appearance-section > header { align-items:flex-start; flex-direction:column; }
    .clinic-appearance-live-preview { grid-template-columns:auto 1fr; }
    .clinic-appearance-live-preview button { grid-column:1/-1; }
    .clinic-appearance-submit { width:100%; justify-self:stretch; }
}

@media (max-width:520px) {
    .patient-profile-page .patient-profile-edit-summary { grid-template-columns:1fr; }
}

@media print {
    html { font-size:16px !important; }
    body { color:#000 !important; background:#fff !important; transition:none !important; }
    body::before,
    body::after { display:none !important; }
    .glass-panel { border-color:#aaa !important; background:#fff !important; box-shadow:none !important; backdrop-filter:none !important; }
}