*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:#17202a;font-family:Arial,sans-serif}.app{max-width:1100px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;background:#111827;color:white;padding:18px;border-radius:14px}nav{display:flex;gap:8px;padding:12px 0;overflow:auto}button{border:0;border-radius:10px;padding:11px 16px;background:white;cursor:pointer}.primary{background:#111827;color:#fff}button{font-weight:700}.card{background:white;border-radius:14px;padding:18px;margin:12px 0;box-shadow:0 2px 12px #0001}input,textarea,select{width:100%;padding:11px;margin:6px 0 12px;border:1px solid #d5dbe3;border-radius:9px}.grid{display:flex;flex-wrap:wrap}.img{width:150px;height:100px;object-fit:cover;margin:5px;border-radius:8px}.tag{display:inline-block;padding:4px 8px;border-radius:99px;font-size:12px;font-weight:700}.urgent{background:#fee2e2;color:#991b1b}.medium{background:#fef3c7;color:#92400e}.normal{background:#dcfce7;color:#166534}
#status{font-weight:700;opacity:.95}.card h1,.card h2{margin-top:0}.card p{line-height:1.5} @media (max-width:700px){.app{padding:10px}header{align-items:flex-start;gap:12px;flex-direction:column}nav{flex-wrap:wrap}.card{padding:14px}}

/* =========================================================
   AAROMA ADMIN HOME
   ========================================================= */

.aaroma-home {
  min-height: calc(100vh - 110px);
  margin: -24px;
  padding: 48px 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at center,
      #173d78 0%,
      #071b3d 55%,
      #020b1b 100%
    );
  color: #fff;
}

.aaroma-home-inner {
  width: min(720px, 92vw);
  text-align: center;
}

.aaroma-home-logo {
  display: block;
  width: min(330px, 42vw);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(
    0 12px 30px rgba(0,0,0,.35)
  );
}

.aaroma-home h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 900;
}

.aaroma-home p {
  margin: 10px 0 30px;
  font-size: 20px;
  opacity: .82;
}

.aaroma-home-status {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.aaroma-home-status > div {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.aaroma-home-status span,
.aaroma-home-status strong {
  display: block;
}

.aaroma-home-status span {
  font-size: 13px;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.aaroma-home-status strong {
  margin-top: 6px;
  font-size: 20px;
}


/* =========================================================
   AAROMA BOOKING CALENDAR
   ========================================================= */

.booking-toolbar,
.calendar-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.booking-toolbar h2,
.booking-toolbar p {
  margin:0;
}

.booking-toolbar-actions,
.booking-actions,
.booking-row-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.booking-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.booking-grid label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
}

.booking-wide {
  grid-column:1/-1;
}

.booking-service-row,
.booking-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  margin-top:10px;
  border-radius:12px;
  background:#f8fafc;
  border-left:5px solid #64748b;
}

.booking-service-row small,
.booking-main span {
  display:block;
  opacity:.7;
}

.booking-status {
  padding:5px 9px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.status-scheduled { border-color:#2563eb !important; }
.status-checked-in { border-color:#16a34a !important; }
.status-in-progress { border-color:#f59e0b !important; }
.status-completed { border-color:#64748b !important; }
.status-cancelled { border-color:#dc2626 !important; opacity:.65; }
.status-no-show { border-color:#7c3aed !important; }

.calendar-month {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:#cbd5e1;
  gap:1px;
  border:1px solid #cbd5e1;
}

.calendar-weekday {
  background:#0f1b2d;
  color:#fff;
  padding:10px;
  text-align:center;
  font-weight:800;
}

.calendar-day {
  background:#fff;
  min-height:135px;
  padding:8px;
}

.calendar-day.outside {
  background:#f1f5f9;
  opacity:.65;
}

.calendar-day.today {
  box-shadow:inset 0 0 0 3px #2563eb;
}

.calendar-date-number {
  font-weight:900;
  margin-bottom:7px;
}

.calendar-event {
  display:block;
  width:100%;
  margin:4px 0;
  padding:6px 7px;
  border:0;
  border-left:4px solid #2563eb;
  border-radius:6px;
  background:#eef4ff;
  text-align:left;
  font-size:12px;
}

.calendar-event strong {
  display:block;
}

.calendar-week {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.calendar-week-column {
  min-height:300px;
  padding:10px;
  background:#fff;
  border-radius:12px;
}

.calendar-week-column h3 {
  margin-top:0;
}

.calendar-agenda {
  display:grid;
  gap:10px;
}

.calendar-agenda-event {
  display:grid;
  grid-template-columns:100px 1fr auto;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:15px;
  border-radius:12px;
  border-left:6px solid #2563eb;
}

.calendar-agenda-event span {
  display:block;
  opacity:.7;
}

@media(max-width:900px) {
  .booking-grid {
    grid-template-columns:1fr;
  }

  .booking-wide {
    grid-column:auto;
  }

  .calendar-week {
    grid-template-columns:1fr;
  }

  .booking-toolbar,
  .booking-row {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================================================
   AAROMA ADMIN — APPROVED FULL-SCREEN HOME
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  background: #071a3d !important;
}

.app {
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #071a3d !important;
}

/* Minimal top status only */
.admin-topbar {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  left: auto !important;
  z-index: 1000 !important;

  display: block !important;
  padding: 8px 12px !important;

  border-radius: 10px !important;
  background: rgba(0,0,0,.24) !important;
  color: #fff !important;
}

#status {
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Main page fills the screen */
#page {
  min-height: 100vh !important;
  padding-bottom: 110px !important;
}

/* Home */
.aaroma-home {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 70px 24px 140px !important;

  display: grid !important;
  place-items: center !important;

  background: #071a3d !important;
  color: #fff !important;
}

.aaroma-home-inner {
  width: min(760px, 90vw) !important;
  text-align: center !important;
}

.aaroma-home-logo {
  display: block !important;

  width: min(370px, 34vw) !important;
  max-height: 48vh !important;

  margin: 0 auto 24px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 14px 34px rgba(0,0,0,.28)
    ) !important;
}

/* No AAROMA Admin heading */
.aaroma-home h1 {
  display: none !important;
}

.aaroma-home-title {
  margin: 0 0 34px !important;

  font-size:
    clamp(24px, 2.2vw, 36px) !important;

  font-weight: 700 !important;
  letter-spacing: .01em !important;

  color: #fff !important;
}

.aaroma-home-status {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 16px !important;
}

.aaroma-home-status > div {
  padding: 18px 20px !important;

  border:
    1px solid rgba(255,255,255,.18) !important;

  border-radius: 14px !important;

  background:
    rgba(255,255,255,.07) !important;

  box-shadow: none !important;
}

.aaroma-home-status span {
  display: block !important;

  color:
    rgba(255,255,255,.66) !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.aaroma-home-status strong {
  display: block !important;

  margin-top: 7px !important;

  color: #fff !important;
  font-size: 20px !important;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.admin-bottom-nav {
  position: fixed !important;

  left: 20px !important;
  right: 20px !important;
  bottom: 18px !important;

  z-index: 1200 !important;

  display: grid !important;
  grid-template-columns:
    repeat(7, minmax(0, 1fr)) !important;

  gap: 8px !important;

  padding: 10px !important;

  border:
    1px solid rgba(255,255,255,.12) !important;

  border-radius: 18px !important;

  background:
    rgba(2, 9, 25, .94) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.32) !important;

  overflow: visible !important;
}

.admin-bottom-nav button {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

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

  gap: 5px !important;

  padding: 10px 5px !important;

  border: 0 !important;
  border-radius: 12px !important;

  background: transparent !important;
  color: #fff !important;

  cursor: pointer !important;
}

.admin-bottom-nav button:hover {
  background:
    rgba(255,255,255,.08) !important;
}

.admin-bottom-nav button.active,
.admin-bottom-nav button[aria-current="page"] {
  background: #143f8c !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.10) !important;
}

.nav-icon {
  display: block !important;

  font-size: 24px !important;
  line-height: 1 !important;

  color: #d7a837 !important;
}

.nav-label {
  display: block !important;

  font-size: 11px !important;
  font-weight: 700 !important;

  color:
    rgba(255,255,255,.88) !important;

  white-space: nowrap !important;
}

/* Non-home pages stay usable */
#page > .card,
#page > .booking-toolbar,
#page > .calendar-controls,
#page > #calendar {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

@media (max-width: 800px) {

  .admin-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;

    gap: 3px !important;
    padding: 7px !important;
  }

  .admin-bottom-nav button {
    padding:
      9px 2px !important;
  }

  .nav-icon {
    font-size: 20px !important;
  }

  .nav-label {
    font-size: 9px !important;
  }

  .aaroma-home-logo {
    width: min(330px, 58vw) !important;
  }

  .aaroma-home-status {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   AAROMA OPTION 4 — FINAL ADMIN HOME
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  background: #071a3d !important;
}

.app {
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #071a3d !important;
}

#page {
  min-height: 100vh !important;
  padding-bottom: 118px !important;
}

/* Small top-right status only */
.admin-topbar {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  left: auto !important;
  z-index: 1300 !important;
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #0e3c78 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.24) !important;
}

#status {
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Full-screen home */
.aaroma-home {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 70px 24px 150px !important;

  display: grid !important;
  place-items: center !important;

  background: #071a3d !important;
  color: #fff !important;
}

.aaroma-home-inner {
  width: min(760px, 90vw) !important;
  text-align: center !important;
}

.aaroma-home-logo {
  display: block !important;
  width: min(360px, 34vw) !important;
  max-height: 45vh !important;
  height: auto !important;
  margin: 0 auto 22px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.28)) !important;
}

/* Gold divider */
.home-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: min(360px, 54vw) !important;
  margin: 0 auto 18px !important;
  color: #d7a837 !important;
}

.home-divider span {
  height: 1px !important;
  flex: 1 !important;
  background: #d7a837 !important;
}

.home-divider b {
  font-size: 17px !important;
}

/* Normal-size title */
.aaroma-home-title {
  margin-bottom: 30px !important;
  font-size: clamp(24px, 2.4vw, 37px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* Status cards */
.aaroma-home-status {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
}

.aaroma-home-status > div {
  padding: 18px 22px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: #0b234d !important;
  box-shadow: none !important;
}

.aaroma-home-status span,
.aaroma-home-status strong {
  display: block !important;
}

.aaroma-home-status span {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
}

.aaroma-home-status strong {
  margin-top: 6px !important;
  font-size: 20px !important;
  color: #fff !important;
}

/* Bottom navigation */
.admin-bottom-nav {
  position: fixed !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 18px !important;
  z-index: 1400 !important;

  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
  gap: 8px !important;

  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: #031025 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.30) !important;
}

.admin-bottom-nav button {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  padding: 10px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;

  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
}

.admin-bottom-nav button:hover {
  background: #0b234d !important;
}

.admin-bottom-nav button.active,
.admin-bottom-nav button[aria-current="page"] {
  background: #143f8c !important;
}

.nav-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  color: #d7a837 !important;
}

.nav-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.88) !important;
  white-space: nowrap !important;
}

/* Non-home admin pages */
#page > .card,
#page > .booking-toolbar,
#page > .calendar-controls,
#page > #calendar {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive */
@media (max-width: 800px) {

  .admin-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    gap: 3px !important;
    padding: 7px !important;
  }

  .admin-bottom-nav button {
    padding: 9px 2px !important;
  }

  .nav-icon {
    font-size: 20px !important;
  }

  .nav-label {
    font-size: 9px !important;
  }

  .aaroma-home-logo {
    width: min(320px, 58vw) !important;
  }

  .aaroma-home-status {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   AAROMA CAMERA WORKFLOW
   ========================================================= */

.picture-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:14px 0 18px;
}

.picture-file-picker {
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  font-weight:700;
}

.picture-file-picker input {
  max-width:280px;
}

.camera-preview {
  margin:22px 0;
  padding:18px;

  border-radius:18px;
  border:1px solid rgba(15,23,42,.18);

  background:#f8fafc;
}

.camera-preview[hidden] {
  display:none !important;
}

.camera-preview-title {
  margin-bottom:12px;

  font-size:22px;
  font-weight:900;
}

.camera-preview-frame {
  width:100%;
  max-width:960px;

  margin:0 auto;

  aspect-ratio:16 / 9;

  overflow:hidden;

  border-radius:14px;

  background:#000;

  box-shadow:
    0 10px 30px rgba(0,0,0,.20);
}

#cameraCanvas {
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  background:#000;
}

.camera-preview-help {
  margin:12px 0;

  text-align:center;
  font-weight:600;
}

.camera-preview-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.camera-preview-actions button {
  min-width:130px;
}

@media(max-width:700px) {

  .picture-actions {
    align-items:stretch;
  }

  .picture-actions > button,
  .picture-file-picker {
    width:100%;
  }

  .picture-file-picker input {
    width:100%;
    max-width:none;
  }

  .camera-preview {
    padding:12px;
  }

  .camera-preview-actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .camera-preview-actions button {
    width:100%;
  }
}

/* AAROMA MEDIA LIBRARY — VIDEO */

.media-admin-item {
  display:inline-flex;
  vertical-align:top;
  flex-direction:column;
  gap:6px;
  margin:5px;
}

.media-admin-video {
  background:#000;
}

.media-admin-item small {
  display:block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* =========================================================
   AAROMA COLLAPSIBLE RIGHT ADMIN MENU
   ========================================================= */

/*
   Remove space that was previously reserved for
   the fixed bottom navigation.
*/
body {
  padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   FLOATING MENU BUTTON
   --------------------------------------------------------- */

.admin-menu-toggle {
  position: fixed !important;

  right: 22px !important;
  top: 50% !important;

  transform:
    translateY(-50%) !important;

  width: 62px !important;
  height: 62px !important;

  z-index: 1605 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border:
    2px solid #d59a16 !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      145deg,
      #0b2d66,
      #051b40
    ) !important;

  color: #efb936 !important;

  font-size: 31px !important;
  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.32) !important;

  transition:
    right .28s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

.admin-menu-toggle:hover {
  transform:
    translateY(-50%)
    scale(1.06) !important;

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.38) !important;
}

.admin-menu-toggle:active {
  transform:
    translateY(-50%)
    scale(.96) !important;
}


/*
   When the side menu is open, move the floating
   button beside the left edge of the menu.
*/
body.admin-menu-open
.admin-menu-toggle {
  right:
    min(
      calc(340px + 18px),
      calc(86vw + 18px)
    ) !important;
}


/* ---------------------------------------------------------
   BACKDROP
   --------------------------------------------------------- */

.admin-menu-backdrop {
  position: fixed !important;

  inset: 0 !important;

  z-index: 1580 !important;

  background:
    rgba(2, 9, 24, .28) !important;

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}

.admin-menu-backdrop[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   RIGHT SIDE MENU
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width:
    min(
      340px,
      86vw
    ) !important;

  height: 100dvh !important;

  z-index: 1600 !important;

  display: flex !important;
  flex-direction: column !important;

  grid-template-columns: none !important;

  gap: 0 !important;

  padding:
    24px
    20px
    28px !important;

  border: 0 !important;
  border-left:
    1px solid
    rgba(255,255,255,.12) !important;

  border-radius: 0 !important;

  background:
    linear-gradient(
      180deg,
      #082b63 0%,
      #031a3d 58%,
      #020d22 100%
    ) !important;

  box-shadow:
    -18px 0 50px
    rgba(0,0,0,.34) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  transform:
    translateX(105%) !important;

  visibility: hidden !important;

  pointer-events: none !important;

  transition:
    transform .30s ease,
    visibility .30s ease !important;
}


body.admin-menu-open
.admin-bottom-nav.admin-side-nav {
  transform:
    translateX(0) !important;

  visibility:
    visible !important;

  pointer-events:
    auto !important;
}


/* ---------------------------------------------------------
   MENU HEADER
   --------------------------------------------------------- */

.admin-side-nav-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  min-height: 58px !important;

  margin-bottom: 10px !important;

  padding:
    0
    6px
    13px !important;

  border-bottom:
    1px solid
    rgba(224,164,31,.75) !important;

  color: #efb936 !important;
}

.admin-side-nav-header strong {
  font-size: 21px !important;

  letter-spacing:
    .05em !important;
}

.admin-menu-close {
  width: 44px !important;
  height: 44px !important;

  border: 0 !important;

  background:
    transparent !important;

  color: #efb936 !important;

  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}


/* ---------------------------------------------------------
   MENU BUTTONS
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav
> button:not(.admin-menu-close) {
  width: 100% !important;
  min-height: 70px !important;

  display: grid !important;

  grid-template-columns:
    48px
    minmax(0, 1fr) !important;

  align-items: center !important;
  justify-items: start !important;

  gap: 12px !important;

  padding:
    10px
    14px !important;

  border: 0 !important;
  border-bottom:
    1px solid
    rgba(255,255,255,.11) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color: #fff !important;

  text-align:
    left !important;

  cursor: pointer !important;

  transition:
    background .16s ease,
    transform .16s ease !important;
}


.admin-bottom-nav.admin-side-nav
> button:not(.admin-menu-close):hover {
  background:
    rgba(255,255,255,.07) !important;

  transform:
    translateX(3px) !important;
}


.admin-bottom-nav.admin-side-nav
> button.active,

.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  border-left:
    4px solid
    #efb936 !important;

  border-radius:
    9px !important;

  background:
    linear-gradient(
      90deg,
      rgba(20,63,140,.92),
      rgba(20,63,140,.62)
    ) !important;

  box-shadow:
    none !important;
}


.admin-bottom-nav.admin-side-nav
.nav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;

  color: #efb936 !important;

  font-size: 31px !important;
  line-height: 1 !important;
}


.admin-bottom-nav.admin-side-nav
.nav-label {
  color: #fff !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  white-space: normal !important;
}


/* ---------------------------------------------------------
   DESKTOP CONTENT
   --------------------------------------------------------- */

/*
   Menu overlays the workspace instead of permanently
   taking up screen width. Therefore the Admin page
   remains full width whenever the menu is hidden.
*/

#page {
  width: 100% !important;
}


/* ---------------------------------------------------------
   TABLET / PHONE
   --------------------------------------------------------- */

@media (max-width: 800px) {

  .admin-menu-toggle {
    right: 14px !important;

    width: 54px !important;
    height: 54px !important;

    font-size: 27px !important;
  }

  body.admin-menu-open
  .admin-menu-toggle {
    right:
      min(
        calc(310px + 10px),
        calc(88vw + 10px)
      ) !important;
  }

  .admin-bottom-nav.admin-side-nav {
    width:
      min(
        310px,
        88vw
      ) !important;

    padding:
      18px
      15px
      24px !important;
  }

  .admin-bottom-nav.admin-side-nav
  > button:not(.admin-menu-close) {
    min-height:
      64px !important;
  }
}


@media (max-width: 480px) {

  body.admin-menu-open
  .admin-menu-toggle {
    /*
       On small phones the close X inside the menu
       remains available, so don't force the floating
       button outside the panel.
    */
    opacity: 0 !important;

    pointer-events:
      none !important;
  }

  .admin-bottom-nav.admin-side-nav {
    width:
      min(
        330px,
        92vw
      ) !important;
  }
}



/* =========================================================
   AAROMA ADMIN COMPACT WEBSITE LAYOUT
   ========================================================= */

/*
   Normal website density.
   Overrides older oversized/full-screen Admin rules.
*/

html,
body {
  font-size: 15px !important;
}

#page {
  min-height: auto !important;
  padding-bottom: 28px !important;
}


