/* ══════════════════════════════════════════════════════════════ Availability Module CSS تمام متغیرها و کلاس‌ها با پیشوند avail- نام‌گذاری شده‌اند تا با CSS بقیه ماژول‌های پروژه Faradanesh تداخل نداشته باشند. اگر پروژه اصلی از قبل [data-theme="dark"] روی ست می‌کند، این فایل به‌صورت خودکار با آن هماهنگ می‌شود. ══════════════════════════════════════════════════════════════ */ :root { --avail-c-bg: #f5f5f3; --avail-c-surface: #ffffff; --avail-c-border: rgba(0,0,0,0.08); --avail-c-border-strong: rgba(0,0,0,0.14); --avail-c-text: #1a1a18; --avail-c-text-2: #5a5a56; --avail-c-text-3: #9a9994; --avail-c-accent: #2563eb; --avail-c-accent-bg: #eff6ff; --avail-c-accent-text: #1d4ed8; --avail-c-accent-border: #bfdbfe; --avail-c-success: #16a34a; --avail-c-success-bg: #f0fdf4; --avail-c-success-text: #15803d; --avail-c-success-border: #bbf7d0; --avail-c-warning: #d97706; --avail-c-warning-bg: #fffbeb; --avail-c-warning-text: #b45309; --avail-c-warning-border: #fde68a; --avail-c-danger: #dc2626; --avail-c-danger-bg: #fef2f2; --avail-c-danger-text: #b91c1c; --avail-radius-sm: 6px; --avail-radius: 10px; --avail-radius-lg: 14px; --avail-transition: 0.15s ease; } [data-theme="dark"] { --avail-c-bg: #15161a; --avail-c-surface: #1c1d22; --avail-c-border: rgba(255,255,255,0.08); --avail-c-border-strong: rgba(255,255,255,0.14); --avail-c-text: #f1f1ef; --avail-c-text-2: #b3b3ad; --avail-c-text-3: #76766f; --avail-c-accent-bg: rgba(37,99,235,0.14); --avail-c-success-bg: rgba(22,163,74,0.14); --avail-c-warning-bg: rgba(217,119,6,0.14); --avail-c-danger-bg: rgba(220,38,38,0.14); } .avail-page-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .avail-page-title { font-size: 19px; font-weight: 600; color: var(--avail-c-text); } .avail-page-desc { font-size: 12.5px; color: var(--avail-c-text-2); margin-top: 3px; } .avail-hdr-actions { display: flex; gap: 8px; } .avail-select { height: 34px; border: 1px solid var(--avail-c-border-strong); border-radius: var(--avail-radius-sm); padding: 0 12px; font-size: 12px; background: var(--avail-c-surface); font-family: inherit; color: var(--avail-c-text); } .avail-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--avail-radius-sm); border: 1px solid var(--avail-c-border-strong); background: var(--avail-c-surface); color: var(--avail-c-text); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background var(--avail-transition), opacity var(--avail-transition); } .avail-btn:disabled { opacity: 0.5; cursor: not-allowed; } .avail-btn-primary { background: var(--avail-c-accent); border-color: var(--avail-c-accent); color: #fff; } .avail-btn-primary:hover:not(:disabled) { background: var(--avail-c-accent-text); } .avail-spin { animation: avail-spin 0.8s linear infinite; } @keyframes avail-spin { to { transform: rotate(360deg); } } .avail-loading { display: flex; align-items: center; gap: 8px; color: var(--avail-c-text-2); padding: 40px 0; justify-content: center; font-size: 13px; } /* ── Card ── */ .avail-card { background: var(--avail-c-surface); border: 1px solid var(--avail-c-border); border-radius: var(--avail-radius-lg); overflow: hidden; } .avail-mb-16 { margin-bottom: 16px; } .avail-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--avail-c-border); } .avail-card-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--avail-c-text); } .avail-card-body { padding: 16px; } .avail-card-body-flush { padding: 0; overflow-x: auto; } /* ── Legend / Badge ── */ .avail-legend { display: flex; gap: 6px; } .avail-badge { font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 20px; border: 1px solid transparent; } .avail-b-success { background: var(--avail-c-success-bg); color: var(--avail-c-success-text); border-color: var(--avail-c-success-border); } .avail-b-accent { background: var(--avail-c-accent-bg); color: var(--avail-c-accent-text); border-color: var(--avail-c-accent-border); } .avail-b-warning { background: var(--avail-c-warning-bg); color: var(--avail-c-warning-text); border-color: var(--avail-c-warning-border); } .avail-b-gray { background: #f4f4f2; color: #5a5a56; border-color: #e0e0dc; } .avail-b-danger { background: var(--avail-c-danger-bg); color: var(--avail-c-danger-text); border-color: var(--avail-c-danger-border); } /* ── Week grid ── */ .avail-week-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); font-size: 11px; } .avail-week-head { text-align: center; padding: 8px 4px; font-weight: 600; color: var(--avail-c-text-2); border-bottom: 1px solid var(--avail-c-border); } .avail-week-head.avail-time-col { color: var(--avail-c-text-3); } .avail-week-cell { padding: 3px; border-bottom: 1px solid var(--avail-c-border); border-right: 1px solid var(--avail-c-border); } .avail-week-cell.avail-time-col { padding: 6px 8px; color: var(--avail-c-text-3); text-align: left; border-right: 1px solid var(--avail-c-border-strong); } .avail-week-slot { height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; cursor: pointer; transition: opacity 0.1s; user-select: none; } .avail-week-slot:hover { opacity: 0.8; } .avail-slot-free { background: var(--avail-c-success-bg); color: var(--avail-c-success-text); border: 1px solid var(--avail-c-success-border); } .avail-slot-class { background: var(--avail-c-accent-bg); color: var(--avail-c-accent-text); border: 1px solid var(--avail-c-accent-border); } .avail-slot-rest { background: var(--avail-c-warning-bg); color: var(--avail-c-warning-text); border: 1px solid var(--avail-c-warning-border); } .avail-slot-misc { background: #f4f4f2; color: #5a5a56; border: 1px solid #e0e0dc; } .avail-slot-empty { background: transparent; } /* ── Progress bars ── */ .avail-prog-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .avail-prog-label { width: 52px; font-size: 12px; color: var(--avail-c-text-2); flex-shrink: 0; } .avail-prog-track { flex: 1; height: 6px; background: var(--avail-c-bg); border-radius: 3px; overflow: hidden; } .avail-prog-fill { height: 100%; border-radius: 3px; transition: width 0.2s ease; background: var(--avail-c-accent); } .avail-prog-green { background: var(--avail-c-success); } .avail-prog-accent { background: var(--avail-c-accent); } .avail-prog-warning { background: var(--avail-c-warning); } .avail-prog-gray { background: #888; } .avail-prog-val { width: 40px; text-align: left; font-size: 11.5px; color: var(--avail-c-text-3); flex-shrink: 0; } /* ── Capacity card ── */ .avail-capacity { text-align: center; padding: 10px 0; } .avail-capacity-num { font-size: 36px; font-weight: 600; color: var(--avail-c-accent); } .avail-capacity-label { font-size: 13px; color: var(--avail-c-text-2); margin-top: 4px; } .avail-divider { height: 1px; background: var(--avail-c-border); margin: 16px 0; } .avail-capacity-note { font-size: 12px; color: var(--avail-c-text-3); line-height: 1.8; } .avail-capacity-warning { margin-top: 10px; color: var(--avail-c-warning-text); display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 11.5px; } /* ── Grid layout ── */ .avail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── Toast ── */ .avail-toast-wrap { position: fixed; bottom: 24px; left: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .avail-toast { display: flex; align-items: center; gap: 10px; background: var(--avail-c-text); color: #fff; padding: 12px 16px; border-radius: var(--avail-radius); font-size: 13px; font-weight: 500; cursor: pointer; animation: avail-slide-up 0.25s ease; } @keyframes avail-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — همان breakpointهای نسخه HTML اصلی (1024px / 720px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .avail-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .avail-page-hdr { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; } .avail-page-title { font-size: 17px; } .avail-hdr-actions { flex-wrap: wrap; } .avail-hdr-actions .avail-select { flex: 1; } .avail-hdr-actions .avail-btn { flex: 1; justify-content: center; } .avail-card-head { padding: 13px 14px; } .avail-card-body { padding: 14px; } .avail-week-grid { font-size: 9px; grid-template-columns: repeat(7, 1fr); } .avail-week-cell.avail-time-col, .avail-week-head.avail-time-col { display: none; } .avail-week-slot { height: 22px; font-size: 8px; } .avail-toast-wrap { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; } .avail-toast { width: 100%; } } @media (max-width: 380px) { .avail-grid-2 { grid-template-columns: 1fr; } }