*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f4f6f8;color:#18212b}a{color:inherit;text-decoration:none}.topbar{background:#111827;color:white;padding:14px 5%;display:flex;align-items:center;justify-content:space-between;gap:15px;position:sticky;top:0;z-index:10}.topbar div{display:flex;flex-direction:column}.topbar small{opacity:.7;margin-top:4px}.topbar nav{display:flex;gap:14px;flex-wrap:wrap}.container{width:min(1500px,94%);margin:24px auto}.narrow{max-width:900px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.btn{border:1px solid #d0d5dd;background:white;padding:10px 14px;border-radius:10px;cursor:pointer;font:inherit}.primary{background:#1d4ed8;color:#fff;border-color:#1d4ed8}.danger{background:#b42318;color:#fff;border-color:#b42318}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(180px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px}.day-card{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:12px;min-height:300px}.day-card h2{font-size:15px;margin:0 0 10px}.add{display:block;border:1px dashed #94a3b8;border-radius:9px;padding:8px;text-align:center;margin-bottom:10px}.booking{display:flex;flex-direction:column;gap:4px;padding:10px;margin:8px 0;border-radius:10px;background:#eef2ff;border-right:4px solid #4f46e5}.booking span,.booking small{font-size:12px}.status-done{background:#ecfdf3;border-color:#12b76a}.status-cancelled{background:#fef3f2;border-color:#f04438;opacity:.7}.status-confirmed{background:#eff8ff;border-color:#2e90fa}.empty{color:#98a2b3;text-align:center;padding:40px 5px}.panel,.login-card{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(16,24,40,.05)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-weight:bold;font-size:14px}input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:9px;padding:11px;font:inherit;background:white}label small{font-weight:normal;color:#667085}.actions{display:flex;gap:10px;margin-top:20px}.alert{padding:12px;border-radius:10px;margin:10px 0}.success{background:#ecfdf3;color:#067647}.alert.danger{background:#fef3f2;color:#b42318}.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:#eef2f6}.login-card{width:min(420px,100%)}.login-card form{display:grid;gap:15px}.search{display:flex;gap:8px;margin-bottom:15px}.table-wrap{overflow:auto;background:white;border-radius:12px;border:1px solid #e5e7eb}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:right;padding:11px;border-bottom:1px solid #eee}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.admin-grid form{display:grid;gap:12px}@media(max-width:800px){.topbar{align-items:flex-start;flex-direction:column}.form-grid,.admin-grid{grid-template-columns:1fr}.week-grid{grid-template-columns:repeat(7,82vw)}.toolbar{font-size:12px}.container{width:94%;margin-top:14px}}
/* ===== MOBILE CALENDAR - FINAL ===== */
@media screen and (max-width: 768px) {

    body {
        font-size: 14px;
        overflow-x: hidden;
    }

    .container {
        width: 94%;
        margin: 14px auto;
    }

    /* هدر */
    .topbar {
        padding: 14px 5%;
        gap: 10px;
    }

    .topbar nav {
        gap: 14px;
        flex-wrap: wrap;
    }

    /* کنترل هفته */
    .toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 18px;
    }

    .toolbar > div:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    /* لیست روزها */
    .week-grid {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: 10px;
        padding: 0 0 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* هر روز = تقریباً عرض کامل موبایل */
    .day-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 12px !important;
        scroll-snap-align: start;
    }

    .day-card h2 {
        font-size: 18px !important;
        text-align: center;
        margin: 6px 0 12px !important;
    }

    .add {
        margin-bottom: 10px !important;
    }

    .empty {
        min-height: 60px !important;
        padding: 22px 5px !important;
    }

    .booking {
        padding: 10px !important;
        margin: 8px 0 !important;
    }

}
.week-grid .day-card {
    min-height: 0 !important;
    height: auto !important;
}

.week-grid .empty {
    min-height: 0 !important;
    padding: 25px 5px !important;
}
/* ===== Sales Result ===== */

.sales-result {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
}