/* Main cards */

#page .card {
  margin-bottom: 14px !important;
  padding: 18px 20px !important;

  border-radius: 14px !important;
}


/* Headings */

#page h1 {
  margin: 0 0 14px !important;

  font-size: 28px !important;
  line-height: 1.15 !important;
}

#page h2 {
  margin: 0 0 13px !important;

  font-size: 23px !important;
  line-height: 1.2 !important;
}

#page h3 {
  margin: 0 0 10px !important;

  font-size: 19px !important;
  line-height: 1.25 !important;
}

#page h4 {
  margin: 0 0 8px !important;

  font-size: 16px !important;
}


/* Normal paragraphs */

#page p {
  margin:
    7px
    0
    10px !important;

  line-height: 1.4 !important;
}


/* Forms */

#page label {
  display: block;

  margin-bottom: 5px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

#page input,
#page select,
#page textarea {
  min-height: 40px !important;

  padding:
    8px
    11px !important;

  border-radius:
    9px !important;

  font-size:
    14px !important;
}

#page textarea {
  min-height:
    82px !important;
}


/* Buttons */

#page button {
  min-height: 38px !important;

  padding:
    8px
    14px !important;

  border-radius:
    9px !important;

  font-size:
    14px !important;

  line-height:
    1.2 !important;
}


/* Reduce excessive vertical spacing */

#page section,
#page .section {
  margin-bottom:
    14px !important;
}

#page hr {
  margin:
    14px
    0 !important;
}


/* Queue page */

#waitingQueueAdmin
.queue-waiting-item {
  padding:
    8px
    0 !important;
}


/* Right menu slightly more compact */

.admin-bottom-nav.admin-side-nav {
  width:
    min(
      300px,
      86vw
    ) !important;

  padding:
    18px
    16px
    22px !important;
}

.admin-bottom-nav.admin-side-nav
> button:not(.admin-menu-close) {
  min-height:
    56px !important;

  padding:
    7px
    11px !important;
}

.admin-bottom-nav.admin-side-nav
.nav-icon {
  font-size:
    25px !important;
}

.admin-bottom-nav.admin-side-nav
.nav-label {
  font-size:
    14px !important;
}


/* Keep floating menu button compact */

.admin-menu-toggle {
  width:
    54px !important;

  height:
    54px !important;

  font-size:
    27px !important;
}

body.admin-menu-open
.admin-menu-toggle {
  right:
    min(
      calc(300px + 16px),
      calc(86vw + 16px)
    ) !important;
}


/* Desktop: use available screen width efficiently */

@media (min-width: 1100px) {

  #page {
    width:
      min(
        1180px,
        calc(100% - 48px)
      ) !important;

    margin:
      0
      auto !important;
  }

  #page .card {
    padding:
      16px
      18px !important;
  }
}


/* Laptop */

@media (
  min-width: 701px
) and (
  max-width: 1099px
) {

  #page {
    width:
      calc(100% - 32px) !important;

    margin:
      0
      auto !important;
  }
}


/* Phone/tablet */

@media (max-width: 700px) {

  html,
  body {
    font-size:
      14px !important;
  }

  #page {
    width:
      calc(100% - 20px) !important;

    margin:
      0
      auto !important;

    padding-bottom:
      20px !important;
  }

  #page .card {
    padding:
      14px !important;

    margin-bottom:
      10px !important;
  }

  #page h2 {
    font-size:
      20px !important;
  }

  #page h3 {
    font-size:
      17px !important;
  }

  #page input,
  #page select,
  #page textarea {
    font-size:
      16px !important;
  }

  #page button {
    min-height:
      42px !important;
  }
}


/* =========================================================
   AAROMA APPROVED ADMIN TOPBAR
   ========================================================= */

.admin-topbar {
  position: sticky;
  top: 0;

  z-index: 1000;

  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    8px
    26px;

  border-bottom:
    1px solid #dfe6ef;

  background:
    rgba(255,255,255,.96);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 2px 10px
    rgba(15,35,65,.04);
}

.admin-topbar-brand {
  display: flex;
  align-items: center;
}

.admin-topbar-logo {
  display: block;

  width:
    min(
      215px,
      28vw
    );

  max-height:
    46px;

  height: auto;

  object-fit: contain;
}

.admin-topbar-meta {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #5f6f84;

  font-size: 12px;

  font-weight: 700;
}


/* Keep menu button aligned cleanly with compact header */

.admin-menu-toggle {
  top: 82px !important;

  transform:
    none !important;
}

.admin-menu-toggle:hover {
  transform:
    scale(1.06) !important;
}

.admin-menu-toggle:active {
  transform:
    scale(.96) !important;
}


/* Compact dashboard starts directly below header */

#page {
  padding-top:
    18px !important;
}


/* Phone */

@media (max-width: 650px) {

  .admin-topbar {
    min-height:
      56px;

    padding:
      7px
      15px;
  }

  .admin-topbar-logo {
    width:
      min(
        170px,
        52vw
      );

    max-height:
      38px;
  }

  .admin-topbar-meta {
    display:
      none;
  }

  .admin-menu-toggle {
    top:
      68px !important;
  }
}


/* =========================================================
   AAROMA APPROVED ADMIN TOPBAR
   ========================================================= */

.admin-topbar {
  position: sticky;
  top: 0;

  z-index: 1000;

  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    8px
    26px;

  border-bottom:
    1px solid #dfe6ef;

  background:
    rgba(255,255,255,.96);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 2px 10px
    rgba(15,35,65,.04);
}

.admin-topbar-brand {
  display: flex;
  align-items: center;
}

.admin-topbar-logo {
  display: block;

  width:
    min(
      215px,
      28vw
    );

  max-height:
    46px;

  height: auto;

  object-fit: contain;
}

.admin-topbar-meta {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #5f6f84;

  font-size: 12px;

  font-weight: 700;
}


/* Keep menu button aligned cleanly with compact header */

.admin-menu-toggle {
  top: 82px !important;

  transform:
    none !important;
}

.admin-menu-toggle:hover {
  transform:
    scale(1.06) !important;
}

.admin-menu-toggle:active {
  transform:
    scale(.96) !important;
}


/* Compact dashboard starts directly below header */

#page {
  padding-top:
    18px !important;
}


/* Phone */

@media (max-width: 650px) {

  .admin-topbar {
    min-height:
      56px;

    padding:
      7px
      15px;
  }

  .admin-topbar-logo {
    width:
      min(
        170px,
        52vw
      );

    max-height:
      38px;
  }

  .admin-topbar-meta {
    display:
      none;
  }

  .admin-menu-toggle {
    top:
      68px !important;
  }
}


/* =========================================================
   AAROMA ADMIN TOPBAR MERGE FIX
   ========================================================= */

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.admin-connection-status {
  display: inline-flex !important;
  align-items: center !important;

  min-height: auto !important;

  padding:
    6px
    10px !important;

  border-radius:
    999px !important;

  background:
    #eef4fb !important;

  color:
    #164c91 !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;
}

@media (max-width: 700px) {

  .admin-topbar-right {
    gap: 8px;
  }

  .admin-topbar-meta {
    display: none;
  }
}


/* =========================================================
   AAROMA MODERN DARK + AUTO LIGHT THEME
   ========================================================= */


/* ---------------------------------------------------------
   SHARED LAYOUT
   --------------------------------------------------------- */

:root {
  --admin-gold: #e1a21a;
  --admin-blue: #1d5fae;
  --admin-radius: 12px;
}


/* Menu button in approved mockup position */

.admin-menu-toggle {
  top: 14px !important;
  left: 18px !important;
  right: auto !important;

  width: 42px !important;
  height: 42px !important;

  transform: none !important;

  border-radius: 9px !important;

  z-index: 1800 !important;
}

.admin-menu-toggle:hover {
  transform: scale(1.04) !important;
}

.admin-menu-toggle:active {
  transform: scale(.97) !important;
}


/* Header */

.admin-topbar {
  min-height: 68px !important;

  padding:
    8px
    26px
    8px
    76px !important;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease !important;
}

.admin-topbar-logo {
  width:
    min(
      215px,
      28vw
    ) !important;

  max-height:
    44px !important;

  object-fit:
    contain !important;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-theme-status {
  display: inline-flex;

  align-items: center;

  min-height: 28px;

  padding:
    5px
    9px;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    800;
}


/* Main workspace */

#page {
  width:
    min(
      1260px,
      calc(100% - 36px)
    ) !important;

  margin:
    0 auto !important;

  padding:
    18px
    0
    32px !important;
}


/* ---------------------------------------------------------
   DAY MODE
   --------------------------------------------------------- */

html[data-admin-theme="light"] body {
  background:
    #f3f6fa !important;

  color:
    #10223d !important;
}

html[data-admin-theme="light"]
.admin-topbar {
  background:
    rgba(255,255,255,.97) !important;

  border-bottom:
    1px solid #dfe6ef !important;

  color:
    #10223d !important;

  box-shadow:
    0 2px 10px
    rgba(13,37,70,.05) !important;
}

html[data-admin-theme="light"]
.admin-theme-status {
  background:
    #e9f2ff;

  color:
    #1756a4;
}

html[data-admin-theme="light"]
.admin-menu-toggle {
  border:
    1px solid #d9e2ee !important;

  background:
    #ffffff !important;

  color:
    #0c376f !important;

  box-shadow:
    0 4px 12px
    rgba(10,32,65,.08) !important;
}


/* Cards */

html[data-admin-theme="light"]
#page .card,

html[data-admin-theme="light"]
.dashboard-panel,

html[data-admin-theme="light"]
.dashboard-stat {
  border:
    1px solid #dfe6ef !important;

  background:
    #fff !important;

  color:
    #10223d !important;

  box-shadow:
    0 5px 16px
    rgba(18,45,80,.05) !important;
}


/* Inputs */

html[data-admin-theme="light"]
#page input,

html[data-admin-theme="light"]
#page select,

html[data-admin-theme="light"]
#page textarea {
  border:
    1px solid #ccd6e3 !important;

  background:
    #fff !important;

  color:
    #10223d !important;
}


/* Side navigation */

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav {
  background:
    linear-gradient(
      180deg,
      #0b326d,
      #061b3f
    ) !important;

  color:
    #fff !important;
}


/* ---------------------------------------------------------
   NIGHT MODE - MODERN DARK
   --------------------------------------------------------- */

html[data-admin-theme="dark"] body {
  background:
    #07111f !important;

  color:
    #f3f7ff !important;
}

html[data-admin-theme="dark"]
.admin-topbar {
  background:
    rgba(8,20,37,.97) !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;

  color:
    #fff !important;

  box-shadow:
    0 2px 14px
    rgba(0,0,0,.20) !important;
}

html[data-admin-theme="dark"]
.admin-topbar-meta {
  color:
    #9caec4 !important;
}

html[data-admin-theme="dark"]
.admin-theme-status {
  background:
    rgba(47,190,112,.13);

  color:
    #66d99b;

  border:
    1px solid
    rgba(102,217,155,.22);
}

html[data-admin-theme="dark"]
.admin-connection-status {
  background:
    rgba(255,255,255,.07) !important;

  color:
    #c9d6e7 !important;
}

html[data-admin-theme="dark"]
.admin-menu-toggle {
  border:
    1px solid
    rgba(255,255,255,.11) !important;

  background:
    #10223c !important;

  color:
    var(--admin-gold) !important;

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.27) !important;
}


/* Main dark cards */

html[data-admin-theme="dark"]
#page .card,

html[data-admin-theme="dark"]
.dashboard-panel,

html[data-admin-theme="dark"]
.dashboard-stat {
  border:
    1px solid
    rgba(255,255,255,.08) !important;

  background:
    #101e31 !important;

  color:
    #eef4fc !important;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.14) !important;
}

html[data-admin-theme="dark"]
#page h1,

html[data-admin-theme="dark"]
#page h2,

html[data-admin-theme="dark"]
#page h3,

html[data-admin-theme="dark"]
#page h4 {
  color:
    #f4f7fb !important;
}

html[data-admin-theme="dark"]
#page p,

html[data-admin-theme="dark"]
#page label {
  color:
    #aebdd0 !important;
}


/* Dark dashboard */

html[data-admin-theme="dark"]
.dashboard-welcome h1 {
  color:
    #fff !important;
}

html[data-admin-theme="dark"]
.dashboard-welcome p,

html[data-admin-theme="dark"]
.dashboard-stat small,

html[data-admin-theme="dark"]
.dashboard-row small {
  color:
    #90a3ba !important;
}

html[data-admin-theme="dark"]
.dashboard-stat strong,

html[data-admin-theme="dark"]
.dashboard-row strong {
  color:
    #fff !important;
}

html[data-admin-theme="dark"]
.dashboard-panel-header {
  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;
}

html[data-admin-theme="dark"]
.dashboard-row {
  border-bottom:
    1px solid
    rgba(255,255,255,.06) !important;
}


/* Dark form elements */

html[data-admin-theme="dark"]
#page input,

html[data-admin-theme="dark"]
#page select,

html[data-admin-theme="dark"]
#page textarea {
  border:
    1px solid
    rgba(255,255,255,.10) !important;

  background:
    #0b1728 !important;

  color:
    #fff !important;
}

html[data-admin-theme="dark"]
#page input::placeholder,

html[data-admin-theme="dark"]
#page textarea::placeholder {
  color:
    #708299 !important;
}


/* Dark side navigation */

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav {
  background:
    linear-gradient(
      180deg,
      #0b1e36,
      #050e1b
    ) !important;

  border-left:
    1px solid
    rgba(255,255,255,.07) !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .admin-topbar {
    min-height:
      58px !important;

    padding:
      6px
      12px
      6px
      64px !important;
  }

  .admin-menu-toggle {
    top:
      9px !important;

    left:
      10px !important;

    width:
      40px !important;

    height:
      40px !important;
  }

  .admin-topbar-logo {
    width:
      min(
        165px,
        50vw
      ) !important;

    max-height:
      36px !important;
  }

  .admin-topbar-theme {
    display:
      none;
  }
}



/* =========================================================
   AAROMA COMPACT CONTROL CENTER PAGES
   Appointments + Queue
   ========================================================= */


/* ---------------------------------------------------------
   QUEUE CONTROL CENTER
   --------------------------------------------------------- */

#page.queue-control-center-page {
  width:
    min(
      1280px,
      calc(100% - 34px)
    ) !important;

  display: grid !important;

  grid-template-columns:
    minmax(360px, .9fr)
    minmax(420px, 1.1fr) !important;

  grid-template-rows:
    auto
    minmax(190px, auto) !important;

  gap:
    14px !important;

  align-items:
    start !important;

  padding-bottom:
    18px !important;
}


/*
   Queue Call Controls
*/
#page.queue-control-center-page
> .card:nth-child(1) {
  grid-column:
    1 !important;

  grid-row:
    1 / span 2 !important;

  margin:
    0 !important;
}


/*
   Current Call
*/
#page.queue-control-center-page
> .card:nth-child(2) {
  grid-column:
    2 !important;

  grid-row:
    1 !important;

  margin:
    0 !important;
}


/*
   Waiting Queue
*/
#page.queue-control-center-page
> .card:nth-child(3) {
  grid-column:
    2 !important;

  margin:
    0 !important;

  max-height:
    310px !important;

  overflow:
    hidden !important;
}


/*
   Last Called
*/
#page.queue-control-center-page
> .card:nth-child(4) {
  grid-column:
    1 / -1 !important;

  margin:
    0 !important;
}


/* Smaller queue control typography */

.queue-control-center-page h2 {
  font-size:
    19px !important;
}

.queue-control-center-page h3 {
  font-size:
    15px !important;
}

.queue-control-center-page input {
  min-height:
    36px !important;
}

.queue-control-center-page button {
  min-height:
    34px !important;

  padding:
    6px
    11px !important;
}


/* Keep long waiting queues inside their own panel */

#waitingQueueAdmin {
  max-height:
    220px !important;

  overflow-y:
    auto !important;

  padding-right:
    4px !important;
}


/* Current number should remain easy to see */

#currentCall {
  min-height:
    55px;

  display:
    flex;

  align-items:
    center;

  font-size:
    18px;

  font-weight:
    700;
}


/* Compact history */

#lastCalledAdmin {
  display:
    grid;

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

  gap:
    8px;
}

#lastCalledAdmin > div {
  padding:
    9px
    10px;

  border-radius:
    8px;

  text-align:
    center;
}


/* ---------------------------------------------------------
   APPOINTMENTS CONTROL CENTER
   --------------------------------------------------------- */

#page.appointments-control-center-page {
  width:
    min(
      1280px,
      calc(100% - 34px)
    ) !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    14px !important;

  align-items:
    start !important;

  padding-bottom:
    18px !important;
}


/*
   Every major appointment card becomes a
   medium dashboard panel instead of one
   giant full-width section.
*/

#page.appointments-control-center-page
> .card {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    16px
    18px !important;

  min-width:
    0 !important;
}


/*
   If an Appointments page has an odd final
   panel, let it use the available width.
*/

#page.appointments-control-center-page
> .card:last-child:nth-child(odd) {
  grid-column:
    1 / -1 !important;
}


/* Compact appointment forms */

.appointments-control-center-page
input,

.appointments-control-center-page
select {
  min-height:
    36px !important;

  padding:
    6px
    9px !important;
}

.appointments-control-center-page
textarea {
  min-height:
    62px !important;
}

.appointments-control-center-page
button {
  min-height:
    34px !important;

  padding:
    6px
    11px !important;
}


/*
   Calendars / long lists stay inside the card.
*/

.appointments-control-center-page
.calendar,

.appointments-control-center-page
.appointment-list,

.appointments-control-center-page
[id*="appointmentList"] {
  max-height:
    390px !important;

  overflow-y:
    auto !important;
}


/* ---------------------------------------------------------
   DAY / NIGHT CARD FINISHES
   --------------------------------------------------------- */

html[data-admin-theme="light"]
#lastCalledAdmin > div {
  border:
    1px solid #dfe6ef;

  background:
    #f6f9fc;
}

