/* =====================================================

     RESET

===================================================== */

* {

   box-sizing: border-box;

}

html,

body {

   margin: 0;

   padding: 0;

   width: 100%;

   min-height: 100%;

   font-family: var(--sg-font-ui, system-ui);

   background: var(--sg-workspace-bg);

   color: var(--sg-text);

   -webkit-text-size-adjust: 100%;

}

body {

   overflow-x: hidden;

}

button,

input,

select,

textarea {

   font-family: inherit;

}

button {

   outline: none;

}

img {

   max-width: 100%;

}

.hidden {

   display: none !important;

}

/* =====================================================

     LOADING

===================================================== */

.loading-screen {

   position: fixed;

   inset: 0;

   z-index: 9999;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

   gap: 18px;

   background: #f7f9fb;

}

.loader {

   width: 42px;

   height: 42px;

   border-radius: 50%;

   border: 4px solid #dfe7ed;

   border-top-color: #13b8a6;

   animation: spin 0.8s linear infinite;

}

.loading-text {

   font-size: 13px;

   font-weight: 600;

   color: #607080;

}

@keyframes spin {

   to {

      transform: rotate(360deg);

   }

}

/* =====================================================

     LOGIN

===================================================== */

.login-screen {

   position: fixed;

   inset: 0;

   z-index: 9000;

   width: 100%;

   min-height: 100vh;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 24px;

   background:

      radial-gradient(

         circle at top left,

         rgba(24,184,166,0.10),

         transparent 34%

      ),

      var(--sg-workspace-bg);

}

.login-card {

   width: min(420px, 100%);

   padding: 32px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 18px;

   background: var(--sg-card-bg);

   box-shadow:

      0 22px 60px rgba(12,45,62,0.12);

}

.login-brand {

   display: flex;

   align-items: center;

   gap: 12px;

   margin-bottom: 30px;

}

.login-logo-wrap {

   width: 46px;

   height: 46px;

   flex: 0 0 46px;

   overflow: hidden;

   border-radius: 12px;

   background: var(--sg-text);

}

.login-logo-wrap img {

   width: 100%;

   height: 100%;

   display: block;

   object-fit: cover;

}

.login-brand-text {

   min-width: 0;

   display: flex;

   flex-direction: column;

   gap: 3px;

}

.login-brand-text strong {

   color: var(--sg-text);

   font-size: 20px;

   font-weight: 800;

   letter-spacing: -0.35px;

}

.login-brand-text span {

   color: var(--sg-text-muted);

   font-size: 10px;

   font-weight: 600;

}

.login-heading {

   margin-bottom: 23px;

}

.login-heading h1 {

   margin: 0;

   color: var(--sg-text);

   font-size: 26px;

   font-weight: 780;

   letter-spacing: -0.5px;

}

.login-heading p {

   margin: 7px 0 0;

   color: #7f8e99;

   font-size: 12px;

}

.login-form {

   display: flex;

   flex-direction: column;

   gap: 15px;

}

.login-field {

   display: flex;

   flex-direction: column;

   gap: 7px;

}

.login-field > span {

   color: #425865;

   font-size: 10px;

   font-weight: 700;

}

.login-field input {

   width: 100%;

   height: 44px;

   padding: 0 13px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 9px;

   outline: none;

   background: var(--sg-card-bg);

   color: var(--sg-text);

   font-size: 12px;

   transition:

      border-color 0.15s ease,

      box-shadow 0.15s ease;

}

.login-field input::placeholder {

   color: #a0abb3;

}

.login-field input:focus {

   border-color: var(--sg-primary);

   box-shadow:

      0 0 0 3px rgba(24,184,166,0.10);

}

.login-error {

   padding: 10px 11px;

   border: 1px solid #f3c8cb;

   border-radius: 8px;

   background: #fff3f4;

   color: #c54d54;

   font-size: 10px;

   font-weight: 650;

   line-height: 1.45;

}

.login-submit {

   width: 100%;

   height: 44px;

   margin-top: 2px;

   border: none;

   border-radius: 9px;

   background: var(--sg-primary);

   color: #ffffff;

   cursor: pointer;

   font-size: 12px;

   font-weight: 750;

   box-shadow:

      0 8px 20px rgba(24,184,166,0.20);

}

.login-submit:hover {

   background: #15aa99;

}

.login-submit:disabled {

   cursor: wait;

   opacity: 0.68;

}

.login-footer {

   margin-top: 21px;

   padding-top: 17px;

   border-top: 1px solid var(--sg-border-ui);

   color: #94a0a9;

   font-size: 9px;

   text-align: center;

}

.logout-button {

   width: 32px;

   height: 32px;

   flex: 0 0 32px;

   display: inline-flex;

   align-items: center;

   justify-content: center;

   border: 1px solid var(--sg-border-ui);

   border-radius: 8px;

   background: var(--sg-card-bg);

   color: #6f7f89;

   cursor: pointer;

   font-size: 15px;

   line-height: 1;

}

.logout-button svg {

   width: 19px;

   height: 19px;

   flex: 0 0 19px;

   display: block;

}

.logout-button:hover {

   border-color: #ccd7dc;

   color: var(--sg-text);

}

/* =====================================================

     APPLICATION

===================================================== */

.app {

   width: 100%;

   min-height: 100vh;

   display: flex;

   background: var(--sg-workspace-bg);

}

/* =====================================================

     SIDEBAR

===================================================== */

.sidebar {

   position: fixed;

   left: 0;

   top: 0;

   bottom: 0;

   width: 220px;

   padding: 24px 15px;

   background: var(--sg-text);

   display: flex;

   flex-direction: column;

   z-index: 100;

   box-shadow:

      4px 0 18px rgba(12,45,62,0.10);

}

/* LOGO */

.sidebar-logo {

   display: flex;

   align-items: center;

   gap: 10px;

   padding: 0 10px 28px;

}

.sg-brand-reload {

   appearance: none;

   border: 0;

   background: transparent;

   color: inherit;

   font: inherit;

   text-align: left;

   cursor: pointer;

}

.sidebar-logo.sg-brand-reload {

   width: 100%;

}

.mobile-brand.sg-brand-reload {

   padding: 0;

   margin: 0;

}

.sg-brand-reload:focus-visible {

   outline: 2px solid var(--sg-primary);

   outline-offset: 3px;

   border-radius: 10px;

}

.sidebar-logo-mark {

   width: 38px;

   height: 38px;

   flex: 0 0 38px;

   display: flex;

   align-items: center;

   justify-content: center;

   border-radius: 11px;

   background: #19b7a5;

   color: #ffffff;

   font-size: 20px;

   font-weight: 800;

}

.sidebar-logo-text {

   display: flex;

   align-items: baseline;

   gap: 2px;

}

.sidebar-logo-text strong {

   color: #ffffff;

   font-size: 17px;

}

.sidebar-logo-text span {

   color: #20ccb7;

   font-size: 12px;

   font-weight: 700;

}

/* SIDEBAR MENU */

.sidebar-menu {

   display: flex;

   flex-direction: column;

   gap: 5px;

   min-height: 0;

   overflow-y: auto;

   overscroll-behavior: contain;

   scrollbar-width: thin;

}

.sidebar-item,

.sidebar-placeholder {

   width: 100%;

   height: 42px;

   border: none;

   border-radius: 9px;

   display: flex;

   align-items: center;

   gap: 12px;

   padding: 0 13px;

   background: transparent;

   color: #b8c7ce;

   font-size: 13px;

   font-weight: 550;

   text-align: left;

}

.sidebar-item {

   cursor: pointer;

}

.sidebar-item:hover {

   background: rgba(255,255,255,0.07);

   color: #ffffff;

}

.sidebar-item.active {

   background: var(--sg-primary);

   color: #ffffff;

   box-shadow:

      0 8px 20px rgba(24,184,166,0.20);

}

.sidebar-placeholder {

   opacity: 0.60;

}

.sidebar-icon {

   width: 20px;

   display: inline-flex;

   align-items: center;

   justify-content: center;

   flex: 0 0 20px;

   font-size: 17px;

}

.sidebar-divider {

   height: 1px;

   margin: 14px 7px;

   background: rgba(255,255,255,0.09);

}

/* SIDEBAR BOTTOM */

.sidebar-bottom {

   margin-top: auto;

   flex: 0 0 auto;

}

.ai-assistant-card {

   display: flex;

   align-items: center;

   gap: 10px;

   padding: 12px;

   border-radius: 10px;

   background:

      rgba(255,255,255,0.07);

}

.ai-assistant-icon {

   width: 32px;

   height: 32px;

   flex: 0 0 32px;

   border-radius: 8px;

   display: flex;

   align-items: center;

   justify-content: center;

   background: var(--sg-primary);

   color: white;

}

.ai-assistant-card strong {

   display: block;

   color: white;

   font-size: 12px;

}

.ai-assistant-card span {

   display: block;

   margin-top: 2px;

   color: #9db2bc;

   font-size: 10px;

}

.sidebar-settings {

   display: flex;

   align-items: center;

   gap: 10px;

   padding: 12px;

   color: #aebfc7;

   font-size: 12px;

   font-family: inherit;

   text-align: left;

   background: transparent;

   border: 0;

   border-radius: 9px;

   width: 100%;

   min-height: 44px;

   cursor: pointer;

}

.sidebar-bottom .sidebar-divider {

   margin: 8px 7px;

}

/* =====================================================

     MAIN SHELL

===================================================== */

.main-shell {

   flex: 1;

   min-width: 0;

   width: calc(100% - 220px);

   margin-left: 220px;

}

/* =====================================================

     TOP HEADER

===================================================== */

.top-header {

   position: sticky;

   top: 0;

   z-index: 80;

   width: 100%;

   height: 70px;

   padding: 0 28px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 20px;

   background: var(--sg-card-bg);

   border-bottom: 1px solid #e9edf1;

}

/* SEARCH */

.header-search {

   width: min(360px, 40vw);

   height: 40px;

   display: flex;

   align-items: center;

   gap: 9px;

   padding: 0 13px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 9px;

   background: var(--sg-surface-soft);

}

.header-search-icon {

   flex: 0 0 auto;

   color: #80909e;

   font-size: 18px;

}

.header-search input {

   flex: 1;

   min-width: 0;

   border: none;

   outline: none;

   background: transparent;

   color: #243847;

   font-size: 12px;

}

.header-search input::placeholder {

   color: #9ba7b1;

}

/* HEADER ACTIONS */

.header-actions {

   display: flex;

   align-items: center;

   gap: 13px;

   flex: 0 0 auto;

}

.language-button,

.notification-button {

   height: 38px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 8px;

   background: var(--sg-card-bg);

   color: #4a5b68;

   cursor: pointer;

}

.language-button {

   padding: 0 12px;

   display: flex;

   align-items: center;

   gap: 6px;

   font-size: 11px;

}

.notification-button {

   position: relative;

   width: 38px;

   font-size: 17px;

}

.notification-dot {

   position: absolute;

   width: 6px;

   height: 6px;

   right: 8px;

   top: 8px;

   border-radius: 50%;

   background: #ef5f65;

}

.profile-block {
   display: flex;

   align-items: center;

   gap: 9px;

}

.profile-circle {

   width: 38px;

   height: 38px;

   flex: 0 0 38px;

   border-radius: 50%;

   display: flex;

   align-items: center;

   justify-content: center;

   background: var(--sg-text);

   color: #ffffff;

   font-size: 11px;

   font-weight: 750;

}

.profile-circle > img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; border-radius: inherit; }

.profile-info {

   display: flex;

   flex-direction: column;

   white-space: nowrap;

}

.profile-info strong {

   font-size: 11px;

}

.profile-info span {

   margin-top: 2px;

   color: #8998a4;

   font-size: 9px;

}

/* MOBILE LOGO */

.mobile-brand {

   display: none;

}

/* =====================================================

     CONTENT

===================================================== */

.content-area {

   width: 100%;

   max-width: 1500px;

   padding: 28px;

   margin: 0 auto;

}

/* Keep the desktop canvas anchored to one gutter across every primary view. */
@media (min-width: 1101px) {

   html {
      scrollbar-gutter: stable;
   }

   .content-area {
      --sg-desktop-content-gutter: 30px;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-left: var(--sg-desktop-content-gutter);
      padding-right: var(--sg-desktop-content-gutter);
   }

}

/* =====================================================

     PAGE INTRO

===================================================== */

.page-intro {

   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 20px;

   margin-bottom: 22px;

}

.page-intro > div:first-child {

   min-width: 0;

}

.today-label {

   margin-bottom: 4px;

   color: var(--sg-primary-hover);

   font-size: 10px;

   font-weight: 700;

   text-transform: uppercase;

   letter-spacing: 0.7px;

}

.page-intro h1 {

   margin: 0;

   color: var(--sg-text);

   font-size: 25px;

   letter-spacing: -0.4px;

}

.page-intro p {

   margin: 5px 0 0;

   color: var(--sg-text-muted);

   font-size: 12px;

}

.page-intro-actions {

   display: flex;

   gap: 8px;

   flex: 0 0 auto;

}

.secondary-action,

.primary-action {

   height: 38px;

   padding: 0 15px;

   border-radius: 8px;

   font-size: 11px;

   font-weight: 650;

   cursor: pointer;

   white-space: nowrap;

}

.secondary-action {

   border: 1px solid var(--sg-border-ui);

   background: var(--sg-card-bg);

   color: #475966;

}

.primary-action {

   border: none;

   background: var(--sg-primary);

   color: white;

   box-shadow:

      0 5px 14px rgba(24,184,166,0.18);

}

/* =====================================================

     SUMMARY

===================================================== */

.summary-grid {

   display: grid;

   grid-template-columns:

      repeat(3, minmax(0,1fr));

   gap: 14px;

   margin-bottom: 18px;

}

.summary-card {

   min-width: 0;

   min-height: 118px;

   padding: 17px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 12px;

   background: var(--sg-card-bg);

   box-shadow:

      0 3px 10px rgba(23,43,58,0.035);

}

.summary-card-top {

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 8px;

}

.summary-icon {

   width: 34px;

   height: 34px;

   flex: 0 0 34px;

   border-radius: 9px;

   display: flex;

   align-items: center;

   justify-content: center;

   font-size: 14px;

   font-weight: 700;

}

.summary-icon.green {

   color: #0ba48f;

   background: #e4f8f3;

}

.summary-icon.red {

   color: #ec686d;

   background: #fff0f1;

}

.summary-icon.blue {

   color: #4c86de;

   background: #edf4ff;

}

.summary-badge {

   padding: 4px 8px;

   border-radius: 99px;

   font-size: 8px;

   font-weight: 700;

   white-space: nowrap;

}

.green-badge {

   color: #159884;

   background: #ecf9f6;

}

.red-badge {

   color: #dd6066;

   background: #fff2f3;

}

.blue-badge {

   color: #467bc6;

   background: #eef4fd;

}

.summary-card-content {

   margin-top: 13px;

}

.summary-card-content span {

   display: block;

   color: var(--sg-text-muted);

   font-size: 10px;

}

.summary-card-content strong {

   display: block;

   margin-top: 1px;

   color: var(--sg-text);

   font-size: 27px;

   line-height: 1.1;

}

/* =====================================================

     VIEWS

===================================================== */

.view {

   display: none;

}

.view.active-view {

   display: block;

}

/* =====================================================

     CARDS

===================================================== */

.calendar-card,

.standard-card {

   width: 100%;

   background: var(--sg-card-bg);

   border: 1px solid var(--sg-border-ui);

   border-radius: 13px;

   box-shadow:

      0 4px 14px rgba(20,42,58,0.04);

}

/* =====================================================

     CALENDAR HEADER

===================================================== */

.calendar-card-header {

   padding: 17px 19px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 12px;

   border-bottom: 1px solid #edf0f3;

}

.calendar-card-header h2 {

   margin: 0;

   font-size: 14px;

}

.calendar-card-header p {

   margin: 3px 0 0;

   color: #8996a1;

   font-size: 10px;

}

.calendar-header-right {

   flex: 0 0 auto;

}

.sync-status {

   display: flex;

   align-items: center;

   gap: 5px;

   color: #667984;

   font-size: 9px;

}

.sync-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #1abb9f;

}

/* =====================================================

     CALENDAR TOOLBAR

===================================================== */

.calendar-toolbar {

   min-height: 62px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 10px;

   padding: 10px 17px;

}

