/* ZYO ClientFlow themes. zyo-theme.js sets data-theme on <html>; the selectors
   use :root[data-theme] so they win over the defaults in index.html. */
:root{--surface:#fff;--surface-raised:#fbfcfe;--accent-soft:#efedff}

:root[data-theme="light"]{color-scheme:light;--bg:#f6f7fa;--surface:#fff;--surface-raised:#fbfcfe;--line:#e9edf3;--ink:#202a40;--muted:#8790a2;--accent:#6257e8;--accent-soft:#efedff}

:root[data-theme="black-red"]{color-scheme:dark;--bg:#0e0e10;--surface:#17171a;--surface-raised:#1f1f23;--line:#2c2c32;--ink:#f3f3f3;--muted:#9a9aa5;--accent:#f43f4c;--accent-soft:rgba(244,63,76,.15)}

:root[data-theme="dark"]{color-scheme:dark;--bg:#13111f;--surface:#1b1830;--surface-raised:#241f3d;--line:#322c50;--ink:#ece9ff;--muted:#a39cc6;--accent:#8b7cf6;--accent-soft:rgba(139,124,246,.17)}

/* Form fields follow the theme instead of staying white on dark themes. */
:root[data-theme] input,:root[data-theme] select,:root[data-theme] textarea{background:var(--surface-raised);color:var(--ink);border-color:var(--line)}

/* Client profile drawer */
.drawer h2{margin:0;font-size:24px;letter-spacing:-.5px}
.drawer h3{font-size:14px;margin:28px 0 12px}
.profile-fields{grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 6px}
.profile-field{background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.profile-field .subtitle{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.4}
.profile-field-value{margin-top:5px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.profile-contact,.client-notes{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-raised)}
.client-notes-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.client-notes-heading h3{margin:0}
.client-notes-heading button{padding:6px 11px;font-size:12px;border-radius:999px;background:var(--surface)}
.profile-contact-rows{display:grid;gap:4px}
.profile-contact-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.profile-contact-row:first-child{border-top:0}
.profile-contact-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:700}
.profile-contact-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.profile-contact-row small{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.profile-contact-row a,.profile-contact-row span{color:var(--ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.profile-contact-row a:hover{color:var(--accent)}
.profile-contact-row a.profile-whatsapp-phone{color:#23a282;font-size:12px;font-weight:600;margin-top:2px}
.profile-social-group{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.profile-social-group .subtitle{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.profile-social-links{display:flex;flex-wrap:wrap;gap:8px}
.profile-social{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:12px;font-weight:600}
.profile-social:hover{border-color:var(--accent);color:var(--accent)}
.client-note-text{margin:0;white-space:pre-wrap;line-height:1.55}
.client-note-text.is-empty{color:var(--muted);font-style:italic}
.client-note-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
#client-note-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical}
.client-note-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.client-notes+.primary{margin-top:20px;width:100%}

/* Client form fields */
.client-checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer}
.client-checkbox-field input{width:auto}
.client-notes-field,.subscription-form-field{grid-column:1/-1}
.client-notes-field textarea{width:100%;resize:vertical}

/* Initials in a coloured circle (table rows, profile, sidebar user) */
.avatar{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}

/* Client tables: columns keep the widths from <col> (fitted to content or dragged) */
.client-table{table-layout:fixed;min-width:0}
.client-table th,.client-table td{min-width:0!important;overflow:hidden}
.client-table th{position:relative;padding-right:10px}
.client-column-heading{display:block;overflow:hidden;text-overflow:ellipsis}
.client-cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-cell-content>*{vertical-align:middle}

/* Column resize handle: a thin line between headers, highlighted on hover/drag */
.table-column-resize{position:absolute;top:0;right:0;bottom:0;width:11px;cursor:col-resize;touch-action:none;z-index:1}
.table-column-resize::after{content:"";position:absolute;top:25%;bottom:25%;right:5px;width:1px;background:var(--line);transition:background .15s,top .15s,bottom .15s}
.table-column-resize:hover::after,.table-column-resize:focus-visible::after{top:0;bottom:0;width:2px;right:4px;background:var(--accent)}
.table-column-resize:focus-visible{outline:none}
.resizing-columns,.resizing-columns *{cursor:col-resize!important;user-select:none}
@media(max-width:760px){.table-column-resize{display:none}}

/* Sidebar show/hide (sidebar.js sets data-sidebar-collapsed / data-sidebar-open on <html>) */
.sidebar{z-index:30;transition:transform .2s ease}
.main{transition:margin-left .2s ease,width .2s ease}
.sidebar-backdrop{display:none}
.sidebar-close{display:none;position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border-radius:8px;font-size:18px;line-height:1;color:var(--muted);background:transparent;border-color:transparent}
.sidebar-close:hover{color:var(--ink);border-color:var(--line)}
.sidebar-toggle{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:10px;color:var(--ink)}
.topbar{position:sticky;top:0;z-index:20}
/* Open windows (client sheet, forms) cover the top bar, so its "Ieși din cont" never sits on top of their ×; toasts stay above them */
.overlay{z-index:35}
.toast{z-index:50}
@media(min-width:761px){
  :root[data-sidebar-collapsed="true"] .sidebar{transform:translateX(-100%)}
  :root[data-sidebar-collapsed="true"] .main{margin-left:0;width:100%}
}
@media(max-width:760px){
  :root[data-sidebar-open="true"] .sidebar{display:flex;width:260px;box-shadow:20px 0 60px #0006}
  :root[data-sidebar-open="true"] .sidebar-close{display:grid;place-items:center}
  :root[data-sidebar-open="true"] .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:25;background:#0008;border:0;border-radius:0;padding:0}
}

/* Excel import window */
.import-steps{list-style:none;counter-reset:step;padding:0;margin:22px 0 0;display:grid;gap:12px}
.import-steps li{counter-increment:step;display:flex;gap:14px;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-raised)}
.import-steps li::before{content:counter(step);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700}
.import-steps p{margin:4px 0 12px;color:var(--muted);font-size:13px;line-height:1.5}
.import-drop{display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:10px;padding:10px 14px;cursor:pointer}
.import-drop:hover{border-color:var(--accent)}
.import-drop{position:relative}
.import-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.import-drop:focus-within{outline:3px solid var(--accent-soft)}
.import-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 10px}
.import-pill{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.import-pill.ok{background:#23a28222;color:#23a282}
.import-pill.error{background:#df657622;color:#df6576}
.import-pill.dup{background:#cf992d22;color:#cf992d}
.import-error{color:#df6576;font-size:13px}
.import-table{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.import-table table{white-space:normal;table-layout:fixed}
.import-table th:nth-child(1),.import-table td:nth-child(1){width:56px;min-width:0}
.import-table th:nth-child(2),.import-table td:nth-child(2){width:24%}
.import-table th:nth-child(3),.import-table td:nth-child(3){width:30%;overflow-wrap:anywhere}
.import-table th{position:sticky;top:0}
.import-table td{font-size:12px;vertical-align:top}
.import-table tr.is-error td:last-child{color:#df6576}
.import-table tr.is-duplicate td{color:var(--muted)}
.import-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* Coloured labels and free tags follow the theme instead of a white tint */
.clientlabel{background:color-mix(in srgb,var(--label-color) 16%,var(--surface));border-color:color-mix(in srgb,var(--label-color) 32%,var(--surface))}
.tagsfield{grid-column:1/-1}
.tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);cursor:text}
.tag-input:focus-within{border-color:var(--accent)}
.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--label-color);background:color-mix(in srgb,var(--label-color) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--label-color) 32%,var(--surface))}
.tag-remove{border:0;background:none;padding:0 4px;font-size:14px;line-height:1;color:inherit;opacity:.7}
.tag-remove:hover{opacity:1}
:root[data-theme] .tag-input .tag-entry{flex:1;min-width:140px;border:0;background:transparent;padding:4px;outline:none}
.client-cell-content .clientlabels{flex-wrap:nowrap;max-width:none}

/* Search in the "new field" type picker */
.type-search{width:100%;margin:4px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.type-search:focus{outline:none;border-color:var(--accent)}
.type-choice[hidden]{display:none}

/* RO / EN switch in the top bar */
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px}
.lang-switch button{border:0;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.5px;background:transparent;color:var(--muted)}
:root[lang="ro"] .lang-switch [data-lang="ro"],:root[lang="en"] .lang-switch [data-lang="en"]{background:var(--accent);color:#fff}

/* "Recomandat de" links and the "A recomandat" list in the profile */
.referral-link{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-align:left;cursor:pointer}
.referral-link:hover{text-decoration:underline}
.referral-unlinked{color:var(--muted);font-style:italic}
.client-referrals{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-raised)}
.referral-list{display:flex;flex-wrap:wrap;gap:8px}
.referral-list .referral-link{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px}
.referralfield{grid-column:1/-1}

/* Quick choices in the payment window */
.payment-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:18px 0 6px}
.payment-choices-title{grid-column:1/-1;margin:0;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.payment-choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface-raised)}
.payment-choice span{font-size:12px;color:var(--muted)}
.payment-choice:hover{border-color:var(--accent)}
.payment-choice.active{border-color:var(--accent);background:var(--accent-soft)}
.payment-choice.active strong{color:var(--accent)}

/* Report totals: one line per currency */
.report-money-list{display:inline-flex;flex-direction:column;gap:2px;vertical-align:top}
.report-money{white-space:nowrap}
small .report-money-list,td .report-money-list,p .report-money-list{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:4px 10px}
small .report-money,td .report-money,p .report-money{padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-weight:600}

/* Delete client */
.delete-client{width:100%;margin-top:8px;color:#df6576;border-color:color-mix(in srgb,#df6576 35%,var(--line));background:transparent}
.delete-client:hover{background:color-mix(in srgb,#df6576 10%,transparent)}
.delete-client-list{margin:18px 0;padding-left:18px;line-height:1.6;color:var(--ink)}
.delete-client-confirm{background:#df6576;border-color:#df6576}

/* Settings → Abonamente and the simpler payment window */
.plans-settings .settingscardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.plan-rows{display:grid;gap:10px;margin-top:16px}
.plan-row{display:grid;grid-template-columns:2fr 0.8fr 1fr 1fr auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised)}
.plan-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.plan-row input,.plan-row select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px}
.plan-remove{width:34px;height:34px;padding:0;color:var(--muted)}
@media(max-width:700px){.plan-row{grid-template-columns:1fr 1fr}.plan-row label:first-child{grid-column:1/-1}}
.payment-what{margin:18px 0 10px}
.payment-what select{width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:600}
.payment-details{margin:8px 0 14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.payment-details summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600}
.payment-details[open] summary{margin-bottom:10px}
.plan-period,.payment-period{display:flex;gap:6px}
.plan-period input,.payment-period input{flex:1;min-width:0}
.plan-period select,.payment-period select{width:auto}
.plan-row{grid-template-columns:1.6fr 1.1fr 0.9fr 0.9fr 1.6fr auto}
@media(max-width:900px){.plan-row{grid-template-columns:1fr 1fr}.plan-row label:first-child,.plan-row .plan-note{grid-column:1/-1}}

/* Phone layout (≤760px): a top bar that fits, client cards that wrap inside the screen */
@media(max-width:760px){
  .topbar{gap:8px;padding:0 12px}
  .topbar .crumb,.topbar .demo{display:none}
  .theme-control span{display:none}
  .theme-control select{max-width:118px}
  .topbar .signout{padding:6px 10px;font-size:12px;white-space:nowrap}
  .lang-switch button{padding:4px 8px}
  .main{min-width:0;overflow-x:clip}
  .client-table{width:100%!important;table-layout:auto}
  .client-table td{overflow:visible}
  .client-cell-content{white-space:normal;overflow:visible}
  .client-cell-content .clientlabels{flex-wrap:wrap}
  .tablewrap td[data-key]:not([data-key=name]):not([data-key=actions]){max-width:100%}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .actions .primary{grid-column:1/-1;margin-left:0}
  .status-rule{flex-wrap:wrap}
  .payment-period select{width:auto}
}
@media(max-width:760px){
  .plans-settings .settingscardhead,.status-settings .settingscardhead{flex-direction:column;align-items:stretch}
  .plans-settings .settingscardhead button,.status-settings .settingscardhead button{width:100%}
}

/* Theme: one round button in the current theme's colours; a click moves to the next theme */
.theme-select-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.theme-control>span:first-child,.lp-theme-label{display:none!important}
.theme-cycle{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--line);cursor:pointer;flex:none;vertical-align:middle;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line);transition:transform .2s}
.theme-cycle:hover{transform:rotate(45deg) scale(1.06)}
.theme-cycle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.theme-cycle[data-current="black-red"]{background:linear-gradient(135deg,#141414 50%,#f43f4c 50%)}
.theme-cycle[data-current="dark"]{background:linear-gradient(135deg,#1b1830 50%,#8b7cf6 50%)}
.theme-cycle[data-current="light"]{background:linear-gradient(135deg,#ffffff 50%,#6257e8 50%);border-color:#c9cfdb}

/* Settings → Import / Export */
.data-actions{display:grid;gap:12px;margin-top:16px}
.data-action{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-raised)}
.data-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:18px;font-weight:700}
.data-action p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:760px){.data-action{grid-template-columns:auto 1fr}.data-action button{grid-column:1/-1;width:100%}}

/* Settings → Prețuri and choosing a client's price in the table */
.price-row{grid-template-columns:1fr 1fr 2fr auto}
@media(max-width:900px){.price-row{grid-template-columns:1fr 1fr}.price-row .plan-note{grid-column:1/-1}}
.price-pick{position:relative;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px dashed var(--line);border-radius:8px;cursor:pointer}
.price-pick:hover{border-color:var(--accent)}
.price-pick::after{content:"▾";font-size:10px;color:var(--muted)}
.price-pick select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* Label picker: click a client's labels to change them */
.label-pick{cursor:pointer;border-radius:8px;padding:2px;margin:-2px;outline:none}
.label-pick:hover,.label-pick:focus-visible{background:var(--accent-soft)}
.label-picker{position:fixed;z-index:60;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #0005;padding:10px;max-height:min(420px,70vh);display:flex;flex-direction:column}
.label-picker-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 6px 8px;border-bottom:1px solid var(--line)}
.label-picker-head span{font-size:11px;color:var(--muted)}
.label-picker-list{overflow:auto;padding:6px 0;display:grid;gap:2px}
.label-picker-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.label-picker-option:hover,.label-picker-option:focus-visible{background:var(--accent-soft);outline:none}
.label-picker-option.is-chosen{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.label-picker-option input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.label-picker-foot{padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.label-mode{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.label-mode small{color:var(--muted);font-size:11px}
.client-table td[data-field-type="labels"]{cursor:pointer}
.client-table td[data-field-type="labels"]:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.label-picker-search{margin:8px 0 2px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;width:100%}
.label-picker-option[hidden]{display:none}


/* Label picker: only as wide as the longest label, compact rows (computer and phone) */
@media all{
  .label-picker{width:max-content;min-width:160px;max-width:280px;padding:6px;border-radius:12px;max-height:min(360px,65vh)}
  .label-picker-head{padding:4px 6px 6px;gap:12px}
  .label-picker-head strong{font-size:12px}
  .label-picker-head span{font-size:10px}
  .label-picker-search{margin:6px 0 2px;padding:5px 8px;font-size:12px;border-radius:7px}
  .label-picker-list{padding:4px 0;gap:0}
  .label-picker-option{padding:4px 6px;gap:8px;border-radius:6px}
  .label-picker-option .nolabel{font-size:11px}
  .label-picker-option input{width:14px;height:14px}
  .label-picker-option.is-chosen{box-shadow:inset 2px 0 0 var(--accent)}
  .label-picker-foot{padding-top:6px}
  .label-picker-foot button{padding:5px 12px;font-size:12px;border-radius:7px}
}
@media(max-width:760px){.label-picker{max-width:calc(100vw - 16px);max-height:60vh}.label-picker-option{padding:7px 8px}.label-picker-option input{width:16px;height:16px}.label-picker-search{font-size:14px}}

/* Settings → Câmpuri client: "Adaugă câmp" and editing a field take the place of the list,
   full width, instead of a panel on the right (or a sheet over the page on small screens). */
.column-workspace.with-editor{grid-template-columns:minmax(0,1fr)!important}
.column-workspace.with-editor>.column-list-card{display:none}
.column-workspace.with-editor .column-editor{position:static!important;width:auto!important;max-width:none!important;box-shadow:none!important;border-radius:16px!important;overflow:visible}
.column-sheet-backdrop{display:none!important}
.column-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.column-back{border:0;background:var(--accent-soft);color:var(--accent);font-weight:600;padding:7px 12px;border-radius:999px;font-size:12px}
.column-back:hover{filter:brightness(1.08)}
.column-type-picker .column-type-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.column-editor-head .column-back{width:auto;height:auto;border:0;background:var(--accent-soft);color:var(--accent);font-weight:600;padding:7px 12px;border-radius:999px;font-size:12px;line-height:1.2}

/* Contact channel icons: white symbol on the channel's colour */
.brand-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;vertical-align:middle}
.brand-icon svg{width:14px;height:14px;display:block}
.brand-facebook{background:#1877f2}
.brand-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.brand-tiktok{background:#111;box-shadow:inset 0 0 0 1px #ffffff22}
.brand-linkedin{background:#0a66c2}
.brand-youtube{background:#ff0033;border-radius:7px;width:26px}
.brand-website{background:#64748b}
.brand-telegram{background:#27a7e7}
.brand-whatsapp{background:#25d366}
.brand-email{background:var(--accent)}
.brand-phone{background:#23a282}
/* table */
.sociallinks{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.sociallink{display:inline-flex;padding:0;border:0;background:none;border-radius:50%;transition:transform .15s}
.sociallink:hover{transform:scale(1.12)}
.contactlink{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.contactlink:hover{color:var(--accent)}
.contactlink .brand-icon{width:20px;height:20px}
.contactlink .brand-icon svg{width:12px;height:12px}
/* profile */
.profile-contact-icon{background:none!important;width:auto!important;height:auto!important}
.profile-contact-icon .brand-icon{width:34px;height:34px}
.profile-contact-icon .brand-icon svg{width:19px;height:19px}
.profile-social{gap:8px;padding:5px 12px 5px 5px}
.profile-social .brand-icon{width:24px;height:24px}
.profile-social small{font-size:12px;font-weight:600}
/* form */
.social-label{display:inline-flex;align-items:center;gap:7px}
.social-label .brand-icon{width:18px;height:18px}
.social-label .brand-icon svg{width:11px;height:11px}
.phone-flag{font-size:16px;line-height:1;margin-right:6px;vertical-align:-1px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.contactlink .phone-flag{margin-right:0}

/* Client form: labels open the same list as in the table */
.form-label-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;margin:0;padding:7px 34px 7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);position:relative}
.form-label-pick:hover,.form-label-pick:focus-visible{border-color:var(--accent);background:var(--surface-raised)}
.form-label-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px}
.labelformfield{grid-column:1/-1}
.price-pick{border-style:dashed}
.price-pick::after{content:"▾";font-size:10px;color:var(--muted)}
.price-option{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.client-table td[data-field-type="price"]{cursor:pointer}
.price-form-pick .price-pick-value{font-weight:600}

/* <select data-our-select>: hidden native select, our button + list instead */
.our-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.our-select{width:100%;justify-content:flex-start;text-align:left;font-weight:600;color:var(--ink)}
.payment-what .our-select{padding:11px 34px 11px 12px;font-size:14px}
.payment-picker .label-picker-option{justify-content:space-between;gap:14px}
.payment-next-date{color:var(--muted);font-size:11px;white-space:nowrap}
.payment-more .price-option{color:var(--accent)}
.payment-unpaid .price-option{color:#df6576}
.client-table td[data-field-type="payment"]{cursor:pointer}
.payment-picker{max-width:min(380px,calc(100vw - 16px))!important}

.duplicate-client{width:100%;margin-top:8px;background:transparent}
.payment-period-field{margin:16px 0 4px}
.payment-period-field .payment-period{display:flex;gap:8px;align-items:stretch}
.payment-period-field #payment-months{flex:0 0 96px}
.payment-period-field .our-select{flex:1}
.payment-reset-settings .payment-reset-row{grid-template-columns:repeat(2,minmax(0,160px));margin-top:12px}
@media(max-width:760px){.payment-reset-settings .payment-reset-row{grid-template-columns:1fr 1fr}}
.report-expenses-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px}
.report-expenses-head .report-table-title{margin:0}
.report-expense-actions{white-space:nowrap;text-align:right}
.report-expense-remove{margin-left:8px;padding:2px 9px;background:transparent;color:#df6576;border-color:color-mix(in srgb,#df6576 35%,var(--line))}
.report-expenses-totals{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin:12px 0 4px;color:var(--muted)}
.report-expenses-totals strong{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.report-expenses-totals .report-money-list{display:inline-flex!important;flex-direction:row!important;flex-wrap:wrap;gap:4px;vertical-align:baseline}
#monthlyview .report-intro{position:relative}
.report-add-expense{position:absolute;top:0;right:0}
@media(max-width:760px){.report-add-expense{position:static;margin-top:12px}}
/* The firm's own name and logo in the sidebar (accounts on the server) */
.workspace.firm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 12px;overflow-wrap:anywhere}
.workspace.firm .firm-logo{display:block;width:auto;height:auto;max-width:100%;max-height:72px;object-fit:contain;margin:0 auto 8px}
.workspace.firm span{font-size:13px;line-height:1.3}
.workspace.firm small{margin:0}
.workspace.firm-edit{cursor:pointer}
.workspace.firm-edit:hover,.workspace.firm-edit:focus-visible{border-color:var(--accent);outline:none}
.firm-logo-row{display:flex;align-items:center;gap:12px;min-height:44px}
.firm-logo-preview{max-width:240px;max-height:80px;object-fit:contain;background:var(--surface-raised);border:1px solid var(--line);border-radius:10px;padding:8px}
.price-row.price-row-scoped{grid-template-columns:1fr 1fr 1.6fr 1.6fr auto}
@media(max-width:900px){.price-row.price-row-scoped{grid-template-columns:1fr 1fr}}
.price-columns{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;font-size:12px;color:var(--muted)}
.price-columns b{color:var(--ink)}
/* Settings tabs for a column's own list (labels, tags) */
.list-rows{display:grid;gap:8px;margin:12px 0}
.list-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.list-row input[type=color]{width:38px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:none;flex:none}
.list-row input[type=text]{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg);color:var(--ink)}
.list-chip{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650;padding:4px 9px;border-radius:999px;color:var(--chip,var(--ink));background:color-mix(in srgb,var(--chip,var(--muted)) 18%,transparent)}
.list-tag{--chip:var(--accent)}
.list-row-tag .list-chip{flex:1;max-width:none}
.list-count{color:var(--muted);font-size:11px;white-space:nowrap;min-width:64px;text-align:right}
.list-move{display:flex;gap:4px}
.list-move button{padding:6px 9px;font-size:12px}
.list-move button:disabled{opacity:.35;cursor:default}
.list-settings .label-mode{margin:6px 0 4px}
@media(max-width:700px){.list-row{flex-wrap:wrap}.list-row input[type=text]{flex-basis:60%}.list-chip{display:none}.list-row-tag .list-chip{display:inline-block}}
/* Map: tick the statuses to show */
.map-status-checks{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.map-check{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap}
.map-check input{accent-color:var(--accent);margin:0}
.map-check i{width:9px;height:9px;border-radius:3px;display:inline-block}
.map-check:has(input:checked){border-color:var(--accent)}
@media(max-width:760px){.map-status-checks{justify-content:flex-start}}
/* Clients table: tick the statuses to show */
.status-multi{position:relative}
.status-multi-btn{font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.status-multi-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:6px;min-width:210px;box-shadow:0 18px 40px #0005}
.status-multi-menu .map-check{border-radius:8px;justify-content:flex-start}
.nav.nav-support{text-decoration:none}