html[data-admin-theme="dark"]
#lastCalledAdmin > div {
  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    #0b1728;
}


/* ---------------------------------------------------------
   LAPTOP / TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  #page.queue-control-center-page,
  #page.appointments-control-center-page {
    grid-template-columns:
      1fr !important;
  }

  #page.queue-control-center-page
  > .card:nth-child(n) {
    grid-column:
      1 !important;

    grid-row:
      auto !important;
  }

  #page.appointments-control-center-page
  > .card:last-child:nth-child(odd) {
    grid-column:
      1 !important;
  }

  #lastCalledAdmin {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 520px) {

  #page.queue-control-center-page,
  #page.appointments-control-center-page {
    width:
      calc(100% - 18px) !important;

    gap:
      9px !important;
  }

  #lastCalledAdmin {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   AAROMA MICROSOFT-STYLE LEFT COLLAPSIBLE SIDEBAR
   ========================================================= */

:root {
  --admin-sidebar-collapsed: 58px;
  --admin-sidebar-expanded: 250px;
}


/* ---------------------------------------------------------
   APP SHELL
   --------------------------------------------------------- */

.app {
  min-height:
    100vh !important;
}


/* ---------------------------------------------------------
   TOPBAR
   --------------------------------------------------------- */

.admin-topbar {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    var(--admin-sidebar-collapsed) !important;

  right:
    0 !important;

  height:
    56px !important;

  min-height:
    56px !important;

  z-index:
    1500 !important;

  padding:
    5px
    18px !important;

  transition:
    left .22s ease !important;
}

body.admin-sidebar-expanded
.admin-topbar {
  left:
    var(--admin-sidebar-expanded) !important;
}


/* ---------------------------------------------------------
   MENU TOGGLE
   --------------------------------------------------------- */

.admin-menu-toggle {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    0 !important;

  right:
    auto !important;

  width:
    var(--admin-sidebar-collapsed) !important;

  height:
    56px !important;

  z-index:
    1700 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    inherit !important;

  box-shadow:
    none !important;

  font-size:
    21px !important;

  transform:
    none !important;
}

.admin-menu-toggle:hover,
.admin-menu-toggle:active {
  transform:
    none !important;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  position:
    fixed !important;

  top:
    56px !important;

  left:
    0 !important;

  right:
    auto !important;

  bottom:
    0 !important;

  width:
    var(--admin-sidebar-collapsed) !important;

  height:
    calc(100vh - 56px) !important;

  z-index:
    1450 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    2px !important;

  padding:
    8px
    6px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  transform:
    none !important;

  visibility:
    visible !important;

  pointer-events:
    auto !important;

  transition:
    width .22s ease !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-expanded) !important;
}


/* Remove old drawer header */
.admin-side-nav-header {
  display:
    none !important;
}


/* ---------------------------------------------------------
   NAV BUTTONS
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav
> button[data-p] {
  width:
    100% !important;

  min-height:
    42px !important;

  display:
    grid !important;

  grid-template-columns:
    44px
    minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    8px !important;

  padding:
    4px
    6px !important;

  border:
    0 !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  text-align:
    left !important;

  overflow:
    hidden !important;

  transform:
    none !important;
}


.admin-bottom-nav.admin-side-nav
.nav-icon {
  width:
    44px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  font-size:
    18px !important;
}


.admin-bottom-nav.admin-side-nav
.nav-label {
  opacity:
    0 !important;

  width:
    0 !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  font-size:
    12px !important;

  transition:
    opacity .16s ease !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav
.nav-label {
  opacity:
    1 !important;

  width:
    auto !important;
}


/* active page */

.admin-bottom-nav.admin-side-nav
> button.active,

.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  border-left:
    3px solid
    #3d8cff !important;

  border-radius:
    5px !important;
}


/* ---------------------------------------------------------
   CONTENT SHIFT
   --------------------------------------------------------- */

#page {
  width:
    auto !important;

  max-width:
    none !important;

  margin:
    0 !important;

  margin-left:
    var(--admin-sidebar-collapsed) !important;

  padding:
    70px
    14px
    18px !important;

  transition:
    margin-left .22s ease !important;
}


body.admin-sidebar-expanded
#page {
  margin-left:
    var(--admin-sidebar-expanded) !important;
}


/* ---------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------- */

html[data-admin-theme="light"]
.admin-menu-toggle,

html[data-admin-theme="light"]
.admin-bottom-nav.admin-left-sidebar {
  background:
    #ffffff !important;

  color:
    #25344b !important;
}

html[data-admin-theme="light"]
.admin-bottom-nav.admin-left-sidebar {
  border-right:
    1px solid #dfe6ef !important;
}

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background:
    #eef4fb !important;
}

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background:
    #e8f1ff !important;

  color:
    #0b4eaa !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-admin-theme="dark"]
.admin-menu-toggle,

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-left-sidebar {
  background:
    #242424 !important;

  color:
    #f4f4f4 !important;
}

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-left-sidebar {
  border-right:
    1px solid
    rgba(255,255,255,.08) !important;
}

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background:
    rgba(255,255,255,.07) !important;
}

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background:
    rgba(54,126,221,.19) !important;

  color:
    #ffffff !important;
}


/* ---------------------------------------------------------
   TABLET / PHONE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  :root {
    --admin-sidebar-expanded: 220px;
  }

  .admin-topbar-logo {
    width:
      min(
        160px,
        45vw
      ) !important;
  }

  body.admin-sidebar-expanded
  #page {
    margin-left:
      var(--admin-sidebar-collapsed) !important;
  }

  body.admin-sidebar-expanded
  .admin-topbar {
    left:
      var(--admin-sidebar-collapsed) !important;
  }

  body.admin-sidebar-expanded
  .admin-bottom-nav.admin-left-sidebar {
    box-shadow:
      10px 0 28px
      rgba(0,0,0,.22) !important;
  }
}



/* =========================================================
   AAROMA ADMIN SHELL FINAL THEME CORRECTION
   Light = dark text
   Dark  = light text
   Clean transparent logo header
   ========================================================= */


/* ---------------------------------------------------------
   HEADER — REMOVE LOGO BACKGROUND / PILL
   --------------------------------------------------------- */

.admin-topbar {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.admin-topbar-brand,
.admin-theme-brand,
.admin-topbar-logo {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;
}

.admin-topbar-logo {
  display: block !important;

  width: 190px !important;
  max-height: 38px !important;

  height: auto !important;

  object-fit: contain !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-admin-theme="light"],
html[data-admin-theme="light"] body {
  background: #f4f6f9 !important;
  color: #111827 !important;
}


/* Header blends into light workspace */

html[data-admin-theme="light"]
.admin-topbar {
  background: #f4f6f9 !important;

  color: #111827 !important;
}


/* GLOBAL LIGHT TEXT */

html[data-admin-theme="light"]
#page,

html[data-admin-theme="light"]
#page h1,

html[data-admin-theme="light"]
#page h2,

html[data-admin-theme="light"]
#page h3,

html[data-admin-theme="light"]
#page h4,

html[data-admin-theme="light"]
#page strong,

html[data-admin-theme="light"]
#page label {
  color: #111827 !important;
}


html[data-admin-theme="light"]
#page p,

html[data-admin-theme="light"]
#page small,

html[data-admin-theme="light"]
#page span {
  color: #475569;
}


/* Cards */

html[data-admin-theme="light"]
#page .card,

html[data-admin-theme="light"]
.dashboard-stat,

html[data-admin-theme="light"]
.dashboard-panel {
  background: #ffffff !important;

  color: #111827 !important;

  border:
    1px solid #dde3ea !important;
}


/* Inputs */

html[data-admin-theme="light"]
#page input,

html[data-admin-theme="light"]
#page select,

html[data-admin-theme="light"]
#page textarea {
  background: #ffffff !important;

  color: #111827 !important;

  border:
    1px solid #cbd5e1 !important;
}


html[data-admin-theme="light"]
#page input::placeholder,

html[data-admin-theme="light"]
#page textarea::placeholder {
  color: #94a3b8 !important;
}


/* Sidebar light */

html[data-admin-theme="light"]
.admin-menu-toggle,

html[data-admin-theme="light"]
.admin-bottom-nav.admin-left-sidebar {
  background: #ffffff !important;

  color: #172033 !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
.nav-icon {
  color: #334155 !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
.nav-label {
  color: #172033 !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background: #edf3fb !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background: #e5efff !important;

  color: #064ea6 !important;
}


/* Topbar metadata light */

html[data-admin-theme="light"]
.admin-topbar-meta {
  color: #475569 !important;
}

html[data-admin-theme="light"]
.admin-connection-status {
  background: #e8f1ff !important;

  color: #0b4fa8 !important;
}

html[data-admin-theme="light"]
.admin-theme-status {
  background: #e8f1ff !important;

  color: #0b4fa8 !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-admin-theme="dark"],
html[data-admin-theme="dark"] body {
  background: #151515 !important;

  color: #f8fafc !important;
}


/* Header blends into dark workspace */

html[data-admin-theme="dark"]
.admin-topbar {
  background: #151515 !important;

  color: #ffffff !important;
}


/* GLOBAL DARK TEXT */

html[data-admin-theme="dark"]
#page,

html[data-admin-theme="dark"]
#page h1,

html[data-admin-theme="dark"]
#page h2,

html[data-admin-theme="dark"]
#page h3,

html[data-admin-theme="dark"]
#page h4,

html[data-admin-theme="dark"]
#page strong,

html[data-admin-theme="dark"]
#page label {
  color: #ffffff !important;
}


html[data-admin-theme="dark"]
#page p,

html[data-admin-theme="dark"]
#page small,

html[data-admin-theme="dark"]
#page span {
  color: #cbd5e1;
}


/* Cards */

html[data-admin-theme="dark"]
#page .card,

html[data-admin-theme="dark"]
.dashboard-stat,

html[data-admin-theme="dark"]
.dashboard-panel {
  background: #242424 !important;

  color: #ffffff !important;

  border:
    1px solid #414141 !important;
}


/* Inputs */

html[data-admin-theme="dark"]
#page input,

html[data-admin-theme="dark"]
#page select,

html[data-admin-theme="dark"]
#page textarea {
  background: #1d1d1d !important;

  color: #ffffff !important;

  border:
    1px solid #4a4a4a !important;
}


html[data-admin-theme="dark"]
#page input::placeholder,

html[data-admin-theme="dark"]
#page textarea::placeholder {
  color: #929292 !important;
}


/* Sidebar dark */

html[data-admin-theme="dark"]
.admin-menu-toggle,

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-left-sidebar {
  background: #202020 !important;

  color: #ffffff !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
.nav-icon {
  color: #e5e7eb !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
.nav-label {
  color: #ffffff !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background: #343434 !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background: #303b4d !important;

  color: #ffffff !important;
}


/* Topbar metadata dark */

html[data-admin-theme="dark"]
.admin-topbar-meta {
  color: #c5cbd4 !important;
}

html[data-admin-theme="dark"]
.admin-connection-status {
  background: #303030 !important;

  color: #ffffff !important;
}

html[data-admin-theme="dark"]
.admin-theme-status {
  background: #213a2e !important;

  color: #7ee2a8 !important;
}


/* =========================================================
   SIDEBAR SIZE / LABEL CORRECTION
   Microsoft-style behavior
   ========================================================= */

:root {
  --admin-sidebar-collapsed: 58px;
  --admin-sidebar-expanded: 240px;
}


/* COLLAPSED */

body:not(.admin-sidebar-expanded)
.admin-bottom-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-collapsed) !important;
}


body:not(.admin-sidebar-expanded)
.admin-bottom-nav.admin-side-nav
.nav-label {
  display: none !important;

  opacity: 0 !important;

  width: 0 !important;

  visibility: hidden !important;
}


body:not(.admin-sidebar-expanded)
.admin-bottom-nav.admin-side-nav
> button[data-p] {
  grid-template-columns:
    44px !important;

  justify-content:
    center !important;

  padding:
    4px
    6px !important;
}


/* EXPANDED */

body.admin-sidebar-expanded
.admin-bottom-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-expanded) !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav
.nav-label {
  display: block !important;

  opacity: 1 !important;

  width: auto !important;

  visibility: visible !important;

  white-space: nowrap !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav
> button[data-p] {
  grid-template-columns:
    44px
    minmax(0,1fr) !important;

  justify-content:
    initial !important;
}


/* Main content positioning */

body:not(.admin-sidebar-expanded)
#page {
  margin-left:
    var(--admin-sidebar-collapsed) !important;
}


body.admin-sidebar-expanded
#page {
  margin-left:
    var(--admin-sidebar-expanded) !important;
}


body:not(.admin-sidebar-expanded)
.admin-topbar {
  left:
    var(--admin-sidebar-collapsed) !important;
}


body.admin-sidebar-expanded
.admin-topbar {
  left:
    var(--admin-sidebar-expanded) !important;
}


/* Remove leftover rounded/pill background around entire header */

.admin-topbar::before,
.admin-topbar::after,
.admin-topbar-brand::before,
.admin-topbar-brand::after {
  display: none !important;

  content: none !important;
}



/* =========================================================
   AAROMA ROOMS CONTROL CENTER
   ========================================================= */

.rooms-control-center-page {
  display: block !important;
}


.rooms-page-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 10px;
}


.rooms-page-header h1 {
  margin:
    2px
    0
    3px !important;

  font-size:
    21px !important;
}


.rooms-page-header p {
  margin:
    0 !important;
}


.rooms-eyebrow {
  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  color:
    #3476c7;
}


.rooms-summary {
  padding:
    6px
    10px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    800;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.rooms-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

  gap:
    10px;
}


/* ---------------------------------------------------------
   ROOM CARD
   --------------------------------------------------------- */

.room-admin-card {
  min-width: 0;

  padding:
    13px;

  border-radius:
    10px;
}


.room-admin-card-top {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.room-admin-card-top small {
  font-size:
    8px !important;

  font-weight:
    900;

  letter-spacing:
    .11em;
}


.room-admin-card-top h2 {
  margin:
    2px
    0
    0 !important;

  font-size:
    16px !important;
}


/* ---------------------------------------------------------
   STATUS BADGE
   --------------------------------------------------------- */

.room-admin-status {
  display: inline-flex;

  align-items: center;

  gap:
    6px;

  padding:
    5px
    8px;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    900;
}


.room-admin-status span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}


.room-admin-status.empty {
  background:
    rgba(34,170,83,.12);

  color:
    #23914b;
}


.room-admin-status.empty span {
  background:
    #28a957;
}


.room-admin-status.occupied {
  background:
    rgba(216,55,55,.12);

  color:
    #cc3030;
}


.room-admin-status.occupied span {
  background:
    #db3535;
}


/* ---------------------------------------------------------
   STATUS PANEL
   --------------------------------------------------------- */

.room-admin-status-panel {
  min-height:
    105px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin:
    11px
    0;

  border-radius:
    9px;

  text-align:
    center;
}


.room-admin-person {
  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    4px;

  border:
    2px solid currentColor;

  border-radius:
    50%;

  font-size:
    22px;
}


.room-admin-status-panel strong {
  font-size:
    16px !important;
}


.room-admin-status-panel small {
  margin-top:
    2px;

  font-size:
    9px !important;
}


.room-admin-card.empty
.room-admin-status-panel {
  color:
    #258b46;
}


.room-admin-card.occupied
.room-admin-status-panel {
  color:
    #d13434;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.room-admin-actions {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    7px;
}


.room-admin-actions button {
  min-height:
    33px !important;
}


.room-set-empty {
  border:
    1px solid
    rgba(36,158,75,.35) !important;

  color:
    #218846 !important;
}


.room-set-occupied {
  border:
    1px solid
    rgba(211,48,48,.35) !important;

  color:
    #ca3131 !important;
}


/* ---------------------------------------------------------
   META + LINKS
   --------------------------------------------------------- */

.room-admin-meta {
  display: flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    10px;

  padding-top:
    8px;

  border-top:
    1px solid
    currentColor;

  font-size:
    9px;

  opacity:
    .7;
}


.room-admin-meta strong {
  font-size:
    9px !important;
}


.room-admin-links {
  display: flex;

  gap:
    6px;

  margin-top:
    9px;
}


.room-admin-links button {
  flex:
    1;

  min-height:
    29px !important;

  font-size:
    9px !important;
}


/* ---------------------------------------------------------
   SECURITY NOTE
   --------------------------------------------------------- */

.rooms-security-note {
  margin-top:
    10px;

  padding:
    10px
    12px;

  border-radius:
    8px;

  font-size:
    10px;
}


.rooms-security-note p {
  margin:
    3px
    0
    0 !important;

  font-size:
    10px !important;
}


/* ---------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------- */

html[data-admin-theme="light"]
.room-admin-card {
  border:
    1px solid #dfe6ee;

  background:
    #ffffff;

  color:
    #111827;

  box-shadow:
    0 3px 10px
    rgba(20,40,70,.05);
}


html[data-admin-theme="light"]
.room-admin-status-panel {
  background:
    #f7f9fc;
}


html[data-admin-theme="light"]
.rooms-summary,

html[data-admin-theme="light"]
.rooms-security-note {
  border:
    1px solid #dfe6ee;

  background:
    #ffffff;

  color:
    #334155;
}


