/* ======================================================== */
/* TYPOGRAPHY, BUTTONS & MODULES                            */
/* ======================================================== */
.grid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 24px; }
.metric-card { margin-bottom: 0 !important; }
.metric-card h4 { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.metric-card p { font-size: 1.8rem; font-weight: 700; }
.responsive-panel-grid { display: flex; flex-direction: column; gap: 24px; }
.responsive-panel-grid > .panel { margin-bottom: 0; }
.btn { background-color: var(--accent); color: white; padding: 10px 20px; border-radius: 6px; border: none; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn:hover { background-color: var(--accent-hover); }
.btn-secondary { background-color: transparent; border: 1px solid var(--border); color: var(--text-main); }
.btn-secondary:hover { background-color: #f8fafc; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; border-radius: 4px; }
.btn-danger { background-color: var(--danger); }
.btn-danger:hover { background-color: var(--danger-hover); }
.btn-charcoal { background-color: var(--charcoal); }
.btn-charcoal:hover { background-color: #334155; }
.tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; gap: 24px; }
.tab { padding: 12px 4px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab:hover { color: var(--text-main); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.badge { padding: 4px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-active { background-color: #dcfce7; color: #166534; }
.badge-closed { background-color: #f1f5f9; color: #475569; border: 1px solid var(--border); }
.badge-office { background-color: #e0f2fe; color: #0369a1; }
.badge-online { background-color: #f3e8ff; color: #6b21a8; }
#global-sync-status { display: inline-flex !important; align-items: center !important; justify-content: flex-start; gap: 6px; line-height: 1; }

/* FORMS, INPUTS & TOGGLES */
.form-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group.full-width { grid-column: span 2; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-main); }
.control { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; outline: none; background-color: #f8fafc; }
.control:focus { border-color: var(--accent); background-color: #ffffff; }
.control.flatpickr-input:read-only { background-color: #ffffff; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked+.slider { background-color: var(--accent); }
input:checked+.slider:before { transform: translateX(24px); }
.date-picker-ui, .time-picker-ui { background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px !important; }
.date-picker-ui { background-image: url("data:image/svg+xml,%3Csvg fill='%2364748b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E"); }
.time-picker-ui { background-image: url("data:image/svg+xml,%3Csvg fill='%2364748b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E"); }

/* TABLES & DATA DISPLAY */
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 12px 16px; background-color: #f8fafc; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }
td { padding: 16px; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
tr.clickable:hover td { background-color: #f8fafc; cursor: pointer; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.95rem; font-style: italic; }
.timeline-box { margin-top: 16px; }
.timeline-card { border-left: 3px solid var(--accent); padding-left: 16px; margin-bottom: 24px; position: relative; }
.timeline-meta { display: flex; gap: 12px; align-items: center; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; justify-content: space-between; flex-wrap: wrap; }
td .badge { white-space: nowrap !important; display: inline-block; }
td[data-label="Amount"], td:nth-child(4) { white-space: nowrap !important; }

/* CHARTS */
.chart-container { height: 280px; width: 100%; margin-top: 24px; }
.chart-bar { transition: fill 0.2s; }
.chart-bar:hover { opacity: 0.85; }

/* CALENDAR UI ELEMENTS */
.calendar-container { display: grid; grid-template-columns: 100%; gap: 16px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-day-label { font-weight: 600; font-size: 0.8rem; color: var(--text-muted); text-align: center; padding-bottom: 8px; }
.calendar-cell { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-bg); padding: 4px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.2s; min-height: 80px; overflow-y: auto; overflow-x: hidden; }
.calendar-cell:hover { background-color: #f8fafc; border-color: var(--accent); }
.calendar-cell.inactive { opacity: 0.4; }
.calendar-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #f0f7ff; }
.calendar-cell.selected { border-color: var(--accent); background: #eff6ff; }
.calendar-cell-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.calendar-day-num { font-size: 0.85rem; font-weight: 600; }
.calendar-apt-label { font-size: 0.65rem; padding: 3px 4px; border-radius: 4px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #ffffff; }
.apt-label-online { background-color: #3b82f6; }
.apt-label-office { background-color: #06b6d4; }
.apt-label-completed { background-color: #10b981; }
.apt-label-missed { background-color: #f59e0b; }
.appointment-strip { background: #f8fafc; border-left: 3px solid var(--accent); padding: 12px; border-radius: 6px; margin-bottom: 8px; border: 1px solid var(--border); border-left-width: 3px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.appointment-strip-details { flex: 1; min-width: 150px; }
.appointment-strip-actions { display: flex; gap: 8px; flex-shrink: 0; }
.appointment-strip.completed { border-left-color: var(--success); opacity: 0.7; }
.appointment-strip.cancelled { border-left-color: var(--danger); text-decoration: line-through; opacity: 0.5; }
#upcoming-appointments-list { max-height: 300px; overflow-y: auto; padding-right: 4px; }
#upcoming-appointments-list::-webkit-scrollbar { width: 6px; }
#upcoming-appointments-list::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 4px; }
.flatpickr-calendar { z-index: 10000 !important; font-family: 'Inter', sans-serif; border-radius: 14px !important; box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.35) !important; overflow: hidden; border: none !important; }
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid #e5e7eb !important; }
.flatpickr-time { height: 56px !important; }
.flatpickr-time input { font-size: 1.15rem !important; font-weight: 600 !important; color: #1e293b !important; }
.flatpickr-day.selected { background: var(--accent) !important; border-color: var(--accent) !important; }

/* Component Responsive Overrides */
@media (min-width: 1001px) {
    .responsive-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
    .responsive-panel-grid > .panel { display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin-bottom: 0; }
    .responsive-panel-grid > .panel.full-span { grid-column: span 2; }
    #payment-method-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

    .mobile-only-toggle,
    .mobile-only-arrears,
    .dir-accordion-toggle,
    .dir-mobile-action-cell { display: none !important; }
    .profile-collapsible-section { display: block !important; }
}

@media (max-width: 1000px) {
    .grid-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .grid-metrics .metric-card:last-child { grid-column: span 2 !important; }

    #payment-method-breakdown { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; }
    #payment-method-breakdown .metric-card { flex: 1 1 calc(50% - 12px) !important; min-width: 120px !important; margin-bottom: 0 !important; }

    .form-layout { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    table { display: block; width: 100%; border-collapse: collapse; }
    thead { display: none; }
    tbody, tr, td { display: block; width: 100%; }
    tr { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
    td { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; text-align: right !important; padding: 12px 16px !important; border: none; border-bottom: 1px solid var(--border); position: relative; font-size: 0.95rem; word-break: break-word; }
    td:last-child { border-bottom: none; }
    td::before { content: attr(data-label); position: static !important; left: auto; text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; flex-shrink: 0; margin-right: 16px; width: auto; max-width: 40%; white-space: normal; }
    #view-title, #google-sync-indicator, #global-sync-status { display: block !important; width: 100% !important; flex-basis: 100% !important; margin-top: 4px; text-align: left; }

    .mobile-only-toggle { display: flex !important; }
    .profile-collapsible-section { display: none; }
    .profile-collapsible-section.expanded { display: block; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }

    .dir-desktop-only { display: none !important; }
    tr.dir-row .dir-mobile-hidden { display: none !important; }
    tr.dir-row.mobile-expanded .dir-mobile-hidden { display: flex !important; }
    tr.dir-row td.dir-name-cell { border-bottom: none !important; padding: 12px 16px !important; }
    tr.dir-row.mobile-expanded td.dir-name-cell { border-bottom: 1px solid var(--border) !important; }
    tr.dir-row td.dir-name-cell::before { display: none !important; }
    tr.dir-row td.dir-mobile-action-cell::before { display: none !important; }
    tr.dir-row td.dir-mobile-action-cell { border-bottom: none !important; padding: 12px 16px !important; }
}