/* FONTS */
@font-face {
    font-family: "IranYekanBlack";
    src: url("../font/IRANYekanBlack.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanBold";
    src: url("../font/IRANYekanBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanExtraBlack";
    src: url("../font/IRANYekanExtraBlack2.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanExtraBold";
    src: url("../font/IRANYekanExtraBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanLight";
    src: url("../font/IRANYekanLight.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanMedium";
    src: url("../font/IRANYekanMedium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanRegular";
    src: url("../font/IRANYekanRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanThin";
    src: url("../font/IRANYekanThin.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "YekanPlus";
    src: url("../font/YEKAN PLUS.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IRANSansWeb";
    src: url("../font/IRANSansWeb_FaNum.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* COLOR */
:root {
    --light-blue: #f7feff;
    --pale-cyan: #e0f7fa;
    --light-cyan: #CAF0F8;
    --non-photo-blue-2: #ADE8F4;
    --non-photo-blue: #90E0EF;
    --vivid-sky-blue: #48CAE4;
    --dark-turquoise: #00bcd4;
    --pacific-cyan: #00B4D8;
    --blue-green: #0096C7;
    --honolulu-blue: #0077B6;
    --marian-blue: #023E8A;
    --federal-blue: #03045E;
    --mindaro: #D0E394ff;

    --bg: #f7f7fb;
    --card: #fff;
    --text: #1f2937;
    --muted: #373737;
    --border: #e5e7eb;
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --accent: #10b981;
    --danger: #ef4444;
}

/* =========================================
   1. BODY & BACKGROUND (تنظیمات پس‌زمینه)
   ========================================= */
body {
    background: url("/static/img/pattern-2.jpg") center/400px repeat;
    position: relative;
    z-index: 0;
    font-family: 'IranYekanRegular', sans-serif;
    transition: background-color 0.3s ease;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg, rgba(208, 227, 148, 1) 0%, rgba(208, 227, 148, 0.5) 33%, rgba(118, 183, 225, 0.5) 66%, rgba(118, 183, 225, 1) 100%);
    z-index: -1;
    transition: background 0.3s ease;
}

/* --- DARK MODE BODY --- */
.dark body::before {
    background: linear-gradient(45deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.85) 100%);
}


/* =========================================
   2. SCROLLBAR (اسکرول‌بار)
   ========================================= */
main {
    border-radius: 0 8px 8px 0;
}

main::-webkit-scrollbar {
    width: 10px;
    border-radius: 0 0 0 0;
}

main::-webkit-scrollbar-track-piece {
    background: #26d4e3;
}

main::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 0 0;
}

main::-webkit-scrollbar-thumb {
    background: #00bcd4;
    transition: background 0.3s;
    border-radius: 0 0 0 0;
}

main::-webkit-scrollbar-thumb:hover {
    background: #0097a7;
}

/* --- DARK MODE SCROLLBAR --- */
.dark main::-webkit-scrollbar-track-piece {
    background: #334155;
}

.dark main::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark main::-webkit-scrollbar-thumb {
    background: #0891b2;
}

.dark main::-webkit-scrollbar-thumb:hover {
    background: #22d3ee;
}

.new-patient-siderbar::-webkit-scrollbar {
    width: 0;
    background: transparent;
}


/* =========================================
   3. CHECKBOX & RADIO (چک‌باکس‌های کاستوم)
   ========================================= */
.form-step input[type='checkbox'],
.form-step input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #0077b6;
    border-radius: 50%;
    position: relative;
    top: 3px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent;
}

/* --- DARK MODE INPUTS --- */
.dark .form-step input[type='checkbox'],
.dark .form-step input[type='radio'] {
    border-color: #22d3ee;
}

.form-step input[type='checkbox'] {
    border-radius: 4px;
}

.form-step input[type='radio']:checked,
.form-step input[type='checkbox']:checked {
    background-color: #0077b6;
    border-color: #0077b6;
}

.dark .form-step input[type='radio']:checked,
.dark .form-step input[type='checkbox']:checked {
    background-color: #06b6d4;
    border-color: #06b6d4;
}

.form-step input[type='radio']:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-step input[type='checkbox']:checked::before {
    content: '✓';
    display: block;
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* =========================================
   4. TABLE CHECKBOXES & PLACEHOLDERS
   ========================================= */
.visits-table input[type="checkbox"] {
    accent-color: var(--pacific-cyan);
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}

.visits-table input[type="checkbox"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pacific-cyan) 45%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.visits-table thead input[type="checkbox"]:indeterminate {
    accent-color: var(--non-photo-blue);
}

/* تنظیم جهت پلیس‌هولدرها */
.f-input input::placeholder { direction: rtl; text-align: right; }
.f-input input::-webkit-input-placeholder { direction: rtl; text-align: right; }
.f-input input:-ms-input-placeholder { direction: rtl; text-align: right; }

/* --- DARK MODE PLACEHOLDER COLOR --- */
.dark .f-input input::placeholder { color: #94a3b8; }
.dark .f-input input::-webkit-input-placeholder { color: #94a3b8; }
.dark .f-input input:-ms-input-placeholder { color: #94a3b8; }


/* =========================================
   5. FORM MANAGER & CAROUSEL
   ========================================= */
.new-patient-step .is-selected {
    background-color: var(--non-photo-blue);
}

/* --- DARK MODE SELECTION --- */
.dark .new-patient-step .is-selected {
    background-color: rgba(6, 182, 212, 0.2);
}

.new-patient-form .form-step.is-selected {
    display: block;
}

.carousel-cell.is-selected {
    background-color: #f0f0f0;
    border-bottom: 2px solid var(--blue-green);
    transition: background-color 0.3s;
}

/* --- DARK MODE CAROUSEL --- */
.dark .carousel-cell.is-selected {
    background-color: #1e293b;
    border-bottom-color: #22d3ee;
    color: #fff;
}


/* =========================================
   6. SELECTABLE BOXES (دکمه‌های انتخابی بزرگ)
   ========================================= */
input:checked + .selectable-box {
    background-color: #e8f5e9;
    border-color: #4caf50;
    transition: all 0.3s;
}

input:checked + .selectable-box .box-icon {
    color: #4caf50;
    content: "mdi:check-circle";
}

input:checked + .selectable-box .box-text {
    color: #388e3c;
}

/* --- DARK MODE SELECTABLE BOX --- */
.dark input:checked + .selectable-box {
    background-color: rgba(20, 83, 45, 0.4);
    border-color: #22c55e;
}

.dark input:checked + .selectable-box .box-icon {
    color: #4ade80;
}

.dark input:checked + .selectable-box .box-text {
    color: #86efac;
}

.pre-image.has-image {
    padding: 0;
}


/* =========================================
   7. TEXT UTILS
   ========================================= */
.placeholder-text {
    font-size: 14px;
    color: #333;
}

/* --- DARK MODE TEXT --- */
.dark .placeholder-text {
    color: #cbd5e1;
}

.flash {
    animation: flash-animation 120ms ease-out;
}

@keyframes flash-animation {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(2) contrast(1.5);
        outline: 3px solid white;
    }
    100% {
        filter: brightness(1);
    }
}

.new-patient-siderbar .is-selected {
    border-color: #00bcd4;
    background: rgba(0, 188, 212, 0.08);
    box-shadow: 0 6px 18px rgba(0, 188, 212, 0.12);
}