html[data-admin-theme="light"]
.room-admin-meta {
  border-color:
    #e7ebf0;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-admin-theme="dark"]
.room-admin-card {
  border:
    1px solid #414141;

  background:
    #242424;

  color:
    #ffffff;
}


html[data-admin-theme="dark"]
.room-admin-status-panel {
  background:
    #1c1c1c;
}


html[data-admin-theme="dark"]
.rooms-summary,

html[data-admin-theme="dark"]
.rooms-security-note {
  border:
    1px solid #414141;

  background:
    #242424;

  color:
    #d8dee8;
}


html[data-admin-theme="dark"]
.room-admin-meta {
  border-color:
    #414141;
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 620px) {

  .rooms-page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .rooms-grid {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   AAROMA ROOMS CONTROL CENTER
   ========================================================= */

.rooms-control-center-page {
  display: block !important;
}


.rooms-page-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 10px;
}


.rooms-page-header h1 {
  margin:
    2px
    0
    3px !important;

  font-size:
    21px !important;
}


.rooms-page-header p {
  margin:
    0 !important;
}


.rooms-eyebrow {
  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  color:
    #3476c7;
}


.rooms-summary {
  padding:
    6px
    10px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    800;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.rooms-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

  gap:
    10px;
}


/* ---------------------------------------------------------
   ROOM CARD
   --------------------------------------------------------- */

.room-admin-card {
  min-width: 0;

  padding:
    13px;

  border-radius:
    10px;
}


.room-admin-card-top {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.room-admin-card-top small {
  font-size:
    8px !important;

  font-weight:
    900;

  letter-spacing:
    .11em;
}


.room-admin-card-top h2 {
  margin:
    2px
    0
    0 !important;

  font-size:
    16px !important;
}


/* ---------------------------------------------------------
   STATUS BADGE
   --------------------------------------------------------- */

.room-admin-status {
  display: inline-flex;

  align-items: center;

  gap:
    6px;

  padding:
    5px
    8px;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    900;
}


.room-admin-status span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}


.room-admin-status.empty {
  background:
    rgba(34,170,83,.12);

  color:
    #23914b;
}


.room-admin-status.empty span {
  background:
    #28a957;
}


.room-admin-status.occupied {
  background:
    rgba(216,55,55,.12);

  color:
    #cc3030;
}


.room-admin-status.occupied span {
  background:
    #db3535;
}


/* ---------------------------------------------------------
   STATUS PANEL
   --------------------------------------------------------- */

.room-admin-status-panel {
  min-height:
    105px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin:
    11px
    0;

  border-radius:
    9px;

  text-align:
    center;
}


.room-admin-person {
  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    4px;

  border:
    2px solid currentColor;

  border-radius:
    50%;

  font-size:
    22px;
}


.room-admin-status-panel strong {
  font-size:
    16px !important;
}


.room-admin-status-panel small {
  margin-top:
    2px;

  font-size:
    9px !important;
}


.room-admin-card.empty
.room-admin-status-panel {
  color:
    #258b46;
}


.room-admin-card.occupied
.room-admin-status-panel {
  color:
    #d13434;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.room-admin-actions {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    7px;
}


.room-admin-actions button {
  min-height:
    33px !important;
}


.room-set-empty {
  border:
    1px solid
    rgba(36,158,75,.35) !important;

  color:
    #218846 !important;
}


.room-set-occupied {
  border:
    1px solid
    rgba(211,48,48,.35) !important;

  color:
    #ca3131 !important;
}


/* ---------------------------------------------------------
   META + LINKS
   --------------------------------------------------------- */

.room-admin-meta {
  display: flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    10px;

  padding-top:
    8px;

  border-top:
    1px solid
    currentColor;

  font-size:
    9px;

  opacity:
    .7;
}


.room-admin-meta strong {
  font-size:
    9px !important;
}


.room-admin-links {
  display: flex;

  gap:
    6px;

  margin-top:
    9px;
}


.room-admin-links button {
  flex:
    1;

  min-height:
    29px !important;

  font-size:
    9px !important;
}


/* ---------------------------------------------------------
   SECURITY NOTE
   --------------------------------------------------------- */

.rooms-security-note {
  margin-top:
    10px;

  padding:
    10px
    12px;

  border-radius:
    8px;

  font-size:
    10px;
}


.rooms-security-note p {
  margin:
    3px
    0
    0 !important;

  font-size:
    10px !important;
}


/* ---------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------- */

html[data-admin-theme="light"]
.room-admin-card {
  border:
    1px solid #dfe6ee;

  background:
    #ffffff;

  color:
    #111827;

  box-shadow:
    0 3px 10px
    rgba(20,40,70,.05);
}


html[data-admin-theme="light"]
.room-admin-status-panel {
  background:
    #f7f9fc;
}


html[data-admin-theme="light"]
.rooms-summary,

html[data-admin-theme="light"]
.rooms-security-note {
  border:
    1px solid #dfe6ee;

  background:
    #ffffff;

  color:
    #334155;
}


html[data-admin-theme="light"]
.room-admin-meta {
  border-color:
    #e7ebf0;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-admin-theme="dark"]
.room-admin-card {
  border:
    1px solid #414141;

  background:
    #242424;

  color:
    #ffffff;
}


html[data-admin-theme="dark"]
.room-admin-status-panel {
  background:
    #1c1c1c;
}


html[data-admin-theme="dark"]
.rooms-summary,

html[data-admin-theme="dark"]
.rooms-security-note {
  border:
    1px solid #414141;

  background:
    #242424;

  color:
    #d8dee8;
}


html[data-admin-theme="dark"]
.room-admin-meta {
  border-color:
    #414141;
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 620px) {

  .rooms-page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .rooms-grid {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   AAROMA ADMIN SHELL CLEANUP
   Unified Microsoft-style layout
   ========================================================= */


/* ---------------------------------------------------------
   PAGE BACKGROUND
   --------------------------------------------------------- */

html[data-admin-theme="light"],
html[data-admin-theme="light"] body {
  background: #f3f5f8 !important;
  color: #172033 !important;
}

html[data-admin-theme="dark"],
html[data-admin-theme="dark"] body {
  background: #111827 !important;
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   TOP HEADER
   --------------------------------------------------------- */

.admin-topbar {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;

  height: 58px !important;
  min-height: 58px !important;

  padding: 7px 18px !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  z-index: 1500 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;
}


/* light header */

html[data-admin-theme="light"]
.admin-topbar {
  background: #ffffff !important;

  color: #172033 !important;

  border-bottom:
    1px solid #dde3ea !important;
}


/* dark header */

html[data-admin-theme="dark"]
.admin-topbar {
  background: #161b22 !important;

  color: #ffffff !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}


/* ---------------------------------------------------------
   TOP LOGO
   --------------------------------------------------------- */

.admin-topbar-brand {
  display: flex !important;

  align-items: center !important;

  background: transparent !important;

  border: 0 !important;

  padding: 0 !important;
}


.admin-topbar-logo {
  display: block !important;

  width: 185px !important;

  max-width: 24vw !important;

  max-height: 38px !important;

  height: auto !important;

  object-fit: contain !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  margin: 0 !important;
}


/* broken image visual suppression */

.admin-topbar-logo:not([src]),
.admin-topbar-logo[src=""] {
  display: none !important;
}


/* ---------------------------------------------------------
   TOPBAR RIGHT SECTION
   --------------------------------------------------------- */

.admin-topbar-right {
  margin-left: auto !important;

  display: flex !important;

  align-items: center !important;

  gap: 9px !important;
}


.admin-topbar-meta {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 11px !important;
}


html[data-admin-theme="light"]
.admin-topbar-meta {
  color: #536172 !important;
}


html[data-admin-theme="dark"]
.admin-topbar-meta {
  color: #c9d2df !important;
}


/* status pills */

#status,
.admin-theme-status {
  display: inline-flex !important;

  align-items: center !important;

  min-height: 28px !important;

  padding: 4px 10px !important;

  border-radius: 999px !important;

  font-size: 10px !important;

  font-weight: 800 !important;
}


html[data-admin-theme="light"]
#status,
html[data-admin-theme="light"]
.admin-theme-status {
  background: #e9f1ff !important;

  color: #0d4f9b !important;
}


html[data-admin-theme="dark"]
#status,
html[data-admin-theme="dark"]
.admin-theme-status {
  background: #273142 !important;

  color: #ffffff !important;
}


/* ---------------------------------------------------------
   MENU TOGGLE
   --------------------------------------------------------- */

.admin-menu-toggle {
  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 60px !important;

  height: 58px !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  z-index: 1700 !important;

  display: grid !important;

  place-items: center !important;

  font-size: 21px !important;
}


html[data-admin-theme="light"]
.admin-menu-toggle {
  background: #ffffff !important;

  color: #172033 !important;

  border-right:
    1px solid #dde3ea !important;

  border-bottom:
    1px solid #dde3ea !important;
}


html[data-admin-theme="dark"]
.admin-menu-toggle {
  background: #161b22 !important;

  color: #ffffff !important;

  border-right:
    1px solid rgba(255,255,255,.08) !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}


/* ---------------------------------------------------------
   LEFT SIDEBAR
   --------------------------------------------------------- */

:root {
  --admin-sidebar-collapsed: 60px;
  --admin-sidebar-expanded: 235px;
}


.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  position: fixed !important;

  top: 58px !important;

  left: 0 !important;

  bottom: 0 !important;

  width:
    var(--admin-sidebar-collapsed) !important;

  height:
    calc(100vh - 58px) !important;

  padding: 6px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  overflow-x: hidden !important;

  overflow-y: auto !important;

  transition:
    width .2s ease !important;

  z-index: 1450 !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-expanded) !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  background: #ffffff !important;

  border-right:
    1px solid #dde3ea !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  background: #161b22 !important;

  border-right:
    1px solid rgba(255,255,255,.08) !important;
}


/* remove obsolete header */

.admin-side-nav-header {
  display: none !important;
}


/* ---------------------------------------------------------
   NAV BUTTONS
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav
> button[data-p] {
  width: 100% !important;

  min-height: 42px !important;

  display: grid !important;

  grid-template-columns:
    44px
    minmax(0,1fr) !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 4px 5px !important;

  border: 0 !important;

  border-radius: 6px !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: hidden !important;

  text-align: left !important;
}


.admin-bottom-nav.admin-side-nav
.nav-icon {
  width: 44px !important;

  display: grid !important;

  place-items: center !important;

  font-size: 17px !important;
}


.admin-bottom-nav.admin-side-nav
.nav-label {
  font-size: 11px !important;

  font-weight: 700 !important;

  white-space: nowrap !important;
}


/* collapsed = icon only */

body:not(.admin-sidebar-expanded)
.admin-bottom-nav.admin-side-nav
.nav-label {
  display: none !important;
}


/* light nav */

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[data-p] {
  color: #24344d !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background: #edf3fb !important;
}


html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="light"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background: #e6effc !important;

  color: #0e4f9f !important;

  border-left:
    3px solid #3184df !important;
}


/* dark nav */

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[data-p] {
  color: #e7ecf3 !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[data-p]:hover {
  background:
    rgba(255,255,255,.06) !important;
}


html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button.active,

html[data-admin-theme="dark"]
.admin-bottom-nav.admin-side-nav
> button[aria-current="page"] {
  background: #24344e !important;

  color: #ffffff !important;

  border-left:
    3px solid #4a96ec !important;
}


/* ---------------------------------------------------------
   MAIN CONTENT POSITION
   --------------------------------------------------------- */

#page {
  margin-left:
    var(--admin-sidebar-collapsed) !important;

  padding:
    72px
    16px
    18px !important;

  width:
    auto !important;

  max-width:
    none !important;

  min-height:
    100vh !important;

  transition:
    margin-left .2s ease !important;
}


body.admin-sidebar-expanded
#page {
  margin-left:
    var(--admin-sidebar-expanded) !important;
}


body:not(.admin-sidebar-expanded)
.admin-topbar {
  left:
    var(--admin-sidebar-collapsed) !important;
}


body.admin-sidebar-expanded
.admin-topbar {
  left:
    var(--admin-sidebar-expanded) !important;
}


/* ---------------------------------------------------------
   HOME SCREEN
   --------------------------------------------------------- */

.aaroma-home {
  min-height:
    calc(100vh - 72px) !important;

  padding:
    24px
    20px
    28px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* LIGHT HOME */

html[data-admin-theme="light"]
.aaroma-home {
  background: #f3f5f8 !important;

  color: #172033 !important;
}


/* DARK HOME */

html[data-admin-theme="dark"]
.aaroma-home {
  background: #111827 !important;

  color: #ffffff !important;
}


/* center home content */

.aaroma-home-inner {
  width:
    min(
      720px,
      90vw
    ) !important;

  text-align: center !important;
}


.aaroma-home-logo {
  width:
    min(
      300px,
      30vw
    ) !important;

  max-height:
    310px !important;

  margin:
    0 auto
    18px !important;
}


.aaroma-home-title {
  font-size:
    clamp(
      22px,
      2vw,
      32px
    ) !important;

  margin-bottom:
    20px !important;
}


/* status cards */

.aaroma-home-status {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  gap: 10px !important;
}


.aaroma-home-status > div {
  padding:
    12px
    16px !important;

  border-radius:
    9px !important;
}


html[data-admin-theme="light"]
.aaroma-home-status > div {
  background: #ffffff !important;

  border:
    1px solid #dfe5ec !important;

  color: #172033 !important;
}


html[data-admin-theme="dark"]
.aaroma-home-status > div {
  background: #1c2535 !important;

  border:
    1px solid #334155 !important;

  color: #ffffff !important;
}


html[data-admin-theme="light"]
.aaroma-home-status strong {
  color: #172033 !important;
}


html[data-admin-theme="dark"]
.aaroma-home-status strong {
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  :root {
    --admin-sidebar-expanded: 215px;
  }

  .admin-topbar-logo {
    width: 145px !important;
  }

  .admin-topbar-meta {
    display: none !important;
  }

  .aaroma-home-logo {
    width:
      min(
        230px,
        52vw
      ) !important;
  }
}



/* =========================================================
   AAROMA HOME — FINAL LIGHT/DARK COLOR CORRECTION
   ========================================================= */

/* Remove old navy/background remnants */
#page,
.aaroma-home,
.aaroma-home-inner {
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================
   DAY MODE
   ========================= */

html[data-admin-theme="light"] #page,
html[data-admin-theme="light"] .aaroma-home {
  background: #f3f5f8 !important;
  color: #172033 !important;
}

html[data-admin-theme="light"] .aaroma-home-title,
html[data-admin-theme="light"] .aaroma-home h1,
html[data-admin-theme="light"] .aaroma-home h2,
html[data-admin-theme="light"] .aaroma-home h3 {
  color: #172033 !important;
}

html[data-admin-theme="light"] .aaroma-home-status > div {
  background: #ffffff !important;
  border: 1px solid #dce3eb !important;
  color: #172033 !important;
}

html[data-admin-theme="light"] .aaroma-home-status span {
  color: #68778a !important;
}

html[data-admin-theme="light"] .aaroma-home-status strong {
  color: #172033 !important;
}


/* =========================
   NIGHT MODE
   ========================= */

html[data-admin-theme="dark"] #page,
html[data-admin-theme="dark"] .aaroma-home {
  background: #111827 !important;
  color: #ffffff !important;
}

html[data-admin-theme="dark"] .aaroma-home-title,
html[data-admin-theme="dark"] .aaroma-home h1,
html[data-admin-theme="dark"] .aaroma-home h2,
html[data-admin-theme="dark"] .aaroma-home h3 {
  color: #ffffff !important;
}

html[data-admin-theme="dark"] .aaroma-home-status > div {
  background: #1c2535 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

html[data-admin-theme="dark"] .aaroma-home-status span {
  color: #9eabbc !important;
}

html[data-admin-theme="dark"] .aaroma-home-status strong {
  color: #ffffff !important;
}


/* =========================
   HOME COMPACTNESS
   ========================= */

.aaroma-home-inner {
  width: min(680px, 88vw) !important;
}

.aaroma-home-logo {
  width: min(285px, 28vw) !important;
  max-height: 285px !important;
  margin: 0 auto 12px !important;
}

.home-divider {
  width: min(330px, 50vw) !important;
  margin: 0 auto 12px !important;
}

.aaroma-home-title {
  margin: 0 0 18px !important;
  font-size: clamp(22px, 2vw, 30px) !important;
}


/* =========================
   REMOVE SIDE NAVY LEAK
   ========================= */

html[data-admin-theme="light"] .app {
  background: #f3f5f8 !important;
}

html[data-admin-theme="dark"] .app {
  background: #111827 !important;
}



/* =========================================================
   FINAL SIDEBAR / CONTENT ALIGNMENT FIX
   Prevent all pages from sliding under expanded navigation
   ========================================================= */

:root {
  --admin-sidebar-collapsed: 68px;
  --admin-sidebar-expanded: 278px;
}


/* ---------------------------------------------------------
   SIDEBAR WIDTH
   --------------------------------------------------------- */

.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-collapsed) !important;
}


body.admin-sidebar-expanded
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  width:
    var(--admin-sidebar-expanded) !important;
}


/* ---------------------------------------------------------
   TOPBAR POSITION
   --------------------------------------------------------- */

body:not(.admin-sidebar-expanded)
.admin-topbar {
  left:
    var(--admin-sidebar-collapsed) !important;
}


body.admin-sidebar-expanded
.admin-topbar {
  left:
    var(--admin-sidebar-expanded) !important;
}


/* ---------------------------------------------------------
   MAIN PAGE — ALL ADMIN PAGES
   --------------------------------------------------------- */

#page {
  position: relative !important;

  margin-left:
    var(--admin-sidebar-collapsed) !important;

  width:
    calc(
      100% -
      var(--admin-sidebar-collapsed)
    ) !important;

  max-width:
    none !important;

  box-sizing:
    border-box !important;

  overflow-x:
    hidden !important;

  transition:
    margin-left .2s ease,
    width .2s ease !important;
}


body.admin-sidebar-expanded
#page {
  margin-left:
    var(--admin-sidebar-expanded) !important;

  width:
    calc(
      100% -
      var(--admin-sidebar-expanded)
    ) !important;
}


/* ---------------------------------------------------------
   PREVENT PAGE CHILDREN FROM IGNORING SIDEBAR WIDTH
   --------------------------------------------------------- */

#page > * {
  max-width:
    100% !important;

  box-sizing:
    border-box !important;
}


#page .card,
#page .panel,
#page .queue-grid,
#page .appointments-grid,
#page .admin-grid,
#page .rooms-grid {
  max-width:
    100% !important;

  box-sizing:
    border-box !important;
}


/* ---------------------------------------------------------
   QUEUE PAGE
   --------------------------------------------------------- */

.queue-page,
.queue-control-center-page {
  width:
    100% !important;

  max-width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;
}


/* ---------------------------------------------------------
   FIX OLD FULL-VIEW WIDTHS
   --------------------------------------------------------- */

#page [style*="width:100vw"],
#page [style*="width: 100vw"],
#page [style*="min-width:100vw"],
#page [style*="min-width: 100vw"] {
  width:
    100% !important;

  min-width:
    0 !important;
}


/* ---------------------------------------------------------
   TABLE / FORM OVERFLOW
   --------------------------------------------------------- */

#page table,
#page form,
#page input,
#page select,
#page textarea {
  max-width:
    100% !important;

  box-sizing:
    border-box !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  :root {
    --admin-sidebar-expanded: 220px;
  }

  body.admin-sidebar-expanded
  #page {
    margin-left:
      var(--admin-sidebar-expanded) !important;

    width:
      calc(
        100% -
        var(--admin-sidebar-expanded)
      ) !important;
  }
}



/* =========================================================
   FIXED SIDEBAR BRAND AREA
   Collapsed = icon
   Expanded  = full AAROMA logo
   ========================================================= */

.admin-sidebar-brand {
  position: fixed !important;

  top: 0 !important;
  left: 60px !important;

  height: 58px !important;

  width:
    calc(
      var(--admin-sidebar-collapsed) -
      60px
    ) !important;

  z-index: 1650 !important;

  display: flex !important;

  align-items: center !important;

  padding: 0 10px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;

  transition:
    width .2s ease,
    left .2s ease !important;
}


