* { box-sizing: border-box; margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; }
body { background: #fafafa; }

.page { display: flex; width: 100%; min-height: 100vh; }

/* SIDEBAR */
.sidebar { width: 295px; border-right: 1px solid #d7e2ee; padding: 0 16px; background: #fff; flex-shrink: 0; position: relative; }
.sidebar-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 8px 12px; }
.logo { width: 132px; height: 32px; object-fit: contain; }
.collapse-btn { background: none; border: none; cursor: pointer; padding: 4px; }
.btn-create-outline { width: 100%; height: 44px; margin-top: 18px; background: #fff; border: 1px solid #567b9a; border-radius: 30px; color: #062642; font-size: 15px; font-weight: 600; cursor: pointer; }
.sidebar-modal { display: none; position: absolute; top: 174px; left: 16px; width: 263px; background: #fff; border: 1px solid #d7e2ee; border-radius: 10px; box-shadow: 0 8px 24px rgba(10,37,64,.12); z-index: 100; padding: 16px 0; }
.sidebar-modal.visible { display: block; }
.sm-title { font-size: 12px; font-weight: 700; color: #0a2540; padding: 0 16px 10px 16px; display: block; }
.sm-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 16px; cursor: pointer; }
.sm-item:hover { background: #f3f8ff; }
.sm-name { font-size: 13px; font-weight: 600; color: #006bff; display: block; }
.sm-desc { font-size: 12px; color: #0a2540; display: block; }
.sm-hint { font-size: 11px; color: #476788; display: block; }
.menu { margin-top: 25px; display: flex; flex-direction: column; gap: 6px; }
.menu-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: #062642; font-size: 16px; font-weight: 600; }
.menu-item.active { background: #f3f8ff; color: #006bff; }

/* MAIN */
.main { flex: 1; padding: 28px 32px 40px; background: #fff; }
.top-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
h1 { font-size: 34px; font-weight: 600; color: #0a2540; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.avatar-letter { width: 28px; height: 28px; border-radius: 50%; background: #e7edf6; color: #0a2540; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.header-icons-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* TABS */
.av-tabs { display: flex; gap: 0; border-bottom: 1px solid #d7e2ee; margin-bottom: 24px; margin-top: 8px; }
.av-tab { text-decoration: none; color: #476788; font-size: 14px; font-weight: 600; padding: 12px 20px 12px 0; margin-right: 20px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.av-tab.active { color: #0a2540; border-bottom-color: #006bff; }

/* CARD */
.av-card { border: 1px solid #d7e2ee; border-radius: 10px; overflow: hidden; }
.av-card-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #d7e2ee; }
.av-card-left { display: flex; align-items: center; gap: 10px; }
.av-schedule-label { font-size: 11px; font-weight: 700; color: #476788; text-transform: uppercase; letter-spacing: .05em; }
.av-dot { color: #d7e2ee; font-size: 18px; }
.av-dropdown-btn { background: none; border: none; color: #006bff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.av-dropdown-btn:hover { color: #0052cc; }
.av-card-right { display: flex; align-items: center; gap: 4px; }
.av-view-btn { background: #fff; border: 1px solid #d7e2ee; padding: 6px 14px; font-size: 13px; color: #0a2540; cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: 500; }
.av-view-btn:first-child { border-radius: 6px 0 0 6px; }
.av-view-btn:nth-child(2) { border-radius: 0 6px 6px 0; border-left: none; }
.av-view-btn.active { background: #f3f8ff; }
.av-more-btn { background: none; border: none; cursor: pointer; padding: 6px 8px; color: #476788; }

/* WARNING */
.av-warning { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: 13px; color: #92400e; }

/* HOURS GRID */
.av-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.av-weekly { padding: 24px 28px; }
.av-date-specific { padding: 24px 28px; }
.av-section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #0a2540; margin-bottom: 4px; }
.av-section-sub { font-size: 13px; color: #476788; margin-bottom: 20px; }

/* DAY ROWS */
.av-day-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f4f8; }
.av-day-row:last-of-type { border-bottom: none; }
.av-day-circle { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.av-day-circle.gray { background: #1e2e40; color: #fff; }
.av-unavailable { font-size: 14px; color: #476788; }
.av-plus-btn { background: none; border: none; cursor: pointer; color: #476788; padding: 2px; display: flex; align-items: center; line-height: 1; }
.av-plus-btn:hover { color: #006bff; }
.av-plus-btn svg { width: 18px; height: 18px; }

.av-timezone-btn { background: none; border: none; color: #006bff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-top: 20px; }
.av-timezone-btn:hover { color: #0052cc; }

.av-add-hours-btn { margin-top: 8px; background: #fff; border: 1px solid #d7e2ee; border-radius: 20px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #0a2540; cursor: pointer; }
.av-add-hours-btn:hover { background: #f3f8ff; }

/* TIME SLOTS */
.av-slots { display: flex; flex-direction: column; gap: 6px; }
.av-slot-row { display: flex; align-items: center; gap: 6px; }
.av-time-wrap { position: relative; }
.av-time-btn { border: 1px solid #d7e2ee; border-radius: 6px; padding: 6px 12px; font-size: 14px; color: #0a2540; background: #fff; cursor: pointer; min-width: 72px; text-align: center; font-weight: 500; }
.av-time-btn:hover { border-color: #006bff; }
.av-time-btn.active { border-color: #006bff; border-width: 2px; outline: none; }
.av-dash { font-size: 14px; color: #476788; }
.av-slot-btn { background: none; border: none; cursor: pointer; color: #476788; padding: 4px; display: flex; align-items: center; }
.av-slot-btn:hover { color: #0a2540; }

/* TIME DROPDOWN */
.av-time-dropdown { position: absolute; z-index: 500; background: #fff; border: 1px solid #d7e2ee; border-radius: 8px; box-shadow: 0 8px 24px rgba(10,37,64,.12); max-height: 220px; overflow-y: auto; width: 110px; }
.av-time-opt { padding: 8px 16px; font-size: 14px; color: #0a2540; cursor: pointer; }
.av-time-opt:hover { background: #f3f8ff; }
.av-time-opt.selected { background: #e8f0fe; color: #006bff; font-weight: 600; }
/* ---- COLLAPSED SIDEBAR ---- */
.logo-icon { display: none; width: 28px; height: 28px; }
.sidebar.collapsed { width: 72px; padding: 0 8px; transition: width 0.2s; }
.sidebar.collapsed .logo { display: none; }
.sidebar.collapsed .logo-icon { display: block; }
.sidebar.collapsed .logo { display: none; }
.sidebar.collapsed .sidebar-top { justify-content: space-between; padding: 16px 6px 12px 6px; }
.sidebar.collapsed .btn-create-outline { width: 40px; height: 40px; min-width: 0; border-radius: 50%; font-size: 0; padding: 0; margin-top: 14px; margin-left: auto; margin-right: auto; display: block; }
.sidebar.collapsed .btn-create-outline::before { content: '+'; font-size: 20px; color: #062642; font-weight: 400; line-height: 1; }
.sidebar.collapsed .menu { margin-top: 14px; }
.sidebar.collapsed .menu-item { justify-content: center; padding: 8px; gap: 0; }
.sidebar.collapsed .menu-item span { display: none; }
.sidebar.collapsed .collapse-btn img { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-modal { left: 76px; top: 60px; }

/* ---- PROFILE DROPDOWN ---- */
.profile-dropdown { display: none; position: fixed; top: 60px; right: 16px; width: 220px; background: #fff; border: 1px solid #d7e2ee; border-radius: 10px; box-shadow: 0 8px 24px rgba(10,37,64,.12); z-index: 500; padding: 6px 0; }
.profile-dropdown.visible { display: block; }
.pd-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: #0a2540; cursor: pointer; text-decoration: none; }
.pd-item:hover { background: #f3f8ff; }
.pd-divider { height: 1px; background: #d7e2ee; margin: 4px 0; }
.header-icons-row { cursor: pointer; }

/* THREE DOTS DROPDOWN */
.av-more-wrap { position: relative; }
.av-more-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #d7e2ee; border-radius: 8px; box-shadow: 0 4px 16px rgba(10,37,64,.1); min-width: 140px; padding: 4px 0; z-index: 100; }
.av-more-dropdown.open { display: block; }
.av-more-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; color: #0a2540; cursor: pointer; }
.av-more-item:hover { background: #f3f8ff; }

/* RENAME MODAL */
.av-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,37,64,.35); z-index: 400; align-items: center; justify-content: center; }
.av-modal-overlay.open { display: flex; }
.av-modal { background: #fff; border-radius: 14px; padding: 28px 32px; width: 420px; max-width: 90vw; }
.av-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.av-modal-header h3 { font-size: 20px; font-weight: 700; color: #0a2540; }
.av-modal-close { background: none; border: none; cursor: pointer; color: #476788; padding: 4px; }
.av-modal-close:hover { color: #0a2540; }
.av-modal-body label { font-size: 13px; font-weight: 600; color: #0a2540; display: block; margin-bottom: 8px; }
.av-modal-input-wrap { position: relative; }
.av-modal-input-wrap input { width: 100%; border: 2px solid #006bff; border-radius: 8px; padding: 10px 38px 10px 14px; font-size: 15px; color: #0a2540; outline: none; font-family: inherit; }
.av-input-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9fb3c8; padding: 2px; display: flex; align-items: center; }
.av-input-clear:hover { color: #476788; }
.av-modal-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.av-modal-cancel { background: #fff; border: 1.5px solid #d7e2ee; border-radius: 24px; padding: 10px 28px; font-size: 14px; font-weight: 600; color: #0a2540; cursor: pointer; }
.av-modal-cancel:hover { background: #f3f8ff; }
.av-modal-save { background: #006bff; border: none; border-radius: 24px; padding: 10px 28px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.av-modal-save:hover { background: #0052cc; }

/* DATE SPECIFIC MODAL */
.av-date-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,37,64,.35); z-index: 500; align-items: center; justify-content: center; }
.av-date-modal-overlay.open { display: flex; }
.av-date-modal { background: #fff; border-radius: 14px; padding: 28px 32px 24px; width: 420px; max-width: 92vw; }
.av-date-modal h3 { font-size: 18px; font-weight: 700; color: #0a2540; line-height: 1.35; margin-bottom: 20px; }
.av-date-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.av-date-cal-nav span { font-size: 15px; font-weight: 600; color: #0a2540; }
.av-date-cal-arrows { display: flex; gap: 4px; }
.av-date-nav { background: none; border: 1px solid #d7e2ee; border-radius: 6px; cursor: pointer; color: #476788; font-size: 20px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.av-date-nav:hover { background: #f3f8ff; color: #0a2540; }
.av-date-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 6px; }
.av-date-cal-weekdays span { font-size: 11px; font-weight: 700; color: #476788; padding: 4px 0; }
.av-date-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px 0; margin-bottom: 24px; }
.av-date-day { font-size: 13px; color: #0a2540; padding: 7px 4px; cursor: pointer; border-radius: 50%; position: relative; margin: 1px auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.av-date-day:hover:not(.empty) { background: #e8f0fe; }
.av-date-day.today::after { content: ''; width: 4px; height: 4px; background: #006bff; border-radius: 50%; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); }
.av-date-day.selected { background: #006bff; color: #fff; border-radius: 50%; }
.av-date-day.selected::after { background: #fff; }
.av-date-day.empty { cursor: default; pointer-events: none; }
.av-date-modal-footer { display: flex; gap: 12px; justify-content: space-between; }
.av-date-cancel { flex: 1; background: #fff; border: 1.5px solid #d7e2ee; border-radius: 24px; padding: 11px 0; font-size: 14px; font-weight: 600; color: #0a2540; cursor: pointer; }
.av-date-cancel:hover { background: #f3f8ff; }
.av-date-apply { flex: 1; background: #006bff; border: none; border-radius: 24px; padding: 11px 0; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.av-date-apply:hover { background: #0052cc; }

/* DATE SPECIFIC LIST ENTRIES */
.av-ds-entry { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f4f8; margin-top: 8px; font-size: 14px; color: #0a2540; font-weight: 500; }
.av-ds-date { min-width: 64px; }
.av-ds-remove { background: none; border: none; cursor: pointer; color: #476788; padding: 2px; display: flex; align-items: center; margin-left: auto; }
.av-ds-remove:hover { color: #dc2626; }

/* DATE MODAL HOURS SECTION */
.av-date-hours-section { border-top: 1px solid #e8edf3; margin-top: 8px; padding-top: 16px; margin-bottom: 20px; }
.av-date-hours-label { font-size: 14px; font-weight: 600; color: #0a2540; margin-bottom: 10px; }
.av-date-slot-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* DATE SPECIFIC YEAR HEADER */
.av-ds-year { font-size: 13px; font-weight: 600; color: #0a2540; margin-top: 12px; margin-bottom: 4px; }
.av-ds-entry { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; font-size: 14px; color: #0a2540; background: #f8fafc; margin-bottom: 4px; }
.av-ds-date { font-weight: 500; min-width: 80px; }
.av-ds-time { color: #476788; flex: 1; }
.av-ds-remove { background: none; border: none; cursor: pointer; color: #9fb3c8; padding: 2px; display: flex; align-items: center; margin-left: auto; }
.av-ds-remove:hover { color: #dc2626; }

/* SCHEDULE DROPDOWN */
.av-sched-wrap { position: relative; display: inline-block; }
.av-sched-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid #d7e2ee; border-radius: 10px; box-shadow: 0 8px 24px rgba(10,37,64,.12); z-index: 200; padding: 6px 0; }
.av-sched-dropdown.open { display: block; }
.av-sched-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 14px; color: #0a2540; cursor: pointer; }
.av-sched-item:hover { background: #f3f8ff; }
.av-sched-create { color: #006bff; font-weight: 600; gap: 8px; justify-content: flex-start; }
.av-sched-divider { height: 1px; background: #d7e2ee; margin: 4px 0; }
.av-sched-check { color: #006bff; }