/* منجر به فروش */
.sales-sold {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

/* تست کرد و خرید نکرد */
.sales-no_sale {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* عدم حضور */
.sales-no_show {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
/* ===== Mobile Calendar ===== */
@media (max-width: 768px) {

    .week-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .day-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* روز امروز */
    .day-card.today {
        border: 2px solid #22a447 !important;
        background: #f0fff4 !important;
        box-shadow: 0 4px 15px rgba(34, 164, 71, 0.15);
    }

    .day-card.today h2 {
        color: #168638;
    }

    .today-badge {
        display: inline-block;
        margin-right: 8px;
        padding: 3px 9px;
        border-radius: 20px;
        background: #22a447;
        color: #fff;
        font-size: 11px;
        vertical-align: middle;
    }
}
/* =========================================
   DESKTOP WEEK CALENDAR
   ========================================= */
@media (min-width: 769px) {

    .container {
        width: 96%;
        max-width: 1700px;
        margin: 0 auto;
        padding: 28px 20px 50px;
    }

    /* نوار هفته قبل و بعد */
    .toolbar {
        display: grid;
        grid-template-columns: 150px 1fr 150px;
        align-items: center;
        gap: 20px;
        margin-bottom: 22px;
    }

    .toolbar > div:nth-child(1) {
        justify-self: start;
    }

    .toolbar > div:nth-child(2) {
        justify-self: center;
        text-align: center;
        font-size: 16px;
    }

    .toolbar > div:nth-child(3) {
        justify-self: end;
    }

    .toolbar .btn {
        padding: 10px 18px;
        border-radius: 9px;
        background: #fff;
        border: 1px solid #d8dce2;
        text-decoration: none;
        transition: all .2s ease;
    }

    .toolbar .btn:hover {
        background: #f3f4f6;
        border-color: #aeb4bc;
    }

    /* هفت روز */
    .week-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        align-items: stretch;
    }

    /* کارت روز */
    .day-card {
        position: relative;
        background: #fff;
        border: 1px solid #e2e5e9;
        border-radius: 14px;
        padding: 15px 12px;
        min-height: 270px;
        box-shadow: 0 3px 12px rgba(0,0,0,.045);
        transition: transform .2s ease,
                    box-shadow .2s ease,
                    border-color .2s ease;
    }

    .day-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 9px 24px rgba(0,0,0,.08);
        border-color: #c8cdd4;
    }

    /* تاریخ */
    .day-card h2 {
        margin: 0 0 15px;
        padding-bottom: 13px;
        text-align: center;
        font-size: 16px;
        line-height: 1.7;
        border-bottom: 1px solid #eef0f2;
    }

    /* دکمه رزرو جدید */
    .day-card .add {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 6px;
        margin-bottom: 12px;

        border: 1px dashed #b8bec6;
        border-radius: 9px;

        background: #fafbfc;
        text-decoration: none;

        transition: all .2s ease;
    }

    .day-card .add:hover {
        background: #f0f2f4;
        border-color: #888f98;
    }

    /* بدون رزرو */
    .day-card .empty {
        text-align: center;
        padding: 38px 5px;
        opacity: .42;
        font-size: 13px;
    }

    /* رزروها */
    .booking {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 11px;
        margin: 8px 0;

        background: #f8f9fa;
        border: 1px solid #e7e9ec;
        border-radius: 9px;

        text-decoration: none;
        line-height: 1.8;

        transition: all .15s ease;
    }

    .booking:hover {
        background: #f0f2f4;
        border-color: #d3d7dc;
    }

    /* =========================
       امروز
       ========================= */

    .day-card.today {
        background: #f5fff7;
        border: 2px solid #28a745;
        box-shadow: 0 7px 22px rgba(40,167,69,.13);
    }

    .day-card.today:hover {
        box-shadow: 0 10px 28px rgba(40,167,69,.18);
    }

    .day-card.today h2 {
        color: #198c37;
        border-bottom-color: #c8eacf;
    }

    .day-card.today .add {
        background: #f0fff4;
        border-color: #65bd78;
        color: #168334;
    }

    .day-card.today .add:hover {
        background: #e4f9e9;
    }

    .today-badge {
        display: inline-block;
        margin-right: 5px;
        padding: 3px 9px;

        background: #28a745;
        color: #fff;

        border-radius: 20px;
        font-size: 10px;
        font-weight: normal;
        vertical-align: middle;
    }
}
/* رفع تداخل نوشته‌های داخل کارت‌ها در دسکتاپ */
@media (min-width: 769px) {

    .week-grid {
        gap: 10px;
    }

    .day-card {
        padding: 14px 10px;
        min-width: 0;
        overflow: hidden;
    }

    .day-card h2 {
        font-size: 15px;
        white-space: normal;
        line-height: 1.6;
    }

    /* هر رزرو */
    .booking {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px;
        padding: 12px 10px;
        text-align: right;
        overflow: hidden;
    }

    /* تمام اجزای رزرو زیر هم */
    .booking b,
    .booking span,
    .booking small {
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.7;
        margin: 0;
    }

    /* ساعت و نام مشتری */
    .booking b {
        font-size: 15px;
        font-weight: 700;
    }

    /* نام سیستم */
    .booking span {
        font-size: 13px;
    }

    /* شعبه */
    .booking small {
        font-size: 12px;
        opacity: .7;
    }

    /* نتیجه فروش */
    .booking .sales-result {
        display: inline-block !important;
        width: auto !important;
        align-self: flex-start;
        margin-top: 4px;
        padding: 5px 8px;
        border-radius: 7px;
        font-size: 12px;
    }
}
.booking-status{
    display: inline-block !important;
    width: auto !important;
    margin: 0 8px !important;
    padding: 4px 10px !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

/* رزرو شده */
.status-reserved{
    background: #e8f1ff;
    color: #2563eb;
}

/* مشاوره */
.status-confirmed{
    background: #f3e8ff;
    color: #7e22ce;
}

/* انجام شد */
.status-done{
    background: #dcfce7;
    color: #15803d;
}

/* لغو شد */
.status-cancelled{
    background: #fee2e2;
    color: #b91c1c;
}
.booking-info{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}

.booking-info span,
.booking-info small{
    margin:0 !important;
}
/* ===== Booking Card Layout ===== */

.booking {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}

.booking-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #64748b;
}

.booking-info .separator {
    color: #cbd5e1;
}

.booking-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.booking-status,
.sales-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* رزرو شده */
.booking-status.status-reserved {
    background: #e8f1ff;
    color: #2563eb;
}

/* مشاوره */
.booking-status.status-confirmed {
    background: #f3e8ff;
    color: #7e22ce;
}

/* انجام شد */
.booking-status.status-done {
    background: #dcfce7;
    color: #15803d;
}

/* لغو شد */
.booking-status.status-cancelled {
    background: #fee2e2;
    color: #dc2626;
}

/* منجر به فروش */
.sales-result.sales-sold {
    background: #dcfce7;
    color: #15803d;
}

/* خرید نکرد */
.sales-result.sales-no_sale {
    background: #fef3c7;
    color: #b45309;
}

/* عدم حضور */
.sales-result.sales-no_show {
    background: #fee2e2;
    color: #b91c1c;
}
/* ===== FINAL BOOKING CARD FIX ===== */

.booking .booking-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 4px 0 !important;
    width: 100% !important;
}

.booking .booking-info span,
.booking .booking-info small {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.booking .booking-badges {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 5px !important;
}

.booking .booking-badges small {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

/* جلوگیری از فاصله‌های اضافی */
.booking {
    gap: 8px !important;
}

.booking-title {
    margin: 0 !important;
}

.booking-info .separator {
    display: inline-block !important;
}
/* ===== STATUS BADGES FINAL STYLE ===== */

/* استایل مشترک وضعیت‌ها */
.booking .booking-status,
.booking .sales-result {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* رزرو شده - آبی */
.booking .booking-status.status-reserved {
    background: #e8f1ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

/* مشاوره - بنفش */
.booking .booking-status.status-confirmed {
    background: #f3e8ff !important;
    color: #7e22ce !important;
    border: 1px solid #d8b4fe !important;
}

/* انجام شد - سبز */
.booking .booking-status.status-done {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

/* لغو شد - قرمز */
.booking .booking-status.status-cancelled {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

/* منجر به فروش - سبز */
.booking .sales-result.sales-sold {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

/* خرید نکرد - نارنجی */
.booking .sales-result.sales-no_sale {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
}

/* عدم حضور - قرمز */
.booking .sales-result.sales-no_show {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}