.hourly-note {
  display: none;
  margin-top: 17px;
  padding: 10px;
  border-radius: 7px;
  background: #fff5e5;
  color: #855817;
  font-size: 10px;
  line-height: 1.45;
}

.price-preview {
  margin-top: 17px;
  padding: 11px;
  border-radius: 7px;
  background: #eef4ff;
  color: #204eae;
  font-size: 11px;
  font-weight: 800;
}

.price-preview b { font-size: 15px; }
.hourly-mode .daily-field,
.hourly-mode .price-preview { display: none; }
.hourly-mode .hourly-note { display: block; }
.hourly-field { display: none; }
.hourly-mode .hourly-field { display: block; }

.return-button {
  border: 0;
  border-radius: 6px;
  background: #edf3ff;
  color: #3268e8;
  padding: 7px 9px;
  font: 800 10px Manrope, sans-serif;
  cursor: pointer;
}

.return-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  padding: 11px;
  background: #f7f8fa;
  border-radius: 8px;
}

.return-summary strong, .return-summary small { display: block; }
.return-summary small { margin-top: 3px; color: #738096; font-size: 10px; }
.return-total { margin-top: 17px; padding: 12px; background: #eef4ff; border-radius: 7px; color: #294b91; font-size: 11px; }
.return-total strong { display: block; margin-top: 4px; color: #15233a; font-size: 16px; }
.section-actions { display: flex; gap: 9px; }
.campaign-message { display: block; margin-top: 15px; font-size: 11px; font-weight: 800; color: #536078; }
.campaign-message textarea { display: block; width: 100%; min-height: 106px; margin-top: 6px; padding: 10px; resize: vertical; border: 1px solid #e7ebf0; border-radius: 7px; font: 12px Manrope, sans-serif; outline-color: #3268e8; }
.campaign-help { margin-top: 15px; padding: 10px; border-radius: 7px; background: #fff5e5; color: #855817; font-size: 10px; line-height: 1.45; }
.channel-field { font-size: 11px; font-weight: 800; color: #536078; }
.channel-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.channel-checks label { display: flex; align-items: center; gap: 4px; padding: 8px; border: 1px solid #e7ebf0; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700; color: #536078; }
.channel-checks input { accent-color: #3268e8; }
.campaign-history { margin-top: 20px; }
.campaign-list { display: grid; gap: 2px; }
.campaign-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 13px 0; border-top: 1px solid #eff1f4; align-items: center; }
.campaign-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: #edf3ff; color: #3268e8; }
.campaign-data strong { font-size: 12px; }
.campaign-data p, .campaign-data small { display: block; margin: 3px 0 0; color: #738096; font-size: 10px; }
.campaign-data small { max-width: 540px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-result { display: grid; justify-items: end; gap: 2px; text-align: right; }
.campaign-result b { font-size: 15px; }
.campaign-result span { color: #738096; font-size: 10px; }
.campaign-result .link { margin-top: 4px; }
.recipient-table { margin-top: 10px; }
@media(max-width:650px) { .campaign-row { grid-template-columns: 34px 1fr; } .campaign-result { grid-column: 2; justify-items: start; text-align: left; } .section-actions .primary { display:none; } }
.chat-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 20px; }
.chat-list { padding: 15px; }
.chat-list h3 { padding: 5px 5px 0; }
.chat-list .sub { padding: 0 5px; }
.chat-person { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; padding: 10px 7px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.chat-person.selected, .chat-person:hover { background: #f1f5ff; }
.chat-person strong, .chat-person small { display: block; }
.chat-person strong { font-size: 11px; }
.chat-person small { overflow: hidden; max-width: 180px; color: #738096; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-person small b { color: #3268e8; }
.chat-person time { color: #738096; font-size: 9px; }
.chat-window { padding: 0; overflow: hidden; }
.chat-head { display: flex; gap: 10px; align-items: center; padding: 16px 19px; border-bottom: 1px solid #e7ebf0; }
.chat-head h3 { margin: 0; }
.chat-head p { margin: 3px 0 0; color: #738096; font-size: 10px; }
.chat-head .secondary { margin-left: auto; padding: 8px 10px; font-size: 10px; }
.chat-body { min-height: 266px; padding: 16px 19px; background: #fafbfd; }
.bubble { width: fit-content; max-width: 78%; margin: 8px 0; padding: 9px 10px; border-radius: 9px; font-size: 11px; line-height: 1.4; }
.bubble small { display: block; margin-top: 4px; color: #738096; font-size: 9px; text-align: right; }
.incoming { background: #fff; border: 1px solid #e7ebf0; }
.outgoing { margin-left: auto; background: #dfeaff; }
.chat-label { margin: 14px 0 7px; color: #8994a7; font-size: 9px; text-align: center; }
.chat-compose { display: flex; gap: 8px; padding: 12px 19px; border-top: 1px solid #e7ebf0; }
.chat-compose input { flex: 1; height: 38px; padding: 0 10px; border: 1px solid #e7ebf0; border-radius: 7px; font: 11px Manrope, sans-serif; }
@media(max-width:700px) { .chat-layout { grid-template-columns: 1fr; } .chat-list { display:none; } }
.logout { margin-left: auto; border: 0; background: transparent; color: #9babbe; font-size: 20px; cursor: pointer; }
.nav-item { position: relative; z-index: 2; pointer-events: auto; }
.login-screen { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #0b1526, #172944); }
.login-screen.hidden { display: none; }
.login-card { width: min(400px, 100%); padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 24px 90px #0005; }
.login-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; color: #15233a; font-size: 21px; font-weight: 800; }
.login-card h2 { margin: 5px 0; font-size: 23px; }
.login-subtitle { margin: 0 0 22px; color: #738096; font-size: 12px; }
.login-card label { display: block; margin-top: 14px; color: #536078; font-size: 11px; font-weight: 800; }
.login-card input, .login-card select { display: block; width: 100%; height: 42px; margin-top: 6px; padding: 0 11px; border: 1px solid #e7ebf0; border-radius: 8px; font: 12px Manrope, sans-serif; outline-color: #3268e8; }
.login-button { width: 100%; margin-top: 18px; }
.login-error { min-height: 16px; margin: 8px 0 0; color: #dc5960; font-size: 11px; }
.demo-access { margin-top: 18px; padding: 10px; border-radius: 7px; background: #f4f7ff; color: #51658d; font-size: 10px; line-height: 1.45; }
.season { transition: .2s ease; }
.season.summer { background: linear-gradient(135deg, #1d645e, #297d75); }
.season.winter { background: linear-gradient(135deg, #225787, #3278ae); }
.season-wrapper { margin: 0 4px 25px; }
.season-wrapper .season { margin: 0; }
.season-wrapper.open .season { border-radius: 12px; }
.season-change { margin-left: auto; padding: 6px 8px; border: 1px solid #ffffff66; border-radius: 6px; background: #ffffff16; color: #fff; font: 800 9px Manrope, sans-serif; cursor: pointer; }
.season-change span { margin-left: 3px; font-size: 12px; }
.season-switch { display: none; position: static; margin: 8px 0 0; padding: 8px; border-radius: 10px; background: #1a2b45; box-shadow: inset 0 1px #ffffff0a; }
.season-switch.open { display: grid; gap: 4px; }
.season-switch > small { padding: 2px 4px 5px; color: #9babbe; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.season-switch button { display: grid; grid-template-columns: 21px 1fr; column-gap: 5px; padding: 9px 7px; border: 0; border-radius: 7px; background: transparent; color: #dbe5f4; text-align: left; font: 700 14px Manrope, sans-serif; cursor: pointer; }
.season-switch button span { align-self: end; font-size: 10px; }
.season-switch button i { grid-column: 2; color: #9babbe; font-size: 9px; font-style: normal; font-weight: 500; }
.season-switch button:hover { background: #2b4264; color: #fff; }
.season-hero { display: flex; gap: 15px; align-items: center; margin-bottom: 22px; padding: 21px 23px; border-radius: 13px; color: #fff; overflow: hidden; }
.season-hero.summer { background: linear-gradient(125deg, #226a60, #3a9a7b); }
.season-hero.winter { background: linear-gradient(125deg, #205a8b, #5ca1cd); }
.season-hero-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 4px #0003); }
.season-hero p { margin: 0 0 3px; color: #d9f1ed; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.season-hero h2 { margin: 0 0 2px; font-size: 20px; }
.season-hero span { font-size: 11px; opacity: .9; }
.season-hero-button { margin-left: auto; padding: 9px 11px; border: 1px solid #ffffff77; border-radius: 7px; background: #ffffff18; color: #fff; font: 800 10px Manrope, sans-serif; cursor: pointer; }
.season-tab-note { margin-bottom: 15px; padding: 10px; border-radius: 8px; background: #eff7f5; color: #34726a; font-size: 11px; font-weight: 700; }
body[data-season="winter"] .season-tab-note { background: #edf5fb; color: #3673a0; }
body[data-season="winter"] .sidebar::before,
body[data-season="winter"] .sidebar::after { position: absolute; z-index: 0; color: #b9dcf7; font-family: Georgia, serif; font-size: 34px; line-height: 2.1; letter-spacing: 15px; opacity: .13; pointer-events: none; white-space: pre; }
body[data-season="winter"] .sidebar::before { top: 430px; right: -8px; content: "❄   ❅\A  ❆     ❄\A     ❅"; transform: rotate(-8deg); }
body[data-season="winter"] .sidebar::after { right: 14px; bottom: 106px; content: "❅     ❄\A   ❆"; transform: rotate(10deg); }
body[data-season="winter"] .sidebar > * { position: relative; z-index: 1; }
body[data-season="summer"] .sidebar::before,
body[data-season="summer"] .sidebar::after { position: absolute; z-index: 0; color: #84d7b7; font-size: 38px; line-height: 2.3; letter-spacing: 13px; opacity: .12; pointer-events: none; white-space: pre; }
body[data-season="summer"] .sidebar::before,
body[data-season="summer"] .sidebar::after { display: none; content: none; }
body[data-season="summer"] .sidebar > * { position: relative; z-index: 1; }
 .sidebar-palms { display: none; }
body[data-season="summer"] .sidebar > .sidebar-palms { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body[data-season="summer"] .sidebar-palms span { position: absolute; color: #84d7b7; font-size: 38px; line-height: 1; opacity: .17; }
body[data-season="summer"] .sidebar-palms span:nth-child(1) { top: 29%; left: 28px; transform: rotate(-10deg); }
body[data-season="summer"] .sidebar-palms span:nth-child(2) { top: 38%; right: 28px; transform: rotate(8deg); }
body[data-season="summer"] .sidebar-palms span:nth-child(3) { top: 47%; left: 102px; transform: rotate(-6deg); }
body[data-season="summer"] .sidebar-palms span:nth-child(4) { top: 56%; left: 46px; transform: rotate(10deg); }
body[data-season="summer"] .sidebar-palms span:nth-child(5) { top: 65%; right: 48px; transform: rotate(-9deg); }
body[data-season="summer"] .sidebar-palms span:nth-child(6) { top: 75%; left: 102px; transform: rotate(7deg); }

.cloud-login-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, #081325ef, #12315bf2); backdrop-filter: blur(6px); }
.cloud-login-screen.hidden { display: none; }
.cloud-login-card { width: min(100%, 440px); padding: 36px; border-radius: 22px; background: #fff; color: #10203a; box-shadow: 0 24px 72px rgba(0,0,0,.34); }
.cloud-login-card h2 { margin: 8px 0 10px; font-size: 26px; }
.cloud-login-card > p { margin: 0 0 22px; color: #587093; line-height: 1.55; }
.cloud-login-card label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.cloud-login-card input { min-height: 46px; padding: 0 13px; border: 1px solid #cfd9e8; border-radius: 10px; font: inherit; }
.cloud-login-card button { width: 100%; margin-top: 12px; }
.cloud-login-note { min-height: 20px !important; margin: 12px 0 0 !important; color: #265fde !important; font-size: 13px; line-height: 1.45 !important; }
.cloud-export { background: transparent; color: #44658f; box-shadow: none; font-size: 11px; text-decoration: underline; }
.cloud-migration { position: fixed; right: 20px; bottom: 20px; z-index: 8000; display: grid; gap: 7px; width: min(360px, calc(100vw - 40px)); padding: 17px; border: 1px solid #cddcf8; border-radius: 14px; background: #fff; box-shadow: 0 12px 35px rgba(18,49,91,.2); color: #17315c; }
.cloud-migration.hidden { display: none; }.cloud-migration strong { font-size: 14px; }.cloud-migration span { color: #62799b; font-size: 12px; line-height: 1.45; }.cloud-import { display: inline-flex; width: max-content; margin-top: 2px; padding: 9px 11px; border-radius: 8px; background: #edf3ff; color: #3268e8; font-size: 12px; font-weight: 800; cursor: pointer; }.cloud-import input { display: none; }
@media(max-width:650px) { .sidebar.mobile-open { display: flex; z-index: 500; width: min(82vw, 300px); box-shadow: 12px 0 36px rgba(0,0,0,.32); } }
.tariff-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 11px 0; }
.tariff-line span { padding: 5px 3px; border-radius: 5px; background: #f4f6f9; color: #7b879b; font-size: 8px; text-align: center; }
.tariff-line b { display: block; margin-top: 2px; color: #263852; font-size: 10px; }
.product-info footer { justify-content: flex-end; }
.rental-items-field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; align-items: end; }
.rental-items-field label { display: block; }
.add-item-button { height: 39px; white-space: nowrap; }
.unit-hint { grid-column: 1 / -1; margin: -1px 0 0; color: #738096; font-size: 10px; }
.unit-hint.error { color: #c84850; }
.unit-hint.success { color: #16835a; }
.rental-items-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 166px; overflow-y: auto; }
.rental-items-list .no-items { grid-column: 1 / -1; }
.no-items { padding: 10px; border: 1px dashed #dce2ea; border-radius: 7px; color: #8994a7; font-size: 10px; text-align: center; }
.selected-unit { display: grid; grid-template-columns: auto 1fr 24px; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 7px; background: #f3f6fb; }
.selected-unit b,.selected-unit small { display:block; font-size:10px; }
.selected-unit small { margin-top:1px; color:#738096; }
.selected-unit button { width:24px; height:24px; border:0; border-radius:6px; background:#e7ebf0; color:#647187; font-size:18px; line-height:1; cursor:pointer; }
.unit-number { display:inline-block; padding:4px 6px; border-radius:5px; background:#e5efff; color:#3268e8; font-size:10px; font-weight:800; white-space:nowrap; }
.inventory-summary { display:flex; gap:10px; align-items:center; margin-bottom:15px; padding:12px; border-radius:9px; background:#f0f5ff; color:#38568d; }
.inventory-summary > span { font-size:22px; }
.inventory-summary strong,.inventory-summary small { display:block; }
.inventory-summary strong { font-size:12px; }
.inventory-summary small { margin-top:2px; font-size:10px; }
.unit-table td { white-space:nowrap; }
@media(max-width:650px) { .rental-items-field { grid-template-columns:1fr; } .add-item-button { width:100%; } .unit-table th:nth-child(n+4),.unit-table td:nth-child(n+4) { display:none; } }
@media(max-width:650px) { .season-hero { padding: 16px; } .season-hero-button { display: none; } }
.inventory-filters { flex-wrap: wrap; }
.inventory-filters .search { flex: 1 1 280px; }
.unit-photo { display: grid; width: 38px; height: 38px; overflow: hidden; place-items: center; border-radius: 8px; background: #eef3fb; font-size: 20px; }
.unit-photo img { width: 100%; height: 100%; object-fit: cover; }
.unit-actions { display: flex; justify-content: flex-end; gap: 5px; }
.icon-action { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; background: #edf3ff; color: #3268e8; cursor: pointer; font: 700 16px/1 Manrope, sans-serif; }
.icon-action.danger { background: #fff0f0; color: #d7555d; }
.photo-upload { display: block; }
.photo-upload input { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; opacity: 0; }
.photo-upload span { display: grid; min-height: 39px; place-items: center; margin-top: 6px; padding: 8px; border: 1px dashed #b8c4d5; border-radius: 7px; color: #3268e8; font-size: 10px; text-align: center; cursor: pointer; }
.photo-preview { display: grid; height: 95px; overflow: hidden; place-items: center; border: 1px solid #e7ebf0; border-radius: 8px; background: #f6f8fb; font-size: 38px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.manage-unit-error { min-height: 16px; margin: 10px 0 0; color: #d7555d; font-size: 11px; }
@media(max-width:650px) { .inventory-filters .filter { display: block; flex: 1 1 145px; } .unit-table th:nth-child(n+5), .unit-table td:nth-child(n+5) { display: none; } }
.unit-suggestions { display: none; grid-column: 1 / -1; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px #13233b14; }
.unit-suggestions.open { display: grid; }
.unit-suggestions button { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 8px 9px; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; color: #22324b; text-align: left; cursor: pointer; }
.unit-suggestions button:last-child { border-bottom: 0; }
.unit-suggestions button:hover { background: #f2f6ff; }
.unit-suggestions .unit-photo { width: 30px; height: 30px; font-size: 16px; }
.unit-suggestions b,.unit-suggestions small { display: block; font-size: 10px; }
.unit-suggestions small { margin-top: 1px; color: #738096; }
.unit-suggestions i { color: #3268e8; font-size: 16px; font-style: normal; }
.rental-extras { margin-top: 17px; padding: 13px; border: 1px solid #e7ebf0; border-radius: 9px; background: #fbfcfe; }
.rental-extras h3 { margin: 0; font-size: 12px; }
.rental-extras p { margin: 3px 0 10px; color: #738096; font-size: 10px; }
.extra-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.extra-option { display: flex; gap: 4px; align-items: center; padding: 7px 8px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; color: #43536a; font: 700 10px Manrope, sans-serif; cursor: pointer; }
.extra-option:hover { border-color: #3268e8; color: #3268e8; }
.extra-option:disabled { cursor: not-allowed; opacity: .45; }
.extra-option small { color: #8490a2; font-size: 9px; }
.selected-extras { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.selected-extra { padding: 5px 7px; border-radius: 6px; background: #e9f1ff; color: #315da9; font-size: 10px; font-weight: 800; }
.selected-extra button { margin-left: 3px; border: 0; background: transparent; color: #315da9; font-size: 14px; line-height: 1; cursor: pointer; }
.extra-plus { display: grid; width: 17px; height: 17px; margin-left: 2px; place-items: center; border-radius: 50%; background: #3268e8; color: #fff; font-size: 13px; line-height: 1; }
.hourly-mode .price-preview { display: block; }
.price-preview { display: none; }
.price-preview.has-price { display: block; }
#pricePreview:not(.has-price) { display: none; }
.extras-management { margin-top: 20px; }
.extras-stock { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.extra-stock { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 7px; align-items: center; padding: 10px; border: 1px solid #edf0f4; border-radius: 8px; }
.extra-stock > span { font-size: 19px; }
.extra-stock b,.extra-stock small { display: block; font-size: 10px; }
.extra-stock small { margin-top: 2px; color: #738096; }
.rental-extras { grid-column: 1 / -1; margin-top: 0; }
.return-items { margin: -5px 0 17px; }
.return-items > p { margin: 0 0 8px; color: #738096; font-size: 10px; font-weight: 700; }
.return-items-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.return-item { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid #e7ebf0; border-radius: 7px; background: #fbfcfe; }
.return-item .unit-photo { width: 30px; height: 30px; font-size: 16px; }
.return-item b,.return-item small { display: block; font-size: 10px; }
.return-item small { margin-top: 2px; color: #738096; }
@media(max-width:650px) { .rental-items-list,.return-items-grid { grid-template-columns: 1fr; } }

/* Contract view: individual inventory numbers stay readable in group rentals. */
.contract-units { color: #3268e8; font-size: 11px; font-weight: 800; line-height: 1.55; }
.contract-unit { color: #3268e8; white-space: nowrap; }
.contract-extras { display: block; margin-top: 5px; color: #738096; font-size: 10px; }
.start-time { display: block; min-width: 126px; color: #43536a; font-size: 10px; font-weight: 700; line-height: 1.35; }
.contract-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.contract-table .contract-actions { min-width: 202px; }
.contract-preview-dialog { width: min(1050px, 96vw); max-width: none; height: min(880px, 94vh); padding: 24px; border: 0; border-radius: 18px; box-shadow: 0 22px 70px rgba(15, 33, 63, .28); }
.contract-preview-dialog::backdrop { background: rgba(13, 27, 48, .56); }
.contract-preview-dialog #contractPreviewFrame { display: block; width: 100%; height: calc(100% - 112px); min-height: 520px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; }
.contract-preview-dialog .dialog-actions { margin-top: 14px; }

/* The overview links to the rental journal, so row actions stay there. */
#content > .dashboard-grid > div:first-child > .card:first-child .contract-table th:last-child,
#content > .dashboard-grid > div:first-child > .card:first-child .contract-table td:last-child { display: none; }
.edit-rental-button,.return-button { border: 0; border-radius: 6px; padding: 7px 8px; color: #315da9; background: #edf3ff; font: 800 10px Manrope, sans-serif; cursor: pointer; white-space: nowrap; }
.return-button { color: #178056; background: #e6f7ef; }
.add-contract-unit { margin-top: 12px; }
.edit-contract-units { display: grid; gap: 6px; margin-top: 14px; }
.edit-contract-units > .client-meta { margin: 0; }
.edit-contract-unit { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 7px; background: #f5f8fc; }
.edit-contract-unit .unit-photo { width: 30px; height: 30px; font-size: 16px; }
.edit-contract-unit b,.edit-contract-unit small { display: block; font-size: 10px; }
.edit-contract-unit small,.edit-contract-unit time { margin-top: 1px; color: #738096; font-size: 9px; }
.edit-rental-extras { margin-top: 12px; padding: 10px; border-radius: 8px; background: #f7f9fc; }
.edit-rental-extras .client-meta { margin: 0 0 7px; }
.edit-contract-extra { background: #f4f8ff; }
.unit-table .unit-photo:has(img) { cursor: zoom-in; }
.inventory-photo-dialog { width: min(900px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 42px 14px 14px; background: #111b2c; }
.inventory-photo-dialog::backdrop { background: #0b1526cc; }
.inventory-photo-dialog .close { position: absolute; top: 9px; right: 9px; z-index: 1; background: #ffffffeb; }
.inventory-photo-dialog img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 84px); margin: 0 auto; object-fit: contain; border-radius: 7px; }
.return-choice { position: relative; cursor: pointer; }
.return-choice input { width: 15px; height: 15px; margin: 0 2px 0 0; accent-color: #3268e8; }
.return-choice:has(input:checked) { border-color: #9bb8f4; background: #f1f6ff; }
.return-pay-now { display: block; margin-top: 10px; color: #40516a; font-size: 11px; font-weight: 700; }
.return-pay-now input { accent-color: #3268e8; }
.rental-table-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 9px; }
.rental-table-title h3,.history-title h3 { margin: 0; font-size: 13px; }
.rental-table-title span { padding: 3px 7px; border-radius: 10px; background: #edf3ff; color: #3268e8; font-size: 10px; font-weight: 800; }
.history-card { margin-top: 18px; }
.history-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 9px; }
.history-title .sub { margin: 3px 0 0; }
.danger-button { border: 0; border-radius: 8px; padding: 10px 13px; background: #fff0f0; color: #c64e58; font: 800 11px Manrope, sans-serif; cursor: pointer; }
.category-card { margin-top: 18px; }
.category-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.category-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 10px; border: 1px solid #e8edf3; border-radius: 8px; }
.category-row > span { font-size: 18px; }
.category-row b,.category-row small { display: block; font-size: 10px; }
.category-row small { margin-top: 2px; color: #738096; }
.history-toolbar { flex-wrap: wrap; }
.history-toolbar .date-filter { width: 155px; }
.shift-card { margin-top: 0; align-self: start; }
.dashboard-grid > div:first-child > .card:first-child { min-height: 558px; }
.shift-date { display: block; color: #536078; font-size: 11px; font-weight: 800; }
.shift-date input,.shift-payment input,.staff-fields input { display: block; height: 37px; width: 100%; margin-top: 5px; padding: 0 9px; border: 1px solid #e0e6ee; border-radius: 7px; font: 12px Manrope, sans-serif; outline-color: #3268e8; }
.shift-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0 7px; }
.shift-metrics span { padding: 9px; border-radius: 7px; background: #f4f7fb; color: #738096; font-size: 9px; }
.shift-metrics b { display: block; margin-bottom: 3px; color: #263852; font-size: 12px; }
.shift-payment { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.shift-payment label { color: #536078; font-size: 10px; font-weight: 800; }
.shift-payment-readonly span { padding: 9px; border-radius: 7px; background: #f4f7fb; color: #738096; font-size: 10px; font-weight: 700; }
.shift-payment-readonly b { display: block; margin-bottom: 3px; color: #263852; font-size: 13px; }
.shift-card h4 { margin: 17px 0 8px; font-size: 11px; }
.shift-staff-list { display: grid; gap: 6px; }
.shift-staff { display: grid; grid-template-columns: 16px 1fr minmax(125px, .75fr); gap: 7px; align-items: center; padding: 8px; border: 1px solid #e7ebf0; border-radius: 7px; cursor: pointer; }
.shift-staff > input { width: 15px; height: 15px; margin: 0; accent-color: #3268e8; }
.shift-staff b,.shift-staff small { display: block; font-size: 10px; }
.shift-staff small { margin-top: 2px; color: #738096; line-height: 1.25; }
.staff-fields { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 3px; align-items: end; }
.staff-fields input { min-width: 0; margin: 0; height: 31px; }
.staff-fields i { color: #738096; font-size: 10px; font-style: normal; }
.staff-pay-label { color: #3268e8; font-size: 10px; font-weight: 800; text-align: right; white-space: nowrap; }
.shift-total { margin: 11px 0; color: #263852; font-size: 11px; font-weight: 800; }
.shift-submit { width: 100%; }
.shift-reports { margin-top: 10px; }
.net-income { color: #14865b; white-space: nowrap; }
.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; }
.check-unit { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid #f5ddbd; border-radius: 7px; background: #fff9ed; }
.check-unit .unit-photo { width: 30px; height: 30px; font-size: 15px; }
.check-unit b,.check-unit small { display: block; font-size: 10px; }
.check-unit small { margin-top: 2px; color: #9a6a2c; }
.check-empty { padding: 12px; border-radius: 7px; background: #f4f7fb; color: #738096; font-size: 11px; }
@media(max-width:650px) { .shift-metrics,.shift-payment { grid-template-columns: 1fr; } .shift-staff { grid-template-columns: 16px 1fr; } .staff-fields { grid-column: 2; } .history-title { align-items: flex-start; flex-direction: column; } }
@media(max-width:900px) { .dashboard-grid > div:first-child > .card:first-child { min-height: 0; } }
@media(max-width:900px) { .contract-table th:nth-child(4),.contract-table td:nth-child(4) { display:none; } }
@media(max-width:650px) { .contract-actions { justify-content: flex-start; flex-wrap: wrap; } .contract-table td:last-child,.contract-table th:last-child { display: table-cell; } }

/* Руководитель управляет доступом и условиями сотрудников в настройках. */
.staff-management { margin-top: 18px; padding: 20px 22px 0; overflow: hidden; }
.staff-management .section-title { margin: 0 0 14px; }
.staff-management .staff-table { width: calc(100% + 44px); margin: 0 -22px; }
.staff-table td { vertical-align: middle; }
.staff-role { display: inline-block; padding: 4px 7px; border-radius: 12px; background: #edf3ff; color: #315da9; font-size: 10px; font-weight: 800; }
.staff-conditions { color: #536078; font-size: 11px; line-height: 1.5; }
.staff-actions { display: flex; justify-content: flex-end; gap: 5px; }
.staff-dialog-note { margin: 0 0 14px; color: #738096; font-size: 11px; line-height: 1.45; }
.staff-checkbox { display: flex; grid-column: 1 / -1; gap: 8px; align-items: center; color: #40516a; font-size: 11px; font-weight: 800; }
.staff-checkbox input { width: 15px; height: 15px; margin: 0; accent-color: #3268e8; }
.staff-dialog-error { min-height: 15px; margin: 9px 0 0; color: #c64e58; font-size: 10px; font-weight: 700; }
@media(max-width:650px) { .staff-table th:nth-child(3),.staff-table td:nth-child(3) { display: none; } }

/* Financial reports and an expense journal for the leader. */
.report-toolbar { align-items: center; }
.report-toolbar label { display: flex; align-items: center; gap: 6px; color: #536078; font-size: 11px; font-weight: 800; }
.report-range { padding: 8px 10px; color: #536078; font-size: 11px; font-weight: 800; }
.financial-summary,.expenses-card { margin-top: 18px; }
.financial-metrics { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 8px; padding: 0 18px 18px; }
.financial-metrics > div { padding: 11px; border-radius: 8px; background: #f4f7fb; }
.financial-metrics small { display: block; margin-bottom: 4px; color: #738096; font-size: 10px; font-weight: 700; }
.financial-metrics b { color: #263852; font-size: 15px; }
.financial-metrics .financial-net { background: #e7f7ef; }
.financial-metrics .financial-net b { color: #14865b; }
.negative-money { color: #c25949 !important; }
.expenses-card .history-title { padding-bottom: 14px; }
.expense-kind { display: inline-block; padding: 4px 7px; border-radius: 12px; background: #f1f3f6; color: #536078; font-size: 10px; font-weight: 800; }
.expense-kind.monthly { background: #fff3df; color: #b46d17; }
.expense-kind.annual { background: #e8f1ff; color: #315da9; }
.expense-form-error { min-height: 15px; margin: 10px 0 0; color: #c64e58; font-size: 10px; font-weight: 700; }
.form-error { min-height: 15px; margin: 10px 0 0; color: #c64e58; font-size: 12px; font-weight: 700; }
.internal-client-note { color: #607899; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.internal-note-field { grid-column: 1 / -1; }
.internal-note-field textarea { display: block; box-sizing: border-box; width: 100%; height: 62px; min-height: 62px; max-height: 62px; margin-top: 6px; padding: 10px 12px; resize: none; border: 1px solid #dce4ed; border-radius: 7px; color: #1d2c42; font: 600 12px Manrope, sans-serif; outline: none; }
.internal-note-field textarea:focus { border-color: #3268e8; box-shadow: 0 0 0 2px rgba(50,104,232,.1); }
.loyalty-card-info { grid-column: 1 / -1; margin: -2px 0 0; padding: 9px 10px; border-radius: 7px; background: #f0f6ff; color: #355a9d; font-size: 11px; font-weight: 700; }
.status.loyalty-bronze { background: #fff0dd; color: #9a5b20; }
.status.loyalty-silver { background: #edf1f6; color: #5d6877; }
.status.loyalty-gold { background: #fff4c9; color: #91660b; }
.status.loyalty-personal { background: #def5ec; color: #078763; }
.loyalty-progress { margin-top: 3px; white-space: nowrap; }
.contracts-settings { margin-top: 20px; padding: 20px 24px; overflow: visible; }
.contract-template-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.contract-template-card { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid #e0e7f0; border-radius: 9px; }
.contract-template-card > span { font-size: 20px; }.contract-template-card b,.contract-template-card small { display: block; }.contract-template-card small { margin-top: 3px; color: #74839a; font-size: 10px; }.contract-template-card.summer { background: #f3fbf6; }.contract-template-card.winter { background: #f2f7ff; }
.contract-template-full { grid-column: 1 / -1; }.contract-template-full textarea { display: block; box-sizing: border-box; width: 100%; min-height: 210px; margin-top: 6px; padding: 10px 12px; resize: vertical; border: 1px solid #dce4ed; border-radius: 7px; color: #1d2c42; font: 600 12px Manrope, sans-serif; }.contract-template-note { margin: 12px 0 0; color: #6c7e98; font-size: 11px; line-height: 1.45; }
.client-data-field { grid-column: 1 / -1; }
.client-data-field textarea { display:block; box-sizing:border-box; width:100%; min-height:72px; margin-top:6px; padding:10px 12px; resize:vertical; border:1px solid #dce4ed; border-radius:7px; color:#1d2c42; font:600 12px Manrope,sans-serif; outline-color:#3268e8; }
.client-data-field small { display:block; margin-top:6px; color:#6c7e98; font-size:10px; font-weight:600; line-height:1.35; }
@media(max-width:760px){.contract-template-cards{grid-template-columns:1fr}}
@media(max-width:650px){.contracts-settings { padding: 18px 14px; }}
.expense-preset-hint { display: block; margin-top: 5px; color: #738096; font-size: 9px; font-weight: 600; line-height: 1.35; }
.shift-detail-dialog { padding: 25px; }
.shift-detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.shift-detail-metrics span { padding: 10px; border-radius: 7px; background: #f4f7fb; }
.shift-detail-metrics small,.shift-detail-rental small { display: block; color: #738096; font-size: 10px; line-height: 1.45; }
.shift-detail-metrics b { display: block; margin-top: 3px; color: #263852; font-size: 13px; }
.shift-detail-staff { margin-top: 15px; padding: 10px; border-radius: 7px; background: #f7f9fc; font-size: 11px; }
.shift-detail-staff p { margin: 4px 0 0; color: #536078; line-height: 1.5; }
.shift-detail-heading { margin: 17px 0 9px; font-size: 13px; }
.shift-detail-rentals { display: grid; gap: 7px; }
.shift-detail-rental { display: grid; grid-template-columns: 1.1fr 1.25fr 1fr 1fr; gap: 10px; padding: 10px; border: 1px solid #e8edf3; border-radius: 8px; font-size: 11px; }
.shift-detail-rental b { display: block; margin-bottom: 2px; }
.closed-shift-filter { display: flex; align-items: center; gap: 7px; color: #536078; font-size: 10px; font-weight: 800; white-space: nowrap; }
.closed-shift-filter input { width: 145px; }
@media(max-width:650px) { .shift-detail-metrics,.shift-detail-rental { grid-template-columns: 1fr; } }
.dashboard-side { display: grid; align-content: start; gap: 18px; }
.top-equipment .section-title { margin-bottom: 12px; }
.top-equipment .sub { margin-bottom: 0; }
.top-equipment-list { display: grid; gap: 6px; }
.top-equipment-row { display: grid; grid-template-columns: 20px 31px 1fr auto; gap: 7px; align-items: center; padding: 7px; border: 1px solid #edf0f4; border-radius: 7px; }
.top-equipment-row .unit-photo { width: 30px; height: 30px; font-size: 15px; }
.top-equipment-row b,.top-equipment-row small { display: block; font-size: 10px; }
.top-equipment-row small { margin-top: 2px; color: #738096; }
.top-equipment-row strong { color: #3268e8; font-size: 10px; white-space: nowrap; }
.top-rank { color: #8994a7; font-size: 11px; font-weight: 800; text-align: center; }
@media(max-width:900px) { .financial-metrics { grid-template-columns: repeat(2, minmax(135px, 1fr)); } }
@media(max-width:650px) { .financial-metrics { grid-template-columns: 1fr; } .report-range { width: 100%; padding-left: 0; } .report-toolbar label { flex: 1 1 145px; } .report-toolbar label input { width: 100%; } }

/* Touch-first layout for the working phone and a future tablet. */
button, input, select, textarea { touch-action: manipulation; }
.contract-print-frame { position: fixed; left: -10000px; top: 0; display: block; width: 297mm; height: 210mm; border: 0; opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .app-shell { display: block; }
  .sidebar {
    display: flex;
    width: min(320px, 86vw);
    min-height: 100dvh;
    padding: 22px 15px calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-105%);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 700;
    overflow-y: auto;
  }
  .sidebar.mobile-open { display: flex; transform: translateX(0); box-shadow: 14px 0 38px rgba(4, 15, 33, .38); }
  .main { width: 100%; margin-left: 0; }
  .topbar { height: auto; min-height: 82px; padding: 17px 24px; }
  .mobile-menu { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #29415f; font-size: 21px; }
  .main #content { max-width: none; padding: 24px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dashboard-side > .card { height: 100%; }
  .topbar h1 { font-size: 22px; }
}

@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
  .stat { min-height: 104px; padding: 15px; }
  .stat-value { font-size: 23px; }
  .section-title { gap: 12px; align-items: flex-end; }
  .section-title > .primary, .section-title > .secondary { min-height: 42px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1 1 280px; }
  .toolbar .filter { flex: 1 1 170px; }

  /* Each row becomes a short, labelled card. All values stay available. */
  .page-card { overflow: visible; background: transparent; border: 0; padding: 0; }
  .page-card .table, .dashboard-grid .table { display: block; width: 100%; }
  .page-card .table thead, .dashboard-grid .table thead { display: none; }
  .page-card .table tbody, .dashboard-grid .table tbody { display: grid; gap: 9px; }
  .page-card .table tr, .dashboard-grid .table tr { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .page-card .table td, .dashboard-grid .table td {
    display: grid;
    grid-template-columns: minmax(105px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 39px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    white-space: normal !important;
    font-size: 12px;
    line-height: 1.4;
  }
  .page-card .table td:last-child, .dashboard-grid .table td:last-child { border-bottom: 0; }
  .page-card .table td::before, .dashboard-grid .table td::before { content: attr(data-label); color: #7d899b; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
  .page-card .table td:empty, .dashboard-grid .table td:empty { display: none; }
  .page-card .table .item-cell { flex-wrap: wrap; }
  .page-card .table .status, .dashboard-grid .table .status { justify-self: start; }
  .dashboard-grid > div:first-child > .card:first-child { min-height: 0; }
  .financial-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-preview-dialog { width: calc(100vw - 28px); height: min(860px, 92dvh); padding: 16px; }
  .contract-preview-dialog #contractPreviewFrame { min-height: 420px; }
}

@media (max-width: 600px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; overflow-x: hidden; }
  .sidebar { width: min(320px, 88vw); padding-top: calc(18px + env(safe-area-inset-top)); }
  .brand { padding-bottom: 20px; }
  .nav-item { min-height: 45px; padding: 12px; font-size: 14px; }
  .sidebar-bottom { margin-top: 18px; }
  .topbar { position: sticky; top: 0; z-index: 100; min-height: 72px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .topbar > div:nth-child(2) { min-width: 0; }
  .topbar h1 { overflow: hidden; margin-top: 0; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar p { display: none; }
  .mobile-menu { width: 42px; height: 42px; }
  .header-actions .primary { min-height: 42px; padding: 10px 12px; font-size: 11px; white-space: nowrap; }
  .main #content { padding: 18px 14px calc(28px + env(safe-area-inset-bottom)); }
  .section-title { align-items: stretch; margin-bottom: 16px; }
  .section-title > div { flex: 1 1 150px; }
  .section-title h2 { font-size: 20px; }
  .section-title > .primary, .section-title > .secondary { flex: 0 0 auto; padding: 10px 12px; font-size: 11px; }
  .toolbar { gap: 8px; margin-bottom: 14px; }
  .toolbar .search, .toolbar .filter { flex: 1 1 100%; width: 100%; min-width: 0; height: 44px; font-size: 13px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat { min-height: 96px; padding: 13px; border-radius: 10px; }
  .stat-label { font-size: 9px; line-height: 1.35; }
  .stat-value { margin: 7px 0; font-size: 20px; }
  .stat-note { font-size: 9px; line-height: 1.35; }
  .card { padding: 15px; border-radius: 11px; }
  .dashboard-grid { gap: 14px; }
  .dashboard-side { grid-template-columns: 1fr; gap: 14px; }
  .inventory-grid { grid-template-columns: 1fr; gap: 11px; }
  .inventory-card { display: grid; grid-template-columns: 94px minmax(0, 1fr); }
  .product-photo { height: 100%; min-height: 112px; font-size: 36px; }
  .product-info { padding: 13px; }
  .product-info footer { align-items: flex-start; gap: 8px; flex-direction: column; }
  .message { grid-template-columns: 35px minmax(0, 1fr); padding: 13px; }
  .message time { grid-column: 2; }
  .chat-head, .chat-body, .chat-compose { padding-left: 13px; padding-right: 13px; }
  .chat-head .secondary { display: none; }
  .campaign-data small { max-width: 220px; }
  .financial-metrics { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .history-title, .rental-table-title { padding-left: 14px; padding-right: 14px; }
  .return-summary { align-items: flex-start; }
  .return-items-grid, .rental-items-list { grid-template-columns: 1fr; }
  .rental-extras { padding: 12px; }
  .extra-option { min-height: 36px; font-size: 11px; }
  .cloud-login-screen { align-items: flex-end; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .cloud-login-card, .login-card { width: 100%; padding: 25px 20px; border-radius: 18px; }
  .cloud-login-card h2, .login-card h2 { font-size: 23px; }
  .cloud-login-card input, .login-card input, .login-card select { min-height: 48px; font-size: 16px; }
  .cloud-migration { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  dialog form { max-height: calc(100dvh - 16px); padding: 19px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .dialog-head { position: sticky; top: -19px; z-index: 2; margin: -19px -16px 17px; padding: 17px 16px 12px; background: #fff; }
  .dialog-head h2 { font-size: 19px; }
  .form-grid { gap: 13px; }
  .form-grid label { font-size: 12px; }
  .form-grid input, .form-grid select, .internal-note-field textarea, .client-data-field textarea { min-height: 44px; font-size: 16px; }
  .dialog-actions { position: sticky; bottom: -20px; z-index: 2; margin: 18px -16px -20px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
  .dialog-actions button { min-height: 44px; flex: 1 1 0; }
  .contract-preview-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 12px; }
  .contract-preview-dialog #contractPreviewFrame { height: calc(100% - 104px); min-height: 350px; }
}

.cloud-update-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  display: none;
  align-items: center;
  gap: 14px;
  max-width: min(470px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid #cfe0ff;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(20, 49, 95, .17);
  color: #183254;
  font-size: 13px;
  line-height: 1.35;
}
.cloud-update-notice.visible { display: flex; }
.cloud-update-notice button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  background: #3168e6;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 640px) {
  .cloud-update-notice { right: 12px; bottom: 12px; align-items: stretch; flex-direction: column; gap: 10px; }
  .cloud-update-notice button { width: 100%; }
}