.month-button {

   width: 33px;

   height: 33px;

   flex: 0 0 33px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 8px;

   background: var(--sg-card-bg);

   color: #4e6270;

   cursor: pointer;

   font-size: 20px;

}

.month-center {

   min-width: 0;

   display: flex;

   flex-direction: column;

   align-items: center;

   gap: 3px;

}

.month-title {

   color: var(--sg-text);

   font-size: 14px;

   font-weight: 750;

   text-align: center;

}

.today-button {

   border: none;

   background: transparent;

   color: var(--sg-primary-hover);

   font-size: 9px;

   font-weight: 700;

   cursor: pointer;

}

/* =====================================================

     PROPERTY FILTER

===================================================== */

.property-filter-area {

   padding: 0 17px 14px;

   display: flex;

   align-items: center;

   gap: 11px;

   min-width: 0;

}

.filter-label {

   flex: 0 0 auto;

   color: #83919c;

   font-size: 9px;

   font-weight: 650;

}

.property-tabs {

   min-width: 0;

   display: flex;

   gap: 6px;

   flex-wrap: wrap;

}

.property-tabs button,

.property-tab {

   height: 28px;

   padding: 0 11px;

   flex: 0 0 auto;

   border: 1px solid #dfe5e9;

   border-radius: 99px;

   background: var(--sg-card-bg);

   color: #536572;

   font-size: 9px;

   font-weight: 650;

   cursor: pointer;

   white-space: nowrap;

}

.property-tabs button.active,

.property-tab.active {

   border-color: var(--sg-primary);

   background: var(--sg-primary);

   color: #ffffff;

}

/* =====================================================

     ALL PROPERTY PLANNER

===================================================== */

.planner-mode {

   width: 100%;

   overflow: hidden;

}

.planner-shell {

   width: 100%;

   display: flex;

   border-top: 1px solid var(--sg-border-ui);

   overflow: hidden;

}

.planner-left {

   flex: 0 0 105px;

   min-width: 105px;

   background: var(--sg-card-bg);

   border-right: 1px solid #e3e8eb;

   z-index: 10;

}

.planner-left-header {

   height: 40px;

   display: flex;

   align-items: center;

   justify-content: center;

   color: #788893;

   font-size: 8px;

   font-weight: 800;

   border-bottom: 1px solid var(--sg-border-ui);

}

.property-labels {

   display: flex;

   flex-direction: column;

}

.property-labels > div,

.property-label {

   min-height: 70px;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 8px;

   border-bottom: 1px solid var(--sg-border-ui);

   font-size: 9px;

   font-weight: 800;

   text-align: center;

   overflow: hidden;

}

.planner-scroll {

   flex: 1;

   min-width: 0;

   overflow-x: auto;

   overflow-y: hidden;

   -webkit-overflow-scrolling: touch;

}

.planner-timeline {

   position: relative;

   min-width: 0;

}

.planner-date-header,

.planner-rows {

   position: relative;

}

.planner-date-header {

   height: 40px;

   border-bottom: 1px solid var(--sg-border-ui);

}

.planner-rows {

   min-height: 210px;

}

.planner-date-header > div {

   border-right: 1px solid var(--sg-border-ui);

}

.planner-rows > div {

   border-bottom: 1px solid var(--sg-border-ui);

}

.planner-scroll::-webkit-scrollbar {

   height: 7px;

}

.planner-scroll::-webkit-scrollbar-track {

   background: #f1f4f6;

}

.planner-scroll::-webkit-scrollbar-thumb {

   background: #c4ced5;

   border-radius: 99px;

}

/* =====================================================

     SINGLE PROPERTY MONTH CALENDAR

===================================================== */

.single-calendar-mode {

   width: 100%;

   padding: 16px;

   overflow-x: auto;

   -webkit-overflow-scrolling: touch;

}

.single-property-title {

   margin-bottom: 13px;

   font-size: 15px;

   font-weight: 750;

}

.month-week-header {

   display: grid;

   grid-template-columns:

      repeat(7,minmax(0,1fr));

   min-width: 700px;

   border: 1px solid var(--sg-border-ui);

   border-bottom: none;

}

.month-week-header > div {

   padding: 9px;

   text-align: center;

   color: #748590;

   font-size: 9px;

   font-weight: 700;

   background: var(--sg-surface-soft);

}

.month-calendar-grid {

   min-width: 700px;

   display: block;

   border-left: 1px solid var(--sg-border-ui);

   border-top: 1px solid var(--sg-border-ui);

}

.month-week-row {

   display: grid;

   grid-template-columns:

      repeat(14,minmax(0,1fr));

   grid-template-rows:

      32px repeat(3,32px);

   min-height: 128px;

   position: relative;

}

.month-day-background {

   border-right: 1px solid var(--sg-border-ui);

   border-bottom: 1px solid var(--sg-border-ui);

   background: var(--sg-card-bg);

}

.month-day-background.other-month {

   background: var(--sg-surface-soft);

}

.month-day-background.today {

   background: #eefaf7;

}

.month-day-number {

   z-index: 4;

   padding: 7px 8px;

   color: #60717e;

   font-size: 9px;

   font-weight: 750;

   pointer-events: none;

}

.month-day-number.today {

   width: 24px;

   height: 24px;

   margin: 3px;

   padding: 0;

   display: flex;

   align-items: center;

   justify-content: center;

   border-radius: 50%;

   background: var(--sg-primary);

   color: #ffffff !important;

   font-weight: 800;

}

.month-reservation-bar {

   z-index: 6;

   min-width: 0;

   height: 26px;

   margin: 3px;
   padding: 0 7px;

   border: none;

   border-radius: 5px;

   overflow: hidden;

   white-space: nowrap;

   cursor: pointer;

   color: #ffffff;

   font-size: 9px;

   font-weight: 750;

   display: flex;

   align-items: center;

}

.month-reservation-bar.airbnb {

   background: #f26969;

}

.month-reservation-bar.booking {

   background: #073763;

}

.month-reservation-bar.abritel {

   background: #2878b5;

}

.month-reservation-bar.direct {

   background: #198b76;

}

.month-reservation-bar.private {

   background: #7264a8;

}

.month-reservation-bar.real-start {

   border-top-left-radius: 7px;

   border-bottom-left-radius: 7px;

}

.month-reservation-bar.real-end {

   border-top-right-radius: 7px;

   border-bottom-right-radius: 7px;

}

/* =====================================================

     STANDARD PAGES

===================================================== */

.standard-card {

   padding: 19px;

}

.page-title {

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 12px;

   margin-bottom: 15px;

}

.page-title h2 {

   margin: 0;

   font-size: 17px;

}

.page-title span {

   display: block;

   margin-top: 4px;

   color: #85939e;

   font-size: 10px;

}

/* SEARCH BOX */

.search-box {

   width: 100%;

   height: 40px;

   display: flex;

   align-items: center;

   gap: 8px;

   padding: 0 12px;

   margin-bottom: 14px;

   border: 1px solid #e0e6ea;

   border-radius: 8px;

   background: var(--sg-surface-soft);

}

.search-box span {

   flex: 0 0 auto;

   color: #7d8d98;

}

.search-box input {

   flex: 1;

   min-width: 0;

   border: none;

   outline: none;

   background: transparent;

   font-size: 11px;

}

/* LIST */

.list-container {

   display: flex;

   flex-direction: column;

   gap: 8px;

}

.list-container > div {

   width: 100%;

   padding: 12px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 9px;

   background: var(--sg-card-bg);

   overflow-wrap: anywhere;

}

/* =====================================================

     MY PROPERTIES

===================================================== */

.my-properties-page {

   min-height: 500px;

}

.property-card-grid {

   display: grid;

   grid-template-columns:

      repeat(3,minmax(0,1fr));

   gap: 16px;

}

.property-card {

   position: relative;

   width: 100%;

   min-width: 0;

   min-height: 185px;

   padding: 18px;

   border: 1px solid #e3e8ec;

   border-radius: 14px;

   background: var(--sg-card-bg);

   cursor: pointer;

   text-align: left;

   transition:

      transform 0.18s ease,

      box-shadow 0.18s ease,

      border-color 0.18s ease;

}

.property-card:hover {

   transform: translateY(-2px);

   border-color: #cbd9dc;

   box-shadow:

      0 10px 24px rgba(20,42,58,0.08);

}

.property-card.selected {

   border-color: var(--sg-primary);

   box-shadow:

      0 0 0 2px rgba(24,184,166,0.08);

}

.property-card-top {

   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 10px;

}

.property-card-top > div {

   min-width: 0;

}

.property-card-icon {

   width: 42px;

   height: 42px;

   display: flex;

   align-items: center;

   justify-content: center;

   margin-bottom: 15px;

   border-radius: 11px;

   background: #e9f8f5;

   color: #159c8d;

   font-size: 20px;

}

.property-card-name {

   margin: 0;

   color: #142b3a;

   font-size: 17px;

   font-weight: 750;

   overflow-wrap: anywhere;

}

.property-card-id {

   margin-top: 3px;

   color: #8c9aa4;

   font-size: 9px;

}

.property-card-status {

   flex: 0 0 auto;

   padding: 5px 8px;

   border-radius: 99px;

   background: #e8f8f4;

   color: #15927f;

   font-size: 8px;

   font-weight: 750;

   text-transform: uppercase;

}

.property-card-meta {

   display: grid;

   grid-template-columns:

      repeat(2,minmax(0,1fr));

   gap: 10px;

   margin-top: 16px;

}

.property-card-meta-item {

   min-width: 0;

   padding: 10px;

   border-radius: 9px;

   background: var(--sg-surface-soft);

}

.property-card-meta-item span {

   display: block;

   margin-bottom: 3px;

   color: #8796a0;

   font-size: 8px;

   font-weight: 650;

   text-transform: uppercase;

}

.property-card-meta-item strong {

   color: #314653;

   font-size: 11px;

   font-weight: 700;

   overflow-wrap: anywhere;

}

.property-card-footer {

   margin-top: 14px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 8px;

   color: #788995;

   font-size: 9px;

}

.property-card-footer > span:first-child {

   min-width: 0;

   overflow: hidden;

   text-overflow: ellipsis;

   white-space: nowrap;

}

.property-card-open {

   flex: 0 0 auto;

   color: #16a391;

   font-weight: 750;

   white-space: nowrap;

}

/* =====================================================

     PROPERTY DETAIL

===================================================== */

.property-detail-panel {

   width: 100%;

   margin-top: 20px;

   padding: 22px;

   border: 1px solid #dfe6ea;

   border-radius: 14px;

   background: #f9fbfc;

}

.property-detail-header {

   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 20px;

   padding-bottom: 18px;

   border-bottom: 1px solid #e5eaed;

}

.property-detail-header > div {

   min-width: 0;

}

.property-detail-header h3 {

   margin: 8px 0 0;

   color: #152c3b;

   font-size: 22px;

   font-weight: 760;

   overflow-wrap: anywhere;

}

.property-detail-id {

   margin-top: 4px;

   color: #8998a3;

   font-size: 10px;

}

.property-status-badge {

   display: inline-flex;

   align-items: center;

   min-height: 23px;

   padding: 0 9px;

   border-radius: 99px;

   background: #e4f7f2;

   color: #108d7a;

   font-size: 9px;

   font-weight: 750;

   text-transform: uppercase;

}

.property-status-badge.inactive {

   background: #f1f2f3;

   color: #808d95;

}

.property-detail-close {

   width: 34px;

   height: 34px;

   flex: 0 0 34px;

   border: 1px solid var(--sg-border-ui);

   border-radius: 8px;

   background: var(--sg-card-bg);

   color: var(--sg-text-muted);

   cursor: pointer;

   font-size: 20px;

}

.property-detail-grid {

   display: grid;

   grid-template-columns:

      repeat(2,minmax(0,1fr));

   gap: 12px;

   margin-top: 18px;

}

.property-detail-item {

   min-width: 0;

   min-height: 75px;

   padding: 14px;

   border: 1px solid #e4e9ec;

   border-radius: 10px;

   background: var(--sg-card-bg);

}

.property-detail-item.property-detail-wide {

   grid-column: 1 / -1;

}

.property-detail-label {

   display: block;

   margin-bottom: 7px;

   color: #87949e;

   font-size: 9px;

   font-weight: 650;

   text-transform: uppercase;

   letter-spacing: 0.25px;

}

.property-detail-item strong {

   color: #263b48;

   font-size: 12px;

   font-weight: 700;

   line-height: 1.45;

   overflow-wrap: anywhere;

   word-break: break-word;

}

/* =====================================================

     MODAL

===================================================== */

.modal-overlay {

   display: none;

   position: fixed;

   inset: 0;

   z-index: 999;

   padding: 20px;

   align-items: center;

   justify-content: center;

   background:

      rgba(10,26,37,0.48);

}

.modal-overlay.open,

.modal-overlay.active {

   display: flex;

}

.modal-sheet {

   width: min(500px,100%);

   max-height: 85vh;

   overflow-y: auto;

   padding: 19px;

   border-radius: 15px;

   background: var(--sg-card-bg);

   box-shadow:

      0 20px 55px rgba(10,25,35,0.22);

   -webkit-overflow-scrolling: touch;

}

.modal-handle {

   display: none;

}

.modal-header {

   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 15px;

   padding-bottom: 14px;

   border-bottom: 1px solid var(--sg-border-ui);

}

.modal-header > div {

   min-width: 0;

}

.modal-guest {

   color: var(--sg-text);

   font-size: 18px;

   font-weight: 750;

   overflow-wrap: anywhere;

}

.modal-apartment {

   margin-top: 4px;

   color: #7d8c97;

   font-size: 10px;

}

.modal-close {

   width: 34px;

   height: 34px;

   flex: 0 0 34px;

   border: none;

   border-radius: 8px;

   background: #f1f4f5;

   color: #526573;

   cursor: pointer;

   font-size: 21px;

}

.modal-content {

   padding-top: 15px;

}

/* =====================================================

     MOBILE BOTTOM NAV

===================================================== */

.bottom-nav {

   display: none;

}

.nav-button {

   min-width: 0;

   border: none;

   background: transparent;

   color: var(--sg-text-muted);

   font-size: 9px;

   cursor: pointer;

}

.nav-button.active {

   color: #18a996;

}

.nav-icon {

   display: block;

   margin-bottom: 3px;

   font-size: 16px;

}

/* =====================================================

     TABLET

===================================================== */

@media (max-width: 1100px) {

   .content-area {

      padding: 22px;

   }

   .property-card-grid {

      grid-template-columns:

         repeat(2,minmax(0,1fr));

   }

}

@media (max-width: 900px) {

   .sidebar {

      width: 190px;

      padding-left: 12px;

      padding-right: 12px;

   }

   .main-shell {

      width: calc(100% - 190px);

      margin-left: 190px;

   }

   .top-header {

      padding-left: 20px;

      padding-right: 20px;

   }

   .header-search {

      width: min(300px,38vw);

   }

   .content-area {

      padding: 20px;

   }

}

/* =====================================================

     MOBILE

===================================================== */