/* collapsed brand area */
body:not(.admin-sidebar-expanded)
.admin-sidebar-brand {
  left: 60px !important;

  width:
    calc(
      var(--admin-sidebar-collapsed) -
      60px
    ) !important;

  justify-content: center !important;

  padding: 0 !important;
}


/* expanded brand area */
body.admin-sidebar-expanded
.admin-sidebar-brand {
  left: 60px !important;

  width:
    calc(
      var(--admin-sidebar-expanded) -
      60px
    ) !important;

  justify-content: flex-start !important;

  padding: 0 14px !important;
}


/* light */
html[data-admin-theme="light"]
.admin-sidebar-brand {
  background: #ffffff !important;

  border-bottom:
    1px solid #dde3ea !important;
}


/* dark */
html[data-admin-theme="dark"]
.admin-sidebar-brand {
  background: #161b22 !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}


/* full logo */
.admin-sidebar-logo-full {
  display: none !important;

  width: 175px !important;

  max-height: 37px !important;

  object-fit: contain !important;

  object-position: left center !important;
}


/* collapsed icon */
.admin-sidebar-logo-mark {
  width: 34px !important;

  height: 34px !important;

  display: grid !important;

  place-items: center !important;

  border-radius: 7px !important;

  background: #000 !important;

  color: #fff !important;

  font-size: 20px !important;

  font-weight: 900 !important;
}


/* switch logo based on sidebar state */

body.admin-sidebar-expanded
.admin-sidebar-logo-full {
  display: block !important;
}

body.admin-sidebar-expanded
.admin-sidebar-logo-mark {
  display: none !important;
}


body:not(.admin-sidebar-expanded)
.admin-sidebar-logo-full {
  display: none !important;
}

body:not(.admin-sidebar-expanded)
.admin-sidebar-logo-mark {
  display: grid !important;
}


/* remove old topbar brand space */
.admin-topbar-brand {
  display: none !important;
}


/* keep topbar content aligned after removing brand */
.admin-topbar {
  padding-left: 14px !important;
}


/* make sidebar begin directly under fixed brand */
.admin-bottom-nav.admin-side-nav.admin-left-sidebar {
  top: 58px !important;
}


/* avoid any white gap between header/sidebar */
.admin-menu-toggle,
.admin-sidebar-brand,
.admin-topbar {
  margin: 0 !important;
}


/* =========================================================
   ROOMS PAGE FORCE DISPLAY
   ========================================================= */

.rooms-control-center-page {
  display: block !important;

  width: 100% !important;

  min-height:
    calc(100vh - 72px) !important;

  padding: 14px !important;

  box-sizing: border-box !important;
}



/* =========================================================
   SIDEBAR BRAND — FINAL POSITION
   ========================================================= */

/*
  Menu button = 60px
  Brand starts immediately after it.
  Collapsed: 58px square logo area
  Expanded: full remaining sidebar width
*/

body:not(.admin-sidebar-expanded)
.admin-sidebar-brand {
  left: 60px !important;
  width: 58px !important;
  height: 58px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;
}


body.admin-sidebar-expanded
.admin-sidebar-brand {
  left: 60px !important;

  width:
    calc(
      var(--admin-sidebar-expanded) - 60px
    ) !important;

  height: 58px !important;

  padding: 0 14px !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;
}


/* collapsed A icon */

body:not(.admin-sidebar-expanded)
.admin-sidebar-logo-mark {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 38px !important;

  border-radius: 7px !important;
}


/* full logo */

body.admin-sidebar-expanded
.admin-sidebar-logo-full {
  display: block !important;

  width: 180px !important;
  height: auto !important;

  max-height: 40px !important;

  object-fit: contain !important;
  object-position: left center !important;

  margin: 0 !important;
}


/*
  Keep the logo anchored to exactly the same
  left position when menu opens/closes.
*/

.admin-sidebar-brand {
  transform: none !important;
  margin: 0 !important;
}


/* topbar begins after icon area when collapsed */

body:not(.admin-sidebar-expanded)
.admin-topbar {
  left: 118px !important;
}


/* topbar begins after complete menu when expanded */

body.admin-sidebar-expanded
.admin-topbar {
  left:
    var(--admin-sidebar-expanded) !important;
}


.admin-sidebar-logo-mark img {
  height: 38px !important;

  width: auto !important;

  max-width: none !important;

  display: block !important;

  object-fit: contain !important;

  /*
    The full logo is wide.
    This container hides everything except
    the square mark on the left.
  */
}

.admin-sidebar-logo-mark {
  overflow: hidden !important;

  justify-content: flex-start !important;
}



/* =========================================================
   AAROMA 20-ROOM COMPACT GRID
   ========================================================= */

.rooms-control-center-page {
  padding: 10px !important;
}


.rooms-compact-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 8px;
}


.rooms-compact-header h1 {
  margin: 1px 0 0 !important;

  font-size: 20px !important;
}


.rooms-compact-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;

  gap: 7px !important;

  width: 100% !important;

  max-width: 100% !important;
}


.room-mini-card {
  min-width: 0;

  padding: 9px !important;

  border-radius: 8px !important;

  box-sizing: border-box !important;
}


.room-mini-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  margin-bottom: 7px;
}


.room-mini-head strong {
  font-size: 12px !important;
}


.room-mini-status {
  padding: 3px 6px;

  border-radius: 999px;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .03em;
}


.room-mini-status.empty {
  background: rgba(39,165,82,.14);

  color: #2aa457;
}


.room-mini-status.occupied {
  background: rgba(218,53,53,.14);

  color: #db3a3a;
}


.room-mini-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5px;
}


.room-mini-actions button {
  min-height: 27px !important;

  padding: 4px 5px !important;

  font-size: 8px !important;

  font-weight: 900 !important;

  border-radius: 5px !important;
}


.room-mini-empty {
  color: #21924a !important;

  border:
    1px solid
    rgba(33,146,74,.35) !important;
}


.room-mini-occupied {
  color: #d03636 !important;

  border:
    1px solid
    rgba(208,54,54,.35) !important;
}


.room-mini-display {
  width: 100% !important;

  min-height: 25px !important;

  margin-top: 5px !important;

  padding: 3px 5px !important;

  font-size: 8px !important;

  border-radius: 5px !important;
}


/* LIGHT MODE */

html[data-admin-theme="light"]
.room-mini-card {
  background: #ffffff !important;

  color: #172033 !important;

  border:
    1px solid #dce3eb !important;
}


html[data-admin-theme="light"]
.room-mini-display {
  background: #f6f8fb !important;

  color: #203044 !important;

  border:
    1px solid #dce3eb !important;
}


/* DARK MODE */

html[data-admin-theme="dark"]
.room-mini-card {
  background: #232323 !important;

  color: #ffffff !important;

  border:
    1px solid #414141 !important;
}


html[data-admin-theme="dark"]
.room-mini-display {
  background: #1b1b1b !important;

  color: #ffffff !important;

  border:
    1px solid #414141 !important;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

  .rooms-compact-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 950px) {

  .rooms-compact-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 650px) {

  .rooms-compact-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }
}



/* =========================================================
   ADMIN ROOM - OUT OF SERVICE
   ========================================================= */

.room-mini-out {
  width:
    100% !important;

  min-height:
    26px !important;

  margin-top:
    5px !important;

  padding:
    4px
    5px !important;

  border:
    1px solid
    rgba(190,120,20,.40) !important;

  border-radius:
    5px !important;

  color:
    #b56f0b !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}

.room-mini-card.out-of-service {
  border-color:
    #b56f0b !important;
}

.room-mini-status.out-of-service {
  background:
    rgba(190,120,20,.16);

  color:
    #c27a13;
}



/* =========================================================
   20 ROOM ADMIN - OOS + QR CONTROLS
   ========================================================= */

.room-mini-out {
  width:
    100% !important;

  min-height:
    25px !important;

  margin-top:
    5px !important;

  padding:
    3px
    5px !important;

  border:
    1px solid
    rgba(190,120,20,.45) !important;

  border-radius:
    5px !important;

  background:
    transparent !important;

  color:
    #bd780f !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}


.room-mini-card.out-of-service {
  border-color:
    #bd780f !important;
}


.room-mini-status.out-of-service {
  background:
    rgba(190,120,20,.16) !important;

  color:
    #c47b0e !important;
}


.room-mini-links {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    5px;

  margin-top:
    5px;
}


.room-mini-links button {
  min-height:
    24px !important;

  padding:
    3px
    4px !important;

  border-radius:
    5px !important;

  font-size:
    8px !important;
}


.room-mini-qr {
  border:
    1px solid
    rgba(45,112,195,.35) !important;

  color:
    #3274c3 !important;

  background:
    transparent !important;
}



/* =========================================================
   REAL ROOM QR
   ========================================================= */

.room-qr-placeholder:has(
  .room-qr-image
) {
  width:
    auto !important;

  height:
    auto !important;

  border:
    0 !important;

  background:
    transparent !important;
}

.room-qr-image {
  display:
    block;

  width:
    min(
      230px,
      65vw
    );

  height:
    auto;

  margin:
    0 auto;

  border-radius:
    7px;
}

.room-qr-actions {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    7px;

  margin-top:
    15px;
}

.room-qr-actions[hidden] {
  display:
    none !important;
}

.room-qr-actions button {
  min-height:
    36px !important;

  border-radius:
    7px !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}



/* =========================================================
   AAROMA ROOM QR MODAL — FIXED CENTERED OVERLAY
   ========================================================= */

#roomQrModal.room-qr-overlay {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 20px !important;

  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    rgba(4, 12, 24, .78) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;

  overflow:
    auto !important;
}


#roomQrModal .room-qr-modal {
  position: relative !important;

  width:
    min(
      420px,
      calc(100vw - 32px)
    ) !important;

  max-height:
    calc(100vh - 40px) !important;

  margin:
    auto !important;

  padding:
    24px !important;

  overflow:
    auto !important;

  border-radius:
    18px !important;

  background:
    #ffffff !important;

  color:
    #152238 !important;

  text-align:
    center !important;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.42) !important;
}


html[data-admin-theme="dark"]
#roomQrModal .room-qr-modal {
  background:
    #1c222b !important;

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;
}


#roomQrModal .room-qr-image {
  display:
    block !important;

  width:
    min(
      240px,
      68vw
    ) !important;

  height:
    auto !important;

  margin:
    14px auto !important;

  background:
    #ffffff !important;

  padding:
    8px !important;

  border-radius:
    10px !important;
}


#roomQrModal .room-qr-actions {
  display:
    grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap:
    10px !important;

  width:
    100% !important;

  margin-top:
    17px !important;
}


#roomQrModal .room-qr-actions[hidden] {
  display:
    none !important;
}


#roomQrModal .room-qr-actions button {
  width:
    100% !important;

  min-height:
    42px !important;

  border-radius:
    8px !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  cursor:
    pointer !important;
}


#roomQrModal .room-qr-close {
  position:
    absolute !important;

  top:
    10px !important;

  right:
    10px !important;

  width:
    34px !important;

  height:
    34px !important;

  z-index:
    2 !important;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  font-size:
    22px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}


@media (max-width: 600px) {

  #roomQrModal.room-qr-overlay {
    padding:
      12px !important;
  }

  #roomQrModal .room-qr-modal {
    width:
      100% !important;

    max-height:
      calc(100vh - 24px) !important;

    padding:
      20px 16px !important;
  }

  #roomQrModal .room-qr-image {
    width:
      min(
        220px,
        72vw
      ) !important;
  }
}



/* =========================================================
   ROOMS - PRINT ALL QR
   ========================================================= */

.rooms-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.print-all-room-qr {
  min-height:
    32px !important;

  padding:
    6px 11px !important;

  border:
    1px solid
    rgba(48,116,199,.40) !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  color:
    #3478c8 !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}

.print-all-room-qr:disabled {
  opacity:
    .55 !important;

  cursor:
    wait !important;
}

html[data-admin-theme="dark"]
.print-all-room-qr {
  color:
    #78adff !important;

  border-color:
    rgba(120,173,255,.38) !important;
}

@media (max-width: 720px) {

  .rooms-header-actions {
    flex-direction:
      column;

    align-items:
      flex-end;
  }
}


.room-mini-links {
  grid-template-columns:
    repeat(
      3,
      1fr
    ) !important;
}

.room-mini-rename {
  background:
    transparent !important;

  border:
    1px solid
    rgba(120,130,145,.38) !important;

  color:
    inherit !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}



/* =========================================================
   ROOMS - COMPACT SUMMARY + CLEAN ACTION ROW
   ========================================================= */

.rooms-live-summary {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;
}

.rooms-live-stat {
  min-width:
    76px;

  padding:
    5px 8px;

  border:
    1px solid
    rgba(120,130,145,.28);

  border-radius:
    7px;

  text-align:
    center;
}

.rooms-live-label {
  display:
    block;

  margin-bottom:
    2px;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .07em;

  opacity:
    .68;
}

.rooms-live-stat strong {
  font-size:
    14px;

  line-height:
    1;
}

.rooms-live-stat:nth-child(1)
strong {
  color:
    #219653;
}

.rooms-live-stat:nth-child(2)
strong {
  color:
    #df3636;
}

.rooms-live-stat:nth-child(3)
strong {
  color:
    #cf8400;
}


/* Compact lower action row */

.room-mini-links {
  display:
    grid !important;

  grid-template-columns:
    1fr 1fr 1fr !important;

  gap:
    5px !important;

  margin-top:
    6px !important;
}

.room-mini-links button {
  min-width:
    0 !important;

  min-height:
    33px !important;

  padding:
    5px 6px !important;

  border-radius:
    6px !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;

  line-height:
    1.1 !important;
}

.room-mini-qr {
  color:
    #3d8ee8 !important;
}

.room-mini-rename {
  color:
    inherit !important;
}


/* Keep all room cards visually even */

.room-mini-card {
  min-width:
    0 !important;
}

.room-mini-title {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* Small screens */

@media (max-width: 900px) {

  .rooms-header-actions {
    align-items:
      flex-end;
  }

  .rooms-live-summary {
    justify-content:
      flex-end;
  }

  .rooms-live-stat {
    min-width:
      68px;
  }
}



/* =========================================================
   AAROMA ADMIN HOME OPERATIONS DASHBOARD
   ========================================================= */

.admin-home-dashboard {
  margin:
    0 0 18px;

  padding:
    18px;

  border:
    1px solid
    rgba(120,130,145,.20);

  border-radius:
    14px;
}


.admin-home-dashboard-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    16px;
}


.admin-home-dashboard-head h1 {
  margin:
    2px 0 4px !important;

  font-size:
    23px !important;
}


.admin-home-dashboard-head p {
  margin:
    0 !important;

  font-size:
    12px;

  opacity:
    .68;
}


.admin-home-eyebrow {
  color:
    #3c82d8;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.admin-home-system-pill {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(38,157,82,.30);

  border-radius:
    999px;

  color:
    #279653;

  font-size:
    8px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.admin-home-system-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #28a45a;

  box-shadow:
    0 0 0 4px
    rgba(40,164,90,.12);
}


.admin-home-stat-grid {
  display:
    grid;

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

  gap:
    10px;
}


.admin-home-stat-card {
  min-width:
    0;

  padding:
    13px;

  border:
    1px solid
    rgba(120,130,145,.22);

  border-radius:
    10px;
}


.admin-home-card-top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.admin-home-card-label {
  display:
    block;

  margin-bottom:
    3px;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .09em;

  opacity:
    .64;
}


.admin-home-card-top strong {
  display:
    block;

  font-size:
    27px;

  line-height:
    1;
}


.admin-home-card-icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(80,125,190,.22);

  border-radius:
    8px;

  color:
    #4386d5;

  font-size:
    16px;

  font-weight:
    900;
}


.admin-home-stat-card p {
  min-height:
    18px;

  margin:
    10px 0 9px !important;

  font-size:
    10px;

  opacity:
    .70;
}


.admin-home-stat-card button {
  width:
    100%;

  min-height:
    30px !important;

  padding:
    5px 8px !important;

  border:
    1px solid
    rgba(80,125,190,.25) !important;

  border-radius:
    6px !important;

  background:
    transparent !important;

  color:
    inherit !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}


.admin-home-room-breakdown {
  display:
    flex;

  gap:
    5px;

  flex-wrap:
    wrap;

  min-height:
    18px;

  margin:
    9px 0;
}


.admin-home-room-breakdown span {
  padding:
    3px 6px;

  border-radius:
    999px;

  font-size:
    7px;

  font-weight:
    900;
}


.admin-home-room-breakdown
.available {
  color:
    #239451;

  background:
    rgba(35,148,81,.10);
}


.admin-home-room-breakdown
.occupied {
  color:
    #dc3838;

  background:
    rgba(220,56,56,.10);
}


.admin-home-room-breakdown
.out {
  color:
    #c77a00;

  background:
    rgba(199,122,0,.11);
}


/* LIGHT MODE */

html[data-admin-theme="light"]
.admin-home-dashboard,
html[data-admin-theme="light"]
.admin-home-stat-card {
  background:
    #ffffff;

  color:
    #182235;
}


/* DARK MODE */

html[data-admin-theme="dark"]
.admin-home-dashboard {
  background:
    #202020;

  color:
    #ffffff;

  border-color:
    rgba(255,255,255,.10);
}


html[data-admin-theme="dark"]
.admin-home-stat-card {
  background:
    #292929;

  color:
    #ffffff;

  border-color:
    rgba(255,255,255,.10);
}


/* RESPONSIVE */

