/* Arsen Salon v1.3: appearance based on the approved Salon Calendar v1.2.
   UI-only layer. The existing Arsen data models, endpoints, and forms remain intact. */
:root {
  --bg: #f7f5f2;
  --surface: #fff;
  --ink: #322d29;
  --muted: #8a817a;
  --line: #e8e3dc;
  --blue: #5b483c;
  --blue-pale: #ebe2d8;
  --green: #60877a;
  --red: #ae6963;
  --shadow: none;
  --radius: 11px;
  --sidebar: 224px;
}
html { scroll-behavior: auto; }
body {background: var(--bg); color:var(--ink); font-family:Arial,"Noto Sans Armenian","Segoe UI",sans-serif;font-size:13px;}
button, input, select, textarea { font-family:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:2px solid #866b53;outline-offset:2px;}

/* Neutral, compact app chrome matching the approved light-beige navigation. */
.app-layout { min-height:100vh; }
.sidebar {width:224px;background:#f0ede8;border-right:1px solid #e3ddd5; box-shadow:none;transition:width .18s ease;}
.side-nav {padding:12px 10px 18px;gap:3px;}
.nav-item {min-height:40px; padding:9px 12px; border-radius:8px; gap:11px; font-size:13px; font-weight:600;color:#6e6158;}
.nav-item svg {height:17px;width:17px;}
.nav-item:hover {background:#e6ded5;color:#40372e;}
.nav-item.active {color:#3e332d;background:#e2d7cc;}
.side-brand,.side-caption{display:none;}
.side-close {display:none;}
.side-bottom {padding:13px 11px 15px;border-top:1px solid #dfd8d0;}
.sync-indicator {display:none;}
.user-block {border:0;border-radius:9px; padding:9px 6px;background:transparent; color:#423830;}
.user-block:hover {background:#e6ded5;}
.user-avatar,.header-avatar {background:#d9c7b2;color:#4e4035;border-radius:50%;font-size:13px;height:34px;width:34px;}
.user-details strong {font-size:12px;}
.user-details small {font-size:11px;color:#8b8076;}
.logout-icon {color:#766357;font-size:18px;}
.main-side {width:100%;min-width:0;}
.topbar {height:60px;padding:0 22px;background:#fff;border-bottom:1px solid var(--line);justify-content:flex-start;gap:14px;}
.hamburger {display:grid;place-items:center; flex:0 0 38px;}
.icon-button,.top-alert {width:38px;height:38px;background:#fff;border:1px solid #e8e3dc;color:#473c34;border-radius:8px;}
.icon-button:hover,.top-alert:hover {background:#f6f2ec;}
.breadcrumb {display:block;min-width:0;flex:1;}
.breadcrumb strong {font-size:17px;font-weight:700;letter-spacing:0;color:#322e2b;}
.crumb-top {display:none!important;}
.top-actions {gap:10px;margin-left:auto;}
.date-pill {font-size:12px;color:#93877e;}
.top-alert {border:1px solid #ebe6df;}
.top-alert i {background:#b86458;}
.header-avatar {display:none;}
.main-content {max-width:none;margin:0; padding:24px 26px 48px;}
.page-heading {align-items:center;gap:12px;margin-bottom:18px;}
.page-heading h1 {font-size:21px;font-weight:750;letter-spacing:0;margin:0;}
.page-heading p {display:none;}
.heading-actions {justify-content:flex-end;}

/* Buttons, fields, labels and feedback share Salon Calendar's compact language. */
.primary,.secondary,.subtle,.danger {font-size:13px;font-weight:650;border-radius:8px; min-height:39px;padding:9px 14px;box-shadow:none;transition:background .12s,border-color .12s;}
.primary {background:#5b483c;color:#fff;border-color:#5b483c;}
.primary:hover {background:#48372d;}
.secondary {background:#fff;border-color:#e5ded6;color:#55463b;}
.secondary:hover {background:#f8f4ef;}
.subtle {background:#f2eee8;color:#66584e;}
.danger {background:#fff6f4;color:#a2544f;border-color:#ead1cc;}
.form-field {gap:6px;}
.form-field label {color:#5c524c;font-weight:600;font-size:12px;}
.form-field input,.form-field select,.form-field textarea {min-height:42px;background:#fff;color:#352f2b;border:1px solid #ded7cf;border-radius:8px;padding:9px 11px;font-size:14px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {border-color:#a38871;box-shadow:0 0 0 3px #9a816517;outline:0;}
.form-grid {gap:12px;}
.form-actions {padding-top:18px;}
.toolbar {margin-bottom:14px;}
.toolbar input,.toolbar select {min-height:40px;border-radius:8px;border:1px solid var(--line);color:#55463b;}
.panel {border-color:var(--line);border-radius:11px;background:white;box-shadow:none;}
.panel-header {padding:17px 19px;border-bottom:1px solid var(--line);}
.panel-header h2,.panel h2 {font-size:16px;font-weight:700;}
.panel-body {padding:17px 19px;}
.stat-grid {gap:12px;margin-bottom:16px;}
.stat-card {border-color:var(--line);border-radius:10px;min-height:112px;padding:16px 18px;gap:12px;}
.stat-card small {font-size:12px;color:#80766e;font-weight:500;}
.stat-value {font-size:25px;font-weight:760;color:#392f28;}
.stat-icon {background:#f1ebe4;color:#78614e;width:34px;height:34px;border-radius:8px;}
.stat-icon svg {width:18px;height:18px;}
.list-row {border-color:#f0ece7;padding:13px 0;}
.list-row-info small {font-size:12px;color:#8a8179;margin-top:4px;}
.empty {padding:32px 12px;color:#988d84;}
.empty strong {color:#53463c;}
.empty-icon {background:#f4eee7;color:#8d7460;width:45px;height:45px;border-radius:9px;}
.empty-icon svg {width:21px;}
.pill {background:#f1ece6;color:#675749;border-radius:8px;padding:5px 9px;font-weight:600;}
.pill.green {background:#e6f0e9;color:#497a66;}
.pill.red {background:#f7e9e6;color:#985b56;}
.muted {color:#8d8278;}
.amount {font-weight:750;color:#4c3d32;}

/* Home screen: remove the navy marketing hero; retain same functional link and totals. */
.dashboard-hero {min-height:0;padding:18px 22px; margin-bottom:17px;background:#fff;border:1px solid var(--line);color:#3e322a;border-radius:11px;box-shadow:none;}
.dashboard-hero:after {display:none;}
.dashboard-hero h1 {font-size:23px;font-weight:750;margin:0 0 7px;line-height:1.4;}
.dashboard-hero p {color:#837a73;font-size:12px;margin:0 0 12px;line-height:1.55;}
.dashboard-hero button {background:#5b483c;color:#fff;border-radius:8px;padding:9px 13px;font-size:12px;}
.dash-secondary {gap:14px;}
.dash-list {padding:8px 20px 12px;}

/* Arsen's large clickable employee tiles, recolored and simplified. */
.employee-grid {gap:12px;}
.employee-tile {background:#fff;color:#3c332d;min-height:173px;padding:20px;border:1px solid #e4ded6;border-radius:11px;box-shadow:none;transition:background .15s,border-color .15s;}
.employee-tile:hover {transform:none;box-shadow:none;border-color:#b8a391;background:#fffcf9;}
.employee-tile:focus-visible {outline:2px solid #8b705a;}
.employee-tile:before {display:none;}
.employee-tile .employee-icon {background:#f1ebe4;color:#7d6652;width:51px;height:51px;border-radius:10px;}
.employee-tile .employee-icon svg {height:25px;width:25px;}
.employee-tile strong {font-size:18px;font-weight:720;}
.employee-adding {background:#faf8f4;border:1px dashed #cbbcae;}
.employee-adding strong {color:#726050;}

/* Flat finance/stock/debt tables and cards. */
.data-table th {background:#faf9f7;color:#837b73; font-size:11px;font-weight:650;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line);}
.data-table td {border-color:#f1efec;}
.item-grid {gap:12px;}
.item-card {border-color:var(--line);border-radius:10px;padding:14px;gap:13px;}
.item-thumb {background:#f1ece6;color:#8f7460;border-radius:8px;width:58px;height:58px;}
.item-details small {color:#95867c;}
.debt-card {padding:15px 19px;border:1px solid var(--line);border-radius:10px;}
.debt-card small {color:#8c8074;}
.debt-card .debt-money strong {color:#a35c55;}
.notif-dot {background:#88705b;}
.section-title {font-size:15px;font-weight:700;}
.note {background:#f5f0e9;color:#6d594b;border-radius:8px;}
.warning {background:#faf1e7;color:#8b654d;}
.inline-form {background:#faf8f5;border-color:var(--line);border-radius:10px;}
.settings-card {padding:20px;}
.settings-card p {color:#8b7f74;}
.file-input {border-color:#cdb9a7;border-radius:8px;}

/* Calendar remains Arsen's interactive day timeline, visually matches the calm grid. */
.calendar-wrap {border:1px solid #e7e1da;border-radius:11px;}
.calendar-header {height:53px;background:#faf9f7;border-color:#e8e3dc;color:#74675e;font-size:12px;}
.calendar-header strong {font-size:14px;color:#55483f;}
.calendar-scroll {height:min(655px,69vh);scrollbar-color:#cdbba7 #f8f5f0;}
.calendar-grid {margin-right:14px;}
.hour-rule {border-color:#ebe7e2;}
.hour-rule:nth-child(even) {border-top-style:dashed;}
.hour-rule label {color:#9a9188;}
.calendar-appt {border:1px solid #d2beaa;border-left:4px solid #ae9276;background:#eee5da;color:#534439;border-radius:6px;}
.calendar-appt small {color:#847365;}
.calendar-appt:nth-of-type(3n) {background:#eaf2ee;border-color:#b4d4c6;border-left-color:#6b9b85;color:#365c50;}
.calendar-appt:nth-of-type(4n) {background:#edeaf3;border-color:#c8bdd9;border-left-color:#897ba1;color:#615577;}
.calendar-appt.dragging {box-shadow:0 7px 24px #70564325;}
.clock-hint {color:#8e847b;}

/* Replace the old right-side full-height drawer with the approved centered dialog pattern. */
.modal-backdrop {inset:0;align-items:center;justify-content:center;padding:18px;background:#27201b70;}
.sheet,.sheet.sheet-small {height:auto;max-height:calc(100dvh - 36px);width:min(680px,100%);background:#fff;border:1px solid #e3ddd6;border-radius:16px;box-shadow:0 18px 65px #221a172a;animation:salonDialogIn .16s ease both;}
.sheet.sheet-small {width:min(580px,100%);}
@keyframes salonDialogIn {from {opacity:0;transform:translateY(10px)}to {opacity:1;transform:translateY(0)}}
.sheet-head {padding:18px 22px;border-bottom:1px solid #ebe6df;}
.sheet-title h2 {font-size:20px;font-weight:730;margin:0 0 4px;}
.sheet-title small {color:#9a8c80;font-size:12px;}
.sheet-x {display:grid;place-items:center;line-height:1;font-size:23px;width:35px;height:35px;background:#fff;border-color:#e8e2db;border-radius:8px;color:#57473c;padding:0;}
.sheet-tabs {padding:10px 19px 0;border-color:var(--line);gap:3px;}
.sheet-tabs button {padding:11px 13px 13px;color:#81766c;font-size:12px;font-weight:650;}
.sheet-tabs button.active {color:#5b483c;border-color:#5b483c;}
.sheet-content {min-height:0;padding:20px 22px 28px;overflow:auto;}
.sheet-mini-stats {gap:10px;margin-bottom:18px;}
.mini-stat {background:#faf8f5;border:1px solid #e8e3dc;border-radius:10px;padding:14px;}
.mini-stat small {color:#8a7f73;margin-bottom:7px;}
.mini-stat strong {color:#48382c;font-size:20px;}
.lock-icon {background:#eee6dd;border-radius:10px;color:#78624f;}

/* Login uses the Salon Calendar-style single centered card, not a blue splash screen. */
.auth-screen {min-height:100dvh;display:grid;grid-template-columns:1fr;place-items:center;background:#f5f1ec;}
.auth-art {display:none;}
.auth-form-holder {padding:22px;width:100%;display:grid;place-items:center;}
.auth-panel {background:#fff;border:1px solid #e8e1d9;border-radius:16px;max-width:430px;width:100%;padding:32px;box-shadow:0 16px 54px #5e4e3f10;}
.auth-panel h1 {font-size:24px;letter-spacing:0;color:#3a312a;margin:0 0 11px;}
.auth-panel>p {line-height:1.65;color:#8c8076;margin:0 0 24px;}
.auth-panel .primary {margin-top:12px;}
.boot-screen {background:#f5f1ec;color:#7b6c60;}
.loading-mark {background:#5b483c;box-shadow:none;border-radius:13px;}
.demo-notice {background:#f6f0e8;color:#78604f;border-radius:8px;}
.auth-lock-message {border-color:#e7c3bb;background:#fcf1ee;}
.toast {background:#49382d;border-radius:8px;box-shadow:0 12px 28px #1f17152c;}
.toast.error {background:#994f4d;}

/* Desktop sidebar icon mode (the same hamburger opens/closes it). */
@media (min-width:761px) {
 .app-layout.nav-collapsed .sidebar {width:64px;}
 .app-layout.nav-collapsed .side-nav {padding:12px 7px;}
 .app-layout.nav-collapsed .nav-item {justify-content:center;padding:10px 4px;}
 .app-layout.nav-collapsed .nav-item span {display:none;}
 .app-layout.nav-collapsed .side-bottom {padding:12px 6px;}
 .app-layout.nav-collapsed .user-block {justify-content:center;padding:9px 4px;}
 .app-layout.nav-collapsed .user-details,.app-layout.nav-collapsed .logout-icon {display:none;}
}
@media(max-width:1360px){.employee-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1060px){
 .sidebar{width:200px;}
 .main-content{padding:19px 18px 35px;}
 .topbar{padding:0 16px;}
 .date-pill{display:none;}
}
@media(max-width:760px){
 .sidebar {width:260px;position:fixed;transform:translateX(-110%);box-shadow:12px 0 35px #2e251b24;}
 .sidebar.open {transform:translateX(0);}
 .side-close {display:grid;align-self:flex-end;margin:10px 10px 0;border:1px solid #e2d9ce;width:34px;height:34px;flex:0 0 34px;}
 .side-nav {padding-top:8px;}
 .side-cover.visible {background:#27201877;}
 .topbar {height:56px;padding:0 11px;gap:9px;}
 .breadcrumb strong {font-size:15px;}
 .main-content {padding:16px 12px 35px;}
 .page-heading {align-items:flex-start;flex-direction:column;}
 .page-heading h1 {font-size:20px;}
 .employee-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
 .employee-tile {min-height:143px;padding:14px;border-radius:9px;}
 .employee-tile .employee-icon {width:42px;height:42px;border-radius:9px;}
 .employee-tile .employee-icon svg {width:20px;height:20px;}
 .employee-tile strong {font-size:15px;}
 .stat-grid {gap:8px;}
 .stat-card {min-height:102px;padding:12px;border-radius:9px;}
 .stat-value {font-size:21px;}
 .dashboard-hero {padding:16px;min-height:0;}
 .dashboard-hero h1 {font-size:20px;}
 .dashboard-hero p {font-size:12px;}
 .auth-art{display:none;}
 .auth-form-holder{padding:16px;}
 .auth-panel {padding:23px 19px;}
 .sheet,.sheet.sheet-small {width:100%;max-height:calc(100dvh - 20px);border-radius:12px;}
 .modal-backdrop {padding:10px;}
 .sheet-head {padding:15px 15px;}
 .sheet-content {padding:16px 15px 24px;}
 .sheet-tabs {padding:8px 12px 0;}
 .calendar-scroll {height:min(575px,62dvh);}
 .calendar-header {gap:8px;padding:0 9px;flex-wrap:wrap;height:auto;min-height:51px;}
 .calendar-header span {font-size:10px;}
 .date-pill{display:none;}
}
@media(max-width:390px){
 .employee-grid{grid-template-columns:1fr 1fr;}
 .employee-tile{min-height:126px;}
 .employee-tile strong{font-size:13px;}
 .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .stat-value{font-size:18px;}
 .top-actions{gap:4px;}
 .page-heading h1{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){.sheet{animation:none!important}}

/* v1.3 — real open/close sidebar and compact forms. */
@media (min-width:761px){
 .app-layout.nav-collapsed .sidebar{width:0!important;min-width:0!important;flex-basis:0!important;border:0!important;overflow:hidden;}
 .app-layout.nav-collapsed .main-side{flex:1;min-width:0;}
}
.photo-pickers{display:flex;flex-wrap:wrap;gap:10px;}
.photo-picker{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #d9cec2;background:#faf8f5;border-radius:8px;cursor:pointer;min-height:42px;color:#554638;font-weight:650;}
.photo-picker:focus-within{outline:2px solid #8b705a;outline-offset:2px;}
.photo-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.photo-name{color:#8a7d70;margin-top:7px;font-size:12px;}
.sheet-title small,.clock-hint,.demo-notice,.auth-panel>p,.settings-card>p,.note:not(.warning){display:none!important;}

/* v1.4 | Armenia phone mask, camera square guide, controlled restore */
.phone-wrap {display:flex;align-items:center;min-height:42px;overflow:hidden;border:1px solid #ded7cf;border-radius:8px;background:#fff;}
.phone-prefix {flex:0 0 auto;padding:0 10px 0 12px;border-right:1px solid #e8e0d8;color:#544339;font-weight:700;line-height:24px;}
.form-field .phone-wrap input {border:0;min-width:0;flex:1;margin:0;box-shadow:none;background:transparent;letter-spacing:.4px;}
.form-field .phone-wrap:focus-within {border-color:#a38871;box-shadow:0 0 0 3px #9a816517;}
.photo-pickers .photo-camera-btn {font-size:inherit;cursor:pointer;}
.photo-preview {display:inline-flex;align-items:center;gap:12px;margin-top:8px;color:#75685d;font-size:12px;}
.photo-preview img {width:84px;height:84px;object-fit:cover;border:2px solid #9f846d;border-radius:8px;}
.camera-overlay {position:fixed;inset:0;z-index:5000;background:#15110fe8;display:grid;place-items:center;padding:16px;}
.camera-panel {width:min(94vw,680px);display:grid;gap:12px;}
.camera-viewport {position:relative;width:100%;aspect-ratio:4/3;background:#171717;border-radius:12px;overflow:hidden;display:grid;place-items:center;}
.camera-viewport video {width:100%;height:100%;object-fit:cover;}
.camera-frame {position:absolute;top:50%;left:50%;height:min(72%,72vw);aspect-ratio:1/1;transform:translate(-50%,-50%);border:3px solid #f7eee3;border-radius:12px;box-shadow:0 0 0 100vmax #0004;pointer-events:none;}
.camera-controls {display:flex;justify-content:center;gap:12px;}
.restore-details {margin-top:18px;border-top:1px solid #e8e3dc;padding-top:14px;color:#554a42;}
.restore-details summary {cursor:pointer;font-weight:650;}
.restore-details form {margin-top:15px;}
.restore-details p {font-size:12px;color:#a35955;margin:10px 0 0;}

.camera-frame {height:100%;max-height:100%;}

/* v1.6 – company folders, dye and payroll views; preserve original warm salon palette. */
.firm-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 0 15px;scrollbar-width:thin;}
.firm-tab{flex:0 0 auto;min-height:43px;border:1px solid #d9ccbf;border-radius:10px;background:#f6f0e9;color:#5b493b;padding:9px 18px;font-weight:650;cursor:pointer;}
.firm-tab.chosen{background:#5a4435;color:white;border-color:#5a4435;}
.checkbox-label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:#513d2e;}
.checkbox-label input,.fund-checkbox{width:20px;height:20px;min-width:20px;accent-color:#73543e;cursor:pointer;}
.fund-checkbox{width:23px;height:23px;}
.salary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 4px;}
.salary-grid>div{padding:10px;border-radius:10px;background:#f6f0e9;color:#624b3b;min-width:0;}
#salaryResult>button{margin-top:9px;}
@media(max-width:650px){.salary-grid{grid-template-columns:1fr}.firm-tabs{padding-bottom:10px}}