@media (max-width: 760px) {

   html,

   body {

      width: 100%;

      overflow-x: hidden;

   }

   body {

      padding-bottom:

         calc(66px + env(safe-area-inset-bottom));

   }

   /* LOGIN */

   .login-screen {

      padding:

         16px

         12px

         calc(16px + env(safe-area-inset-bottom));

   }

   .login-card {

      padding: 24px 18px;

      border-radius: 15px;

   }

   .login-brand {

      margin-bottom: 24px;

   }

   .login-logo-wrap {

      width: 42px;

      height: 42px;

      flex-basis: 42px;

   }

   .login-brand-text strong {

      font-size: 18px;

   }

   .login-heading h1 {

      font-size: 23px;

   }

   .login-field input,

   .login-submit {

      height: 46px;

   }

   /* SIDEBAR OFF */

   .sidebar {

      display: none;

   }

   .main-shell {

      width: 100%;

      margin-left: 0;

   }

   /* HEADER */

   .top-header {

      width: 100%;

      height: 60px;
      padding:

         0

         12px;

      gap: 8px;

   }

   .mobile-brand {

      min-width: 0;

      display: flex;

      align-items: center;

      gap: 7px;

   }

   .mobile-logo {

      width: 34px;

      height: 34px;

      flex: 0 0 34px;

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

      border-radius: 9px;

      background: var(--sg-primary);

   }

   .mobile-brand strong {

      font-size: 14px;

      white-space: nowrap;

   }

   .header-search {

      display: none;

   }

   .profile-info {

      display: none;

   }

   .language-button {

      height: 34px;
      padding: 0 9px;

   }

   .header-actions {

      gap: 7px;

   }

   .notification-button {

      width: 34px;

      height: 34px;

   }

   .profile-circle {

      width: 34px;

      height: 34px;

      flex-basis: 34px;

   }

   /* CONTENT */

   .content-area {

      width: 100%;

      padding:

         14px

         10px

         20px;

   }

   /* INTRO */

   .page-intro {

      width: 100%;

      align-items: center;

      gap: 10px;

      margin-bottom: 14px;

   }

   .today-label {

      margin-bottom: 2px;

      font-size: 8px;

   }

   .page-intro h1 {

      font-size: 21px;

   }

   .page-intro p {

      display: none;

   }

   .page-intro-actions {

      display: none;

   }

   /* SUMMARY */

   .summary-grid {

      grid-template-columns:

         repeat(3,minmax(0,1fr));

      gap: 6px;

      margin-bottom: 12px;

   }

   .summary-card {

      min-height: 82px;

      padding: 10px;

   }

   .summary-card-top {

      justify-content: flex-start;

   }

   .summary-icon {

      width: 27px;

      height: 27px;

      flex-basis: 27px;

      font-size: 11px;

   }

   .summary-badge {

      display: none;

   }

   .summary-card-content {

      margin-top: 7px;

   }

   .summary-card-content span {

      font-size: 8px;

      white-space: nowrap;

   }

   .summary-card-content strong {

      font-size: 20px;

   }

   /* CARDS */

   .calendar-card,

   .standard-card {

      width: 100%;

      border-radius: 11px;

   }

   .standard-card {

      padding: 13px;

   }

   /* CALENDAR HEADER */

   .calendar-card-header {

      padding: 12px;

   }

   .calendar-card-header h2 {

      font-size: 13px;

   }

   .calendar-card-header p {

      display: none;

   }

   /* TOOLBAR */

   .calendar-toolbar {

      min-height: 54px;

      padding:

         8px

         10px;

   }

   .month-button {

      width: 31px;

      height: 31px;

      flex-basis: 31px;

   }

   .month-title {

      font-size: 13px;

   }

   /* FILTER */

   .property-filter-area {

      width: 100%;

      padding:

         0

         10px

         10px;

      display: block;

      overflow: hidden;

   }

   .filter-label {

      display: none;

   }

   .property-tabs {

      width: 100%;

      display: flex;

      flex-wrap: nowrap;

      overflow-x: auto;

      overflow-y: hidden;

      padding-bottom: 3px;

      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;

   }

   .property-tabs::-webkit-scrollbar {

      display: none;

   }

   .property-tabs button,

   .property-tab {

      flex: 0 0 auto;

      height: 30px;

      padding:

         0

         12px;

      font-size: 9px;

   }

   /* PLANNER */

   .planner-shell {

      width: 100%;

   }

   .planner-left {

      flex: 0 0 76px;

      min-width: 76px;

   }

   .planner-left-header {

      height: 40px;

      font-size: 7px;

   }

   .property-labels > div,

   .property-label {

      min-height: 70px;

      padding:

         6px

         4px;

      font-size: 7px;

      line-height: 1.25;

   }

   .planner-scroll {

      min-width: 0;

      overflow-x: auto;

      touch-action: pan-x;

   }

   /* SINGLE PROPERTY MONTH */

   .single-calendar-mode {

      padding: 10px;

      overflow-x: auto;

   }

   .single-property-title {

      position: sticky;

      left: 0;

      margin-bottom: 9px;

      font-size: 13px;

   }

  .month-week-header,

.month-calendar-grid {

   width: 100%;

   min-width: 0;

}

.month-week-header > div {

   padding: 7px 2px;

   font-size: 8px;

}

.month-week-row {

   grid-template-rows:

      28px repeat(3,28px);

   min-height: 112px;

}

.month-day-number {

   padding: 5px 4px;

   font-size: 8px;

}

.month-reservation-bar {

   height: 23px;

   margin: 2px;

   padding: 0 4px;

   font-size: 8px;

}

   /* STANDARD PAGES */

   .page-title {

      margin-bottom: 12px;

   }

   .page-title h2 {

      font-size: 16px;

   }

   .search-box {

      height: 39px;

   }

   .list-container > div {

      padding: 11px;

   }

   /* MY PROPERTIES */

   .my-properties-page {

      min-height: auto;

   }

   .property-card-grid {

      grid-template-columns:

         1fr;

      gap: 10px;

   }

   .property-card {

      min-height: 0;

      padding: 14px;

      border-radius: 11px;

   }

   .property-card-icon {

      width: 36px;

      height: 36px;

      margin-bottom: 10px;

      font-size: 17px;

   }

   .property-card-name {

      font-size: 16px;

   }

   .property-card-meta {

      gap: 7px;

      margin-top: 12px;

   }

   .property-card-meta-item {

      padding: 9px;

   }

   .property-card-footer {

      margin-top: 11px;

   }

   /* PROPERTY DETAILS */

   .property-detail-panel {

      margin-top: 12px;

      padding: 14px;

      border-radius: 11px;

   }

   .property-detail-header {

      gap: 10px;

      padding-bottom: 13px;

   }

   .property-detail-header h3 {

      margin-top: 6px;

      font-size: 19px;

   }

   .property-detail-grid {

      grid-template-columns:

         1fr;

      gap: 7px;

      margin-top: 12px;

   }

   .property-detail-item,

   .property-detail-item.property-detail-wide {

      grid-column: auto;

      min-height: auto;

      padding: 11px;

   }

   .property-detail-label {

      margin-bottom: 4px;

      font-size: 8px;

   }

   .property-detail-item strong {

      font-size: 11px;

   }

   /* MODAL AS MOBILE SHEET */

   .modal-overlay {

      align-items: flex-end;

      padding: 0;

   }

   .modal-sheet {

      width: 100%;

      max-width: none;

      max-height: 88vh;

      padding:

         10px

         15px

         calc(20px + env(safe-area-inset-bottom));

      border-radius:

         18px

         18px

         0

         0;

   }

   .modal-handle {

      display: block;

      width: 38px;

      height: 4px;

      margin:

         0

         auto

         12px;

      border-radius: 99px;

      background: #d9dfe3;

   }

   .modal-guest {

      font-size: 17px;

   }

   /* MOBILE BOTTOM NAV */

   .bottom-nav {

      position: fixed;

      left: 0;

      right: 0;

      bottom: 0;

      z-index: 500;

      width: 100%;

      min-height: 62px;

      padding-bottom:

         env(safe-area-inset-bottom);

      display: grid !important;

      grid-template-columns:

         repeat(auto-fit,minmax(0,1fr));

      background: var(--sg-card-bg);

      border-top: 1px solid #e2e7ea;

      box-shadow:

         0 -5px 16px rgba(20,42,58,0.06);

   }

   .nav-button {

      min-width: 0;

      padding:

         7px

         2px

         5px;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      gap: 1px;

   }

   .nav-icon {

      margin: 0;

      font-size: 16px;

   }

   .nav-button span:last-child {

      max-width: 100%;

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;

      font-size: 8px;

   }

}

/* =====================================================

     SMALL MOBILE

===================================================== */

@media (max-width: 430px) {

   .login-card {

      padding: 21px 15px;

   }

   .login-heading h1 {

      font-size: 22px;

   }

   .content-area {

      padding-left: 8px;

      padding-right: 8px;

   }

   .mobile-brand strong {

      font-size: 13px;

   }

   .summary-grid {

      gap: 4px;

   }

   .summary-card {

      padding: 8px;

   }

   .summary-icon {

      width: 25px;

      height: 25px;

      flex-basis: 25px;

   }

   .summary-card-content strong {

      font-size: 18px;

   }

   .property-card-meta {

      grid-template-columns:

         1fr 1fr;

   }

   .property-card-footer {

      align-items: flex-start;

   }

}

/* CLEANING CARDS — desktop and mobile */

#cleaningList {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

#cleaningList > .sg-cleaning-card {

  display: grid;

  grid-template-columns: 112px minmax(0, 1fr);

  align-items: stretch;

  gap: 22px;

  width: 100%;

  padding: 20px;

  border: 1px solid #e1ebe9;

  border-radius: 18px;

  background: var(--sg-card-bg);

  box-shadow: 0 4px 18px rgba(23, 43, 58, 0.04);

  cursor: pointer;

  overflow: hidden;

  transition: border-color .2s, box-shadow .2s;

}

#cleaningList > .sg-cleaning-card:hover {

  border-color: #82c9bf;

  box-shadow: 0 8px 24px rgba(35, 110, 99, 0.09);

}

#cleaningList .sg-cleaning-image {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 112px;

  min-height: 138px;

  border-radius: 13px;

  background: linear-gradient(145deg, #e5f6f1, #edf3f8);

  color: #439d91;

  overflow: hidden;

}

#cleaningList .sg-cleaning-image svg {

  display: block;

  width: 44px;

  height: 44px;

  max-width: 44px;

  flex: 0 0 44px;

}

#cleaningList .sg-cleaning-content { min-width: 0; }

#cleaningList .sg-cleaning-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

}

#cleaningList .sg-cleaning-top > div { min-width: 0; }

#cleaningList .sg-cleaning-eyebrow {

  margin-bottom: 5px;

  color: #429b8f;

  font-size: 10px;

  font-weight: 750;

  letter-spacing: 1.5px;

}

#cleaningList .sg-cleaning-title {

  color: var(--sg-text);

  font-size: 20px;

  font-weight: 800;

  line-height: 1.3;

  overflow-wrap: anywhere;

}

#cleaningList .sg-cleaning-arrow {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 30px;

  height: 30px;

  flex: 0 0 30px;

  border-radius: 9px;

  background: #eff8f5;

  color: #429b8f;

  font-size: 19px;

}

#cleaningList .sg-cleaning-details {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 16px;

  margin-top: 18px;

}

#cleaningList .sg-cleaning-field { min-width: 0; }

#cleaningList .sg-cleaning-label {

  display: block;

  margin-bottom: 6px;

  color: #8a99a2;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .6px;

  line-height: 1.5;

}

#cleaningList .sg-cleaning-date {

  display: block;

  color: #243e4a;

  font-size: 16px;

  font-weight: 750;

  line-height: 1.5;

}

#cleaningList .sg-cleaning-cleaner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  min-height: 24px;

}

#cleaningList .sg-cleaning-footer {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 16px;

  padding-top: 12px;

  border-top: 1px solid #eef2f3;

}

#cleaningList .sg-cleaning-guest {

  min-width: 0;

  color: #566b78;

  font-size: 13px;

  line-height: 1.5;

  overflow-wrap: anywhere;

}

#cleaningList .sg-cleaning-guest .sg-cleaning-label { margin-bottom: 2px; }

#cleaningList .sg-cleaning-link {

  color: #378f83;

  font-size: 12px;

  font-weight: 750;

  line-height: 1.5;

}

#cleaningList > .sg-cleaning-empty {

  padding: 32px 20px;

  border: 1px dashed #cfded9;

  border-radius: 16px;

  background: #f9fcfb;

  color: #81909a;

  font-size: 13px;

  text-align: center;

}

@media (max-width: 600px) {

  #cleaningList { gap: 12px; }

  #cleaningList > .sg-cleaning-card {

    position: relative;

    display: block;

    padding: 18px;

    border-radius: 16px;

  }

  #cleaningList .sg-cleaning-image {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 54px;

    height: 54px;

    min-height: 0;

    border-radius: 12px;

  }

  #cleaningList .sg-cleaning-image svg {

    width: 28px;

    height: 28px;

    max-width: 28px;

    flex-basis: 28px;

  }

  #cleaningList .sg-cleaning-top {

    min-height: 54px;

    padding-right: 68px;

  }

  #cleaningList .sg-cleaning-arrow { display: none; }

  #cleaningList .sg-cleaning-title { font-size: 18px; }

  #cleaningList .sg-cleaning-details {

    gap: 12px;

    margin-top: 18px;

  }

  #cleaningList .sg-cleaning-label {

    font-size: 9px;

    letter-spacing: .4px;

  }

  #cleaningList .sg-cleaning-date { font-size: 15px; }

  #cleaningList .sg-cleaning-footer { gap: 10px; }

  #cleaningList .sg-cleaning-link { font-size: 11px; }

}