@media (max-width: 1050px) {

  .admin-home-stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media (max-width: 650px) {

  .admin-home-dashboard {
    padding:
      12px;
  }


  .admin-home-dashboard-head {
    flex-direction:
      column;
  }


  .admin-home-stat-grid {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   AAROMA SIDEBAR BRAND
   COLLAPSED = ICON
   EXPANDED  = FULL LOGO
   ========================================================= */

.admin-sidebar-brand {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    var(--admin-sidebar-collapsed) !important;

  width:
    0 !important;

  height:
    56px !important;

  z-index:
    1650 !important;

  display:
    flex !important;

  align-items:
    center !important;

  overflow:
    visible !important;

  pointer-events:
    none !important;
}


/*
  COLLAPSED ICON
*/

.admin-sidebar-logo-mark {
  position:
    fixed !important;

  top:
    7px !important;

  left:
    65px !important;

  width:
    42px !important;

  height:
    42px !important;

  display:
    block !important;

  object-fit:
    contain !important;

  border-radius:
    8px !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  transform:
    scale(1) !important;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease !important;
}


/*
  FULL WORDMARK
*/

.admin-sidebar-logo-full {
  position:
    fixed !important;

  top:
    7px !important;

  left:
    72px !important;

  width:
    185px !important;

  height:
    42px !important;

  object-fit:
    contain !important;

  object-position:
    left center !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  transform:
    translateX(-8px) !important;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease !important;
}


/*
  WHEN SIDEBAR EXPANDS:
  hide icon and show full logo
*/

body.admin-sidebar-expanded
.admin-sidebar-logo-mark {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  transform:
    scale(.88) !important;
}


body.admin-sidebar-expanded
.admin-sidebar-logo-full {
  opacity:
    1 !important;

  visibility:
    visible !important;

  transform:
    translateX(0) !important;
}


/*
  THEME-SPECIFIC FULL LOGO
*/

.admin-sidebar-logo-dark {
  display:
    none !important;
}


html[data-admin-theme="dark"]
.admin-sidebar-logo-light {
  display:
    none !important;
}


html[data-admin-theme="dark"]
.admin-sidebar-logo-dark {
  display:
    block !important;
}


html[data-admin-theme="light"]
.admin-sidebar-logo-light {
  display:
    block !important;
}


html[data-admin-theme="light"]
.admin-sidebar-logo-dark {
  display:
    none !important;
}


/*
  On very small screens keep sizing controlled.
*/

@media (max-width: 650px) {

  .admin-sidebar-logo-mark {
    width:
      38px !important;

    height:
      38px !important;

    top:
      9px !important;
  }

  .admin-sidebar-logo-full {
    width:
      165px !important;

    height:
      38px !important;

    top:
      9px !important;
  }
}



/* =========================================================
   ANNOUNCEMENTS / NEW ARRIVALS
   ========================================================= */

.announcement-manager {
  max-width:
    1200px;

  margin:
    0 auto;
}


.announcement-manager-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    18px;

  margin-bottom:
    14px;
}


.announcement-manager-head h1 {
  margin:
    3px 0 5px;
}


.announcement-manager-head p {
  margin:
    0;

  opacity:
    .7;
}


.announcement-eyebrow {
  color:
    #3f8fe8;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.announcement-head-summary {
  padding:
    7px 10px;

  border:
    1px solid
    rgba(120,130,145,.3);

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    900;
}


.announcement-editor {
  margin-bottom:
    14px;
}


.announcement-editor-grid {
  display:
    grid;

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

  gap:
    10px;
}


.announcement-editor label {
  display:
    block;

  margin-bottom:
    10px;

  font-size:
    10px;

  font-weight:
    800;
}


.announcement-editor input,
.announcement-editor textarea,
.announcement-editor select {
  width:
    100%;

  margin-top:
    5px;
}


.announcement-editor textarea {
  min-height:
    82px;

  resize:
    vertical;
}


.announcement-editor-actions {
  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.announcement-status {
  margin:
    8px 0 0;

  font-size:
    10px;

  opacity:
    .7;
}


.announcement-grid {
  display:
    grid;

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

  gap:
    12px;
}


.announcement-item {
  overflow:
    hidden;

  border:
    1px solid
    rgba(120,130,145,.23);

  border-radius:
    12px;
}


.announcement-item.unpublished {
  opacity:
    .58;
}


.announcement-image {
  width:
    100%;

  aspect-ratio:
    16 / 8;

  object-fit:
    cover;

  display:
    block;
}


.announcement-item-body {
  padding:
    14px;
}


.announcement-item-meta,
.announcement-detail-meta {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    8px;

  margin-bottom:
    8px;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.announcement-type {
  color:
    #438ee5;
}


.announcement-priority {
  opacity:
    .65;
}


.announcement-item h2 {
  margin:
    0 0 7px;

  font-size:
    18px;
}


.announcement-item p {
  margin:
    0 0 12px;

  line-height:
    1.5;

  opacity:
    .78;
}


.announcement-item-actions {
  display:
    grid;

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

  gap:
    6px;
}


.announcement-item-actions button {
  min-height:
    31px !important;

  padding:
    5px 7px !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}


.announcement-empty {
  grid-column:
    1 / -1;

  padding:
    28px;

  border:
    1px dashed
    rgba(120,130,145,.28);

  border-radius:
    12px;

  text-align:
    center;

  opacity:
    .65;
}


/* DETAIL MODAL */

.announcement-detail-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(3,12,24,.72);

  backdrop-filter:
    blur(7px);
}


.announcement-detail-modal {
  position:
    relative;

  width:
    min(
      680px,
      100%
    );

  max-height:
    86vh;

  overflow:
    auto;

  padding:
    22px;

  border:
    1px solid
    rgba(120,130,145,.28);

  border-radius:
    14px;

  background:
    #fff;

  color:
    #182235;
}


html[data-admin-theme="dark"]
.announcement-detail-modal {
  background:
    #20252c;

  color:
    #fff;
}


.announcement-detail-close {
  position:
    absolute;

  top:
    10px;

  right:
    10px;

  width:
    34px;

  height:
    34px;

  border-radius:
    50%;

  font-size:
    20px;

  font-weight:
    900;
}


.announcement-detail-image {
  width:
    100%;

  max-height:
    320px;

  object-fit:
    cover;

  margin-bottom:
    14px;

  border-radius:
    10px;
}


.announcement-detail-modal h2 {
  margin:
    0 0 10px;

  font-size:
    25px;
}


.announcement-detail-modal p {
  margin:
    0;

  white-space:
    pre-wrap;

  line-height:
    1.65;
}


@media (max-width: 760px) {

  .announcement-editor-grid,
  .announcement-grid {
    grid-template-columns:
      1fr;
  }


  .announcement-manager-head {
    flex-direction:
      column;
  }


  .announcement-item-actions {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   ANNOUNCEMENT IMAGE UPLOAD
   ========================================================= */

.announcement-image-uploader {
  margin-bottom:
    12px;
}


.announcement-image-uploader
input[type="file"] {
  width:
    100%;

  margin-top:
    6px;
}


.announcement-image-preview {
  position:
    relative;

  width:
    min(
      420px,
      100%
    );

  margin-top:
    10px;

  padding:
    8px;

  border:
    1px solid
    rgba(120,130,145,.25);

  border-radius:
    10px;
}


.announcement-image-preview[hidden] {
  display:
    none !important;
}


.announcement-image-preview img {
  display:
    block;

  width:
    100%;

  max-height:
    260px;

  object-fit:
    cover;

  border-radius:
    7px;
}


.announcement-image-preview button {
  width:
    100%;

  margin-top:
    7px;

  min-height:
    30px !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}


.announcement-upload-help {
  margin:
    5px 0 0 !important;

  font-size:
    9px !important;

  opacity:
    .62;
}



/* =========================================================
   ANNOUNCEMENT DISPLAY DURATION
   ========================================================= */

@media (min-width: 900px) {

  .announcement-editor-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}


.announcement-duration {
  opacity:
    .68;

  white-space:
    nowrap;
}



/* =========================================================
   ANNOUNCEMENT LIFECYCLE MANAGEMENT
   ========================================================= */

.announcement-lifecycle-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  margin:
    5px 0 10px;

  flex-wrap:
    wrap;
}


.announcement-lifecycle-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    4px 8px;

  border-radius:
    999px;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.announcement-lifecycle-badge.active,
.announcement-lifecycle-badge.until-cleared {
  color:
    #218b4b;

  background:
    rgba(33,139,75,.12);

  border:
    1px solid
    rgba(33,139,75,.25);
}


.announcement-lifecycle-badge.expired {
  color:
    #b26f00;

  background:
    rgba(190,120,20,.12);

  border:
    1px solid
    rgba(190,120,20,.26);
}


.announcement-lifecycle-badge.unpublished {
  color:
    #667085;

  background:
    rgba(102,112,133,.10);

  border:
    1px solid
    rgba(102,112,133,.22);
}


.announcement-lifecycle-time {
  font-size:
    8px;

  font-weight:
    700;

  opacity:
    .62;
}


.announcement-lifecycle-actions {
  display:
    grid;

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

  gap:
    5px;

  margin-top:
    7px;
}


.announcement-lifecycle-actions:empty {
  display:
    none;
}


.announcement-lifecycle-actions button {
  min-height:
    29px !important;

  padding:
    4px 6px !important;

  font-size:
    7px !important;

  font-weight:
    900 !important;
}


.announcement-lifecycle-actions
.announcement-republish {
  grid-column:
    1 / -1;

  color:
    #347fd2 !important;

  border-color:
    rgba(52,127,210,.35) !important;
}


.announcement-item.lifecycle-expired {
  border-color:
    rgba(190,120,20,.30);
}


.announcement-item.lifecycle-unpublished {
  opacity:
    .72;
}


@media (max-width: 650px) {

  .announcement-lifecycle-actions {
    grid-template-columns:
      1fr;
  }


  .announcement-lifecycle-actions
  .announcement-republish {
    grid-column:
      auto;
  }
}



/* =========================================================
   ANNOUNCEMENT LIFECYCLE ACTION CLEANUP
   ========================================================= */

.announcement-item-actions
.announcement-republish {
  color:
    #347fd2 !important;

  border-color:
    rgba(52,127,210,.35) !important;
}


.announcement-item-actions
.announcement-republish:hover {
  border-color:
    rgba(52,127,210,.65) !important;
}


/*
  Lifecycle row is now reserved
  exclusively for Extend controls.
*/

.announcement-lifecycle-actions:empty {
  display:
    none !important;
}



/* =========================================================
   AAROMA APPOINTMENTS MANAGEMENT V2
   APPROVED DESIGN
   ========================================================= */

#page.appointments-management-page {
  padding:
    18px !important;
}


.appointments-management {
  width:
    100%;

  max-width:
    1550px;

  margin:
    0 auto;
}


.appointments-page-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    16px;
}


.appointments-page-head h1 {
  margin:
    2px 0 4px;

  font-size:
    clamp(
      24px,
      2vw,
      36px
    );

  line-height:
    1;
}


.appointments-page-head p {
  margin:
    0;

  opacity:
    .65;

  font-size:
    12px;
}


.appointments-eyebrow {
  color:
    #2f82e7;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .13em;
}


.appointments-system-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(46,160,85,.26);

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;
}


.appointments-system-status span {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #2aa956;

  box-shadow:
    0 0 10px
    rgba(42,169,86,.45);
}


/* =========================================================
   MAIN 3-COLUMN GRID
   ========================================================= */

.appointments-main-grid {
  display:
    grid;

  grid-template-columns:
    minmax(300px, 1.05fr)
    minmax(540px, 1.55fr)
    minmax(210px, .62fr);

  gap:
    14px;

  align-items:
    start;
}


.appointments-left-column,
.appointments-info-column {
  display:
    grid;

  gap:
    14px;
}


/* =========================================================
   GENERAL PANELS
   ========================================================= */

.appointment-panel,
.appointment-info-card {
  overflow:
    hidden;

  border:
    1px solid
    rgba(120,140,165,.22);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 8px 28px
    rgba(21,40,70,.04);
}


html[data-admin-theme="dark"]
.appointment-panel,
html[data-admin-theme="dark"]
.appointment-info-card {
  background:
    #171d25;

  border-color:
    rgba(255,255,255,.08);
}


.appointment-panel-head {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    11px 14px;

  border-bottom:
    1px solid
    rgba(120,140,165,.18);

  font-size:
    14px;
}


.appointment-editor-panel
.appointment-panel-head {
  color:
    #fff;

  border-bottom:
    0;

  background:
    linear-gradient(
      135deg,
      #0b2445,
      #163c70
    );
}


.appointment-panel-head.compact {
  min-height:
    40px;

  font-size:
    12px;
}


.appointment-panel-icon {
  font-size:
    17px;
}


/* =========================================================
   EDITOR
   ========================================================= */

.appointment-editor-body {
  padding:
    14px;
}


.appointment-field {
  display:
    block;

  margin-bottom:
    11px;
}


.appointment-field > span {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    9px;

  font-weight:
    850;
}


.appointment-field b {
  color:
    #e43b3b;
}


.appointment-field input,
.appointment-field textarea,
.appointment-field select {
  width:
    100%;

  min-height:
    38px;

  margin:
    0 !important;

  border:
    1px solid
    rgba(117,137,163,.28);

  border-radius:
    7px;

  background:
    transparent;

  font-size:
    11px;
}


.appointment-field textarea {
  min-height:
    72px;

  resize:
    vertical;
}


.appointment-field-grid {
  display:
    grid;

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

  gap:
    10px;
}


.appointment-display-options {
  display:
    grid;

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

  gap:
    10px;

  margin:
    5px 0 13px;
}


.appointment-display-option {
  min-height:
    62px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

  border:
    1px solid
    rgba(52,127,210,.22);

  border-radius:
    9px;

  background:
    rgba(52,127,210,.055);
}


.appointment-display-option-icon {
  color:
    #277cd9;

  font-size:
    17px;
}


.appointment-display-option-copy {
  min-width:
    0;
}


.appointment-display-option-copy strong {
  display:
    block;

  font-size:
    9px;
}


.appointment-display-option-copy small {
  display:
    block;

  margin-top:
    2px;

  opacity:
    .57;

  font-size:
    7px;
}


.appointment-display-option
input[type="checkbox"] {
  width:
    18px;

  height:
    18px;
}


.appointment-editor-actions {
  display:
    grid;

  grid-template-columns:
    .7fr 1.5fr;

  gap:
    9px;
}


.appointment-editor-actions button {
  min-height:
    38px;

  font-size:
    9px;

  font-weight:
    850;
}


.appointment-save-status {
  margin-top:
    8px;

  min-height:
    16px;

  font-size:
    8px;

  opacity:
    .68;
}


/* =========================================================
   FILTERS
   ========================================================= */

.appointments-list-body {
  padding:
    12px;
}


.appointment-filter-bar {
  display:
    flex;

  gap:
    6px;

  overflow-x:
    auto;

  padding-bottom:
    10px;
}


.appointment-filter {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  flex:
    0 0 auto;

  padding:
    6px 10px !important;

  border:
    1px solid
    rgba(120,140,165,.22);

  border-radius:
    7px;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}


.appointment-filter span {
  min-width:
    19px;

  padding:
    2px 5px;

  border-radius:
    999px;

  background:
    rgba(0,0,0,.055);

  text-align:
    center;
}


.appointment-filter.active {
  color:
    #fff !important;

  border-color:
    #247be6 !important;

  background:
    #247be6 !important;
}


.appointment-filter.upcoming:not(.active) {
  color:
    #176dc5;
}


.appointment-filter.arrived:not(.active) {
  color:
    #a66800;
}


.appointment-filter.in-progress:not(.active) {
  color:
    #6d3dc2;
}


.appointment-filter.completed:not(.active) {
  color:
    #248244;
}


.appointment-filter.cancelled:not(.active) {
  color:
    #c83232;
}


/* =========================================================
   APPOINTMENT ROWS
   ========================================================= */

.appointment-list-modern {
  display:
    grid;

  gap:
    8px;
}


.appointment-modern-row {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    52px
    minmax(150px, 1.2fr)
    minmax(125px, .9fr)
    minmax(110px, .85fr)
    85px;

  align-items:
    center;

  gap:
    10px;

  min-height:
    94px;

  padding:
    10px;

  border:
    1px solid
    rgba(120,140,165,.19);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.68);
}


html[data-admin-theme="dark"]
.appointment-modern-row {
  background:
    rgba(255,255,255,.025);
}


.appointment-modern-row::before {
  content:
    "";

  position:
    absolute;

  top:
    8px;

  bottom:
    8px;

  left:
    0;

  width:
    3px;

  border-radius:
    0 5px 5px 0;

  background:
    #2b7de9;
}


.appointment-modern-row.status-arrived::before {
  background:
    #e9a21b;
}


.appointment-modern-row.status-in-progress::before {
  background:
    #8356d7;
}


.appointment-modern-row.status-completed::before {
  background:
    #35a45d;
}


.appointment-modern-row.status-cancelled::before {
  background:
    #e54242;
}


.appointment-avatar {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #e0efff;

  color:
    #2475c6;

  font-size:
    14px;

  font-weight:
    900;
}


.appointment-avatar.arrived {
  color:
    #b07000;

  background:
    #fff0cb;
}


.appointment-avatar.in-progress {
  color:
    #7041c1;

  background:
    #eee5ff;
}


.appointment-avatar.completed {
  color:
    #288647;

  background:
    #e2f6e8;
}


.appointment-avatar.cancelled {
  color:
    #ce3030;

  background:
    #ffe5e5;
}


.appointment-person {
  min-width:
    0;
}


.appointment-person strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;
}


.appointment-person span,
.appointment-person small {
  display:
    block;

  margin-top:
    4px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    8px;

  opacity:
    .7;
}


.appointment-schedule {
  display:
    grid;

  gap:
    4px;

  font-size:
    8px;
}


.appointment-schedule strong {
  font-size:
    9px;
}


.appointment-schedule small {
  opacity:
    .58;
}


.appointment-state-column {
  display:
    grid;

  gap:
    8px;

  justify-items:
    start;
}


.appointment-status-badge {
  padding:
    5px 7px;

  border-radius:
    6px;

  font-size:
    7px;

  font-weight:
    900;
}


.appointment-status-badge.upcoming {
  color:
    #176dc5;

  background:
    #dfefff;
}


.appointment-status-badge.arrived {
  color:
    #9c6500;

  background:
    #ffefcb;
}


.appointment-status-badge.in-progress {
  color:
    #6637b4;

  background:
    #ede2ff;
}


.appointment-status-badge.completed {
  color:
    #247d40;

  background:
    #e0f3e4;
}


.appointment-status-badge.cancelled {
  color:
    #c62e2e;

  background:
    #ffe2e2;
}


.appointment-priority-badge {
  font-size:
    8px;

  font-weight:
    800;
}


.appointment-priority-badge.urgent {
  color:
    #dc2525;
}


.appointment-priority-badge.high {
  color:
    #dc7600;
}


.appointment-priority-badge.normal {
  color:
    #b36d00;
}


.appointment-priority-badge.low {
  color:
    #239252;
}


.appointment-row-actions {
  display:
    grid;

  gap:
    6px;
}


.appointment-row-actions button {
  min-height:
    31px;

  padding:
    5px 7px !important;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}


.appointment-row-actions
button:first-child {
  color:
    #176fcf;
}


.appointment-row-actions
button.delete {
  color:
    #da3030;
}


.appointments-empty {
  min-height:
    180px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    7px;

  border:
    1px dashed
    rgba(120,140,165,.28);

  border-radius:
    10px;

  text-align:
    center;
}


.appointments-empty strong {
  font-size:
    13px;
}


.appointments-empty span {
  font-size:
    9px;

  opacity:
    .6;
}


