/* Arsen Salon v1.7 — interaction and visual hierarchy refinement.
   No service, financial or authentication behavior is replaced by this stylesheet. */
:root {--page:#f7f5f2;--accent:#5b483c;--accent-hover:#48372d;--hairline:#e9e3db;--text:#352e29;--secondary-text:#776b61;}
html {font-synthesis:none;}
body {font:14px/1.5 "Segoe UI","Noto Sans Armenian",Arial,sans-serif; background:var(--page);color:var(--text);}
button, input, select, textarea {font:inherit;}
button {cursor:pointer;}
button:disabled {opacity:.55;cursor:not-allowed;}
[hidden] {display:none!important;}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#appRoot {min-width:0;}
.topbar {height:64px; padding-inline:26px;}
.breadcrumb strong {font-size:15px;font-weight:700;color:#685547;}
.top-actions {display:flex;align-items:center;}
.date-pill {font-variant-numeric:tabular-nums;color:#7e7167;}
.main-content {max-width:1650px;margin-inline:auto;padding:25px clamp(15px,2.3vw,34px) 60px;}
.page-heading {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px;}
.page-heading h1 {font-size:clamp(21px,2.1vw,25px);font-weight:720;line-height:1.25;}
.heading-actions {display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.heading-count {color:#82756a;font-size:13px;font-weight:600;white-space:nowrap;}
.primary,.secondary,.subtle,.danger {min-height:42px;display:inline-flex;justify-content:center;align-items:center;gap:7px;line-height:1.3;white-space:normal;}
.primary svg,.secondary svg {width:17px;height:17px;flex-shrink:0;}
.primary:focus-visible,.secondary:focus-visible {outline:3px solid #a8896d;outline-offset:2px;}
.primary:active,.secondary:active {transform:translateY(1px);}
.panel,.stat-card,.item-card,.debt-card {box-shadow:0 1px 0 #2c1d1205;}
.panel-header {min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.panel-header h2 {margin:0;}
.empty {min-height:135px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;text-align:center;}
.empty strong {font-size:14px;}
.table-wrap {max-width:100%;scrollbar-color:#cbb8a5 transparent;}
.data-table {font-variant-numeric:tabular-nums;}
.data-table th {font-size:12px;white-space:nowrap;padding:14px 16px;}
.data-table td {padding:15px 16px;font-size:13px;vertical-align:middle;}
.data-table tbody tr:hover {background:#fcfaf7;}
.data-table th:last-child,.data-table td:last-child {text-align:right;}
.data-table .secondary {min-height:35px;padding:7px 12px;}
.stat-value,.mini-stat strong,.summary-strip strong,.finance-hero strong {font-variant-numeric:tabular-nums;}
/* Navigation remains plain, no decorative headings or new brand block. */
.sidebar {background:#f1ede8;}
.side-nav {gap:1px;}
.nav-item {font-size:14px;min-height:44px;padding:11px 13px;transition:background .12s;}
.nav-item.active {background:#e2d6ca;color:#3c2e24;box-shadow:inset 3px 0 #725943;}
.nav-item.active svg {stroke-width:2.1;}
.nav-item:focus-visible {outline:2px solid #81654d;outline-offset:-2px;}
.nav-separator {height:1px;background:#e0d7ce;margin:11px 10px;flex:0 0 1px;}
.nav-count {margin-left:auto;padding:1px 6px;min-width:22px;text-align:center;border-radius:7px;color:#a45e58;background:#f8eae7;font-size:11px;font-weight:750;}
/* Employees: large tap-friendly tiles with readable, non-financial context. */
.employee-grid {grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:13px;}
.employee-tile {position:relative;min-height:162px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:21px;isolation:isolate;}
.employee-tile .employee-icon {height:47px;width:47px;border-radius:12px;display:grid;place-items:center;}
.employee-tile strong {font-size:17px;line-height:1.3;}
.employee-meta {font-size:12px;color:#87796d;margin-top:-4px;}
.employee-open {position:absolute;right:16px;bottom:18px;display:grid;place-items:center;color:#9b897a;transition:transform .15s,color .15s;}
.employee-open svg {width:17px;height:17px;}
.employee-tile:hover .employee-open {transform:translateX(3px);color:#604a3b;}
.employee-adding {border-style:dashed;background:#fbf9f6;justify-content:center;}
.employee-adding .employee-icon {background:#efe7df;}
/* Compact business summaries: primary information first. */
.summary-strip {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 19px;}
.summary-strip>div {border:1px solid var(--hairline);background:#fff;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:100px;}
.summary-strip span {font-size:12px;color:#84786e;line-height:1.45;}
.summary-strip strong {font-size:clamp(18px,2.0vw,24px);font-weight:735;line-height:1.25;overflow-wrap:anywhere;}
.section-toolbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:23px 0 13px;}
.section-toolbar h2 {font-size:16px;font-weight:700;margin:0;}
.section-toolbar input[type=search] {border-radius:9px;border:1px solid #dcd3ca;background:white;min-height:42px;min-width:min(100%,265px);padding:9px 13px;color:#493d33;}
.debt-card {align-items:center;}
.debt-info {flex:1;min-width:0;}
.debt-money {display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto;}
.debt-money strong {font-variant-numeric:tabular-nums;}
.debt-money .secondary {min-width:85px;}
.details-panel {border:1px solid #e8e1d9;background:#fff;border-radius:12px;margin-top:17px;overflow:hidden;}
.details-panel>summary {list-style:none;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;padding:18px 19px;cursor:pointer;color:#51443a;user-select:none;min-height:56px;}
.details-panel>summary::-webkit-details-marker {display:none;}
.details-panel>summary:after {content:'⌄';font-size:19px;font-weight:400;line-height:1;color:#87796d;margin-left:auto;transition:transform .15s;}
.details-panel[open]>summary:after {transform:rotate(180deg);}
.details-panel>summary:focus-visible {outline:2px solid #866b53;outline-offset:-3px;}
.details-panel[open]>summary {border-bottom:1px solid #eee8e2;background:#fcfaf8;}
.details-body {padding:16px;}
.details-body>.table-wrap {margin:-16px;}
.details-body>.card-list {margin:0;}
.details-body .empty {min-height:115px;}
/* Stock: firm selector, strong product information, history on demand. */
.firm-tabs {display:flex;gap:7px;padding:5px 0 12px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap;margin:0 0 7px;}
.firm-tab {flex:0 0 auto;border:1px solid #e6ded5;padding:10px 16px;min-height:42px;background:white;border-radius:9px;color:#77675b;font-weight:630;}
.firm-tab:hover {background:#f5f0ea;border-color:#c9b7a6;}
.firm-tab.chosen {background:#5b483c;color:white;border-color:#5b483c;}
.stock-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 15px;}
.stock-heading h2 {margin:0;font-size:18px;font-weight:700;}
.stock-actions {margin:0;}
.stock-actions .primary,.stock-actions .secondary {min-height:39px;padding:8px 13px;}
.item-grid {grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.item-card {gap:14px;align-items:center;min-height:124px;}
.item-thumb {height:72px;width:72px;border-radius:10px;}
.item-details strong {font-size:14px;}
.product-facts {margin:9px 0 11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:#7b6e63;}
.product-facts .pill {padding:4px 7px;}
.pill.amber {background:#fff3de;color:#946e3d;}
.item-details .secondary {min-height:35px;}
/* Payments are a single, comfortably clickable row rather than a tiny checkbox. */
.fund-list {display:grid;}
.fund-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;min-height:76px;cursor:pointer;border-bottom:1px solid #f0ebe5;}
.fund-row:last-child {border-bottom:0;}
.fund-row:hover {background:#fbf9f6;}
.fund-row.paid {background:#f9fcf9;}
.fund-person {font-weight:690;min-width:0;}
.fund-person small {display:block;font-size:12px;color:#928579;font-weight:450;margin-top:5px;}
.fund-action {display:flex;align-items:center;justify-content:flex-end;gap:14px;white-space:nowrap;}
.fund-checkbox {width:21px!important;height:21px!important;min-height:21px;flex:0 0 21px;accent-color:#5b7b64;cursor:pointer;}
/* Main financial picture: 3 clear KPIs, supporting data in two columns. */
.finance-hero {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.finance-hero>div {display:flex;flex-direction:column;justify-content:center;gap:12px;background:#fff;border:1px solid #e8e1d9;padding:19px 21px;border-radius:12px;min-height:119px;}
.finance-hero>div:first-child {background:#f1e8df;border-color:#ddcfc0;}
.finance-hero span {font-size:12px;color:#74665a;font-weight:600;}
.finance-hero strong {font-size:clamp(19px,2vw,26px);font-weight:735;line-height:1.26;overflow-wrap:anywhere;}
.finance-hero>div:last-child strong {font-size:clamp(16px,1.75vw,23px);}
.finance-breakdown {gap:15px;align-items:start;}
.finance-breakdown .panel-body {padding:5px 20px 10px;}
.finance-breakdown .list-row {display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0;}
.finance-breakdown .list-row span {color:#655a51;}
.finance-breakdown .list-row strong {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.finance-warning {border:1px solid #e7d2b5;background:#fff7e9;color:#775632;padding:12px 16px;border-radius:9px;margin:-4px 0 17px;}
.salary-controls {margin-bottom:0;}
.salary-controls select {min-width:min(100%,210px);}
/* Calendar: native date navigation, one-tap slot creation, scroll only the grid. */
.calendar-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.calendar-date-controls {display:flex;align-items:center;gap:7px;}
.calendar-date-controls .secondary {min-height:42px;}
.calendar-date-controls>button:first-child,.calendar-date-controls>button:nth-child(3) {font-size:24px;line-height:1;width:42px;padding:5px;}
.calendar-date-controls input {min-width:155px;}
.calendar-toolbar>select {min-width:200px;}
.calendar-wrap {border-radius:12px;}
.calendar-header {display:flex;justify-content:space-between;gap:12px;padding-inline:17px;}
.hour-rule {display:block;width:100%;padding:0;border:0;border-top:1px solid #eee9e4;border-radius:0;background:transparent;text-align:left;color:#92877d;}
.hour-rule:nth-child(even) {border-top-style:dashed;}
.hour-rule:hover {background:#f3ede666;border-top-color:#d0bba8;}
.hour-rule>span {display:block;position:absolute;left:-57px;top:-8px;font-size:12px;font-weight:550;pointer-events:none;}
.hour-rule:focus-visible {outline:2px solid #b39478;outline-offset:-2px;}
.calendar-appt:focus-visible {outline:2px solid #715039;outline-offset:2px;}
/* Dialogs: avoid over-wide fields, keep actions reachable and behave like native sheets. */
.sheet,.sheet.sheet-small {box-shadow:0 22px 60px #2a20152b;}
.sheet-head {padding:19px 22px;}
.sheet-title h2 {font-size:19px;}
.sheet-content {padding:21px 22px 22px;}
.sheet-content .form-grid {gap:15px;}
.form-field label {font-size:13px;color:#695a4d;font-weight:650;}
.form-field input,.form-field select,.form-field textarea {font-size:15px;min-height:44px;border-radius:9px;}
.form-field textarea {min-height:95px;}
.form-field .checkbox-label {min-height:45px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:#51483e;}
.checkbox-label input[type=checkbox] {width:19px;height:19px;min-height:auto;accent-color:#765c45;flex:0 0 19px;}
.sheet-content .form-actions {position:sticky;bottom:-22px;z-index:2;background:#fff;border-top:1px solid #eee7df;padding:14px 0 0;margin-top:20px;}
.sheet-content .form-actions .primary {min-width:140px;}
.sheet-tabs button {font-size:14px;}
.sheet-tabs button.active {border-bottom-width:2px;}
.phone-prefix {font-size:14px;}
/* Touch and low-width support. */
@media (max-width:1100px) {
 .summary-strip,.finance-hero {grid-template-columns:repeat(2,minmax(0,1fr));}
 .finance-hero>div:first-child {grid-column:1/-1;}
 .main-content {padding:20px 19px 48px;}
}
@media (max-width:760px) {
 .topbar {height:57px;padding-inline:12px;}
 .main-content {padding:17px 12px 37px;}
 .page-heading {flex-direction:row;align-items:flex-start;}
 .page-heading h1 {font-size:21px;}
 .heading-actions {justify-content:flex-start;}
 .heading-actions .primary {padding-inline:12px;}
 .employee-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
 .employee-tile {min-height:153px;padding:15px;gap:9px;}
 .employee-tile strong {font-size:15px;}
 .employee-open {right:12px;bottom:13px;}
 .summary-strip {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
 .summary-strip>div {min-height:90px;padding:14px;}
 .summary-strip>div:nth-child(3):last-child {grid-column:1/-1;}
 .summary-strip strong {font-size:20px;}
 .stock-heading {align-items:stretch;flex-direction:column;}
 .stock-actions {width:100%;gap:7px;}
 .stock-actions .primary,.stock-actions .secondary {flex:1 1 auto;}
 .item-grid {grid-template-columns:1fr;}
 .item-card {min-height:105px;padding:13px;}
 .finance-hero {grid-template-columns:1fr;gap:9px;}
 .finance-hero>div:first-child {grid-column:auto;}
 .finance-hero>div {min-height:96px;padding:16px;gap:7px;}
 .finance-hero strong {font-size:22px;}
 .finance-breakdown {grid-template-columns:1fr;}
 .finance-breakdown .panel-body {padding-inline:16px;}
 .calendar-toolbar {align-items:stretch;flex-direction:column;}
 .calendar-date-controls {width:100%;}
 .calendar-date-controls input {flex:1;min-width:0;}
 .calendar-toolbar>select {width:100%;}
 .calendar-scroll {height:min(590px,60dvh);}
 .details-panel>summary {padding:16px 14px;}
 .details-body {padding:13px;}
 .fund-row {padding:14px 12px;}
 .fund-action {gap:9px;}
 .fund-action .pill {font-size:11px;}
 .section-toolbar input[type=search] {width:100%;min-width:0;}
 .sheet-content {padding:17px 16px 23px;}
 .sheet-content .form-actions {bottom:-23px;}
 .sheet-content .form-actions>* {flex:1 1 0;}
 .sheet-content .form-actions .primary {min-width:0;}
 .data-table th,.data-table td {padding-inline:11px;}
 #toastRoot {left:13px;right:13px;bottom:13px;max-width:none;}
 .toast {margin:4px 0;}
}
@media (max-width:380px) {
 .employee-grid {grid-template-columns:1fr 1fr;}
 .employee-tile {min-height:130px;padding:12px;}
 .employee-meta {font-size:11px;}
 .employee-open {display:none;}
 .summary-strip strong {font-size:17px;}
 .fund-row {align-items:flex-start;}
 .fund-action {align-self:center;}
 .fund-action .pill {display:none;}
 .calendar-date-controls .secondary:last-child {padding-inline:8px;}
}
@media (prefers-reduced-motion:reduce) { .employee-open,.details-panel>summary:after {transition:none;} }
/* Separated actions in transaction dialogs, with live totals. */
.form-section {padding:0 0 17px;margin-bottom:18px;border-bottom:1px solid #eee7e0;}
.form-section:last-of-type {border-bottom:0;padding-bottom:0;margin-bottom:0;}
.form-section h3 {font-size:14px;font-weight:740;margin:0 0 14px;color:#493b31;}
.payment-summary {margin-top:13px;background:#f7f4f0;border:1px solid #e7ded5;border-radius:10px;display:flex;gap:8px;flex-wrap:wrap;padding:12px;}
.payment-summary>div {flex:1 1 105px;display:grid;gap:5px;min-width:0;}
.payment-summary span {font-size:12px;color:#8a7c70;}
.payment-summary strong {font-size:16px;font-weight:740;font-variant-numeric:tabular-nums;white-space:nowrap;}
.payment-summary.invalid {background:#fff2f0;border-color:#e9b7ae;color:#963a32;}
@media(max-width:760px){.form-section{margin-bottom:16px;padding-bottom:16px;}.payment-summary{padding:10px;}}
/* Prevent long product titles and tags from widening very narrow phones. */
.item-grid {min-width:0;}
.item-card {min-width:0;}
.item-details {min-width:0;overflow-wrap:anywhere;}
@media(max-width:760px){.item-grid {grid-template-columns:minmax(0,1fr)!important;}}