/* PROPERTY PHOTOS — shared by desktop and mobile */
.sg-property-cover, .sg-photo-preview-frame, #cleaningList .sg-cleaning-image { position: relative; overflow: hidden; }
.sg-property-cover { display: block; height: 160px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(145deg,#e5f6f1,#edf3f8); color: #439d91; }
.sg-property-cover img, .sg-photo-preview-frame img, #cleaningList .sg-cleaning-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.sg-property-cover img[hidden], .sg-photo-preview-frame img[hidden], #cleaningList .sg-cleaning-image img[hidden] { display: none; }
.sg-photo-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sg-photo-placeholder svg { width: 44px; height: 44px; }
.sg-photo-editor { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 22px; margin-top: 20px; padding: 18px; border: 1px solid #e0ebe7; border-radius: 14px; background: var(--sg-card-bg); }
.sg-photo-preview-frame { height: 170px; border-radius: 11px; background: linear-gradient(145deg,#e5f6f1,#edf3f8); color: #439d91; }
.sg-photo-editor-content { min-width: 0; align-self: center; }
.sg-photo-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 1px; color: #249788; }
.sg-photo-editor h4 { margin: 8px 0; font-size: 17px; color: var(--sg-text); }
.sg-photo-editor p { font-size: 12px; line-height: 1.6; color: #6f8490; }
.sg-photo-controls { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sg-photo-choose, .sg-photo-save { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sg-photo-choose { background: #eff8f5; color: #208d7d; border: 1px solid #cde6df; }
.sg-photo-save { background: var(--sg-primary); color: #fff; border: 1px solid var(--sg-primary); }
.sg-photo-save:disabled { opacity: .5; cursor: default; }
.sg-photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sg-photo-controls:focus-within .sg-photo-choose { outline: 2px solid #15927f; outline-offset: 3px; }
.sg-photo-editor .sg-photo-message { min-height: 20px; margin: 12px 0 0; overflow-wrap: anywhere; }
.sg-photo-editor .sg-photo-error { color: #b43b45; }
@media (max-width: 760px) {
  .sg-photo-editor { grid-template-columns: minmax(0,1fr); gap: 15px; padding: 14px; }
  .sg-photo-preview-frame { height: 190px; }
  .sg-property-cover { height: 170px; }
}
/* CLEANING SCHEDULE — clear departure / arrival hierarchy */
#cleaningView .sg-cleaning-schedule {
  padding: 0; border: 0; background: transparent; box-shadow: none;
  font-family: var(--sg-font-ui, system-ui);
  -webkit-font-smoothing: antialiased;
}
#cleaningView .sg-cleaning-page-heading { margin-bottom: 24px; }
#cleaningView .sg-cleaning-page-heading h2 { color: #102141; font-size: 30px; line-height: 1.2; letter-spacing: -.8px; font-weight: 750; }
#cleaningView .sg-cleaning-page-heading span { display: block; font-size: 13px; line-height: 1.6; color: #63768e; margin-top: 7px; }
#cleaningList { gap: 14px; }
#cleaningList > .sg-cl-day-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 2px 2px; border: 0; background: transparent; box-shadow: none; }
#cleaningList .sg-cl-day-heading strong { color: #233852; font-size: 15px; font-weight: 650; }
#cleaningList .sg-cl-day-heading span { font-size: 11px; color: #74869a; }
#cleaningList > .sg-cl-day-heading:not(:first-child) { margin-top: 8px; }
#cleaningList > .sg-cleaning-card { grid-template-columns: 142px minmax(0,1fr); gap: 22px; padding: 20px; border: 1px solid #e6edf2; border-radius: 18px; box-shadow: 0 5px 24px rgba(20,42,66,.045); cursor: default; }
#cleaningList .sg-cleaning-image { position: relative; width: 142px; min-height: 188px; height: 100%; border-radius: 12px; }
#cleaningList .sg-cleaning-content { min-width: 0; }
#cleaningList .sg-cl-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; }
#cleaningList .sg-cl-property { flex: 1; min-width: 120px; }
#cleaningList .sg-cl-property h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.45px; line-height: 1.3; color: #102141; overflow-wrap: anywhere; }
#cleaningList .sg-cl-property p { margin: 5px 0 0; color: #718298; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
#cleaningList .sg-cl-status { display: inline-flex; padding: 6px 9px; border-radius: 8px; color: #95711e; background: #fff3dc; font-size: 10px; line-height: 1.4; font-weight: 650; }
#cleaningList .sg-cl-status.attention { background: #fff0ef; color: #b1473e; }
.sg-cl-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 42px; border: 0; border-radius: 10px; padding: 0 15px; background: linear-gradient(110deg,#079ba8,#048b99); color: #fff; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.sg-cl-button:hover { background: #05838f; }
.sg-cl-button:focus-visible { outline: 3px solid #8bd4d5; outline-offset: 3px; }
.sg-cl-button:disabled { opacity: .6; cursor: default; }
#cleaningList .sg-cl-schedule { display: grid; grid-template-columns: minmax(90px,.8fr) minmax(150px,1.35fr) minmax(95px,.8fr) minmax(105px,1fr); margin-top: 22px; }
#cleaningList .sg-cl-field { min-width: 0; padding: 0 16px; border-left: 1px solid var(--sg-border-ui); }
#cleaningList .sg-cl-field:first-child { padding-left: 0; border-left: 0; }
.sg-cl-label { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 10px; color: #667b96; font-weight: 650; line-height: 1.4; letter-spacing: .3px; }
.sg-cl-label svg { width: 17px; height: 17px; flex: 0 0 17px; color: #20365c; }
#cleaningList .sg-cl-field > strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.6px; color: #112447; line-height: 1.25; overflow-wrap: anywhere; }
#cleaningList .sg-cl-unset { font-size: 16px; color: #75859b; font-weight: 500; letter-spacing: -.2px; }
#cleaningList .sg-cl-available, #cleaningList .sg-cl-date { display: block; margin-top: 6px; color: #78889c; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.sg-cl-cleaner { display: flex; align-items: center; gap: 9px; color: #213858; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sg-cl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#d4efff,#8cccf9); color: #0863a6; font-size: 13px; font-weight: 750; }
.sg-cl-avatar.purple { background: linear-gradient(135deg,#e6d9ff,#b59aef); color: #683bb4; }
#cleaningList .sg-cl-next-guests { margin-top: 22px; padding-top: 15px; border-top: 1px solid #edf1f5; }
#cleaningList .sg-cl-next-guests > .sg-cl-label { font-size: 9px; margin-bottom: 7px; color: #68839c; }
#cleaningList .sg-cl-guest-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cleaningList .sg-cl-guest-line > svg { color: #20365c; width: 23px; height: 23px; flex: 0 0 23px; }
#cleaningList .sg-cl-guest-line > strong { color: #203858; font-size: 14px; font-weight: 550; line-height: 1.5; }
.sg-cl-preparation { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: #e5f2ff; color: #1263ad; font-size: 11px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.sg-cl-preparation svg { width: 18px; height: 18px; flex: 0 0 18px; }
.sg-cl-preparation.cot { background: #dc2626; color: #ffffff; }
.sg-cl-preparation.confirm { background: #fff3dd; color: #906521; }
.sg-cl-preparation.neutral { background: var(--sg-surface-soft); color: #6a7e92; }
#cleaningList .sg-cl-reminders { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid #f0ead8; background: #fffcf3; }
#cleaningList .sg-cl-reminders > .sg-cl-label { margin-bottom: 6px; color: #8d7548; }
#cleaningList .sg-cl-reminders p { margin: 5px 0 0; color: #576a7f; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
#cleaningList .sg-cl-reminders p > span { display: block; font-size: 9px; color: #9b8f73; margin-bottom: 2px; }
#cleaningList .sg-cl-reminders .sg-cl-no-reminder { color: #9a9f9f; font-size: 11px; }
.sg-cl-warning { margin-top: 14px; padding: 10px 12px; background: #fff1ed; border: 1px solid #f7ded7; border-radius: 9px; color: #a34b40; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
/* Cleaning details keep incoming guests apart from departing guests. */
.sg-cleaning-modal-sheet { width: min(780px,100%); max-height: 88vh; padding: 24px; }
.sg-cleaning-modal-header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e6edf2; }
.sg-cleaning-modal-header h3 { margin: 6px 0; color: #112447; font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.sg-cleaning-modal-header p { margin: 0; color: #7b8ba0; font-size: 12px; }
.sg-cl-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: #0b94a0; }
.sg-cl-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.sg-cl-detail-grid section { min-width: 0; padding: 16px; border: 1px solid #e5edf3; border-radius: 12px; background: #f9fbfd; }
.sg-cl-detail-grid section:last-child { border-color: #cce9e4; background: #f5fbf9; }
.sg-cl-detail-grid h4, .sg-cl-editor h4, .sg-cl-detail-reminders h4 { font-size: 16px; color: #1e3552; margin: 10px 0; font-weight: 650; overflow-wrap: anywhere; }
.sg-cl-detail-grid p, .sg-cl-detail-window p { color: #5f768c; font-size: 12px; line-height: 1.7; margin: 7px 0; overflow-wrap: anywhere; }
.sg-cl-detail-window { padding: 16px 0; margin-top: 8px; }
.sg-cl-detail-window strong { font-size: 18px; color: #263e5b; font-weight: 600; }
.sg-cl-detail-reminders { padding: 14px 16px; background: #fffcf3; border: 1px solid #f0ead8; border-radius: 12px; }
.sg-cl-detail-reminders p { white-space: pre-wrap; overflow-wrap: anywhere; color: #64768c; font-size: 12px; line-height: 1.65; }
.sg-cl-detail-reminders .sg-cl-label { margin-bottom: 3px; color: #9b8f73; }
.sg-cl-editor { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5edf3; }
.sg-cl-editor > p { color: #78899b; font-size: 11px; line-height: 1.7; }
.sg-cl-edit-times { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 14px; }
.sg-cl-edit-times label, .sg-cl-reminder-label { display: flex; flex-direction: column; gap: 7px; font-size: 11px; font-weight: 650; color: #5d7389; }
.sg-cl-editor input, .sg-cl-editor textarea { min-width: 0; width: 100%; border: 1px solid #d7e2ea; border-radius: 8px; padding: 11px; background: var(--sg-card-bg); color: #243e58; font-size: 14px; font-weight: 400; }
.sg-cl-editor input:focus, .sg-cl-editor textarea:focus { outline: 2px solid #91d8d1; outline-offset: 1px; }
.sg-cl-reminder-label { margin-top: 16px; }
.sg-cl-editor textarea { resize: vertical; line-height: 1.6; }
.sg-cl-save-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
#cleaningSaveMessage { font-size: 12px; color: #657f91; flex: 1; min-width: 140px; overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  #cleaningList > .sg-cleaning-card { grid-template-columns: 112px minmax(0,1fr); gap: 18px; }
  #cleaningList .sg-cleaning-image { width: 112px; }
  #cleaningList .sg-cl-schedule { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 18px 0; }
  #cleaningList .sg-cl-field:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  #cleaningView .sg-cleaning-page-heading h2 { font-size: 25px; letter-spacing: -.6px; }
  #cleaningView .sg-cleaning-page-heading span { font-size: 11px; }
  #cleaningList > .sg-cleaning-card { position: relative; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; padding: 16px; border-radius: 16px; }
  #cleaningList .sg-cleaning-image { position: relative; top: auto; right: auto; width: 72px; height: 72px; min-height: 72px; border-radius: 10px; }
  #cleaningList .sg-cleaning-content { display: contents; }
  #cleaningList .sg-cl-top { grid-column: 2; grid-row: 1; min-width: 0; gap: 7px; padding: 0; }
  #cleaningList .sg-cl-property { flex: 1 1 100%; min-width: 0; }
  #cleaningList .sg-cl-property h3 { font-size: 17px; letter-spacing: -.3px; }
  #cleaningList .sg-cl-property p { font-size: 10px; }
  #cleaningList .sg-cl-status { font-size: 9px; padding: 4px 7px; }
  #cleaningList .sg-cl-details { position: relative; order: 3; width: 100%; margin-top: 4px; font-size: 12px; min-height: 40px; }
  #cleaningList .sg-cl-schedule, #cleaningList .sg-cl-next-guests, #cleaningList .sg-cl-reminders, #cleaningList .sg-cl-warning { grid-column: 1 / -1; }
  #cleaningList .sg-cl-schedule { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 0; margin-top: 5px; }
  #cleaningList .sg-cl-assigned { grid-column: 1 / -1; padding: 0; border: 0; }
  #cleaningList .sg-cl-assigned > .sg-cl-label { display: inline-flex; margin: 0 12px 0 0; }
  #cleaningList .sg-cl-assigned .sg-cl-cleaner { display: inline-flex; }
  #cleaningList .sg-cl-window { grid-column: 1 / -1; padding: 12px 14px; border: 0; border-radius: 10px; background: #f3f9f9; }
  #cleaningList .sg-cl-field:nth-child(3) { padding: 0; border: 0; }
  #cleaningList .sg-cl-field:nth-child(4) { padding: 0 0 0 12px; }
  #cleaningList .sg-cl-field > strong { font-size: 22px; }
  #cleaningList .sg-cl-field:nth-child(4) > strong { font-size: 19px; }
  #cleaningList .sg-cl-window .sg-cl-available { font-size: 11px; }
  #cleaningList .sg-cl-label { font-size: 9px; margin-bottom: 6px; }
  .sg-cl-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
  .sg-cl-cleaner { font-size: 13px; }
  #cleaningList .sg-cl-next-guests { margin-top: 2px; padding-top: 12px; }
  #cleaningList .sg-cl-guest-line > strong { font-size: 13px; }
  #cleaningList .sg-cl-reminders { margin-top: 0; padding: 11px 12px; }
  #cleaningList .sg-cl-reminders p { font-size: 11px; }
  .sg-cleaning-modal-sheet { padding: 20px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .sg-cl-detail-grid { grid-template-columns: minmax(0,1fr); }
  .sg-cl-editor input, .sg-cl-editor textarea { font-size: 16px; }
  .sg-cl-save-row .sg-cl-button { width: 100%; }
}

/* Cleaning card layout: normal document flow on desktop and mobile. */
#cleaningView, #cleaningView .sg-cleaning-schedule, #cleaningList { min-width: 0; max-width: 100%; }
#cleaningList > .sg-cleaning-card {
  display: block; width: 100%; min-width: 0; padding: 22px;
  background: var(--sg-card-bg); border: 1px solid #e3eaf1; border-radius: 16px;
  box-shadow: 0 3px 14px rgba(20,42,66,.045); text-align: left;
}
#cleaningList .sg-cl-header { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 16px; }
#cleaningList .sg-cleaning-image {
  position: relative; inset: auto; display: flex; width: 96px; height: 96px;
  min-height: 0; max-height: 96px; aspect-ratio: 1 / 1; margin: 0;
  border-radius: 8px; overflow: hidden; align-self: start;
}
#cleaningList .sg-cleaning-image img { width: 100%; height: 100%; object-fit: cover; }
#cleaningList .sg-cl-top { min-width: 0; align-items: center; gap: 8px 14px; }
#cleaningList .sg-cl-property { min-width: 0; flex: 1 1 160px; }
#cleaningList .sg-cl-property h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.5px; }
#cleaningList .sg-cl-property p { font-size: 13px; margin-top: 5px; }
#cleaningList .sg-cl-status { max-width: 100%; font-size: 11px; padding: 6px 9px; }
#cleaningList .sg-cleaning-content { display: block; min-width: 0; }
#cleaningList .sg-cl-schedule { margin-top: 20px; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 0; }
#cleaningList .sg-cl-field { padding: 0 14px; min-width: 0; border-left: 1px solid var(--sg-border-ui); }
#cleaningList .sg-cl-field:first-child { padding-left: 0; border-left: 0; }
#cleaningList .sg-cl-label { font-size: 10px; line-height: 1.5; letter-spacing: .2px; margin-bottom: 7px; }
#cleaningList .sg-cl-field > strong { font-size: 23px; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
#cleaningList .sg-cl-date, #cleaningList .sg-cl-available { font-size: 11px; line-height: 1.5; }
#cleaningList .sg-cl-next-guests { margin-top: 20px; padding-top: 14px; }
#cleaningList .sg-cl-guest-line { gap: 8px 12px; }
#cleaningList .sg-cl-guest-line > strong { flex: 1 1 190px; min-width: 0; font-size: 14px; }
#cleaningList .sg-cl-preparation { font-size: 12px; }
#cleaningList .sg-cl-reminders { margin-top: 14px; padding: 12px 14px; }
#cleaningList .sg-cl-reminders p { font-size: 12px; }
#cleaningList .sg-cl-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
#cleaningList .sg-cl-details { position: static; width: auto; min-width: 170px; min-height: 44px; margin: 0; font-size: 14px; }
@media (max-width: 1200px) {
  #cleaningList .sg-cl-schedule { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px 0; }
  #cleaningList .sg-cl-field:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  #cleaningView .sg-cleaning-page-heading { margin-bottom: 16px; }
  #cleaningView .sg-cleaning-page-heading h2 { font-size: 26px; line-height: 1.2; }
  #cleaningView .sg-cleaning-page-heading span { font-size: 12px; }
  #cleaningList { gap: 12px; }
  #cleaningList > .sg-cl-day-heading { gap: 5px 10px; padding: 6px 0 0; }
  #cleaningList .sg-cl-day-heading strong { font-size: 14px; }
  #cleaningList > .sg-cleaning-card { display: block; padding: 15px; border-radius: 14px; }
  #cleaningList .sg-cl-header { grid-template-columns: 70px minmax(0,1fr); gap: 12px; align-items: start; }
  #cleaningList .sg-cleaning-image { position: relative; inset: auto; width: 70px; height: 70px; min-height: 0; max-height: 70px; border-radius: 7px; }
  #cleaningList .sg-cl-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; }
  #cleaningList .sg-cl-property { flex: none; width: 100%; min-width: 0; }
  #cleaningList .sg-cl-property h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.3px; }
  #cleaningList .sg-cl-property p { font-size: 12px; line-height: 1.4; margin: 3px 0 0; }
  #cleaningList .sg-cl-status { font-size: 10px; padding: 4px 7px; line-height: 1.4; }
  #cleaningList .sg-cleaning-content { display: block; }
  #cleaningList .sg-cl-schedule { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 0; margin-top: 15px; }
  #cleaningList .sg-cl-assigned { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0; border: 0; }
  #cleaningList .sg-cl-assigned > .sg-cl-label { display: flex; margin: 0; font-size: 10px; }
  #cleaningList .sg-cl-cleaner { display: flex; gap: 7px; font-size: 13px; }
  #cleaningList .sg-cl-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
  #cleaningList .sg-cl-window { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 9px; background: #f3f9fa; }
  #cleaningList .sg-cl-window > strong { font-size: 25px; }
  #cleaningList .sg-cl-window .sg-cl-available { margin-top: 5px; font-size: 11px; }
  #cleaningList .sg-cl-field:nth-child(3) { padding: 0 10px 0 0; border: 0; }
  #cleaningList .sg-cl-field:nth-child(4) { padding: 0 0 0 12px; border-left: 1px solid var(--sg-border-ui); }
  #cleaningList .sg-cl-field:nth-child(3) > strong, #cleaningList .sg-cl-field:nth-child(4) > strong { font-size: 21px; }
  #cleaningList .sg-cl-label { font-size: 10px; gap: 5px; margin-bottom: 5px; letter-spacing: 0; }
  #cleaningList .sg-cl-date { font-size: 10px; line-height: 1.5; }
  #cleaningList .sg-cl-next-guests { margin-top: 14px; padding-top: 12px; }
  #cleaningList .sg-cl-guest-line { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: start; }
  #cleaningList .sg-cl-guest-line > strong { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  #cleaningList .sg-cl-preparation { grid-column: 1 / -1; justify-self: start; font-size: 12px; padding: 6px 9px; max-width: 100%; }
  #cleaningList .sg-cl-reminders { margin-top: 12px; padding: 10px 12px; }
  #cleaningList .sg-cl-reminders p { font-size: 12px; line-height: 1.6; }
  #cleaningList .sg-cl-reminders p > span { font-size: 10px; }
  #cleaningList .sg-cl-actions { display: block; margin-top: 12px; }
  #cleaningList .sg-cl-details { display: flex; width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
  .sg-cleaning-modal-sheet { max-height: 90dvh; }
}
@media (max-width: 360px) {
  #cleaningList > .sg-cleaning-card { padding: 12px; }
  #cleaningList .sg-cl-header { grid-template-columns: 60px minmax(0,1fr); gap: 10px; }
  #cleaningList .sg-cleaning-image { width: 60px; height: 60px; max-height: 60px; }
  #cleaningList .sg-cl-property h3 { font-size: 16px; }
  #cleaningList .sg-cl-window > strong { font-size: 23px; }
}

/* =====================================================
   CLEANING PLANNER
===================================================== */

#cleaningView {
   min-width: 0;
   width: 100%;
}

.sg-cleaning-planner {
   width: 100%;
   min-width: 0;
   font-family: var(--sg-font-ui, system-ui);
}


/* =====================================================
   HEADER
===================================================== */

.sg-cleaning-planner-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px;
}

.sg-cleaning-planner-title {
   min-width: 0;
}

.sg-cleaning-planner-title h2 {
   margin: 0;
   color: #102141;
   font-size: 30px;
   line-height: 1.2;
   font-weight: 750;
   letter-spacing: -0.8px;
}

.sg-cleaning-planner-title p {
   margin: 7px 0 0;
   color: #63768e;
   font-size: 13px;
   line-height: 1.6;
}


/* =====================================================
   TOOLBAR
===================================================== */

.sg-cleaning-toolbar {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 7px;
}

.sg-cleaning-nav-button,
.sg-cleaning-month-button,
.sg-cleaning-today-button {
   font: inherit;
   appearance: none;
   border: 1px solid #dfe6eb;
   background: var(--sg-card-bg);
   color: #425866;
   cursor: pointer;
}

.sg-cleaning-nav-button {
   width: 36px;
   height: 36px;
   flex: 0 0 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 9px;
   font-size: 20px;
   line-height: 1;
}

.sg-cleaning-month-button {
   min-width: 136px;
   height: 36px;
   padding: 0 13px;
   border-radius: 9px;
   color: #223b4b;
   font-size: 12px;
   font-weight: 750;
   text-align: center;
}

.sg-cleaning-today-button {
   height: 36px;
   padding: 0 13px;
   border-radius: 9px;
   border-color: #cce8e3;
   background: var(--sg-selection-bg);
   color: var(--sg-selection-text);
   font-size: 11px;
   font-weight: 750;
}

.sg-cleaning-nav-button:hover,
.sg-cleaning-month-button:hover {
   border-color: #bfcdd4;
   background: var(--sg-surface-soft);
}

.sg-cleaning-today-button:hover {
   background: #e3f5f1;
}


/* =====================================================
   SUMMARY CARDS
===================================================== */

.sg-cleaning-summary {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 18px;
}

.sg-cleaning-summary-card {
   min-width: 0;
   min-height: 105px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 16px 17px;
   border: 1px solid #e4eaee;
   border-radius: 13px;
   background: var(--sg-card-bg);
   box-shadow: 0 3px 12px rgba(20,42,58,0.035);
}

.sg-cleaning-summary-label {
   color: var(--sg-text-muted);
   font-size: 10px;
   font-weight: 700;
   line-height: 1.4;
}

.sg-cleaning-summary-card strong {
   display: block;
   margin-top: 5px;
   color: var(--sg-text);
   font-size: 27px;
   line-height: 1.05;
   font-weight: 780;
}

.sg-cleaning-summary-note {
   display: block;
   margin-top: 5px;
   color: #97a3ac;
   font-size: 9px;
}

.sg-cleaning-summary-card.today {
   border-top: 3px solid var(--sg-primary);
}

.sg-cleaning-summary-card.unscheduled {
   border-top: 3px solid #e6ae43;
}

.sg-cleaning-summary-card.turnover {
   border-top: 3px solid #4d8bdd;
}

.sg-cleaning-summary-card.issues {
   border-top: 3px solid #e06767;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.sg-cleaning-planner-layout {
   width: 100%;
   min-width: 0;
   display: grid;
   grid-template-columns:
      minmax(0, 1.7fr)
      minmax(300px, 0.75fr);
   gap: 16px;
   align-items: stretch;
}

.sg-cleaning-calendar-panel,
.sg-cleaning-day-panel {
   min-width: 0;
   border: 1px solid #e3e9ed;
   border-radius: 14px;
   background: var(--sg-card-bg);
   box-shadow: 0 4px 14px rgba(20,42,58,0.035);
}


/* =====================================================
   CALENDAR
===================================================== */

.sg-cleaning-calendar-panel {
   overflow: hidden;
}

.sg-cleaning-calendar-header {
   min-height: 58px;
   display: flex;
   align-items: center;
   padding: 0 17px;
   border-bottom: 1px solid #edf1f3;
}

.sg-cleaning-calendar-header h3 {
   margin: 0;
   color: #203747;
   font-size: 15px;
   font-weight: 750;
}

.sg-cleaning-weekdays {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   border-bottom: 1px solid #e9edef;
   background: var(--sg-surface-soft);
}

.sg-cleaning-weekdays > div {
   min-width: 0;
   padding: 9px 4px;
   color: #73848f;
   font-size: 9px;
   font-weight: 750;
   text-align: center;
}

.sg-cleaning-calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   grid-template-rows: repeat(6, minmax(92px, 1fr));
   border-left: 1px solid var(--sg-border-ui);
}

.sg-cleaning-calendar-day {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   min-width: 0;
   min-height: 92px;
   padding: 8px;
   border-right: 1px solid var(--sg-border-ui);
   border-bottom: 1px solid var(--sg-border-ui);
   background: var(--sg-card-bg);
   cursor: pointer;
   transition:
      background 0.15s ease,
      box-shadow 0.15s ease;
}

.sg-cleaning-calendar-day:hover {
   background: #f8fbfb;
}

.sg-cleaning-calendar-day.other-month {
   background: var(--sg-surface-soft);
}

.sg-cleaning-calendar-day.other-month
.sg-cleaning-day-number {
   color: #b1bac0;
}

.sg-cleaning-calendar-day.today {
   background: #f2fbf9;
}

.sg-cleaning-calendar-day.selected {
   z-index: 2;
   box-shadow:
      inset 0 0 0 2px var(--sg-primary);
   background: #f4fbfa;
}

.sg-cleaning-calendar-day.weekend {
   background-color: #fbfcfd;
}

.sg-cleaning-calendar-day.today.weekend,
.sg-cleaning-calendar-day.selected.weekend {
   background: #f4fbfa;
}

.sg-cleaning-day-number {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   color: var(--sg-text-muted);
   font-size: 10px;
   font-weight: 750;
   line-height: 1;
}

.sg-cleaning-calendar-day.today
.sg-cleaning-day-number {
   background: var(--sg-primary);
   color: #ffffff;
}

.sg-cleaning-day-badges {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-top: 5px;
}

.sg-cleaning-cleaner-pill {
   width: 100%;
   min-width: 0;
   min-height: 21px;
   display: flex;
   align-items: center;
   padding: 3px 6px;
   border-radius: 6px;
   overflow: hidden;
   font-size: 9px;
   font-weight: 750;
   line-height: 1.3;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.sg-cleaning-cleaner-pill.sd {
   background: #dff4ff;
   color: #28769a;
}

.sg-cleaning-cleaner-pill.mt {
   background: #f2e5ff;
   color: #7b3fa0;
}


.sg-cleaning-cleaner-pill.other {
   background: #edf1f4;
   color: #647681;
}

.sg-cleaning-more {
   margin-top: 3px;
   color: #7b8a95;
   font-size: 8px;
   font-weight: 700;
}


/* =====================================================
   LEGEND
===================================================== */

.sg-cleaning-legend {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   padding: 12px 16px;
   border-top: 1px solid var(--sg-border-ui);
   color: #6e808b;
   font-size: 9px;
   font-weight: 700;
}

.sg-cleaning-legend span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.sg-cleaner-dot {
   width: 8px;
   height: 8px;
   flex: 0 0 8px;
   border-radius: 50%;
}

.sg-cleaner-dot.sd {
   background: #64b9dd;
}

.sg-cleaner-dot.mt {
   background: #ad7ade;
}


.sg-cleaning-legend > span:has(> .sg-cleaner-dot.sc) {
   color: #8a6d00;
}


/* =====================================================
   RIGHT DAY PANEL
===================================================== */

.sg-cleaning-day-panel {
   display: flex;
   flex-direction: column;
   max-height: 650px;
   overflow: hidden;
}

.sg-cleaning-day-header {
   min-height: 69px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 15px 16px;
   border-bottom: 1px solid var(--sg-border-ui);
}

.sg-cleaning-day-header h3 {
   margin: 0;
   color: #1b3444;
   font-size: 30px;
   line-height: 1.2;
   letter-spacing: -0.5px;
   overflow-wrap: anywhere;
   font-weight: 750;
}

.sg-cleaning-day-header p {
   margin: 4px 0 0;
   color: var(--sg-text-muted);
   font-size: 9px;
}

.sg-cleaning-selected-day-content {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding: 13px;
   -webkit-overflow-scrolling: touch;
}

.sg-cleaning-selected-day-content::-webkit-scrollbar {
   width: 6px;
}

.sg-cleaning-selected-day-content::-webkit-scrollbar-track {
   background: #f3f5f6;
}

.sg-cleaning-selected-day-content::-webkit-scrollbar-thumb {
   background: #c9d2d7;
   border-radius: 99px;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.sg-cleaning-empty-state {
   min-height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px 20px;
   border: 1px dashed #d6e1de;
   border-radius: 11px;
   background: #fafcfc;
   color: #81909a;
   font-size: 11px;
   line-height: 1.6;
   text-align: center;
}


/* =====================================================
   COMPACT CLEANING CARD
===================================================== */

.sg-cleaning-compact-card {
   width: 100%;
   min-width: 0;
   padding: 13px;
   margin-bottom: 10px;
   border: 1px solid #e3eaee;
   border-radius: 11px;
   background: var(--sg-card-bg);
}

.sg-cleaning-compact-card:last-child {
   margin-bottom: 0;
}

.sg-cleaning-compact-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
}

.sg-cleaning-compact-property {
   min-width: 0;
}

.sg-cleaning-compact-property strong {
   display: block;
   color: #1d3646;
   font-size: 13px;
   font-weight: 750;
   line-height: 1.4;
   overflow-wrap: anywhere;
}

.sg-cleaning-compact-property span {
   display: block;
   margin-top: 3px;
   color: #83929d;
   font-size: 9px;
   line-height: 1.4;
}

.sg-cleaning-compact-code {
   flex: 0 0 auto;
   min-width: 30px;
   height: 25px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 7px;
   border-radius: 7px;
   font-size: 9px;
   font-weight: 800;
}

.sg-cleaning-compact-code.sd {
   background: #dff4ff;
   color: #28769a;
}

.sg-cleaning-compact-code.mt {
   background: #f2e5ff;
   color: #7b3fa0;
}


.sg-cleaning-compact-code.other {
   background: #edf1f4;
   color: var(--sg-text-muted);
}

.sg-cleaning-compact-meta {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   margin-top: 11px;
}

.sg-cleaning-compact-meta > div {
   min-width: 0;
   padding: 8px;
   border-radius: 8px;
   background: var(--sg-surface-soft);
}

.sg-cleaning-compact-meta span {
   display: block;
   color: #8a98a1;
   font-size: 8px;
   font-weight: 700;
   text-transform: uppercase;
}

.sg-cleaning-compact-meta strong {
   display: block;
   margin-top: 3px;
   color: #314754;
   font-size: 10px;
   font-weight: 700;
   overflow-wrap: anywhere;
}

.sg-cleaning-compact-action {
   width: 100%;
   min-height: 35px;
   margin-top: 10px;
   border: 1px solid #cce7e2;
   border-radius: 8px;
   background: #f0f9f7;
   color: #168f7f;
   cursor: pointer;
   font: inherit;
   font-size: 10px;
   font-weight: 750;
}

.sg-cleaning-compact-action:hover {
   background: #e6f5f2;
}


/* =====================================================
   MANY CLEANINGS SUMMARY
===================================================== */

.sg-cleaning-many-summary {
   border: 1px solid #e1e8ec;
   border-radius: 11px;
   overflow: hidden;
   background: var(--sg-card-bg);
}

.sg-cleaning-many-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 11px 12px;
   border-bottom: 1px solid var(--sg-border-ui);
}

.sg-cleaning-many-row:last-of-type {
   border-bottom: 0;
}

.sg-cleaning-many-property {
   min-width: 0;
   color: #304755;
   font-size: 10px;
   font-weight: 650;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.sg-cleaning-many-code {
   flex: 0 0 auto;
   min-width: 28px;
   padding: 4px 6px;
   border-radius: 6px;
   font-size: 8px;
   font-weight: 800;
   text-align: center;
}

.sg-cleaning-many-code.sd {
   background: #dff4ff;
   color: #28769a;
}

.sg-cleaning-many-code.mt {
   background: #f2e5ff;
   color: #7b3fa0;
}


.sg-cleaning-many-code.other {
   background: #edf1f4;
   color: var(--sg-text-muted);
}

.sg-cleaning-view-all {
   width: 100%;
   min-height: 42px;
   border: 0;
   border-top: 1px solid #e4ece9;
   background: #f3faf8;
   color: #168f7f;
   cursor: pointer;
   font: inherit;
   font-size: 10px;
   font-weight: 750;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

   .sg-cleaning-summary {
      grid-template-columns:
         repeat(2, minmax(0, 1fr));
   }

   .sg-cleaning-planner-layout {
      grid-template-columns:
         minmax(0, 1.45fr)
         minmax(270px, 0.75fr);
   }

}


@media (max-width: 900px) {

   .sg-cleaning-planner-layout {
      grid-template-columns: 1fr;
   }

   .sg-cleaning-day-panel {
      max-height: none;
   }

   .sg-cleaning-selected-day-content {
      overflow-y: visible;
   }

}


@media (max-width: 760px) {

   .sg-cleaning-planner-header {
      flex-direction: column;
      gap: 13px;
      margin-bottom: 15px;
   }

   .sg-cleaning-planner-title h2 {
      font-size: 25px;
      letter-spacing: -0.6px;
   }

   .sg-cleaning-planner-title p {
      font-size: 11px;
   }

   .sg-cleaning-toolbar {
      width: 100%;
   }

   .sg-cleaning-month-button {
      flex: 1;
      min-width: 0;
   }

   .sg-cleaning-summary {
      grid-template-columns:
         repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-bottom: 12px;
   }

   .sg-cleaning-summary-card {
      min-height: 88px;
      padding: 12px;
   }

   .sg-cleaning-summary-card strong {
      font-size: 22px;
   }

   .sg-cleaning-calendar-header {
      min-height: 50px;
      padding: 0 11px;
   }

   .sg-cleaning-calendar-header h3 {
      font-size: 13px;
   }

   .sg-cleaning-weekdays > div {
      padding: 7px 2px;
      font-size: 8px;
   }

   .sg-cleaning-calendar-grid {
      grid-template-rows:
         repeat(6, minmax(72px, 1fr));
   }

   .sg-cleaning-calendar-day {
      min-height: 72px;
      padding: 5px;
   }

   .sg-cleaning-day-number {
      width: 22px;
      height: 22px;
      font-size: 9px;
   }

   .sg-cleaning-cleaner-pill {
      min-height: 18px;
      padding: 2px 4px;
      border-radius: 5px;
      font-size: 8px;
   }

   .sg-cleaning-more {
      font-size: 7px;
   }

   .sg-cleaning-legend {
      gap: 10px;
      padding: 10px 11px;
   }

   .sg-cleaning-day-header {
      padding: 13px;
   }

   .sg-cleaning-selected-day-content {
      padding: 11px;
   }

}


@media (max-width: 430px) {

   .sg-cleaning-nav-button {
      width: 33px;
      height: 34px;
      flex-basis: 33px;
   }

   .sg-cleaning-month-button,
   .sg-cleaning-today-button {
      height: 34px;
      padding-left: 9px;
      padding-right: 9px;
      font-size: 10px;
   }

   .sg-cleaning-summary {
      gap: 5px;
   }

   .sg-cleaning-summary-card {
      min-height: 82px;
      padding: 10px;
   }

   .sg-cleaning-summary-label {
      font-size: 9px;
   }

   .sg-cleaning-summary-card strong {
      font-size: 20px;
   }

   .sg-cleaning-summary-note {
      font-size: 8px;
   }

   .sg-cleaning-calendar-day {
      padding: 4px;
   }

   .sg-cleaning-cleaner-pill {
      font-size: 7px;
   }

}

/* =========================
   CLEANING BADGE COLORS
========================= */
.sg-cleaning-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}


.sg-cleaning-badge.sd {
  background: #cfeeff;
  color: #145172;
}

.sg-cleaning-badge.mt {
  background: #7a43c5;
  color: #ffffff;
}

/* fallback */
.sg-cleaning-badge.default {
  background: #e9eef5;
  color: #314155;
}

/* =========================
   CLEANING DETAIL SECTIONS
========================= */
.sg-cleaning-detail-block {
  margin-top: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5ebf2;
  border-radius: 14px;
}

.sg-cleaning-detail-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f7288;
}

.sg-cleaning-detail-text {
  font-size: 14px;
  line-height: 1.55;
  color: #1d2b3a;
}

.sg-cleaning-detail-empty {
  color: #94a3b8;
  font-size: 14px;
}

.sg-cleaning-meta-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.sg-cleaning-meta-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}

.sg-cleaning-meta-item:last-child {
  border-bottom: none;
}

.sg-cleaning-meta-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.sg-cleaning-meta-value {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}

/* =====================================================
   CLEANING PLANNER - FINAL CLEANER COLORS
===================================================== */

/* SD = light blue + stronger blue text */
.sg-cleaning-cleaner-pill.sd,
.sg-cleaning-compact-code.sd,
.sg-cleaning-many-code.sd {
   background: #cfefff;
   color: #155f86;
}

/* MT = strong purple + white text */
.sg-cleaning-cleaner-pill.mt,
.sg-cleaning-compact-code.mt,
.sg-cleaning-many-code.mt {
   background: #7b42c3;
   color: #ffffff;
}

/* One shared SC palette throughout Cleaning. */
.sg-cleaning-cleaner-pill.sc,
.sg-cleaning-compact-code.sc,
.sg-cleaning-many-code.sc,
.sg-cleaning-badge.sc,
.sg-cl-avatar.sc,
.sg-cleaner-dot.sc {
   background: #fff3b0;
   color: #8a6d00;
}

/* =====================================================
   CLEANING PLANNER - RIGHT PANEL EXTRA INFO
===================================================== */

.sg-cleaning-compact-preparation,
.sg-cleaning-compact-reminders {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid #edf1f3;
}

.sg-cleaning-compact-section-title {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 7px;
   color: #7b8b96;
   font-size: 8px;
   font-weight: 800;
   letter-spacing: 0.25px;
}

.sg-cleaning-compact-section-title svg {
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
}

.sg-cleaning-compact-cot {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 29px;
   padding: 6px 9px;
   border-radius: 7px;
   font-size: 9px;
   font-weight: 750;
}

.sg-cleaning-compact-cot svg {
   width: 15px;
   height: 15px;
   flex: 0 0 15px;
}

.sg-cleaning-compact-cot.cot {
   background: #fff0f0;
   color: #c73737;
}

.sg-cleaning-compact-cot.confirm {
   background: #fff3dd;
   color: #906521;
}

.sg-cleaning-compact-cot.neutral {
   background: var(--sg-surface-soft);
   color: #6a7e92;
}

.sg-cleaning-compact-reminder-row {
   padding: 7px 8px;
   margin-top: 5px;
   border-radius: 7px;
   background: var(--sg-surface-soft);
}

.sg-cleaning-compact-reminder-row span {
   display: block;
   margin-bottom: 2px;
   color: #8a98a1;
   font-size: 8px;
   font-weight: 700;
}

.sg-cleaning-compact-reminder-row strong {
   display: block;
   color: #314754;
   font-size: 9px;
   font-weight: 650;
   line-height: 1.45;
   overflow-wrap: anywhere;
}

.sg-cleaning-compact-no-reminder {
   padding: 7px 8px;
   border-radius: 7px;
   background: var(--sg-surface-soft);
   color: #98a4ac;
   font-size: 9px;
}

/* =====================================================
   CLEANING CALENDAR - WEEKEND / HOLIDAY RED
===================================================== */

/* Saturday + Sunday weekday headers */
.sg-cleaning-weekdays > div:nth-child(6),
.sg-cleaning-weekdays > div:nth-child(7) {
   color: #d92d20;
   font-weight: 800;
}

/* Saturday + Sunday date numbers */
.sg-cleaning-calendar-day.weekend .sg-cleaning-day-number {
   color: #d92d20;
   font-weight: 800;
}

/* French public holiday date numbers */
.sg-cleaning-calendar-day.holiday .sg-cleaning-day-number {
   color: #d92d20;
   font-weight: 800;
}

/* Today is still white text inside green circle */
.sg-cleaning-calendar-day.today .sg-cleaning-day-number {
   color: #ffffff;
}

/* Sidebar branding and the future Analysis view. */
.sidebar-ai-accent { color: #20ccb7; }
.sg-analysis-placeholder { padding: 28px; }
.sg-analysis-placeholder h2 { margin: 0 0 8px; font-size: 22px; }
.sg-analysis-placeholder p { margin: 0; color: var(--sg-text-muted); font-size: 13px; }

/* Guests show complete stay details without a modal. */
#guestList.sg-guest-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   padding: 0 18px 18px;
   align-items: start;
}
.sg-guest-card { min-width: 0; padding: 18px; border: 1px solid var(--sg-border-ui); border-radius: 12px; background: var(--sg-card-bg); }
.sg-guest-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sg-guest-identity { min-width: 0; }
.sg-guest-identity h3 { margin: 0; color: var(--sg-text); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.sg-guest-country { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--sg-text-muted); font-size: 11px; }
.sg-guest-platform { max-width: 35%; padding: 5px 8px; border-radius: 7px; background: #f1f6f8; color: #526674; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.sg-guest-stay { margin-top: 16px; padding: 12px; border-radius: 8px; background: #f5faf9; }
.sg-guest-stay > strong { display: block; color: var(--sg-selection-text); font-size: 14px; overflow-wrap: anywhere; }
.sg-guest-stay > div { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 7px; color: var(--sg-text-muted); font-size: 10px; }
.sg-guest-stay b { display: block; margin-top: 3px; color: #203747; font-size: 12px; }
.sg-guest-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 10px; margin: 16px 0 0; }
.sg-guest-details dt { color: var(--sg-text-muted); font-size: 10px; }
.sg-guest-details dd { margin: 4px 0 0; color: #203747; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.sg-guest-note { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--sg-border-ui); }
.sg-guest-note strong { color: var(--sg-text-muted); font-size: 10px; }
.sg-guest-note p { margin: 5px 0 0; color: #425865; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-guest-note.issue strong { color: #c54d54; }
.sg-guest-empty { grid-column: 1 / -1; color: var(--sg-text-muted); font-size: 12px; }

.sg-cleaning-today-label { display: block; margin-bottom: 6px; color: var(--sg-primary-hover); font-size: 11px; font-weight: 800; letter-spacing: 0.7px; }

/* These typography changes apply only to the All Properties planner. */
#allPlannerView .property-label { font-size: 11px; }
#allPlannerView .sg-planner-guest { line-height: 1.2; }
#allPlannerView .sg-planner-details { min-width: 0; white-space: nowrap; overflow: hidden; }
#allPlannerView .sg-planner-details > span { flex-shrink: 0; }
#allPlannerView .sg-planner-details > span:last-child { font-size: 8.5px !important; }

@media (max-width: 760px) {
   #guestList.sg-guest-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 10px 12px; }
   .sg-guest-card { padding: 15px; }
   .sg-guest-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One shared language control in the header and on the sign-in screen. */
.sg-language-picker { position: relative; flex: 0 0 auto; }
.sg-language-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9500; min-width: 160px; padding: 5px; border: 1px solid var(--sg-border-ui); border-radius: 9px; background: var(--sg-card-bg); box-shadow: 0 8px 24px rgba(12,45,62,.12); }
.sg-language-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #425865; text-align: left; cursor: pointer; font-size: 12px; }
.sg-language-menu button:hover, .sg-language-menu button:focus-visible { background: var(--sg-selection-bg); color: var(--sg-selection-text); }
.sg-language-menu button[aria-pressed="true"] { background: var(--sg-selection-bg); font-weight: 750; }
.sg-login-language { display: flex; justify-content: flex-end; margin-bottom: 12px; }
/* Longer French labels must wrap inside cards, never change calendar geometry. */
/* Translation wrappers carry text only and retain their original parent styling. */
span[data-i18n] { display: contents; font: inherit !important; color: inherit !important; letter-spacing: inherit; }
.sg-guest-details dt, .sg-cleaning-compact-action, .sg-cl-button { overflow-wrap: anywhere; }
.sg-cleaning-toolbar { flex-wrap: wrap; }
.sidebar-item > span:last-child, .sidebar-placeholder > span:last-child { min-width: 0; }

/* The saved language is read in the head; reveal sign-in only after translation. */
html.sg-i18n-pending .login-screen,
html.sg-i18n-pending .loading-screen { visibility: hidden; }

.sg-mobile-menu-picker { display: none; position: relative; }
.sg-mobile-more-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sg-border-ui); border-radius: 8px; background: var(--sg-card-bg); color: var(--sg-text); cursor: pointer; }
.sg-mobile-more-button svg { width: 21px; height: 21px; }
.sg-mobile-more-button.active,
.sg-mobile-more-button:hover { color: var(--sg-selection-text); border-color: #cce8e3; background: var(--sg-selection-bg); }
.sg-mobile-more-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 9500; width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow-y: auto; padding: 6px; border: 1px solid var(--sg-border-ui); border-radius: 11px; background: var(--sg-card-bg); box-shadow: 0 10px 28px rgba(12,45,62,.15); }
.sg-more-item { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #425865; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
.sg-more-item:hover, .sg-more-item:focus-visible,
.sg-more-item.active { background: var(--sg-selection-bg); color: var(--sg-selection-text); }

@media (max-width: 760px) {
   .header-actions > .sg-language-picker,
   .header-actions > .profile-block { display: none; }
   .sg-mobile-menu-picker { display: block; }
   .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.sg-header-bell { width: 19px; height: 19px; vertical-align: middle; }
.sg-more-divider { height: 1px; margin: 6px 8px; background: #e7edef; }
.sg-mobile-language-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sg-mobile-language-toggle svg { width: 16px; height: 16px; transition: transform .15s ease; }
.sg-mobile-language-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sg-mobile-language-options { padding: 0 8px 4px; }
.sg-mobile-language-options button { display: block; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--sg-text-muted); text-align: left; font-size: 12px; cursor: pointer; }
.sg-mobile-language-options button:hover,
.sg-mobile-language-options button:focus-visible,
.sg-mobile-language-options button[aria-pressed="true"] { color: var(--sg-selection-text); background: var(--sg-selection-bg); }
.sg-mobile-signout { display: flex; align-items: center; gap: 8px; color: #536171; margin-top: 3px; }
.sg-mobile-signout svg { width: 17px; height: 17px; }
.sg-mobile-signout:hover, .sg-mobile-signout:focus-visible { color: var(--sg-selection-text); background: var(--sg-selection-bg); }

/* Desktop Single Property only: leave All Properties and mobile layout intact. */
@media (min-width: 761px) {
   .sg-single-calendar .content-area { padding: 8px 20px; }
   .sg-single-calendar .page-intro { margin-bottom: 6px; align-items: center; }
   .sg-single-calendar .page-intro h1 { font-size: 20px; }
   .sg-single-calendar .page-intro p { display: none; }
   .sg-single-calendar .today-label { margin-bottom: 2px; }
   .sg-single-calendar .summary-grid { gap: 10px; margin-bottom: 8px; }
   .sg-single-calendar .summary-card { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; }
   .sg-single-calendar .summary-card-top { flex: 0 0 auto; }
   .sg-single-calendar .summary-badge { display: none; }
   .sg-single-calendar .summary-icon { width: 28px; height: 28px; flex-basis: 28px; }
   .sg-single-calendar .summary-card-content { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; margin-top: 0; }
   .sg-single-calendar .summary-card-content strong { margin-top: 0; font-size: 22px; }
   .sg-single-calendar .calendar-card-header { padding: 6px 12px; }
   .sg-single-calendar .calendar-card-header p { display: none; }
   .sg-single-calendar .calendar-card-header h2 { font-size: 14px; }
   .sg-single-calendar .calendar-toolbar { min-height: 40px; padding: 4px 12px; }
   .sg-single-calendar .property-filter-area { gap: 8px; padding: 0 12px 6px; }
   .sg-single-calendar .single-calendar-mode { padding: 0 10px 8px; }
   .sg-single-calendar .single-property-title { display: none; }
   .sg-single-calendar .month-week-header > div { padding: 5px; }
   .sg-single-calendar .month-week-row {
      grid-template-rows: 26px repeat(3, var(--sg-single-lane-height, 32px));
      min-height: calc(26px + 3 * var(--sg-single-lane-height, 32px));
   }
   .sg-single-calendar .month-day-number { padding-top: 5px; padding-bottom: 5px; }
}

/* Wide-PC Single Property calendar polish. Tablet, mobile and All Properties retain their layouts. */
@media (min-width: 1200px) {
   #app.sg-single-calendar-pc .content-area {
      max-width: none;
      padding-inline: var(--sg-desktop-content-gutter, 30px);
   }
   #app.sg-single-calendar-pc :is(#mainPageIntro, #summarySection, #calendarView) {
      width: min(100%, 1200px);
      margin-left: auto;
      margin-right: auto;
   }
   #app.sg-single-calendar-pc #mainPageIntro {
      min-height: 54px;
      padding: 8px 12px;
      border: 1px solid var(--sg-border-ui);
      border-radius: 12px 12px 0 0;
      background: var(--sg-card-bg);
   }
   #app.sg-single-calendar-pc #mainPageIntro .sg-menu-heading { gap: 10px; }
   #app.sg-single-calendar-pc #mainPageIntro .sg-menu-heading-icon {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
   }
   #app.sg-single-calendar-pc #mainPageTitle { font-size: 22px; }
   #app.sg-single-calendar-pc #todayLabel,
   #app.sg-single-calendar-pc #mainPageSubtitle { display: none; }
   #app.sg-single-calendar-pc .page-intro-actions { align-items: center; }
   #app.sg-single-calendar-pc .page-intro-actions button { height: 40px; }

   #app.sg-single-calendar-pc #summarySection {
      display: flex;
      gap: 0;
      min-height: 44px;
      padding: 0 12px;
      border: 1px solid var(--sg-border-ui);
      border-top: 0;
      border-radius: 0 0 12px 12px;
      background: var(--sg-card-bg);
   }
   #app.sg-single-calendar-pc #summarySection .summary-card {
      flex: 0 1 210px;
      min-height: 44px;
      padding: 6px 16px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
   }
   #app.sg-single-calendar-pc #summarySection .summary-card + .summary-card {
      border-left: 1px solid var(--sg-border-ui);
   }
   #app.sg-single-calendar-pc #summarySection .summary-icon {
      width: 26px;
      height: 26px;
      flex-basis: 26px;
      font-size: 15px;
   }
   #app.sg-single-calendar-pc #summarySection .summary-card-content {
      flex: 0 1 auto;
      justify-content: flex-start;
      gap: 10px;
   }
   #app.sg-single-calendar-pc #summarySection .summary-card-content span { font-size: 12px; }
   #app.sg-single-calendar-pc #summarySection .summary-card-content strong { font-size: 18px; }

   #app.sg-single-calendar-pc #calendarView .calendar-card-header { display: none; }
   #app.sg-single-calendar-pc #calendarView .calendar-card { border-radius: 12px; }
   #app.sg-single-calendar-pc #calendarView .calendar-toolbar {
      min-height: 54px;
      padding: 7px 12px;
      gap: 12px;
   }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-date-nav { gap: 8px; }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-date-nav .month-center { display: contents; }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-date-nav > .month-button:first-child { order: 1; }
   #app.sg-single-calendar-pc #calendarView .month-title {
      order: 2;
      min-width: 150px;
      font-size: 17px;
      font-weight: 750;
      text-align: center;
      white-space: nowrap;
   }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-date-nav > .month-button:last-child { order: 3; }
   #app.sg-single-calendar-pc #calendarView .today-button { order: 4; min-height: 44px; }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-selectors { gap: 8px; }
   #app.sg-single-calendar-pc #calendarView .sg-calendar-toolbar-status {
      order: 3;
      margin: 0 2px;
      font-size: 10px;
   }
   #app.sg-single-calendar-pc #calendarView .property-tab,
   #app.sg-single-calendar-pc #calendarView .sg-calendar-view-select { min-height: 44px; }

   #app.sg-single-calendar-pc #calendarView .month-week-header > div,
   #app.sg-single-calendar-pc #calendarView .sg-workspace-month-weekdays > div {
      padding-block: 8px;
      font-size: 12px;
   }
   #app.sg-single-calendar-pc #calendarView .month-day-number { font-size: 13px; }
   #app.sg-single-calendar-pc #calendarView .month-reservation-bar {
      height: 28px;
      padding-inline: 9px;
      font-size: 12px;
   }
   #app.sg-single-calendar-pc #calendarView .month-day-background[style*="grid-column: 11 / 13"],
   #app.sg-single-calendar-pc #calendarView .month-day-background[style*="grid-column: 13 / 15"] {
      background: #fbfcfd;
   }
   #app.sg-single-calendar-pc #calendarView .month-day-background.other-month { background: var(--sg-surface-soft); }
   #app.sg-single-calendar-pc #calendarView .month-day-background.today { background: #eefaf7; }
}

/* Extra lanes are exclusive to the mobile adaptive Single Property calendar. */
.month-reservation-bar.sg-mobile-extra-lane { display: none; }
@media (max-width: 760px) {
   .sg-single-calendar .sg-mobile-adaptive-week {
      grid-template-rows: 28px repeat(var(--sg-week-lanes, 1), 34px);
      min-height: calc(28px + var(--sg-week-lanes, 1) * 34px);
   }
   .sg-single-calendar .sg-mobile-adaptive-week .month-day-background { grid-row: 1 / -1 !important; }
   .sg-single-calendar .sg-mobile-adaptive-week .month-day-number { padding-top: 5px; padding-bottom: 3px; }
   .sg-single-calendar .sg-mobile-adaptive-week .month-day-number.today { padding: 0; margin-top: 2px; margin-bottom: 2px; }
   .sg-single-calendar .sg-mobile-adaptive-week .month-reservation-bar { height: 30px; margin: 2px; font-size: 10px; }
   .sg-single-calendar .sg-mobile-adaptive-week .sg-mobile-extra-lane { display: flex; }
}

/* Genie: isolated overlay; no Sidebar, calendar or navigation layout changes. */
.sg-genie-fab { position: fixed; right: 22px; bottom: calc(22px + var(--sg-genie-lift, 0px)); z-index: 600; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid #68dbcc; border-radius: 50%; background: linear-gradient(145deg, #12364c 15%, #126e79 70%, #19a997); color: #dbfffa; box-shadow: 0 5px 18px rgba(18,54,76,.18), 0 0 0 4px rgba(42,197,176,.06); font: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.sg-genie-fab svg { width: 26px; height: 26px; color: #c6fff4; }
.sg-genie-fab:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(18,54,76,.22); }
.sg-genie-fab:active { transform: scale(.97); }
.sg-genie-fab:focus-visible, .sg-genie-panel button:focus-visible, .sg-genie-panel input:focus-visible { outline: 2px solid #14a998; outline-offset: 3px; }
.sg-genie-overlay { position: fixed; inset: 0; z-index: 9800; background: rgba(14,39,55,.22); display: flex; justify-content: flex-end; }
.sg-genie-panel { width: min(480px, 100%); height: 100%; height: 100dvh; display: flex; flex-direction: column; background: #f6f9fa; box-shadow: -10px 0 40px rgba(18,54,76,.14); color: #18384d; }
.sg-genie-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 18px; background: var(--sg-card-bg); border-bottom: 1px solid var(--sg-border-ui); }
.sg-genie-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sg-genie-identity > div:last-child { min-width: 0; }
.genie-avatar-frame { position: relative; width: 78px; height: 78px; flex: 0 0 78px; display: grid; place-items: center; overflow: hidden; border: 1px solid #9cdad3; border-radius: 20px; color: #258b92; background: linear-gradient(145deg, #eef8ff, #d8f4ee); box-shadow: 0 0 0 4px rgba(68,185,172,.05); }
.genie-avatar-frame svg { width: 100%; height: 100%; }
.genie-avatar-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.sg-genie-greeting { margin: 0 0 8px; color: #18384d; font-size: 14px; line-height: 1.6; font-weight: 600; }
.sg-genie-eyebrow { color: var(--sg-selection-text); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.sg-genie-header h2 { margin: 5px 0; font-size: 26px; }
.sg-genie-header p { margin: 0; color: var(--sg-text-muted); font-size: 12px; }
.sg-genie-header button { width: var(--sg-control-h); height: var(--sg-control-h); border: 1px solid var(--sg-border-ui); border-radius: var(--sg-radius-control); background: var(--sg-card-bg); color: #526d7e; font-size: 23px; cursor: pointer; }
.sg-genie-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 24px; }
.sg-genie-intro { margin: 0 0 14px; color: #526d7e; font-size: 12px; line-height: 1.6; }
.sg-genie-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.sg-genie-panel button { font-family: inherit; }
.sg-genie-quick button, .sg-genie-speech button, .sg-genie-actions button { min-height: var(--sg-control-h); border: 1px solid var(--sg-border-ui); border-radius: var(--sg-radius-control); padding: 8px 11px; color: #35596c; background: var(--sg-card-bg); font-size: 11px; cursor: pointer; }
.sg-genie-quick button:hover, .sg-genie-quick button[aria-pressed="true"] { border-color: #7dd2c6; color: #087e70; background: #eaf9f5; }
.sg-genie-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sg-genie-result-heading h3 { margin: 0; font-size: 15px; }
.sg-genie-result-heading > span { color: #718894; font-size: 11px; white-space: nowrap; }
.sg-genie-notice { padding: 10px 12px; border-radius: 8px; background: #fff7de; color: #80672d; font-size: 11px; line-height: 1.6; }
.sg-genie-speech { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.sg-genie-speech button { padding: 6px 10px; min-height: 32px; }
.sg-genie-panel button:disabled { opacity: .45; cursor: default; }
.sg-genie-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 14px 0; }
.sg-genie-summary > div { min-width: 0; padding: 12px 4px; background: var(--sg-card-bg); border: 1px solid #e1eaee; border-radius: 10px; text-align: center; }
.sg-genie-summary strong { display: block; font-size: 22px; margin-bottom: 4px; }
.sg-genie-summary span { display: block; font-size: 10px; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-genie-summary .attention { background: #fff6e4; border-color: #f0d9a2; color: #896325; }
.sg-genie-card { margin-top: 12px; padding: 16px; border: 1px solid #e1eaee; border-radius: 13px; background: var(--sg-card-bg); }
.sg-genie-card h4 { margin: 0 0 10px; font-size: 15px; }
.sg-genie-event { padding: 10px 0; border-top: 1px solid #edf2f4; }
.sg-genie-event h5 { margin: 0 0 7px; color: #078f7e; font-size: 11px; }
.sg-genie-event h6 { margin: 0 0 6px; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.sg-genie-event p { display: grid; grid-template-columns: minmax(85px, .8fr) minmax(0, 1.6fr); gap: 10px; margin: 5px 0; font-size: 11px; line-height: 1.55; }
.sg-genie-event p span { color: #708491; }
.sg-genie-event p strong { font-weight: 550; overflow-wrap: anywhere; white-space: pre-wrap; }
.sg-genie-attention { margin-top: 10px; padding: 11px 12px; border-left: 3px solid #d9a344; border-radius: 7px; background: #fff8e8; color: #7e5d27; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.sg-genie-attention h4, .sg-genie-attention h5 { margin: 0 0 5px; font-size: 12px; }
.sg-genie-attention ul { padding-left: 16px; margin: 0; }
.sg-genie-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.sg-genie-muted, .sg-genie-empty { color: #718894; font-size: 12px; line-height: 1.6; }
.sg-genie-empty { padding: 18px 14px; border: 1px dashed #d4e1e6; border-radius: 10px; }
.sg-genie-footer { padding: 10px 18px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--sg-border-ui); background: var(--sg-card-bg); }
.sg-genie-footer > p { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--sg-text-muted); }
.sg-genie-footer > p:empty { display: none; }
.sg-genie-composer { display: flex; gap: 7px; }
.sg-genie-composer input { min-width: 0; flex: 1; min-height: var(--sg-control-h); padding: 10px 12px; border: 1px solid var(--sg-border-ui); border-radius: var(--sg-radius-control); background: #f7fafb; font: inherit; font-size: 12px; color: #18384d; }
.sg-genie-composer button { flex: 0 0 var(--sg-control-h); height: var(--sg-control-h); display: grid; place-items: center; border: 1px solid var(--sg-border-ui); border-radius: var(--sg-radius-control); background: var(--sg-card-bg); color: #087e70; cursor: pointer; }
.sg-genie-composer button[type="submit"], .sg-genie-composer button[aria-pressed="true"] { color: #fff; background: #078f7e; border-color: #078f7e; }
.sg-genie-composer svg { width: 19px; height: 19px; }
.sg-genie-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 760px) {
   .sg-genie-fab { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom) + var(--sg-genie-lift, 0px)); }
   .sg-genie-identity { gap: 11px; }
   .genie-avatar-frame { width: 64px; height: 64px; flex-basis: 64px; border-radius: 17px; }
   .sg-genie-overlay { align-items: flex-end; }
   .sg-genie-panel { width: 100%; height: calc(100% - 14px); height: calc(100dvh - max(14px, env(safe-area-inset-top))); border-radius: 18px 18px 0 0; }
   .sg-genie-header { padding: 18px 18px 14px; border-radius: 18px 18px 0 0; }
   .sg-genie-header h2 { font-size: 23px; }
   .sg-genie-scroll { padding: 16px 14px 22px; }
   .sg-genie-quick button { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .sg-genie-fab { transition: none; } .sg-genie-fab:hover, .sg-genie-fab:active { transform: none; } }
/* Layered Genie launcher: portrait, orbit, decorative mic and staggered sparkles. */
.sg-genie-fab { width: 80px; height: 80px; border: 0; border-radius: 24px; background: transparent; box-shadow: 0 5px 20px rgba(18,54,76,.2), 0 0 0 3px rgba(42,197,176,.06); isolation: isolate; }
.sg-genie-fab > span { position: absolute; pointer-events: none; }
.sg-genie-fab-bg { inset: 0; border: 1px solid rgba(103,232,224,.65); border-radius: inherit; background: radial-gradient(ellipse at 15% 10%, rgba(32,194,190,.3), transparent 60%), linear-gradient(145deg, #123e60, #07355b 55%, #0a5b6c); }
.sg-genie-fab-portrait-wrap { width: 52px; height: 52px; top: 7px; left: 14px; overflow: hidden; border-radius: 50%; background: #d7f4f5; color: #157b8c; box-shadow: 0 0 0 1px rgba(152,246,237,.5); }
.sg-genie-fab-portrait-wrap svg { position: absolute; inset: 11px; width: 30px; height: 30px; }
.sg-genie-fab-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.18); transform-origin: 50% 30%; }
.sg-genie-fab-orbit { width: 64px; height: 64px; left: 8px; top: 1px; border: 1px solid rgba(94,231,233,.2); border-top-color: #9afef1; border-right-color: #36d4df; border-radius: 50%; box-shadow: 0 0 5px rgba(80,225,226,.28); animation: sgGenieOrbitRotate 9s linear infinite; }
.sg-genie-fab-orbit::after { content: ''; position: absolute; width: 4px; height: 4px; right: 7px; top: 6px; border-radius: 50%; background: #c3fff5; box-shadow: 0 0 5px #5adcd9; }
.sg-genie-fab-stars { inset: 0; }
.sg-genie-fab-star { position: absolute; width: 7px; height: 7px; background: #d0fff6; clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%); animation: sgGenieStarTwinkle 3.8s ease-in-out infinite; }
.sg-genie-fab-star.star-1 { left: 6px; top: 36px; animation-delay: -.4s; }
.sg-genie-fab-star.star-2 { right: 5px; top: 14px; width: 8px; height: 8px; animation-delay: -1.8s; }
.sg-genie-fab-star.star-3 { left: 20px; top: 4px; width: 4px; height: 4px; animation-delay: -2.9s; }
.sg-genie-fab-mic-badge { right: 4px; bottom: 21px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #8deee3; border-radius: 50%; color: #effffc; background: linear-gradient(145deg, #124578, #096173); box-shadow: 0 0 4px rgba(80,225,226,.4); animation: sgGenieMicPulse 1.6s ease-in-out infinite; }
.sg-genie-fab-mic-badge svg { width: 14px; height: 14px; color: inherit; }
.sg-genie-fab-label { bottom: 6px; left: 0; right: 0; color: #e4fff9; font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: .1px; text-shadow: 0 1px 2px rgba(0,20,42,.3); }
.sg-genie-fab[aria-expanded="true"] .sg-genie-fab-orbit,
.sg-genie-fab[aria-expanded="true"] .sg-genie-fab-star { animation-play-state: paused; }
@keyframes sgGenieOrbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sgGenieMicPulse {
   0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 4px rgba(80,225,226,.4), 0 0 0 0 rgba(61,231,220,.28); }
   50% { transform: scale(1.06); filter: brightness(1.18); box-shadow: 0 0 7px rgba(80,225,226,.55), 0 0 0 9px rgba(61,231,220,0); }
}
.sg-genie-fab.is-listening .sg-genie-fab-mic-badge { border-color: #b7fff5; animation: sgGenieMicListening .9s ease-in-out infinite; }
@keyframes sgGenieMicListening {
   0%, 100% { transform: scale(1); filter: brightness(1.08); box-shadow: 0 0 7px rgba(61,231,220,.6), 0 0 0 0 rgba(61,231,220,.42); }
   50% { transform: scale(1.06); filter: brightness(1.24); box-shadow: 0 0 12px rgba(61,231,220,.7), 0 0 0 10px rgba(61,231,220,0); }
}
@keyframes sgGenieStarTwinkle { 0%, 100% { opacity: .5; transform: scale(.88); } 50% { opacity: .95; transform: scale(1.08); } }
@media (max-width: 760px) {
   .sg-genie-fab { width: 76px; height: 76px; border-radius: 23px; }
   .sg-genie-fab-portrait-wrap { width: 48px; height: 48px; left: 14px; }
   .sg-genie-fab-orbit { width: 60px; height: 60px; }
   .sg-genie-fab-portrait-wrap svg { inset: 9px; }
   .sg-genie-fab-mic-badge { width: 22px; height: 22px; bottom: 20px; }
   .sg-genie-fab-label { bottom: 5px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
   .sg-genie-fab .sg-genie-fab-orbit,
   .sg-genie-fab .sg-genie-fab-mic-badge,
   .sg-genie-fab.is-listening .sg-genie-fab-mic-badge,
   .sg-genie-fab .sg-genie-fab-star { animation: none; }
}
/* Genie storyboard: launch -> real listening -> compact operations result. */
.sg-genie-panel { background: linear-gradient(180deg, #f2faff, #f7fbfc 60%, #eef8f9); }
.sg-genie-chat-modes { display: flex; gap: 4px; align-self: center; flex-shrink: 0; margin: 0 20px 8px; padding: 4px; border: 1px solid #cfe4e9; border-radius: 13px; background: #e8f3f7; }
.sg-genie-chat-modes button { min-width: 92px; min-height: var(--sg-control-h); padding: 7px 16px; border: 0; border-radius: var(--sg-radius-control); background: transparent; color: #557485; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.sg-genie-chat-modes button[aria-pressed="true"] { background: var(--sg-card-bg); color: var(--sg-selection-text); box-shadow: 0 2px 7px rgba(23,73,99,.09); }
.sg-genie-chat-modes button:focus-visible, #genieVoiceMic:focus-visible { outline: 2px solid var(--sg-selection-text); outline-offset: 3px; }
.sg-genie-voice-composer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
#genieVoiceMic { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border: 1px solid #68cfc5; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1cb6a5, #078d92); box-shadow: 0 5px 16px rgba(17,153,144,.16); cursor: pointer; }
#genieVoiceMic svg { width: 28px; height: 28px; }
#genieVoiceMic:disabled { opacity: .6; cursor: default; }
#genieVoiceState { margin: 0; color: #547184; font-size: 12px; line-height: 1.5; text-align: center; }
#genieVoiceCancel, .sg-genie-playback-retry { min-height: var(--sg-control-h); padding: 7px 13px; border: 1px solid var(--sg-border-ui); border-radius: var(--sg-radius-control); color: #35596c; background: var(--sg-card-bg); font-size: 12px; cursor: pointer; }
.sg-genie-playback-retry { display: block; margin: 0 auto 8px; }
.sg-genie-panel .sg-genie-speak-entry { display: none; }
.sg-genie-panel[data-chat-mode="voice"][data-mode="listening"] .sg-genie-footer { display: block; }
.sg-genie-panel[data-chat-mode="voice"] #genieListening .sg-genie-listening-circle,
.sg-genie-panel[data-chat-mode="voice"] #genieListening .sg-genie-listening-hint,
.sg-genie-panel[data-chat-mode="voice"] #genieCancel { display: none; }
.sg-genie-panel[data-chat-mode="voice"][data-mode="launch"] .genie-avatar-frame { width: 96px; height: 106px; flex-basis: auto; border-radius: 20px; }
.sg-genie-panel[data-chat-mode="voice"] .sg-genie-hero { padding-top: 8px; padding-bottom: 12px; }
.sg-genie-header { align-items: center; padding: 14px 20px; }
.sg-genie-flow-brand { display: flex; align-items: center; gap: 9px; color: #153d55; font-size: 15px; font-weight: 750; }
.sg-genie-flow-brand img { width: 27px; height: 27px; }
.sg-genie-flow-brand #genieBack { font-size: 25px; width: 30px; height: 32px; border: 0; background: transparent; }
.sg-genie-scroll { padding: 18px 20px 22px; }
.sg-genie-hero { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 22px; border-radius: 20px; background: radial-gradient(ellipse at 50% 20%, #d7f5f3, transparent 70%), linear-gradient(150deg, #ecf7ff, #effbf8); }
.sg-genie-hero .genie-avatar-frame { width: 156px; height: 170px; flex-basis: auto; border-radius: 28px; border-color: #a8dad7; box-shadow: 0 8px 24px rgba(30,126,139,.09), 0 0 0 5px rgba(255,255,255,.55); }
.sg-genie-hello { text-align: center; }
.sg-genie-hello h2 { margin: 19px 0 6px; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -.35px; }
.sg-genie-hello p { margin: 0; color: #547184; font-size: 14px; }
.sg-genie-stage { margin-top: 18px; }
#genieLaunch .sg-genie-quick { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
#genieLaunch .sg-genie-quick button { min-height: 43px; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.4; box-shadow: 0 2px 6px rgba(24,75,99,.025); }
#genieLaunch .sg-genie-quick button:first-child { grid-column: 1 / -1; color: #087e70; background: #e8f8f4; border-color: #a1dad0; font-weight: 650; }
.sg-genie-speak-entry { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 19px 0 2px; color: #617b8b; font-size: 11px; }
#genieLaunchMic { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #5dccbe; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1cb6a5, #078d92); box-shadow: 0 5px 16px rgba(17,153,144,.16); cursor: pointer; }
#genieLaunchMic svg { width: 25px; height: 25px; }
.sg-genie-panel[data-mode="listening"] .sg-genie-hello,
.sg-genie-panel[data-mode="result"] .sg-genie-hello { display: none; }
.sg-genie-panel[data-mode="listening"] .sg-genie-hero { background: transparent; padding-bottom: 6px; }
.sg-genie-panel[data-mode="listening"] .sg-genie-footer { display: none; }
.sg-genie-panel[data-mode="listening"] .genie-avatar-frame { width: 122px; height: 134px; border-radius: 24px; }
#genieListening { text-align: center; margin-top: 20px; }
.sg-genie-listening-circle { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 20px; border: 1px solid #74d8cc; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1bb5a6, #087a91); animation: sgGenieListenHalo 1.8s ease-in-out infinite; }
.sg-genie-listening-circle svg { width: 39px; height: 39px; }
.sg-genie-wave { display: inline-flex; height: 24px; align-items: center; gap: 3px; color: #16a798; }
.sg-genie-wave > span { width: 3px; height: 12px; border-radius: 3px; background: currentColor; transform: scaleY(.6); }
.sg-genie-wave > span:nth-child(2n) { height: 20px; }
.sg-genie-panel[data-mode="listening"] #genieListening .sg-genie-wave > span,
#genieResultWave.is-speaking .sg-genie-wave > span { animation: sgGenieWave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); }
#genieListening h2 { margin: 14px 0 8px; font-size: 23px; }
.sg-genie-listening-hint { margin: 0 auto; max-width: 260px; color: #678394; font-size: 12px; line-height: 1.6; }
#genieTranscript { min-height: 62px; margin: 22px 0; padding: 16px; border: 1px solid #d6e8ec; border-radius: 15px; background: rgba(255,255,255,.85); color: #254c63; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
#genieTranscript:empty { border-style: dashed; }
#genieCancel { min-height: 40px; padding: 9px 26px; border: 1px solid #d2e4e9; border-radius: 10px; color: #536e80; background: var(--sg-card-bg); font-size: 12px; cursor: pointer; }
.sg-genie-panel[data-mode="result"] .sg-genie-hero { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 15px; }
.sg-genie-panel[data-mode="result"] .genie-avatar-frame { width: 54px; height: 60px; flex: 0 0 54px; border-radius: 14px; box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
.sg-genie-bubble { position: relative; margin: 0; padding: 10px 12px; border: 1px solid #dcebee; border-radius: 13px 13px 13px 3px; background: var(--sg-card-bg); color: #385e73; font-size: 12px; line-height: 1.6; }
#genieResult { margin-top: 16px; }
.sg-genie-last-request { margin: 7px 0 0; color: #718b99; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.sg-genie-speech { align-items: center; gap: 5px; margin: 12px 0; }
.sg-genie-speech button { font-size: 10px; min-height: 32px; padding: 6px 8px; }
#genieResultWave { display: inline-flex; margin-right: auto; padding: 0 3px; }
.sg-genie-summary { gap: 5px; margin: 12px 0; }
.sg-genie-summary > div { padding: 9px 3px; border-radius: 10px; }
.sg-genie-summary strong { font-size: 20px; margin-bottom: 3px; }
.sg-genie-card { padding: 13px 14px; margin-top: 10px; border-radius: 14px; box-shadow: 0 3px 12px rgba(31,83,104,.025); }
.sg-genie-card h4 { margin-bottom: 9px; font-size: 14px; }
.sg-genie-op-row { display: grid; grid-template-columns: 21px minmax(0,1fr); gap: 8px; margin: 9px 0; }
.sg-genie-op-icon { display: grid; place-items: start center; padding-top: 2px; color: #1ca394; }
.sg-genie-op-icon svg { width: 17px; height: 17px; }
.sg-genie-op-kind { color: #72909e; font-size: 10px; font-weight: 650; }
.sg-genie-op-main { margin: 2px 0 0; color: #264c62; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sg-genie-op-main strong { font-weight: 650; }
.sg-genie-op-extra, .sg-genie-op-note { margin: 3px 0 0; color: #5f7e8f; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.sg-genie-op-note { color: #547887; }
.sg-genie-card .sg-genie-muted { margin: 7px 0; font-size: 10px; }
.sg-genie-attention { padding: 9px 10px; font-size: 10px; margin-top: 9px; }
.sg-genie-actions { gap: 6px; margin-top: 9px; }
.sg-genie-actions button { min-height: 32px; padding: 6px 9px; font-size: 10px; }
.sg-genie-footer { padding-top: 11px; }
@keyframes sgGenieListenHalo { 0%,100% { box-shadow: 0 0 0 8px rgba(69,199,184,.09), 0 0 0 18px rgba(69,199,184,.025); } 50% { box-shadow: 0 0 0 12px rgba(69,199,184,.11), 0 0 0 25px rgba(69,199,184,.02); } }
@keyframes sgGenieWave { 0%,100% { transform: scaleY(.45); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 760px) {
   .sg-genie-header { padding: 13px 16px; }
   .sg-genie-scroll { padding: 14px 14px 20px; }
   .sg-genie-hero { padding: 12px 10px 18px; }
   .sg-genie-hero .genie-avatar-frame { width: 144px; height: 158px; }
   .sg-genie-hello h2 { font-size: 20px; margin-top: 17px; }
   .sg-genie-hello p { font-size: 13px; }
   #genieLaunch .sg-genie-quick button { font-size: 11px; min-height: 41px; }
}
@media (prefers-reduced-motion: reduce) {
   .sg-genie-listening-circle,
   .sg-genie-panel[data-mode="listening"] #genieListening .sg-genie-wave > span,
   #genieResultWave.is-speaking .sg-genie-wave > span { animation: none; }
}

/* Sentence highlight follows actual audio playing events. */
.sg-genie-sentence { border-radius: 4px; }
.sg-genie-sentence.is-reading { background: rgba(27, 170, 158, .14); }
/* Brand tokens are owned by design_system.html. Keep the baby-cot semantic palette. */
:root { --sg-baby-cot-bg: #DC2626; --sg-baby-cot-text: #FFFFFF; }
html, body, .app-shell, .main-shell { background-color: var(--sg-workspace-bg); color: var(--sg-text); }
.sidebar, .top-header { background-color: var(--sg-menu-bg); }
.top-header .mobile-brand strong, .top-header .profile-info strong { color: var(--sg-card-bg); }
.top-header .profile-info span { color: var(--sg-sky); }
.header-search { background-color: var(--sg-card-bg); }
.header-search input { color: var(--sg-text); }
.sidebar-item.active { background-color: var(--sg-primary); color: var(--sg-menu-bg); }
.sidebar-item.active:hover { background-color: var(--sg-primary-hover); color: var(--sg-menu-bg); }
.sidebar-item:not(.active):not(:focus-visible) .sidebar-icon { color: var(--sg-sky); }
.sidebar-item:focus-visible { background-color: var(--sg-primary); color: var(--sg-menu-bg); }
.login-card, .summary-card, .calendar-card, .standard-card, .property-card,
.property-detail-panel, .modal-sheet, .sg-cleaning-calendar-card, .sg-cleaning-day-panel,
.sg-cleaning-summary-card, .sg-cleaning-compact-card, .sg-cleaning-many-summary,
#cleaningList > .sg-cleaning-card, .sg-member-dialog, .sg-member-card, .sg-genie-card {
   background-color: var(--sg-card-bg);
}
.page-intro h1, .property-card-name, .property-detail-header h3, .sg-photo-editor h4,
#cleaningView .sg-cleaning-page-heading h2, #cleaningList .sg-cl-property h3,
#cleaningList .sg-cl-field > strong, #cleaningList .sg-cl-guest-line > strong,
.sg-cleaning-modal-header h3, .sg-cleaning-detail-text, .sg-member-dialog {
   color: var(--sg-text);
}
.login-submit, .primary-action, .sg-photo-save, .sg-cl-button, .sg-cleaning-compact-action,
.sg-genie-composer button[type="submit"],
.sg-member-dialog .sg-member-button:not(.sg-member-warning),
#settingsView .sg-member-button:not(.sg-member-warning) {
   background: var(--sg-primary); color: var(--sg-menu-bg); border-color: var(--sg-primary);
}
.login-submit:hover, .primary-action:hover, .sg-photo-save:hover, .sg-cl-button:hover,
.sg-cleaning-compact-action:hover, .sg-genie-composer button[type="submit"]:hover,
.sg-member-dialog .sg-member-button:not(.sg-member-warning):hover,
#settingsView .sg-member-button:not(.sg-member-warning):hover {
   background: var(--sg-primary-hover); color: var(--sg-menu-bg); border-color: var(--sg-primary-hover);
}
/* Keyboard focus uses only an inverse color treatment; geometry is unchanged. */
.login-submit:focus-visible, .primary-action:focus-visible, .sg-photo-save:focus-visible,
.sg-cl-button:focus-visible, .sg-cleaning-compact-action:focus-visible,
.sg-genie-composer button[type="submit"]:focus-visible,
.sg-member-dialog .sg-member-button:not(.sg-member-warning):focus-visible,
#settingsView .sg-member-button:not(.sg-member-warning):focus-visible {
   background: var(--sg-menu-bg); color: var(--sg-primary); border-color: var(--sg-menu-bg);
   outline-color: var(--sg-accent-text);
}
.sg-photo-eyebrow, .sg-cl-eyebrow,
.sg-cleaning-view-all, .sg-genie-event h5, .sg-member-link[data-member-launch] { color: var(--sg-accent-text); }
.property-tabs button.active, .property-tab.active, .property-tabs button.selected { background-color: var(--sg-selection-bg); color: var(--sg-selection-text); border-color: var(--sg-control-border); }
.property-tabs button.active:hover, .property-tabs button.selected:hover { background-color: var(--sg-selection-bg); }
.today-label, .today-button { color: var(--sg-text); }
.property-card-open { background-color: var(--sg-info-bg); color: var(--sg-text); }
.property-card.selected { border-color: var(--sg-primary); }
.property-tabs button:focus-visible { background-color: var(--sg-menu-bg); color: var(--sg-primary); border-color: var(--sg-menu-bg); }
.sg-more-item:not(.sg-mobile-signout):hover, .sg-more-item:not(.sg-mobile-signout):focus-visible,
.sg-more-item.active, .sg-mobile-language-options button:hover,
.sg-mobile-language-options button:focus-visible, .sg-mobile-language-options button[aria-pressed="true"],
.sg-language-menu button:hover, .sg-language-menu button:focus-visible,
.sg-mobile-more-button.active, .sg-mobile-more-button:hover,
.sg-genie-quick button:hover, .sg-genie-quick button[aria-pressed="true"],
#genieLaunch .sg-genie-quick button:first-child, .sg-genie-chat-modes button[aria-pressed="true"] {
   background-color: var(--sg-selection-bg); color: var(--sg-selection-text); border-color: var(--sg-control-border);
}
.nav-button.active { background-color: var(--sg-info-bg); color: var(--sg-text); }
.nav-button:focus-visible, .sg-mobile-more-button:focus-visible { background-color: var(--sg-menu-bg); color: var(--sg-primary); border-color: var(--sg-primary); }
.sg-photo-choose, .property-detail-item, .sg-cleaning-compact-meta > div,
.sg-cleaning-calendar-day.selected, .sg-cleaning-calendar-day.selected.weekend,
.sg-genie-summary > div:not(.attention), .sg-genie-sentence.is-reading, .sg-cl-detail-grid section,
.sg-cl-detail-grid section:last-child, #cleaningList .sg-cl-schedule > .sg-cl-field:nth-child(3),
#cleaningList .sg-cl-schedule > .sg-cl-field:nth-child(4), #cleaningList .sg-cl-next-guests {
   background-color: var(--sg-info-bg);
}
.sg-photo-choose { color: var(--sg-text); border-color: var(--sg-primary); }
.sg-photo-choose:hover { background-color: var(--sg-primary-hover); color: var(--sg-menu-bg); }
.sg-cleaning-compact-meta span, .sg-cleaning-compact-meta strong,
#cleaningList .sg-cl-date, #cleaningList .sg-cl-available, #cleaningList .sg-cl-label,
.sg-cl-detail-grid h4, .sg-cl-detail-grid p { color: var(--sg-text); }
.sg-cl-label svg, .sg-genie-op-icon { color: var(--sg-accent-text); }
.header-search-icon { color: var(--sg-accent-text); }
.sg-genie-chat-modes { background-color: var(--sg-info-bg); }
.login-field input:focus, .sg-cl-editor input:focus, .sg-cl-editor textarea:focus { border-color: var(--sg-accent-text); outline-color: var(--sg-accent-text); }
.sg-cl-preparation.cot, .sg-cleaning-compact-cot.cot {
   background: var(--sg-baby-cot-bg); color: var(--sg-baby-cot-text);
}