/* =========================================================
   RIGHT INFORMATION CARDS
   ========================================================= */

.appointment-info-card {
  padding:
    13px;
}


.appointment-info-card h3 {
  margin:
    0 0 11px;

  font-size:
    11px;
}


.appointment-info-card ul {
  margin:
    0;

  padding:
    0;

  list-style:
    none;
}


.appointment-info-card li {
  position:
    relative;

  margin:
    8px 0;

  padding-left:
    17px;

  font-size:
    8px;
}


.appointment-info-card li::before {
  content:
    "✓";

  position:
    absolute;

  left:
    0;

  color:
    #28a055;

  font-weight:
    900;
}


.feature-card {
  border-color:
    rgba(222,169,43,.32);
}


.priority-guide-row {
  display:
    grid;

  grid-template-columns:
    20px 1fr;

  gap:
    7px;

  margin:
    10px 0;
}


.priority-guide-row b {
  font-size:
    15px;
}


.priority-guide-row strong {
  display:
    block;

  font-size:
    9px;
}


.priority-guide-row small {
  display:
    block;

  margin-top:
    2px;

  font-size:
    7px;

  opacity:
    .57;
}


.priority-guide-row.urgent {
  color:
    #d92f2f;
}


.priority-guide-row.high,
.priority-guide-row.normal {
  color:
    #d78200;
}


.priority-guide-row.low {
  color:
    #229353;
}


.display-behavior-row {
  margin:
    11px 0;
}


.display-behavior-row strong {
  display:
    block;

  font-size:
    9px;
}


.display-behavior-row small {
  display:
    block;

  margin-top:
    3px;

  font-size:
    7px;

  line-height:
    1.45;

  opacity:
    .58;
}


.smart-status-card {
  border-color:
    rgba(228,177,52,.32);
}


.smart-status-card p {
  margin:
    0;

  font-size:
    8px;

  line-height:
    1.6;

  opacity:
    .7;
}


/* =========================================================
   STATUS GUIDE
   ========================================================= */

.appointment-status-guide {
  padding-bottom:
    10px;
}


.appointment-status-flow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    4px;

  overflow-x:
    auto;

  padding:
    10px;
}


.appointment-guide-step {
  display:
    grid;

  gap:
    5px;

  min-width:
    67px;

  text-align:
    center;
}


.appointment-guide-step span {
  padding:
    6px;

  border-radius:
    6px;

  font-size:
    6px;

  font-weight:
    900;
}


.appointment-guide-step small {
  font-size:
    6px;

  opacity:
    .62;
}


.appointment-guide-step.upcoming span {
  color:
    #166ac2;

  background:
    #e1efff;
}


.appointment-guide-step.arrived span {
  color:
    #a66b00;

  background:
    #fff0d0;
}


.appointment-guide-step.in-progress span {
  color:
    #6738b4;

  background:
    #ede3ff;
}


.appointment-guide-step.completed span {
  color:
    #287f44;

  background:
    #e1f3e5;
}


.appointment-guide-step.cancelled span {
  color:
    #c42c2c;

  background:
    #ffe4e4;
}


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

@media (max-width: 1280px) {

  .appointments-main-grid {
    grid-template-columns:
      minmax(290px, .95fr)
      minmax(500px, 1.5fr);
  }


  .appointments-info-column {
    grid-column:
      1 / -1;

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


@media (max-width: 900px) {

  .appointments-main-grid {
    grid-template-columns:
      1fr;
  }


  .appointments-info-column {
    grid-column:
      auto;

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


  .appointment-modern-row {
    grid-template-columns:
      45px 1fr auto;
  }


  .appointment-schedule,
  .appointment-state-column {
    grid-column:
      2;
  }


  .appointment-row-actions {
    grid-column:
      3;

    grid-row:
      1 / span 3;
  }
}


@media (max-width: 650px) {

  #page.appointments-management-page {
    padding:
      10px !important;
  }


  .appointments-page-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .appointment-field-grid,
  .appointment-display-options,
  .appointments-info-column {
    grid-template-columns:
      1fr;
  }


  .appointment-modern-row {
    grid-template-columns:
      42px 1fr;
  }


  .appointment-schedule,
  .appointment-state-column,
  .appointment-row-actions {
    grid-column:
      1 / -1;

    grid-row:
      auto;
  }


  .appointment-row-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}



/* =========================================================
   APPOINTMENTS MANAGEMENT V2
   APPROVED MOCKUP ALIGNMENT FIX
   ========================================================= */


/* ---------------------------------------------------------
   PAGE HEADER
   --------------------------------------------------------- */

#page.appointments-management-page
.appointments-page-head {
  min-height:
    78px !important;

  padding:
    14px 18px !important;

  border:
    1px solid
    rgba(120,140,165,.18) !important;

  border-radius:
    12px !important;

  background:
    #ffffff !important;

  color:
    #101828 !important;

  box-shadow:
    0 5px 18px
    rgba(15,35,65,.035) !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointments-page-head {
  background:
    #171d25 !important;

  color:
    #ffffff !important;
}


#page.appointments-management-page
.appointments-page-head h1 {
  color:
    inherit !important;
}


#page.appointments-management-page
.appointments-page-head p {
  color:
    #667085 !important;

  opacity:
    1 !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointments-page-head p {
  color:
    #98a2b3 !important;
}


/* ---------------------------------------------------------
   GRID PROPORTIONS
   Match approved mockup more closely
   --------------------------------------------------------- */

#page.appointments-management-page
.appointments-main-grid {
  grid-template-columns:
    minmax(360px, 1.02fr)
    minmax(620px, 1.55fr)
    minmax(240px, .62fr) !important;

  gap:
    14px !important;
}


/* ---------------------------------------------------------
   PANEL HEADERS
   --------------------------------------------------------- */

#page.appointments-management-page
.appointment-panel-head {
  color:
    #101828 !important;

  background:
    #ffffff !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointment-panel-head {
  color:
    #ffffff !important;

  background:
    #171d25 !important;
}


/*
  Editor keeps approved navy header.
*/

#page.appointments-management-page
.appointment-editor-panel
.appointment-panel-head {
  justify-content:
    flex-start !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #0b2445,
      #173f75
    ) !important;
}


/*
  Appointment list header is white in
  the approved mockup.
*/

#page.appointments-management-page
.appointments-list-panel
.appointment-panel-head {
  color:
    #101828 !important;

  background:
    #ffffff !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointments-list-panel
.appointment-panel-head {
  color:
    #ffffff !important;

  background:
    #171d25 !important;
}


/* ---------------------------------------------------------
   FILTER BAR
   Do not crop Cancelled
   --------------------------------------------------------- */

#page.appointments-management-page
.appointment-filter-bar {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    ) !important;

  gap:
    6px !important;

  overflow:
    visible !important;

  width:
    100% !important;
}


#page.appointments-management-page
.appointment-filter {
  width:
    100% !important;

  min-width:
    0 !important;

  justify-content:
    center !important;

  white-space:
    nowrap !important;
}


/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

#page.appointments-management-page
.appointment-editor-body {
  padding:
    14px !important;
}


#page.appointments-management-page
.appointment-field input,
#page.appointments-management-page
.appointment-field select,
#page.appointments-management-page
.appointment-field textarea {
  box-sizing:
    border-box !important;

  color:
    #101828 !important;

  background:
    #ffffff !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointment-field input,
html[data-admin-theme="dark"]
#page.appointments-management-page
.appointment-field select,
html[data-admin-theme="dark"]
#page.appointments-management-page
.appointment-field textarea {
  color:
    #ffffff !important;

  background:
    #101722 !important;
}


/* ---------------------------------------------------------
   DISPLAY OPTIONS
   --------------------------------------------------------- */

#page.appointments-management-page
.appointment-display-option {
  min-height:
    76px !important;
}


#page.appointments-management-page
.appointment-display-option
input[type="checkbox"] {
  width:
    18px !important;

  height:
    18px !important;

  min-height:
    18px !important;

  margin:
    0 !important;
}


/* ---------------------------------------------------------
   SAVE / RESET
   Keep visible inside card
   --------------------------------------------------------- */

#page.appointments-management-page
.appointment-editor-actions {
  margin-top:
    10px !important;

  padding-bottom:
    2px !important;
}


#page.appointments-management-page
.appointment-editor-actions button {
  min-height:
    42px !important;

  border-radius:
    8px !important;
}


#page.appointments-management-page
#saveAppointment {
  color:
    #ffffff !important;

  background:
    #247be6 !important;

  border-color:
    #247be6 !important;
}


/* ---------------------------------------------------------
   LIST AREA
   --------------------------------------------------------- */

#page.appointments-management-page
.appointments-list-panel {
  min-width:
    0 !important;
}


#page.appointments-management-page
.appointments-list-body {
  min-width:
    0 !important;

  overflow:
    hidden !important;
}


#page.appointments-management-page
.appointments-empty {
  min-height:
    205px !important;
}


/* ---------------------------------------------------------
   RIGHT FEATURE COLUMN
   --------------------------------------------------------- */

#page.appointments-management-page
.appointments-info-column {
  min-width:
    0 !important;
}


#page.appointments-management-page
.appointment-info-card {
  padding:
    14px !important;

  background:
    #ffffff !important;
}


html[data-admin-theme="dark"]
#page.appointments-management-page
.appointment-info-card {
  background:
    #171d25 !important;
}


#page.appointments-management-page
.appointment-info-card h3 {
  color:
    inherit !important;

  font-size:
    12px !important;
}


#page.appointments-management-page
.appointment-info-card li {
  font-size:
    8px !important;

  line-height:
    1.35 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE LAPTOP
   --------------------------------------------------------- */

@media (max-width: 1450px) {

  #page.appointments-management-page
  .appointments-main-grid {
    grid-template-columns:
      minmax(330px, .95fr)
      minmax(560px, 1.45fr)
      minmax(220px, .60fr) !important;
  }
}


@media (max-width: 1180px) {

  #page.appointments-management-page
  .appointments-main-grid {
    grid-template-columns:
      minmax(320px, .9fr)
      minmax(500px, 1.4fr) !important;
  }


  #page.appointments-management-page
  .appointments-info-column {
    grid-column:
      1 / -1 !important;

    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 820px) {

  #page.appointments-management-page
  .appointments-main-grid {
    grid-template-columns:
      1fr !important;
  }


  #page.appointments-management-page
  .appointment-filter-bar {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }


  #page.appointments-management-page
  .appointments-info-column {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 560px) {

  #page.appointments-management-page
  .appointment-filter-bar,
  #page.appointments-management-page
  .appointments-info-column {
    grid-template-columns:
      1fr !important;
  }
}



/* =========================================================
   APPOINTMENTS TOPBAR CLEARANCE FIX
   ========================================================= */

#page.appointments-management-page {
  padding-top:
    78px !important;
}


#page.appointments-management-page
.appointments-management {
  margin-top:
    0 !important;
}


@media (max-width: 650px) {

  #page.appointments-management-page {
    padding-top:
      68px !important;
  }
}



/* =========================================================
   APPOINTMENT EDITOR HEADER TEXT FIX
   ========================================================= */

#page.appointments-management-page
.appointment-editor-panel
.appointment-panel-head,
#page.appointments-management-page
.appointment-editor-panel
.appointment-panel-head strong,
#page.appointments-management-page
.appointment-editor-panel
.appointment-panel-head span {
  color:
    #ffffff !important;
}



/* =========================================================
   AAROMA TO-DO MANAGEMENT V2
   APPROVED DESIGN
   ========================================================= */

#page.todo-management-page {
  padding:
    78px 18px 22px !important;
}


.todo-management {
  width:
    100%;

  max-width:
    1580px;

  margin:
    0 auto;
}


.todo-page-head {
  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    14px;

  padding:
    16px 20px;

  border:
    1px solid
    rgba(120,140,165,.20);

  border-radius:
    12px;

  background:
    #fff;

  box-shadow:
    0 6px 22px
    rgba(20,40,70,.035);
}


html[data-admin-theme="dark"]
.todo-page-head {
  background:
    #171d25;

  color:
    #fff;
}


.todo-eyebrow {
  color:
    #247be6;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.todo-page-head h1 {
  margin:
    3px 0 7px;

  font-size:
    clamp(
      25px,
      2vw,
      35px
    );

  line-height:
    1;
}


.todo-page-head p {
  margin:
    0;

  color:
    #667085;

  font-size:
    11px;
}


.todo-system-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(40,160,80,.28);

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    850;
}


.todo-system-status span {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #27aa54;
}


/* =========================================================
   THREE COLUMN LAYOUT
   ========================================================= */

.todo-main-grid {
  display:
    grid;

  grid-template-columns:
    minmax(340px, .95fr)
    minmax(650px, 1.7fr)
    minmax(235px, .65fr);

  gap:
    14px;

  align-items:
    start;
}


.todo-left-column,
.todo-info-column {
  display:
    grid;

  gap:
    14px;
}


.todo-panel,
.todo-info-card {
  overflow:
    hidden;

  border:
    1px solid
    rgba(120,140,165,.21);

  border-radius:
    11px;

  background:
    #fff;

  box-shadow:
    0 7px 24px
    rgba(20,40,70,.04);
}


html[data-admin-theme="dark"]
.todo-panel,
html[data-admin-theme="dark"]
.todo-info-card {
  background:
    #171d25;

  border-color:
    rgba(255,255,255,.08);
}


/* =========================================================
   EDITOR
   ========================================================= */

.todo-panel-head {
  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    11px 14px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      #0d458d,
      #247be6
    );

  font-size:
    13px;
}


.todo-editor-body {
  padding:
    13px;
}


.todo-field {
  display:
    block;

  margin-bottom:
    10px;
}


.todo-field > span {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    8px;

  font-weight:
    850;
}


.todo-field b {
  color:
    #db3333;
}


.todo-field input,
.todo-field textarea,
.todo-field select {
  box-sizing:
    border-box;

  width:
    100%;

  min-height:
    38px;

  margin:
    0 !important;

  border:
    1px solid
    rgba(115,135,160,.28);

  border-radius:
    7px;

  background:
    #fff;

  color:
    #101828;

  font-size:
    10px;
}


.todo-field textarea {
  min-height:
    82px;

  resize:
    vertical;
}


html[data-admin-theme="dark"]
.todo-field input,
html[data-admin-theme="dark"]
.todo-field textarea,
html[data-admin-theme="dark"]
.todo-field select {
  color:
    #fff;

  background:
    #101722;
}


.todo-field-grid {
  display:
    grid;

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

  gap:
    9px;
}


.todo-toggle-list {
  display:
    grid;

  gap:
    7px;

  margin:
    8px 0 13px;
}


.todo-toggle-row {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  align-items:
    center;

  gap:
    10px;

  min-height:
    43px;
}


.todo-toggle-row strong {
  display:
    block;

  font-size:
    9px;
}


.todo-toggle-row small {
  display:
    block;

  margin-top:
    2px;

  opacity:
    .58;

  font-size:
    7px;
}


.todo-toggle-row
input[type="checkbox"] {
  width:
    20px;

  height:
    20px;

  min-height:
    20px;

  margin:
    0;
}


.todo-editor-actions {
  display:
    grid;

  grid-template-columns:
    .7fr 1.5fr;

  gap:
    9px;
}


.todo-editor-actions button {
  min-height:
    40px;

  font-size:
    9px;

  font-weight:
    850;
}


#saveTodo {
  color:
    #fff !important;

  background:
    #247be6 !important;

  border-color:
    #247be6 !important;
}


.todo-save-status {
  min-height:
    15px;

  margin-top:
    7px;

  font-size:
    8px;

  opacity:
    .67;
}


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

.todo-list-head {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 13px;

  border-bottom:
    1px solid
    rgba(120,140,165,.18);
}


.todo-list-head > div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  font-size:
    12px;
}


.todo-list-head button {
  min-height:
    30px;

  padding:
    5px 10px !important;

  font-size:
    8px !important;
}


.todo-list-body {
  padding:
    11px;
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.todo-filter-bar {
  display:
    grid;

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

  gap:
    6px;

  margin-bottom:
    11px;
}


.todo-filter {
  min-width:
    0;

  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    5px 7px !important;

  border:
    1px solid
    rgba(120,140,165,.22);

  border-radius:
    7px;

  white-space:
    nowrap;

  font-size:
    7px !important;

  font-weight:
    850 !important;
}


.todo-filter span {
  padding:
    2px 5px;

  border-radius:
    999px;

  background:
    rgba(0,0,0,.055);
}


.todo-filter.active {
  color:
    #fff !important;

  border-color:
    #247be6 !important;

  background:
    #247be6 !important;
}


.todo-filter.pending:not(.active) {
  color:
    #176fc5;
}


.todo-filter.due-soon:not(.active) {
  color:
    #c07900;
}


.todo-filter.overdue:not(.active) {
  color:
    #d43333;
}


.todo-filter.completed:not(.active) {
  color:
    #218642;
}


.todo-filter.cancelled:not(.active) {
  color:
    #667085;
}


/* =========================================================
   TABLE
   ========================================================= */

.todo-table-head,
.todo-modern-row {
  display:
    grid;

  grid-template-columns:
    28px
    minmax(165px, 1.4fr)
    90px
    135px
    88px
    70px
    82px;

  align-items:
    center;

  gap:
    8px;
}


.todo-table-head {
  min-height:
    39px;

  padding:
    7px 8px;

  border-radius:
    7px;

  background:
    rgba(80,105,135,.045);

  font-size:
    7px;

  font-weight:
    850;
}


.todo-list-modern {
  display:
    grid;

  gap:
    6px;

  margin-top:
    6px;
}


.todo-modern-row {
  position:
    relative;

  min-height:
    74px;

  padding:
    8px;

  border:
    1px solid
    rgba(120,140,165,.17);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.65);
}


html[data-admin-theme="dark"]
.todo-modern-row {
  background:
    rgba(255,255,255,.025);
}


.todo-modern-row::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    8px;

  bottom:
    8px;

  width:
    3px;

  border-radius:
    0 4px 4px 0;

  background:
    #247be6;
}


.todo-modern-row.status-due-soon::before {
  background:
    #f0b223;
}


.todo-modern-row.status-overdue::before {
  background:
    #e33b3b;
}


.todo-modern-row.status-completed::before {
  background:
    #2da357;
}


.todo-modern-row.status-cancelled::before {
  background:
    #7a8392;
}


.todo-complete-control {
  display:
    grid;

  place-items:
    center;
}


.todo-complete-control input {
  width:
    16px;

  height:
    16px;

  min-height:
    16px;
}


.todo-main-copy {
  min-width:
    0;
}


.todo-main-copy strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;
}


.todo-main-copy small {
  display:
    block;

  margin-top:
    4px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    7px;

  opacity:
    .62;
}


