:root {
  --bg: #f6f7fb; --surface: #fff; --surface-soft: #f1f3f8; --line: #e3e7ef; --text: #121927; --muted: #667085;
  --primary: #444fd7; --primary-dark: #343db2; --blue-soft: #eef0ff; --green: #22a06b; --green-soft: #e7f8ef;
  --orange: #e88a2b; --orange-soft: #fff2e2; --red: #dd5d65; --red-soft: #ffedef; --shadow: 0 16px 40px rgba(32, 43, 74, .08); --radius: 18px;
}
/* Mail owns the available viewport; other CRM views keep their existing shell. */
@media (max-height: 600px) {
  body.mail-view-active .app-screen { min-height: 680px !important; }
  body.mail-view-active .main-content { min-height: 680px; }
}
body:is(.mail-view-active, [data-view="mail"]) .app-screen { height: 100vh; height: 100dvh; min-height: 0; }
body:is(.mail-view-active, [data-view="mail"]) .main-content { display: flex; flex-direction: column; min-height: 0; height: 100%; }
body:is(.mail-view-active, [data-view="mail"]) .topbar { height: 64px; flex: 0 0 64px; padding-right: 24px; padding-left: 24px; }
body:is(.mail-view-active, [data-view="mail"]) .page-content { display: flex; flex: 1; flex-direction: column; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 18px 24px 16px; overflow: hidden; }
body:is(.mail-view-active, [data-view="mail"]) #view-mail.active { display: flex; flex: 1; flex-direction: column; min-height: 0; }
body:is(.mail-view-active, [data-view="mail"]) .sidebar { min-height: 0; overflow-y: auto; }
@media (max-width: 1024px) {
  body:is(.mail-view-active, [data-view="mail"]) .sidebar { position: fixed; z-index: 15; inset: 0 auto 0 0; width: min(280px, 90vw); transform: translateX(-105%); box-shadow: 20px 0 60px #080e1c33; }
  body:is(.mail-view-active, [data-view="mail"]) .sidebar.open { transform: translateX(0); }
  body:is(.mail-view-active, [data-view="mail"]) :is(.sidebar-close, .menu-toggle) { display: grid; min-width: 44px; min-height: 44px; }
  body:is(.mail-view-active, [data-view="mail"]) .sidebar-scrim { position: fixed; z-index: 14; inset: 0; background: #0e15246b; }
  body:is(.mail-view-active, [data-view="mail"]) .page-content { padding: 14px 16px 12px; }
}
@media (max-width: 540px) {
  body:is(.mail-view-active, [data-view="mail"]) .topbar { height: 56px; flex-basis: 56px; gap: 8px; padding: 0 10px; }
  body:is(.mail-view-active, [data-view="mail"]) .page-content { padding: 10px 8px max(8px, env(safe-area-inset-bottom)); }
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; color: var(--text); background: var(--bg); font: 14px/1.5 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; border: 0; } a { color: var(--primary); text-decoration: none; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { font-family: "Space Grotesk", Manrope, sans-serif; }
.hidden { display: none !important; }
.muted, .hint { color: var(--muted); } .hint { font-size: 11px; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 32px; overflow: hidden; position: relative; background: radial-gradient(circle at 82% 13%, #e6e9ff 0, transparent 28%), radial-gradient(circle at 18% 88%, #e7f2ff 0, transparent 26%), #fbfcff; }
.auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; } .auth-orb-one { width: 300px; height: 300px; right: -100px; top: 20%; background: #cfd4ff; } .auth-orb-two { width: 190px; height: 190px; left: 7%; bottom: 8%; background: #d9eef9; }
.auth-card { position: relative; z-index: 1; width: min(100%, 460px); padding: 42px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.9); border-radius: 28px; box-shadow: 0 30px 80px rgba(49, 64, 112, .13); backdrop-filter: blur(18px); }
.brand { font: 700 21px "Space Grotesk", sans-serif; letter-spacing: -.08em; white-space: nowrap; color: #171d2a; } .brand span { color: #171d2a; } .brand b { color: var(--primary); font-weight: 700; } .brand-centered { text-align: center; font-size: 28px; margin-bottom: 32px; }
.auth-kicker { color: var(--primary); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; } .auth-card h1 { font-size: 30px; letter-spacing: -.04em; margin-bottom: 6px; } .auth-card > .muted { margin-bottom: 28px; }
.stack-form { display: grid; gap: 16px; } label { display: grid; gap: 8px; font-size: 12px; font-weight: 800; color: #505a6d; } input, select, textarea { width: 100%; color: var(--text); border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 12px 13px; outline: none; transition: .2s; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(89,102,242,.1); } textarea { min-height: 100px; resize: vertical; } .password-field { position: relative; } .password-field input { padding-right: 42px; } .password-field .icon-button { position: absolute; right: 3px; top: 3px; height: 38px; width: 38px; }
.form-row { display: flex; align-items: center; gap: 12px; } .form-row-between { justify-content: space-between; } .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--primary); color: white; padding: 12px 18px; border-radius: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(89,102,242,.24); transition: .2s; } .primary-button:hover { background: var(--primary-dark); transform: translateY(-1px); } .full-width { width: 100%; } .secondary-button, .soft-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 15px; border-radius: 11px; background: var(--surface-soft); color: var(--text); font-weight: 800; } .secondary-button { border: 1px solid var(--line); background: white; } .soft-button:hover, .secondary-button:hover { background: #e9ecf6; } .danger-button { background: var(--red-soft); color: #b33a49; }
.icon-button { display: inline-grid; place-items: center; background: transparent; color: inherit; border-radius: 9px; } .icon-button:hover { background: var(--surface-soft); } .auth-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: center; }
.app-screen { min-height: 100vh; display: flex; } .sidebar { width: 258px; display: flex; flex-direction: column; flex: 0 0 258px; padding: 29px 18px 18px; background: #111827; color: #a9b0c0; } .sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 9px; } .sidebar .brand { color: #fff; } .sidebar .brand span { color: #fff; } .sidebar .brand b { color: #7b87ff; } .sidebar-close { display: none; color: white; font-size: 22px; }.workspace-label { padding: 45px 9px 14px; color: #626e85; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.main-nav { display: grid; gap: 7px; } .nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 12px; color: #a5afc1; background: transparent; border-radius: 12px; font-weight: 700; text-align: left; } .nav-item:hover { color: #fff; background: #1b2436; } .nav-item.active { color: #fff; background: #27324b; box-shadow: inset 3px 0 var(--primary); } .nav-icon { display: grid; place-items: center; width: 22px; font-size: 17px; } .nav-count { margin-left: auto; padding: 1px 7px; border-radius: 20px; background: #33415f; color: #cdd2ff; font-size: 11px; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid #273046; padding-top: 17px; } .profile-mini { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; text-align: left; color: #fff; background: transparent; border-radius: 12px; } .profile-mini:hover { background: #1b2436; } .profile-mini-copy { display: grid; gap: 1px; min-width: 0; flex: 1; } .profile-mini-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-mini-copy small { color: #75819a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .more { color: #6f7a91; letter-spacing: 2px; }.logout-button { width: 100%; color: #7c87a0; text-align: left; background: transparent; padding: 14px 11px 4px; } .logout-button:hover { color: #fff; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #dfe4ff, #abb6ff); color: #3843a9; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; } .avatar-small { width: 38px; height: 38px; font-size: 14px; } .avatar-top { width: 38px; height: 38px; font-size: 14px; }
.main-content { min-width: 0; flex: 1; } .topbar { height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 38px; background: rgba(255,255,255,.8); border-bottom: 1px solid var(--line); } .breadcrumbs { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: 13px; } .breadcrumbs b { min-width: 0; max-width: min(38vw, 360px); overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-dot { color: #c1c7d2; } .breadcrumb-mail-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: 12px; } .notification-button { position: relative; width: 38px; height: 38px; font-size: 19px; color: #637087; } .notification-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.menu-toggle { display: none; font-size: 19px; } .page-content { max-width: 1450px; padding: 38px; margin: auto; } .view { display: none; } .view.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .eyebrow { color: var(--primary); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; } .page-heading h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.05em; } .page-heading p { margin-top: 8px; color: var(--muted); } .heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .metric-card { min-width: 0; padding: 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(25,36,66,.035); } .metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: var(--muted); font-weight: 700; } .metric-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--primary); background: var(--blue-soft); } .metric-card strong { display: block; min-width: 0; margin-top: 17px; font: 700 28px "Space Grotesk", sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; } .metric-card small { display: block; margin-top: 4px; color: var(--muted); }
.content-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } .panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgba(25,36,66,.035); } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); } .panel-header h2 { font-size: 17px; letter-spacing: -.03em; } .panel-header small { color: var(--muted); } .panel-body { padding: 20px 22px; }
.list { display: grid; } .list-row { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid #eef0f4; } .list-row:last-child { border-bottom: 0; } .list-copy { min-width: 0; flex: 1; } .list-copy b, .list-copy small { display: block; } .list-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-copy small { color: var(--muted); margin-top: 2px; } .list-amount { font-weight: 800; white-space: nowrap; } .empty-state { padding: 34px 12px; text-align: center; color: var(--muted); } .empty-state strong { display: block; color: var(--text); margin-bottom: 5px; } .empty-state .primary-button { margin-top: 16px; }
.search-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .search-wrap { position: relative; flex: 1 1 250px; } .search-wrap input { padding-left: 38px; } .search-wrap span { position: absolute; left: 14px; top: 10px; color: var(--muted); font-size: 17px; } .small-control { width: auto; min-width: 135px; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 12px 16px; color: var(--muted); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } td { padding: 16px; border-top: 1px solid #edf0f5; vertical-align: middle; } tr.clickable { cursor: pointer; } tr.clickable:hover { background: #fafbff; } .client-cell { display: flex; align-items: center; gap: 11px; min-width: 190px; } .client-cell b, .client-cell small { display: block; } .client-cell small { color: var(--muted); margin-top: 2px; } .table-actions { display: flex; justify-content: flex-end; gap: 6px; } .link-button { background: transparent; color: var(--primary); font-weight: 800; padding: 5px; } .link-button:hover { text-decoration: underline; }
.status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 30px; font-size: 11px; font-weight: 800; white-space: nowrap; } .status-new, .status-work { background: var(--blue-soft); color: #5865ce; } .status-debt, .status-late { background: var(--red-soft); color: #bd4858; } .status-inactive, .status-closed { background: #eef0f3; color: #687183; } .status-paid { background: var(--green-soft); color: #188053; }
.calendar-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } .calendar-panel { min-width: 0; } .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; } .calendar-toolbar h2 { font-size: 21px; } .calendar-nav { display: flex; gap: 5px; } .calendar-nav button { width: 34px; height: 34px; border-radius: 10px; background: white; border: 1px solid var(--line); } .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .calendar-weekday { padding: 0 7px 8px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .calendar-day { min-height: 94px; padding: 9px; background: white; border: 1px solid var(--line); border-radius: 12px; text-align: left; } .calendar-day.muted-day { background: #fafbfc; color: #bec4cf; } .calendar-day.today { border: 2px solid var(--primary); padding: 8px; } .day-number { font-weight: 800; } .day-event { overflow: hidden; margin-top: 7px; padding: 4px 6px; border-radius: 5px; background: var(--blue-soft); color: #515cc5; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .event-list { display: grid; gap: 10px; } .event-item { padding: 13px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 11px; background: #fff; } .event-item.done { opacity: .55; border-left-color: var(--green); } .event-item b, .event-item small { display: block; } .event-item small { color: var(--muted); margin-top: 4px; } .event-item-actions { display: flex; gap: 7px; margin-top: 9px; }
.report-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 18px; } .report-controls label { min-width: 150px; } .report-presets { display: flex; gap: 6px; padding-bottom: 1px; } .preset-button { padding: 9px 11px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 12px; font-weight: 800; } .preset-button.active { color: var(--primary); background: var(--blue-soft); } .report-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .report-card { padding: 18px; background: white; border: 1px solid var(--line); border-radius: 14px; } .report-card small { color: var(--muted); } .report-card strong { display: block; margin-top: 8px; font: 700 23px "Space Grotesk"; } .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bar-chart { display: flex; align-items: flex-end; gap: 8px; min-height: 200px; padding-top: 25px; } .bar-column { display: grid; grid-template-rows: 1fr auto; gap: 8px; flex: 1; align-self: stretch; min-width: 0; } .bar-track { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 160px; background: linear-gradient(to top, #f2f4fa 1px, transparent 1px); background-size: 100% 40px; border-radius: 7px 7px 0 0; } .bar { width: min(30px, 70%); min-height: 3px; background: linear-gradient(180deg, #7782ff, #5360e9); border-radius: 7px 7px 2px 2px; } .bar-label { overflow: hidden; color: var(--muted); font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .bar-value { position: absolute; top: -21px; color: var(--muted); font-size: 9px; }
.report-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.report-card-top .metric-icon { flex: 0 0 34px; }
.report-card-top small { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.modal-layer { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 22px; } .modal-backdrop { position: absolute; inset: 0; background: rgba(14, 21, 36, .5); backdrop-filter: blur(4px); } .modal { position: relative; z-index: 1; width: min(100%, 650px); max-height: min(92vh, 820px); overflow: auto; padding: 25px; background: #fff; border-radius: 20px; box-shadow: 0 22px 70px rgba(15, 24, 44, .23); } .modal-large { width: min(100%, 980px); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 21px; } .modal-header h2 { font-size: 23px; letter-spacing: -.04em; } .modal-header p { color: var(--muted); margin-top: 5px; } .modal-close { width: 34px; height: 34px; font-size: 23px; color: var(--muted); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .form-grid .full { grid-column: 1 / -1; } .modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); } .segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-soft); border-radius: 11px; } .segmented button { padding: 7px 10px; border-radius: 8px; color: var(--muted); background: transparent; font-weight: 800; font-size: 12px; } .segmented button.active { color: var(--primary); background: #fff; box-shadow: 0 2px 8px rgba(20,30,60,.08); }
.client-detail-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .client-detail-header .avatar { width: 54px; height: 54px; font-size: 20px; } .client-detail-header h2 { font-size: 25px; } .client-detail-header p { color: var(--muted); margin-top: 3px; } .client-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 17px; border-bottom: 1px solid var(--line); } .client-tab { padding: 10px 12px; color: var(--muted); border-bottom: 2px solid transparent; background: transparent; font-weight: 800; white-space: nowrap; } .client-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .detail-tab { display: none; } .detail-tab.active { display: block; } .document-card { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 12px; } .document-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #d95160; background: var(--red-soft); border-radius: 10px; font-size: 11px; font-weight: 900; } .document-copy { min-width: 0; flex: 1; } .document-copy b, .document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .document-copy small { color: var(--muted); margin-top: 3px; } .detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } .finance-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 15px; } .finance-summary > div { padding: 13px; border-radius: 11px; background: var(--surface-soft); } .finance-summary small, .finance-summary strong { display: block; } .finance-summary small { color: var(--muted); font-size: 11px; } .finance-summary strong { margin-top: 4px; }
.client-tab { display: inline-flex; align-items: center; gap: 6px; }
.client-tab .svg-icon { width: 15px; height: 15px; vertical-align: 0; }
@media (max-width: 520px) { .client-tab .svg-icon { display: none; } }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 9px; width: min(360px, calc(100% - 40px)); } .toast { padding: 13px 15px; background: #172033; color: #fff; border-radius: 12px; box-shadow: var(--shadow); animation: toast-in .22s ease both; } .toast.error { background: #9d3f4c; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.drag-zone { display: grid; place-items: center; min-height: 100px; padding: 14px; border: 1px dashed #bdc5d8; border-radius: 12px; color: var(--muted); text-align: center; background: #fbfcff; } .drag-zone input { display: none; } .inline-note { padding: 11px 13px; border-radius: 10px; color: #59637b; background: #f7f8fc; font-size: 12px; }
.calendar-push-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.calendar-push-status::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #d0922f; content: ""; }
.calendar-push-status[data-state="healthy"]::before { background: #21966b; }
.calendar-push-status[data-state="stale"] { color: #9a6520; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid, .calendar-layout, .chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sidebar { position: fixed; z-index: 15; inset: 0 auto 0 0; width: 280px; transform: translateX(-105%); transition: transform .25s; box-shadow: 20px 0 60px rgba(8,14,28,.2); } .sidebar.open { transform: translateX(0); } .sidebar-close { display: grid; } .sidebar-scrim { position: fixed; z-index: 14; inset: 0; background: rgba(14,21,36,.42); } .main-content { width: 100%; } .topbar { height: 64px; padding: 0 17px; } .menu-toggle { display: grid; } .breadcrumbs { font-size: 12px; } .page-content { padding: 23px 15px 40px; } .page-heading { display: block; } .heading-actions { margin-top: 16px; } .metric-grid { gap: 10px; } .metric-card { padding: 15px; } .metric-card strong { font-size: 22px; } .metric-card small { font-size: 10px; } .calendar-day { min-height: 65px; padding: 6px; } .calendar-day.today { padding: 5px; } .calendar-weekday { padding-left: 3px; font-size: 8px; } .day-event { margin-top: 5px; padding: 3px; font-size: 8px; } .report-cards { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } .modal { padding: 19px; } .auth-card { padding: 28px 22px; } }
@media (max-width: 470px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-top { font-size: 11px; } .metric-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; } .metric-card strong { font-size: 19px; } .topbar-actions { gap: 4px; } .page-heading h1 { font-size: 28px; } .report-controls label { flex: 1; min-width: 120px; } .report-presets { width: 100%; overflow-x: auto; } .report-presets button { flex: 0 0 auto; } }

@media (max-width: 470px) {
  .calendar-toolbar { flex-wrap: wrap; gap: 8px; }
  .calendar-toolbar h2 { flex: 1 1 140px; min-width: 0; }
  .calendar-nav { margin-left: auto; }
}

@media (max-width: 470px) {
  .report-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .report-controls label { width: 100%; min-width: 0; }
  .report-controls input { width: 100%; min-width: 0; padding: 9px 5px; font-size: 11px; }
  .report-presets { grid-column: 1 / -1; }
  .report-controls > button { grid-column: 1 / -1; justify-self: start; }
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .report-card { min-width: 0; padding: 14px; }
  .report-card-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .report-card-top .metric-icon { flex-basis: 28px; }
  .report-card strong { font-size: clamp(14px, 4.8vw, 18px); letter-spacing: -.03em; white-space: normal; overflow-wrap: anywhere; }
}

/* Contextual SVG icon system: one stroke, one optical weight, no emoji/glyph fallbacks. */
.svg-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -4px; }
.greeting-sparkle { width: 22px; height: 22px; margin-left: 2px; color: var(--primary); vertical-align: -1px; }

/* Keep typography local: no remote font requests or CDN dependency. */
:root { --system-font-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body, h1, h2, h3, .brand, .metric-card strong, .report-card strong { font-family: var(--system-font-stack); }
.primary-button .svg-icon, .secondary-button .svg-icon, .soft-button .svg-icon { width: 16px; height: 16px; vertical-align: -3px; }
.nav-icon { width: 22px; height: 22px; font-size: 0; }
.nav-icon .svg-icon { width: 19px; height: 19px; }
.metric-icon .svg-icon { width: 17px; height: 17px; vertical-align: 0; }
.icon-text { display: inline-flex; align-items: center; gap: 6px; }
.link-button.icon-text { padding-inline: 6px; }
.link-button .svg-icon { width: 15px; height: 15px; vertical-align: 0; }
.danger-link { color: #bd4858; }
.more { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; letter-spacing: 0; }
.more .svg-icon { width: 16px; height: 16px; vertical-align: 0; }
.logout-button { display: inline-flex; align-items: center; gap: 9px; }
.logout-button .svg-icon { width: 16px; height: 16px; vertical-align: 0; }
.notification-button .svg-icon { width: 19px; height: 19px; vertical-align: 0; }
.menu-toggle .svg-icon, .sidebar-close .svg-icon, .modal-close .svg-icon { width: 20px; height: 20px; vertical-align: 0; }
.search-wrap > span { display: grid; place-items: center; width: 18px; height: 18px; top: 10px; }
.search-wrap > span .svg-icon { width: 17px; height: 17px; vertical-align: 0; }
.link-button > .svg-icon { vertical-align: 0; }
.event-title-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left; }
.event-title-row > b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.event-title-row > span:last-child { flex: 0 0 auto; }
.event-type-icon { display: inline-grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 8px; color: var(--primary); background: var(--blue-soft); }
.event-type-icon .svg-icon { width: 15px; height: 15px; vertical-align: 0; }
.event-item.done .event-type-icon { color: var(--green); background: var(--green-soft); }
.report-card-top { display: flex; align-items: center; gap: 9px; }
.report-card-top .metric-icon { width: 29px; height: 29px; }
.report-card-top .metric-icon .svg-icon { width: 15px; height: 15px; }
.document-icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.document-icon .svg-icon { width: 20px; height: 20px; vertical-align: 0; }
.document-icon small { font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .05em; }
.upload-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 5px; color: var(--primary); background: var(--blue-soft); border-radius: 10px; }
.upload-mark .svg-icon { width: 18px; height: 18px; vertical-align: 0; }
.calendar-nav button .svg-icon, .calendar-nav-button .svg-icon { width: 17px; height: 17px; vertical-align: 0; }
.calendar-nav button[data-month-today] { width: auto; padding: 0 10px; }

/* Responsive client cards and paginated document lists. */
.client-search-toolbar { align-items: end; }
.client-filter-field { display: grid; gap: 5px; flex: 0 1 150px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.client-filter-field .small-control { width: 100%; min-width: 0; }
.client-sort-field { flex-basis: 125px; }
.client-results[aria-busy="true"] { opacity: .72; }
.client-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 13px; }
.client-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(25,36,66,.035); transition: border-color .18s, box-shadow .18s, transform .18s; }
.client-card:hover { border-color: #cbd0ff; box-shadow: 0 10px 24px rgba(40,52,110,.08); transform: translateY(-1px); }
.client-card-main { display: grid; gap: 12px; width: 100%; padding: 0; color: inherit; background: transparent; text-align: left; }
.client-card-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.client-card-identity { display: grid; gap: 3px; min-width: 0; }
.client-card-identity b { overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }
.client-card-identity small { overflow-wrap: anywhere; color: var(--muted); }
.client-card-status { justify-self: start; }
.client-card-contact { display: grid; gap: 5px; min-width: 0; color: #596477; }
.client-card-contact > span, .client-card-date { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.client-card-contact .svg-icon, .client-card-date .svg-icon { width: 15px; height: 15px; color: var(--muted); vertical-align: 0; }
.client-card-date { padding-top: 10px; border-top: 1px solid #eef0f4; color: var(--muted); font-size: 12px; }
.client-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 11px; }
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.pagination-count, .pagination-controls > span { color: var(--muted); font-size: 12px; }
.pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pagination-button { min-height: 38px; padding: 8px 11px; }
.pagination-button:disabled { cursor: not-allowed; opacity: .45; }
.pagination-button .svg-icon { width: 15px; height: 15px; vertical-align: 0; }
.document-search { position: relative; display: block; margin-bottom: 13px; }
.document-search > span[aria-hidden="true"] { position: absolute; top: 10px; left: 13px; display: grid; place-items: center; color: var(--muted); }
.document-search > span .svg-icon { width: 17px; height: 17px; vertical-align: 0; }
.document-search input { padding-left: 39px; }
.document-results[aria-busy="true"] { opacity: .72; }
.document-card { min-width: 0; }
.document-copy b { overflow-wrap: anywhere; }
.document-copy small { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.document-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.client-card-main:focus-visible, .client-card-actions button:focus-visible, .pagination-button:focus-visible, .document-actions button:focus-visible, .client-tab:focus-visible { outline: 3px solid rgba(89,102,242,.38); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 761px) and (max-width: 820px) {
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .report-card { min-width: 0; }
}

@media (max-width: 600px) {
  .client-search-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .client-search-toolbar > * { min-width: 0; }
  .client-search-toolbar .search-wrap { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .client-filter-field { width: 100%; flex: initial; }
  .client-filter-field .small-control { width: 100%; min-width: 0; max-width: 100%; }
  .client-card-grid { grid-template-columns: minmax(0, 1fr); }
  .pagination-bar { align-items: stretch; flex-direction: column; }
  .pagination-controls { justify-content: space-between; flex-wrap: wrap; }
  .document-card { align-items: flex-start; flex-wrap: wrap; }
  .document-copy { flex-basis: calc(100% - 54px); }
  .document-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .detail-toolbar { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .client-search-toolbar > .client-filter-field:nth-child(2) { grid-column: 1; grid-row: 2; }
  .client-search-toolbar > .client-filter-field:nth-child(5) { grid-column: 2; grid-row: 2; }
  .client-search-toolbar > .client-filter-field:nth-child(3),
  .client-search-toolbar > .client-filter-field:nth-child(4) { grid-column: 1 / -1; }
  .client-search-toolbar #client-from,
  .client-search-toolbar #client-to { padding-right: 8px; padding-left: 8px; font-size: 14px; }
  .breadcrumbs { gap: 6px; font-size: 12px; }
  .breadcrumbs b { max-width: 28vw; }
  .breadcrumb-mail-count { font-size: 11px; }
}
@media (max-width: 380px) {
  .page-content { padding-right: 10px; padding-left: 10px; }
  .panel-body { padding: 14px 12px; }
  .client-card { padding: 13px; }
  .client-card-actions { justify-content: space-between; gap: 4px; }
  .client-card-actions .link-button { font-size: 12px; }
  .pagination-controls { gap: 5px; }
  .pagination-controls > span { flex: 1 0 100%; }
  .pagination-button { flex: 1 1 auto; justify-content: center; padding: 8px 7px; }
  .modal-layer { padding: 8px; }
  .modal { width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 13px; border-radius: 15px; }
  .client-detail-header { align-items: flex-start; gap: 9px; }
  .client-detail-header .avatar { width: 42px; height: 42px; flex: 0 0 auto; }
  .client-detail-header h2 { font-size: 20px; overflow-wrap: anywhere; }
  .client-detail-header p { font-size: 12px; }
  .client-detail-header .modal-close { margin-left: auto !important; }
  .client-tabs { gap: 0; }
  .client-tab { padding: 9px 8px; font-size: 12px; }
  .document-actions .link-button { padding: 6px 4px; font-size: 12px; }
}

/* Shared CRM foundations: keep the established mail surface's own sizing and focus rules intact. */
body:not(.mail-view-active):not([data-view="mail"]) {
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body.mail-view-active,
body[data-view="mail"] {
  --muted: #7d8798;
  --primary: #5966f2;
  --primary-dark: #444fd7;
}
body:not(.mail-view-active):not([data-view="mail"]) .auth-screen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow-x: clip;
  overflow-y: auto;
}
body:not(.mail-view-active):not([data-view="mail"]) .app-screen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}
body:not(.mail-view-active):not([data-view="mail"]) .sidebar {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
body:not(.mail-view-active):not([data-view="mail"]) .topbar {
  padding-left: max(38px, env(safe-area-inset-left));
  padding-right: max(38px, env(safe-area-inset-right));
}
body:not(.mail-view-active):not([data-view="mail"]) .page-content,
body:not(.mail-view-active):not([data-view="mail"]) .view,
body:not(.mail-view-active):not([data-view="mail"]) .panel,
body:not(.mail-view-active):not([data-view="mail"]) .modal { min-width: 0; }
body:not(.mail-view-active):not([data-view="mail"]) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #3542c8;
  outline-offset: 3px;
  scroll-margin-block: 16px;
}
body:not(.mail-view-active):not([data-view="mail"]) :is(input, select, textarea):focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(68,79,215,.17);
}
body:not(.mail-view-active):not([data-view="mail"]) #app-screen :is(button, a, input, select, textarea):not(#view-mail *):not(.calendar-day),
body:not(.mail-view-active):not([data-view="mail"]) .auth-screen :is(button, a, input, select, textarea) {
  min-height: 44px;
}
body:not(.mail-view-active):not([data-view="mail"]) #app-screen .icon-button,
body:not(.mail-view-active):not([data-view="mail"]) .auth-screen .icon-button {
  min-width: 44px;
  min-height: 44px;
}
body:not(.mail-view-active):not([data-view="mail"]) #app-screen :is(input, select),
body:not(.mail-view-active):not([data-view="mail"]) .auth-screen :is(input, select) { padding-block: 10px; }
body:not(.mail-view-active):not([data-view="mail"]) .password-field .icon-button { top: 0; right: 2px; width: 44px; height: 44px; }
body:not(.mail-view-active):not([data-view="mail"]) .modal-layer {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}
body:not(.mail-view-active):not([data-view="mail"]) .modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body:not(.mail-view-active):not([data-view="mail"]) :is(.primary-button, .secondary-button, .soft-button, .danger-button, .preset-button, .nav-item, .event-item-actions button) {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body:not(.mail-view-active):not([data-view="mail"]) .nav-item.active { background: #293652; box-shadow: inset 3px 0 #7b87ff; }
body:not(.mail-view-active):not([data-view="mail"]) .status-new,
body:not(.mail-view-active):not([data-view="mail"]) .status-work { color: #414db8; }
body:not(.mail-view-active):not([data-view="mail"]) .status-debt,
body:not(.mail-view-active):not([data-view="mail"]) .status-late { color: #a83243; }
body:not(.mail-view-active):not([data-view="mail"]) .status-inactive,
body:not(.mail-view-active):not([data-view="mail"]) .status-closed { color: #5c6678; }
body:not(.mail-view-active):not([data-view="mail"]) .status-paid { color: #147246; }
body:not(.mail-view-active):not([data-view="mail"]) .danger-link { color: #a83243; }
body:not(.mail-view-active):not([data-view="mail"]) .workspace-label { color: #98a2b5; }
body:not(.mail-view-active):not([data-view="mail"]) .calendar-day.muted-day { color: #657185; }
body:not(.mail-view-active):not([data-view="mail"]) .event-item.done { opacity: 1; background: #f6faf7; }
body:not(.mail-view-active):not([data-view="mail"]) .event-item.done .event-title-row b,
body:not(.mail-view-active):not([data-view="mail"]) .calendar-day .day-event.is-done { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: #87938c; }
body:not(.mail-view-active):not([data-view="mail"]) .pagination-button:disabled { opacity: 1; color: #667085; background: #f1f3f8; }
body:not(.mail-view-active):not([data-view="mail"]) :is(.list-row, .event-item, .document-card, .client-card, .report-card) { overflow-wrap: anywhere; }
body:not(.mail-view-active):not([data-view="mail"]) .list-row { min-width: 0; }
body:not(.mail-view-active):not([data-view="mail"]) .calendar-nav:has([data-day-prev]) { gap: 6px; flex-wrap: wrap; }
body:not(.mail-view-active):not([data-view="mail"]) .calendar-nav:has([data-day-prev]) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 44px;
  padding-inline: 9px;
  white-space: nowrap;
}
body:not(.mail-view-active):not([data-view="mail"]) .calendar-nav:has([data-day-prev]) [data-day-today] { min-width: 68px; }
/* Shared app chrome stays comfortably tappable even while the mail view is active. */
#app-screen > .sidebar :is(button, a) { min-height: 44px; }
#app-screen > .main-content > .topbar :is(button, a) { min-width: 44px; min-height: 44px; }
#app-screen > .main-content > .topbar .avatar-top { width: 44px; height: 44px; }
#app-screen > .main-content > .topbar .notification-button { width: 44px; height: 44px; }
#app-screen > .sidebar .logout-button { display: flex; align-items: center; }

@media (max-width: 1024px) {
  body:not(.mail-view-active):not([data-view="mail"]) .topbar { padding-right: 22px; padding-left: 22px; }
  body:not(.mail-view-active):not([data-view="mail"]) .page-content { padding: 28px 22px; }
}
@media (max-width: 760px) {
  body:not(.mail-view-active):not([data-view="mail"]) .sidebar {
    width: min(280px, 90vw);
    transform: translateX(calc(-100% - 16px));
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  body:not(.mail-view-active):not([data-view="mail"]) .sidebar.open { transform: translateX(0); }
  body:not(.mail-view-active):not([data-view="mail"]) .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body:not(.mail-view-active):not([data-view="mail"]) .page-content {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 380px) {
  body:not(.mail-view-active):not([data-view="mail"]) .topbar { gap: 8px; }
  body:not(.mail-view-active):not([data-view="mail"]) .breadcrumbs { gap: 6px; font-size: 11px; }
  body:not(.mail-view-active):not([data-view="mail"]) .page-content { padding-top: 20px; }
  body:not(.mail-view-active):not([data-view="mail"]) .panel-header { padding: 15px 14px; }
  body:not(.mail-view-active):not([data-view="mail"]) .panel-body { padding: 15px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.mail-view-active):not([data-view="mail"]) *,
  body:not(.mail-view-active):not([data-view="mail"]) *::before,
  body:not(.mail-view-active):not([data-view="mail"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 380px) {
  body:not(.mail-view-active):not([data-view="mail"]) .auth-card h1 { font-size: clamp(23px, 7.5vw, 28px); line-height: 1.25; }
}
body:not(.mail-view-active):not([data-view="mail"]) .calendar-day { min-width: 0; overflow: hidden; }
body:not(.mail-view-active):not([data-view="mail"]) .day-event { display: block; min-width: 0; max-width: 100%; line-height: 1.2; }
body:not(.mail-view-active):not([data-view="mail"]) .day-event-mobile-count { display: none; }
@media (max-width: 600px) {
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-day { padding: 5px 3px; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-day.today { padding: 4px 2px; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-day .day-event-title ~ .day-event-title,
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-day .day-event-overflow { display: none; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-day .day-event-mobile-count { display: block; }
}
@media (max-width: 760px) {
  body:not(.mail-view-active):not([data-view="mail"]) .topbar { height: 52px; gap: 8px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  body:not(.mail-view-active):not([data-view="mail"]) .topbar .breadcrumbs { display: none; }
  body:not(.mail-view-active):not([data-view="mail"]) .topbar-actions { gap: 5px; }
  body:not(.mail-view-active):not([data-view="mail"]) :is(input, select, textarea) { font-size: 16px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .page-heading { margin-bottom: 14px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .page-heading p { margin-top: 5px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .page-heading .heading-actions { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-notification-button,
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-test-notification { width: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; font-size: 0; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-notification-button .svg-icon,
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-test-notification .svg-icon { width: 18px; height: 18px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-new-event { min-width: 0; flex: 1 1 auto; white-space: nowrap; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-calendar .calendar-notification-note { margin-bottom: 8px; padding: 8px 10px; line-height: 1.4; }
}

/* Profile avatar picker: keep its copy stacked and the native file input keyboard-accessible. */
#profile-form .drag-zone { position: relative; cursor: pointer; }
#profile-form .drag-zone > span:not(.upload-mark) { display: grid; justify-items: center; gap: 4px; min-width: 0; }
#profile-form #avatar-file-name { display: block; max-width: 100%; color: var(--primary); font-weight: 800; overflow-wrap: anywhere; }
#profile-form .drag-zone input[type="file"] { display: block; position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#profile-form .drag-zone:hover { border-color: var(--primary); }
#profile-form .drag-zone:focus-within { border-color: var(--primary); outline: 3px solid rgba(77, 87, 220, .24); outline-offset: 2px; }

/* Keep narrow client filters inside their card; native date fields otherwise keep a wide min-content size. */
@media (max-width: 600px) {
  body:not(.mail-view-active):not([data-view="mail"]) #view-clients .panel,
  body:not(.mail-view-active):not([data-view="mail"]) #view-clients .panel-body,
  body:not(.mail-view-active):not([data-view="mail"]) .client-search-toolbar,
  body:not(.mail-view-active):not([data-view="mail"]) .client-filter-field { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body:not(.mail-view-active):not([data-view="mail"]) .client-search-toolbar :is(input, select) { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }
  body:not(.mail-view-active):not([data-view="mail"]) .client-search-toolbar input[type="date"] { padding-inline: 7px; }
}

/* Follow the visible viewport when the mobile keyboard opens and keep calendar actions reachable. */
@media (max-width: 760px) {
  body:not(.mail-view-active):not([data-view="mail"]) .modal-layer {
    inset: auto 0 auto;
    top: var(--crm-visual-viewport-top, 0px);
    height: var(--crm-visual-viewport-height, 100dvh);
    min-height: 0;
    overflow-y: auto;
    align-items: center;
  }
  body:not(.mail-view-active):not([data-view="mail"]) .modal {
    max-height: calc(var(--crm-visual-viewport-height, 100dvh) - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer { flex-wrap: wrap; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer > button { flex: 1 1 auto; min-width: min(100%, 132px); }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer [data-event-remove] { flex: 1 1 100%; justify-content: flex-start; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer [data-close-modal] { order: 2; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer [type="submit"] { order: 3; }
}

@media (max-width: 430px) {
  body:not(.mail-view-active):not([data-view="mail"]) .client-search-toolbar { column-gap: 8px; row-gap: 10px; }
  body:not(.mail-view-active):not([data-view="mail"]) #view-clients .panel-body { padding-inline: 12px; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal { padding: 14px; }
  body:not(.mail-view-active):not([data-view="mail"]) .calendar-event-modal .modal-footer { gap: 7px; }
}
#view-reports .page-heading p { display: none; }