.todo-priority-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    5px 7px;

  border:
    1px solid
    rgba(120,140,165,.20);

  border-radius:
    7px;

  font-size:
    7px;

  font-weight:
    850;
}


.todo-priority-badge.urgent {
  color:
    #da2828;
}


.todo-priority-badge.high {
  color:
    #e17900;
}


.todo-priority-badge.normal {
  color:
    #24944e;
}


.todo-priority-badge.low {
  color:
    #2a9957;
}


.todo-due-column {
  display:
    grid;

  gap:
    3px;

  font-size:
    7px;
}


.todo-due-column strong {
  font-size:
    8px;
}


.todo-time-left {
  opacity:
    .62;
}


.todo-time-left.due-soon {
  color:
    #d58a00;

  opacity:
    1;
}


.todo-time-left.overdue {
  color:
    #df3333;

  opacity:
    1;

  font-weight:
    850;
}


.todo-time-left.completed {
  color:
    #299752;

  opacity:
    1;
}


.todo-status-badge {
  display:
    inline-flex;

  width:
    fit-content;

  padding:
    5px 7px;

  border-radius:
    6px;

  font-size:
    7px;

  font-weight:
    900;
}


.todo-status-badge.pending {
  color:
    #196fc6;

  background:
    #e0efff;
}


.todo-status-badge.due-soon {
  color:
    #aa6900;

  background:
    #fff0cd;
}


.todo-status-badge.overdue {
  color:
    #c72d2d;

  background:
    #ffe1e1;
}


.todo-status-badge.completed {
  color:
    #258342;

  background:
    #dff3e4;
}


.todo-status-badge.cancelled {
  color:
    #667085;

  background:
    #eef0f3;
}


.todo-display-column {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.todo-display-column span {
  opacity:
    .30;
}


.todo-display-column
span.enabled {
  color:
    #23954d;

  opacity:
    1;
}


.todo-row-actions {
  display:
    flex;

  gap:
    5px;
}


.todo-row-actions button {
  min-width:
    32px;

  min-height:
    30px;

  padding:
    5px !important;

  font-size:
    7px !important;
}


.todo-row-actions
button:first-child {
  color:
    #fff;

  background:
    #247be6;

  border-color:
    #247be6;
}


.todo-row-actions
button.delete {
  color:
    #fff;

  background:
    #e43d3d;

  border-color:
    #e43d3d;
}


.todo-empty {
  grid-column:
    1 / -1;

  min-height:
    190px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    6px;

  border:
    1px dashed
    rgba(120,140,165,.28);

  border-radius:
    9px;

  text-align:
    center;
}


.todo-empty strong {
  font-size:
    12px;
}


.todo-empty span {
  font-size:
    8px;

  opacity:
    .6;
}


/* =========================================================
   RIGHT INFO CARDS
   ========================================================= */

.todo-info-card {
  padding:
    13px;
}


.todo-info-card h3 {
  margin:
    0 0 11px;

  font-size:
    11px;
}


.todo-priority-guide {
  display:
    grid;

  grid-template-columns:
    20px 1fr;

  gap:
    7px;

  margin:
    10px 0;
}


.todo-priority-guide b {
  font-size:
    15px;
}


.todo-priority-guide strong {
  display:
    block;

  font-size:
    8px;
}


.todo-priority-guide small {
  display:
    block;

  margin-top:
    2px;

  font-size:
    7px;

  line-height:
    1.35;

  opacity:
    .58;
}


.todo-priority-guide.urgent {
  color:
    #d72e2e;
}


.todo-priority-guide.high {
  color:
    #e07800;
}


.todo-priority-guide.normal,
.todo-priority-guide.low {
  color:
    #26964d;
}


.todo-deadline-guide,
.todo-display-guide {
  margin:
    10px 0;
}


.todo-deadline-guide strong,
.todo-display-guide strong {
  display:
    block;

  font-size:
    8px;
}


.todo-deadline-guide small,
.todo-display-guide small {
  display:
    block;

  margin-top:
    3px;

  font-size:
    7px;

  line-height:
    1.4;

  opacity:
    .60;
}


.todo-deadline-guide.due-soon {
  color:
    #ce8500;
}


.todo-deadline-guide.overdue {
  color:
    #d93232;
}


.todo-deadline-guide.auto-remove {
  color:
    #247be6;
}


.todo-tips-card {
  border-color:
    rgba(36,123,230,.25);

  background:
    rgba(36,123,230,.05);
}


.todo-tips-card p {
  margin:
    0;

  color:
    #1767bd;

  font-size:
    8px;

  line-height:
    1.55;
}


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

@media (max-width: 1350px) {

  .todo-main-grid {
    grid-template-columns:
      minmax(320px, .9fr)
      minmax(580px, 1.55fr);
  }


  .todo-info-column {
    grid-column:
      1 / -1;

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


@media (max-width: 950px) {

  .todo-main-grid {
    grid-template-columns:
      1fr;
  }


  .todo-info-column {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .todo-table-head {
    display:
      none;
  }


  .todo-modern-row {
    grid-template-columns:
      30px 1fr auto;

    gap:
      8px;
  }


  .todo-priority-column,
  .todo-due-column,
  .todo-status-column,
  .todo-display-column {
    grid-column:
      2;
  }


  .todo-row-actions {
    grid-column:
      3;

    grid-row:
      1 / span 5;
  }
}


@media (max-width: 650px) {

  #page.todo-management-page {
    padding:
      68px 10px 16px !important;
  }


  .todo-page-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .todo-field-grid,
  .todo-info-column {
    grid-template-columns:
      1fr;
  }


  .todo-filter-bar {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}



/* =========================================================
   TO-DO MANAGEMENT V2 VISUAL POLISH
   ========================================================= */


/* EDITOR HEADER CONTRAST */

#page.todo-management-page
.todo-editor-panel
.todo-panel-head,
#page.todo-management-page
.todo-editor-panel
.todo-panel-head strong,
#page.todo-management-page
.todo-editor-panel
.todo-panel-head span {
  color:
    #ffffff !important;
}


/* LIST HEADER — MATCH APPROVED LIGHT DESIGN */

#page.todo-management-page
.todo-list-head {
  color:
    #101828 !important;

  background:
    #ffffff !important;
}


html[data-admin-theme="dark"]
#page.todo-management-page
.todo-list-head {
  color:
    #ffffff !important;

  background:
    #171d25 !important;
}


/* REFRESH BUTTON */

#page.todo-management-page
#refreshTodos {
  min-width:
    auto !important;

  min-height:
    30px !important;

  padding:
    5px 10px !important;

  border:
    1px solid
    rgba(120,140,165,.28) !important;

  border-radius:
    7px !important;

  color:
    #344054 !important;

  background:
    #ffffff !important;

  box-shadow:
    none !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;
}


html[data-admin-theme="dark"]
#page.todo-management-page
#refreshTodos {
  color:
    #ffffff !important;

  background:
    #101722 !important;
}


/* PAGE CONNECTED STATUS */

#page.todo-management-page
.todo-system-status {
  color:
    #101828 !important;

  background:
    #ffffff !important;
}


#page.todo-management-page
.todo-system-status::after {
  content:
    "Connected";
}


#page.todo-management-page
.todo-system-status {
  font-size:
    0 !important;
}


#page.todo-management-page
.todo-system-status::after {
  font-size:
    9px !important;

  font-weight:
    850 !important;
}


html[data-admin-theme="dark"]
#page.todo-management-page
.todo-system-status {
  color:
    #ffffff !important;

  background:
    #171d25 !important;
}


/* RIGHT INFO CARDS */

#page.todo-management-page
.todo-info-card {
  padding:
    15px !important;
}


#page.todo-management-page
.todo-info-card h3 {
  margin-bottom:
    13px !important;
}



/* =========================================================
   TO-DO V2 ROW ACTION / COLUMN FIT FIX
   ========================================================= */

/*
  Allow the center panel and its children
  to shrink correctly inside the 3-column layout.
*/

#page.todo-management-page
.todo-list-panel,
#page.todo-management-page
.todo-list-body,
#page.todo-management-page
.todo-list-modern {
  min-width:
    0 !important;

  width:
    100% !important;

  box-sizing:
    border-box !important;
}


/*
  Use proportional columns instead of fixed widths.
  This keeps Display and Actions inside the panel.
*/

#page.todo-management-page
.todo-table-head,
#page.todo-management-page
.todo-modern-row {
  grid-template-columns:
    26px
    minmax(135px, 1.55fr)
    minmax(70px, .65fr)
    minmax(105px, .9fr)
    minmax(75px, .7fr)
    minmax(55px, .5fr)
    minmax(78px, .65fr) !important;

  width:
    100% !important;

  box-sizing:
    border-box !important;
}


/*
  Prevent long text from forcing
  the grid wider than the panel.
*/

#page.todo-management-page
.todo-modern-row > *,
#page.todo-management-page
.todo-table-head > * {
  min-width:
    0 !important;
}


#page.todo-management-page
.todo-row-actions {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  gap:
    4px !important;

  width:
    100% !important;
}


#page.todo-management-page
.todo-row-actions button {
  min-width:
    0 !important;

  width:
    100% !important;

  min-height:
    30px !important;

  padding:
    4px !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;
}


/*
  Keep the delete control compact.
*/

#page.todo-management-page
.todo-row-actions
button.delete {
  font-size:
    0 !important;
}


#page.todo-management-page
.todo-row-actions
button.delete::after {
  content:
    "×";

  font-size:
    14px !important;

  font-weight:
    900 !important;
}


/*
  Keep display indicators centered.
*/

#page.todo-management-page
.todo-display-column {
  justify-content:
    center !important;

  gap:
    5px !important;
}


/*
  Laptop safeguard.
*/

@media (max-width: 1250px) {

  #page.todo-management-page
  .todo-table-head,
  #page.todo-management-page
  .todo-modern-row {
    grid-template-columns:
      24px
      minmax(120px, 1.4fr)
      65px
      minmax(95px, .85fr)
      72px
      50px
      70px !important;
  }
}



/* =========================================================
   AAROMA PROFESSIONAL SIDEBAR SVG ICONS
   ========================================================= */

#adminSideMenu .nav-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  font-size: 0 !important;
}

#adminSideMenu .nav-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#adminSideMenu button:hover .nav-icon svg {
  stroke-width: 2.05 !important;
}

#adminSideMenu button.active .nav-icon svg,
#adminSideMenu button[aria-current="page"] .nav-icon svg {
  stroke-width: 2.2 !important;
}

/* AAROMA PROFESSIONAL SIDEBAR SVG ICONS */


/* =========================================================
   AAROMA PROFESSIONAL MANAGEMENT CENTER ICONS
   ========================================================= */

.admin-home-card-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
  line-height: 1 !important;
}


.admin-home-card-icon svg {
  display: block !important;

  width: 34px !important;
  height: 34px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  overflow: visible !important;
}


/* Slightly stronger visual presence on dashboard cards */
.admin-home-stat-card:hover .admin-home-card-icon svg {
  stroke-width: 2 !important;
  transform: scale(1.05);
}

.admin-home-card-icon svg {
  transition:
    transform .16s ease,
    stroke-width .16s ease !important;
}



/* =========================================================
   AAROMA ROOM DETAILS - ADMIN ONLY
   ========================================================= */

.room-mini-details {
  border:
    1px solid
    rgba(59,130,246,.45);

  background:
    rgba(37,99,235,.12);

  color:
    #bfdbfe;
}

.room-details-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  background:
    rgba(2,6,23,.78);

  backdrop-filter:
    blur(10px);
}

.room-details-modal {
  width:
    min(
      920px,
      100%
    );

  max-height:
    calc(
      100vh -
      48px
    );

  overflow:
    auto;

  border:
    1px solid
    rgba(148,163,184,.25);

  border-radius:
    22px;

  background:
    #0b1220;

  color:
    #f8fafc;

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.45);
}

.room-details-head {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    24px;

  border-bottom:
    1px solid
    rgba(148,163,184,.18);

  background:
    rgba(11,18,32,.96);
}

.room-details-head h2 {
  margin:
    5px 0 4px;
}

.room-details-head p {
  margin:
    0;

  color:
    #94a3b8;
}

.room-details-close {
  width:
    44px;

  height:
    44px;

  border:
    0;

  border-radius:
    12px;

  background:
    rgba(255,255,255,.08);

  color:
    #fff;

  font-size:
    28px;

  cursor:
    pointer;
}

.room-details-sections {
  display:
    grid;

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

  gap:
    18px;

  padding:
    22px;
}

.room-details-section {
  padding:
    20px;

  border:
    1px solid
    rgba(148,163,184,.16);

  border-radius:
    18px;

  background:
    rgba(15,23,42,.72);
}

.room-details-section h3 {
  margin:
    0 0 18px;

  font-size:
    17px;
}

.room-details-section label {
  display:
    block;

  margin:
    0 0 14px;
}

.room-details-section label > span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #cbd5e1;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}

.room-details-section input[type="text"],
.room-details-section input[type="number"],
.room-details-section input[type="datetime-local"],
.room-details-section textarea {
  width:
    100%;

  min-height:
    44px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(148,163,184,.3);

  border-radius:
    10px;

  background:
    #020617;

  color:
    #fff;

  font:
    inherit;
}

.room-details-section textarea {
  min-height:
    88px;

  resize:
    vertical;
}

.room-details-check {
  display:
    flex !important;

  align-items:
    center;

  gap:
    10px;
}

.room-details-check input {
  width:
    18px;

  height:
    18px;
}

.room-details-check span {
  margin:
    0 !important;
}

.room-details-two {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;
}

.room-details-note {
  margin-top:
    12px;

  padding:
    10px 12px;

  border-radius:
    10px;

  background:
    rgba(59,130,246,.08);

  color:
    #94a3b8;

  font-size:
    11px;

  line-height:
    1.45;
}

.room-details-actions {
  position:
    sticky;

  bottom:
    0;

  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  padding:
    18px 22px;

  border-top:
    1px solid
    rgba(148,163,184,.18);

  background:
    rgba(11,18,32,.97);
}

.room-details-actions button {
  min-height:
    44px;

  padding:
    0 18px;

  border-radius:
    10px;

  font-weight:
    900;

  cursor:
    pointer;
}

.room-details-cancel {
  border:
    1px solid
    rgba(148,163,184,.3);

  background:
    transparent;

  color:
    #cbd5e1;
}

.room-details-save {
  border:
    0;

  background:
    #2563eb;

  color:
    #fff;
}

@media (max-width: 850px) {
  .room-details-sections {
    grid-template-columns:
      1fr;
  }

  .room-details-two {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   ROOM EDIT DETAILS BUTTON - DAY / NIGHT VISIBILITY
   ========================================================= */

.room-mini-details {
  border: 1px solid #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.room-mini-details:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.room-mini-details:active {
  transform: scale(.98);
}


/* =========================================================
   ROOM DETAILS MODAL - POLISHED TWO COLUMN LAYOUT
   ========================================================= */

.room-details-modal {
  width: min(1050px, calc(100vw - 40px)) !important;
}

.room-details-sections {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.25fr) !important;
}

.room-details-section {
  min-width: 0 !important;
}

.room-details-section:nth-child(3) {
  grid-column: 1 / -1;
}

.room-details-two {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 14px !important;
}

.room-details-section input,
.room-details-section textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .room-details-modal {
    width: calc(100vw - 20px) !important;
  }

  .room-details-sections {
    grid-template-columns:
      1fr !important;

    padding:
      14px !important;
  }

  .room-details-section:nth-child(3) {
    grid-column:
      auto;
  }

  .room-details-two {
    grid-template-columns:
      1fr !important;
  }
}


/* =========================================================
   ROOM DETAILS MODAL - POLISHED TWO COLUMN LAYOUT
   ========================================================= */

.room-details-modal {
  width: min(1050px, calc(100vw - 40px)) !important;
}

.room-details-sections {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.25fr) !important;
}

.room-details-section {
  min-width: 0 !important;
}

.room-details-section:nth-child(3) {
  grid-column: 1 / -1;
}

.room-details-two {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 14px !important;
}

.room-details-section input,
.room-details-section textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .room-details-modal {
    width: calc(100vw - 20px) !important;
  }

  .room-details-sections {
    grid-template-columns:
      1fr !important;

    padding:
      14px !important;
  }

  .room-details-section:nth-child(3) {
    grid-column:
      auto;
  }

  .room-details-two {
    grid-template-columns:
      1fr !important;
  }
}



/* =========================================================
   ROOM DETAILS - PERSON PHOTO + IDLE MEDIA
   ========================================================= */

.room-person-media-admin {
  margin-top:
    18px;
}

.room-person-photo-preview {
  display:
    grid;

  place-items:
    center;

  min-height:
    170px;

  margin-bottom:
    12px;

  border:
    1px dashed
    rgba(148,163,184,.4);

  border-radius:
    16px;

  overflow:
    hidden;

  background:
    rgba(2,6,23,.45);
}

.room-person-photo-preview img {
  width:
    150px;

  height:
    150px;

  margin:
    10px;

  border-radius:
    50%;

  object-fit:
    cover;

  border:
    4px solid
    rgba(255,255,255,.9);
}

.room-media-buttons,
.room-idle-media-toolbar {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;
}

.room-media-upload-button,
.room-media-remove-button {
  min-height:
    40px;

  padding:
    0 14px;

  border-radius:
    9px;

  font-weight:
    900;

  cursor:
    pointer;
}

.room-media-upload-button {
  border:
    0;

  background:
    #2563eb;

  color:
    #fff;
}

.room-media-remove-button {
  border:
    1px solid
    rgba(239,68,68,.5);

  background:
    rgba(239,68,68,.12);

  color:
    #fecaca;
}

.room-idle-media-admin {
  margin-top:
    18px;
}

.room-idle-media-count {
  color:
    #94a3b8;

  font-size:
    12px;

  font-weight:
    800;
}

.room-idle-media-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        150px,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    14px;
}

.room-idle-media-item {
  overflow:
    hidden;

  border:
    1px solid
    rgba(148,163,184,.2);

  border-radius:
    12px;

  background:
    rgba(2,6,23,.55);
}

.room-idle-media-item img {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;
}

.room-idle-media-item-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    8px;
}

.room-idle-media-item-footer span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #cbd5e1;

  font-size:
    10px;
}

.room-idle-media-item-footer button {
  border:
    0;

  background:
    transparent;

  color:
    #fca5a5;

  font-size:
    9px;

  font-weight:
    900;

  cursor:
    pointer;
}

.room-media-loading,
.room-media-empty,
.room-media-error {
  padding:
    20px;

  color:
    #94a3b8;

  text-align:
    center;

  font-size:
    12px;
}

.room-media-error {
  color:
    #fca5a5;
}