*{box-sizing:border-box}
html,body,#screen{margin:0;width:100%;height:100%;background:#000;color:#fff;overflow:hidden;font-family:Arial,sans-serif}
#slides{position:absolute;inset:0;background:#000}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.slide.active{opacity:1}
#channelLogo{position:fixed;right:24px;top:18px;z-index:55;width:min(460px,29vw);min-width:280px;pointer-events:none}
#channelLogo img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.75))}
#clock{position:fixed;right:24px;bottom:18px;z-index:55;text-align:right;color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.95);font-weight:800;line-height:1.05;letter-spacing:.2px}
#clock .time{font-size:clamp(30px,3.1vw,54px);font-weight:900}
#clock .date{margin-top:6px;font-size:clamp(14px,1.15vw,21px);font-weight:700;opacity:.98}
#alert{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;padding:8vw;background:rgba(0,0,0,.94);font-size:clamp(32px,6vw,90px);font-weight:800}
#sidebar{position:fixed;right:0;top:0;bottom:0;width:min(360px,34vw);z-index:20;background:rgba(10,15,25,.92);padding:78px 18px 60px;overflow:auto;transition:transform .3s ease}
#sidebar[hidden]{display:none}
.side-title{font-size:18px;font-weight:800;margin:0 0 10px}
.side-section{margin-bottom:24px}
.side-item{background:rgba(255,255,255,.08);border-radius:10px;padding:12px;margin:8px 0}
.side-item strong{display:block}
.side-item small{display:block;margin-top:5px;opacity:.75}

#settingsButton{position:fixed;right:28px;top:calc(18px + min(460px,29vw) * .32);z-index:60;border:0;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font:600 14px Arial,sans-serif}
#settingsButton:hover{background:rgba(0,0,0,.82)}
.settings-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}
.settings-backdrop[hidden]{display:none}
.settings-card{width:min(520px,92vw);max-height:90vh;overflow:auto;background:#fff;color:#111;border-radius:18px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.settings-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.settings-header h2{margin:0;font-size:28px}
.settings-header p{margin:6px 0 0;color:#666}
.settings-close{border:0;background:#eee;color:#111;width:38px;height:38px;border-radius:50%;font-size:25px;line-height:1;cursor:pointer}
.settings-grid{margin-top:22px;border-top:1px solid #ddd}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid #ddd;font-size:16px}
.setting-row span{color:#555}
.setting-row strong{font-weight:700}
.setting-row select{font:inherit;padding:8px 10px;border:1px solid #bbb;border-radius:8px;background:#fff;color:#111}
.connected{color:#16803c!important}
.offline{color:#c62828!important}
.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.settings-actions button{border:0;border-radius:10px;padding:11px 15px;background:#111;color:#fff;cursor:pointer;font-weight:700}
.settings-actions button:hover{opacity:.86}


/* AAROMA dynamic sidebar additions */
.message-priority {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.priority-urgent {
  border-left: 4px solid #ef4444;
}

.priority-medium {
  border-left: 4px solid #facc15;
}

.priority-normal {
  border-left: 4px solid #22c55e;
}

.called-item {
  text-align: center;
}

.called-number {
  display: block;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: .04em;
}

#messagesSection[hidden],
#appointmentsSection[hidden],
#todosSection[hidden],
#lastCalledSection[hidden] {
  display: none;
}

/* FINAL AAROMA RIGHT PANEL LAYOUT */
#sidebar {
  right: 24px;
  top: 210px;
  bottom: 115px;
  width: min(390px, 32vw);
  padding: 16px;
  border-radius: 18px;
  background: rgba(245, 248, 252, 0.97);
  color: #111827;
  z-index: 45;
  overflow-y: auto;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
}

.side-section {
  margin-bottom: 18px;
}

.side-title {
  color: #163a67;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.side-item {
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  padding: 14px;
  margin: 9px 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.10);
}

.side-item strong {
  color: #111827;
  font-size: 17px;
  line-height: 1.3;
}

.side-item small {
  color: #4b5563;
  opacity: 1;
}

.message-priority {
  font-weight: 900;
  font-size: 11px;
}

.priority-urgent {
  border-left: 6px solid #dc2626;
  background: #fff1f2;
}

.priority-medium {
  border-left: 6px solid #f59e0b;
  background: #fffbeb;
}

.priority-normal {
  border-left: 6px solid #16a34a;
  background: #f0fdf4;
}

.called-item {
  text-align: center;
  background: #eaf4ff;
  border: 2px solid #2d7fd3;
}

.called-number {
  color: #1766ad !important;
  font-size: clamp(34px, 3.4vw, 54px) !important;
  font-weight: 900;
}

@media (max-width: 900px) {
  #sidebar {
    width: min(340px, 42vw);
    top: 180px;
    bottom: 105px;
  }
}

/* AAROMA SIDEBAR COLOR OVERRIDE */
#sidebar {
  background: #f4f7fb !important;
  color: #111827 !important;
}

#sidebar .side-title {
  color: #123b68 !important;
}

#sidebar .side-item {
  background: #ffffff !important;
  color: #111827 !important;
}

#sidebar .side-item strong {
  color: #111827 !important;
}

#sidebar .side-item small {
  color: #4b5563 !important;
  opacity: 1 !important;
}

#sidebar .priority-urgent {
  background: #fff1f2 !important;
  border-left: 6px solid #dc2626 !important;
}

#sidebar .priority-medium {
  background: #fffbeb !important;
  border-left: 6px solid #f59e0b !important;
}

#sidebar .priority-normal {
  background: #f0fdf4 !important;
  border-left: 6px solid #16a34a !important;
}

#sidebar .message-priority {
  color: #374151 !important;
}

#sidebar .called-item {
  background: #eaf4ff !important;
  border: 2px solid #2d7fd3 !important;
}

#sidebar .called-number {
  color: #1766ad !important;
}

/* =========================================================
   AAROMA DISPLAY — FINAL SIDEBAR VISIBILITY FIX
   ========================================================= */

html body #screen #sidebar {
  background: rgba(244, 247, 251, 0.98) !important;
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body #screen #sidebar .side-title {
  color: #163a67 !important;
  opacity: 1 !important;
}

html body #screen #sidebar .side-item {
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
}

html body #screen #sidebar .side-item strong {
  color: #111827 !important;
  opacity: 1 !important;
}

html body #screen #sidebar .side-item small {
  color: #4b5563 !important;
  opacity: 1 !important;
}

html body #screen #sidebar .priority-urgent {
  background: #fff1f2 !important;
  color: #111827 !important;
  border-left: 6px solid #dc2626 !important;
}

html body #screen #sidebar .priority-medium {
  background: #fffbeb !important;
  color: #111827 !important;
  border-left: 6px solid #f59e0b !important;
}

html body #screen #sidebar .priority-normal {
  background: #f0fdf4 !important;
  color: #111827 !important;
  border-left: 6px solid #16a34a !important;
}

html body #screen #sidebar .message-priority {
  color: #374151 !important;
  opacity: 1 !important;
}


/* Hide inactive full-screen alert correctly */
#alert[hidden] {
  display: none !important;
}

/* =========================================================
   AAROMA DISPLAY ONLY — FINAL LAYOUT
   ========================================================= */

#screen {
  background: #000 !important;
}

/* Full-screen media area */
#slides {
  position: fixed !important;
  inset: 0 !important;
  background: #000 !important;
  transition: right .25s ease !important;
}

/* When sidebar exists, reserve room for it */
#screen.has-sidebar #slides {
  right: min(390px, 32vw) !important;
}

.slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Smaller TV watermark */
#channelLogo {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  width: min(220px, 15vw) !important;
  min-width: 115px !important;
  z-index: 80 !important;
  opacity: .68 !important;
  pointer-events: none !important;
}

#channelLogo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Clock stays bottom-right */
#clock {
  position: fixed !important;
  right: 22px !important;
  bottom: 16px !important;
  z-index: 85 !important;
}

/* Sidebar */
#sidebar {
  position: fixed !important;
  top: 115px !important;
  right: 18px !important;
  bottom: 112px !important;
  width: min(360px, 30vw) !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: rgba(244,247,251,.97) !important;
  color: #111827 !important;
  overflow-y: auto !important;
  z-index: 45 !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.35) !important;
}

#sidebar[hidden],
.side-section[hidden] {
  display: none !important;
}

/* Idle screen */
#idleScreen {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #000 !important;
  z-index: 15 !important;
}

#idleScreen[hidden] {
  display: none !important;
}

#idleScreen img {
  display: block !important;
  width: min(34vw, 520px) !important;
  max-width: 72vh !important;
  height: auto !important;
}

/* Full-screen overlays */
.full-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 7vw !important;
}

.full-overlay[hidden] {
  display: none !important;
}

.overlay-inner {
  width: min(1200px, 90vw) !important;
}

/* Urgent full-screen */
.urgent-overlay {
  background:
    radial-gradient(
      circle at center,
      #dc2626 0%,
      #991b1b 78%
    ) !important;
  color: #fff !important;
}

.overlay-label {
  font-size: clamp(48px, 7vw, 112px) !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  margin-bottom: 24px !important;
}

.overlay-message {
  font-size: clamp(34px, 5vw, 82px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

/* Announcements */
.announcement-overlay {
  background: rgba(0,0,0,.96) !important;
  color: #fff !important;
}

/* Queue / call number */
.call-overlay {
  background:
    linear-gradient(
      135deg,
      #071b43,
      #0d4f9a
    ) !important;
  color: #fff !important;
}

.call-window {
  color: #ffd400 !important;
  font-size: clamp(34px, 5vw, 76px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.call-instruction {
  margin-top: 15px !important;
  font-size: clamp(24px, 3vw, 46px) !important;
  font-weight: 800 !important;
}

.call-number {
  margin-top: 18px !important;
  font-size: clamp(100px, 21vw, 330px) !important;
  font-weight: 900 !important;
  line-height: .9 !important;
}

/* Sidebar content */
#sidebar .side-title {
  color: #163a67 !important;
  font-weight: 900 !important;
}

#sidebar .side-item {
  background: #fff !important;
  color: #111827 !important;
}

#sidebar .priority-urgent {
  background: #fff1f2 !important;
  border-left: 6px solid #dc2626 !important;
}

#sidebar .priority-medium {
  background: #fffbeb !important;
  border-left: 6px solid #f59e0b !important;
}

#sidebar .priority-normal {
  background: #f0fdf4 !important;
  border-left: 6px solid #16a34a !important;
}

#sidebar .called-item {
  background: #eaf4ff !important;
  border: 2px solid #2d7fd3 !important;
}

#sidebar .called-number {
  color: #1766ad !important;
  font-weight: 900 !important;
}

/* Responsive */
@media (max-width: 900px) {
  #screen.has-sidebar #slides {
    right: min(330px, 42vw) !important;
  }

  #sidebar {
    width: min(320px, 40vw) !important;
  }

  #channelLogo {
    width: min(175px, 24vw) !important;
  }
}


/* =========================================================
   AAROMA IDLE SCREEN
   ========================================================= */

#idleScreen {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(
      circle at center,
      #0b1220 0%,
      #05080e 55%,
      #000 100%
    ) !important;
  z-index: 15 !important;
}

#idleScreen[hidden] {
  display: none !important;
}

.idle-content {
  text-align: center;
  width: min(760px, 72vw);
}

.idle-content img {
  display: block !important;
  width: min(400px, 29vw) !important;
  max-height: 46vh !important;
  height: auto !important;
  margin: 0 auto 24px !important;
  object-fit: contain !important;
}

.idle-title {
  color: #fff;
  font-size: clamp(34px, 3.5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
}

.idle-subtitle {
  margin-top: 12px;
  color: rgba(255,255,255,.72);
  font-size: clamp(18px, 1.6vw, 27px);
  font-weight: 500;
}

/* AAROMA true full-screen media */
.slide {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

#screen:not(.has-sidebar) #slides {
  inset: 0 !important;
  right: 0 !important;
}


/* =========================================================
   AAROMA ANNOUNCEMENT PRIORITY EXPERIENCE
   ========================================================= */

.announcement-overlay {
  isolation: isolate !important;
  overflow: hidden !important;
}

.announcement-overlay::before,
.announcement-overlay::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
}

.announcement-overlay .overlay-inner {
  position: relative;
  z-index: 5;
  padding: clamp(28px,5vw,72px);
  border-radius: 24px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(3px);
}

.announcement-overlay .overlay-message {
  color: #fff !important;
  text-shadow:
    0 3px 12px rgba(0,0,0,.75),
    0 0 2px #000;
}

/* EMERGENCY — distant red/blue emergency lights */
.announcement-emergency {
  background: #12070a !important;
}

.announcement-emergency::before {
  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(255,0,0,.85),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 50%,
      rgba(0,80,255,.9),
      transparent 28%
    );
  filter: blur(45px);
  animation:
    aaromaEmergencyRedBlue 1.8s ease-in-out infinite;
}

.announcement-emergency::after {
  content: "🆘";
  inset: auto;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(58px,8vw,120px);
  opacity: .9;
  z-index: 1;
}

/* HIGH PRIORITY — dark red */
.announcement-high {
  background:
    linear-gradient(
      135deg,
      #4c0519,
      #7f1d1d,
      #450a0a
    ) !important;
}

/* URGENT — red with amber line */
.announcement-urgent {
  background:
    linear-gradient(
      145deg,
      #991b1b,
      #dc2626
    ) !important;
}

.announcement-urgent::after {
  inset: 0 0 auto 0;
  height: 12px;
  background: #f59e0b;
  z-index: 3;
  box-shadow:
    0 0 24px rgba(245,158,11,.9);
}

/* MEDIUM — black with distant amber pulse */
.announcement-medium {
  background: #030303 !important;
}

.announcement-medium::before {
  background:
    radial-gradient(
      circle at 50% 110%,
      rgba(245,158,11,.85),
      transparent 45%
    );
  filter: blur(55px);
  animation:
    aaromaAmberPulse 2.2s ease-in-out infinite;
}

/* NORMAL — green far-background pulse */
.announcement-normal {
  background: #06110b !important;
}

.announcement-normal::before {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(34,197,94,.65),
      transparent 46%
    );
  filter: blur(55px);
  animation:
    aaromaGreenPulse 2.8s ease-in-out infinite;
}

@keyframes aaromaEmergencyRedBlue {
  0%,100% {
    opacity: .38;
    transform: scale(1);
  }

  25% {
    opacity: .85;
    transform: scale(1.04);
  }

  50% {
    opacity: .42;
    transform: scale(1);
  }

  75% {
    opacity: .9;
    transform: scale(1.05);
  }
}

@keyframes aaromaAmberPulse {
  0%,100% {
    opacity: .25;
    transform: scale(.95);
  }

  50% {
    opacity: .8;
    transform: scale(1.08);
  }
}

@keyframes aaromaGreenPulse {
  0%,100% {
    opacity: .22;
    transform: scale(.96);
  }

  50% {
    opacity: .72;
    transform: scale(1.08);
  }
}

/* Keep text stable/readable even while background pulses */
@media (prefers-reduced-motion: reduce) {
  .announcement-overlay::before {
    animation: none !important;
  }
}


/* =========================================================
   AAROMA DISPLAY AUDIO UNLOCK
   ========================================================= */

.audio-unlock {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 8, 23, .92);
  backdrop-filter: blur(10px);
}

.audio-unlock[hidden] {
  display: none !important;
}

.audio-unlock-card {
  width: min(560px, 86vw);
  padding: 46px 38px;
  border-radius: 26px;
  text-align: center;
  background: #071a3d;
  border: 2px solid #d6a638;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  color: #fff;
}

.audio-icon {
  font-size: 70px;
  line-height: 1;
  margin-bottom: 20px;
}

.audio-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
}

.audio-text {
  margin: 14px 0 28px;
  font-size: clamp(18px, 2vw, 25px);
  color: rgba(255,255,255,.82);
}

#enableAudioButton {
  min-width: 230px;
  padding: 16px 26px;
  border: 0;
  border-radius: 12px;
  background: #d6a638;
  color: #071a3d;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}


/* =========================================================
   AAROMA IDLE SCREEN WALLPAPER
   ========================================================= */

#idleScreen {
  position: fixed !important;
  inset: 0 !important;

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

  background:
    linear-gradient(
      rgba(0, 8, 25, .18),
      rgba(0, 8, 25, .18)
    )
    center center / cover
    no-repeat !important;
}

#idleScreen[hidden] {
  display: none !important;
}

#idleScreen .idle-content {
  position: relative;
  z-index: 5;
  text-align: center;
}

#idleScreen .idle-content img {
  filter:
    drop-shadow(
      0 14px 34px
      rgba(0,0,0,.45)
    );
}


/* AAROMA FINAL CLEAN DISPLAY OVERRIDES */

/*
   EMPTY / NO-MEDIA BACKGROUND
   No large seal.
   No wallpaper logo.
   No baked-in clock.
*/
html,
body,
#screen {
  background: #080d15 !important;
}

#idleScreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;

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

  padding: 48px !important;

  background:
    radial-gradient(
      circle at 45% 42%,
      rgba(34, 45, 60, .30) 0%,
      rgba(13, 20, 30, .18) 40%,
      rgba(5, 9, 15, 0) 72%
    ),
    linear-gradient(
      135deg,
      #111923 0%,
      #090f17 50%,
      #05080d 100%
    ) !important;
}

#idleScreen[hidden] {
  display: none !important;
}

/* Never show the old center seal */
#idleScreen img {
  display: none !important;
}

/*
   Keep only one clean idle message.
*/
#idleScreen .idle-content {
  width: min(760px, 78vw) !important;
  margin: 0 !important;
  text-align: center !important;
}

#idleScreen .idle-title {
  margin: 0 !important;

  font-size: clamp(38px, 4vw, 68px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;

  color: #ffffff !important;
}

#idleScreen .idle-subtitle {
  margin: 14px 0 0 !important;

  font-size: clamp(17px, 1.45vw, 26px) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;

  color: rgba(255,255,255,.78) !important;
}

/*
   When appointment/message/to-do sidebar exists
   without media, keep the same background.
*/
#screen.has-sidebar #idleScreen {
  padding-right: calc(min(390px, 32vw) + 70px) !important;
}

/* =========================================================
   LIVE LOCAL DATE + TIME
   ========================================================= */

#clock {
  position: fixed !important;

  right: 24px !important;
  bottom: 20px !important;

  z-index: 85 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  width: auto !important;
  max-width: min(560px, 48vw) !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: right !important;
  white-space: nowrap !important;

  color: #ffffff !important;

  line-height: 1 !important;
}

#clock .time {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(34px, 3.2vw, 58px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  color: #ffffff !important;
}

#clock .date {
  display: block !important;

  margin: 9px 0 0 !important;
  padding: 0 !important;

  font-size: clamp(14px, 1.15vw, 21px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;

  color: #d7aa3d !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

#sidebar {
  z-index: 45 !important;

  background: rgba(19, 27, 38, .94) !important;
  color: #ffffff !important;

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

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

#sidebar .side-title {
  color: #ffffff !important;
}

#sidebar .side-item {
  background: rgba(3,8,15,.68) !important;
  color: #ffffff !important;
}

/*
   Responsive protection for smaller displays.
*/
@media (max-width: 800px) {

  #screen.has-sidebar #idleScreen {
    padding-right: 42vw !important;
  }

  #clock {
    right: 14px !important;
    bottom: 14px !important;
    max-width: 62vw !important;
  }

  #clock .date {
    white-space: normal !important;
  }
}

/* =========================================================
   AAROMA FULL-SCREEN APPOINTMENT
   Arrival Time -> Start Time
   ========================================================= */

#appointmentOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 64 !important;

  display: grid;
  place-items: center;

  padding: clamp(30px,6vw,90px);

  background:
    linear-gradient(
      135deg,
      #07111f,
      #111827
    ) !important;

  color:#fff;
}

#appointmentOverlay[hidden] {
  display:none !important;
}

.appointment-overlay-card {
  width:min(1050px,88vw);
  text-align:center;
}

.appointment-overlay-heading {
  color:#d7aa3d;
  font-size:clamp(18px,1.8vw,30px);
  font-weight:900;
  letter-spacing:.18em;
}

.appointment-overlay-for {
  margin:20px 0 36px;

  font-size:clamp(42px,5vw,86px);
  line-height:1.05;
  font-weight:900;
}

.appointment-overlay-grid {
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}

.appointment-overlay-grid > div {
  padding:18px 22px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);

  background:rgba(255,255,255,.06);
}

.appointment-overlay-grid span,
.appointment-overlay-grid strong {
  display:block;
}

.appointment-overlay-grid span {
  color:#d7aa3d;
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
}

.appointment-overlay-grid strong {
  margin-top:8px;
  color:#fff;
  font-size:clamp(22px,2.2vw,38px);
}

@media(max-width:800px) {
  .appointment-overlay-grid {
    grid-template-columns:1fr;
  }
}

/* AAROMA DISPLAY VIDEO */

video.slide {
  position:absolute;
  inset:0;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  background:#000;

  opacity:0;
  transition:opacity .7s ease;
}

video.slide.active {
  opacity:1;
}

/* =========================================================
   AAROMA IDLE SEAL — ONLY WHEN NO MEDIA IS DISPLAYED
   ========================================================= */

#idleScreen .idle-seal {
  display: block !important;

  width: min(330px, 28vw) !important;
  max-height: 38vh !important;
  height: auto !important;

  margin: 0 auto 24px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 12px 32px
      rgba(0,0,0,.42)
    ) !important;
}

/*
   Keep the same approved background behind
   the sidebar when there is no picture/video.
*/
#screen.has-sidebar #idleScreen {
  display: grid !important;
  background:
    radial-gradient(
      circle at 45% 42%,
      rgba(34,45,60,.30) 0%,
      rgba(13,20,30,.18) 40%,
      rgba(5,9,15,0) 72%
    ),
    linear-gradient(
      135deg,
      #111923 0%,
      #090f17 50%,
      #05080d 100%
    ) !important;
}

/*
   Never show the idle seal over active photos/videos.
*/
#idleScreen[hidden] .idle-seal {
  display: none !important;
}

@media (max-width: 800px) {
  #idleScreen .idle-seal {
    width: min(270px, 52vw) !important;
  }
}



/* =========================================================
   AAROMA ANNOUNCEMENTS / NEW ARRIVALS DISPLAY
   ========================================================= */

.announcement-content-card {
  width:
    min(1100px, 90vw);

  max-height:
    88vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.announcement-display-type {
  margin-bottom:
    18px;

  padding:
    8px 18px;

  border:
    2px solid
    rgba(255,255,255,.55);

  border-radius:
    999px;

  font-size:
    clamp(
      15px,
      1.5vw,
      24px
    );

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.announcement-display-image {
  display:
    block;

  width:
    min(
      700px,
      72vw
    );

  max-height:
    42vh;

  margin:
    0 auto 22px;

  object-fit:
    contain;

  border-radius:
    18px;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.24);
}


.announcement-display-image[hidden] {
  display:
    none !important;
}


.announcement-display-title {
  margin-bottom:
    15px;

  font-size:
    clamp(
      38px,
      5vw,
      82px
    );

  line-height:
    1.04;

  font-weight:
    900;
}


.announcement-display-title[hidden] {
  display:
    none !important;
}


.announcement-display-message {
  max-width:
    980px;

  font-size:
    clamp(
      24px,
      2.4vw,
      42px
    );

  line-height:
    1.25;

  font-weight:
    700;
}


/*
  New Arrival gets a subtle branded treatment.
  Priority classes continue controlling the
  main overlay color.
*/

.announcement-overlay
.announcement-display-type {
  color:
    #ffffff;
}


.announcement-overlay.announcement-new-arrival
.announcement-display-type::before {
  content:
    "★ ";

  color:
    #f3c35b;
}


/* Smaller displays */

@media (max-width: 800px) {

  .announcement-content-card {
    width:
      92vw;
  }


  .announcement-display-image {
    width:
      min(
        620px,
        82vw
      );

    max-height:
      36vh;
  }
}



/* =========================================================
   AAROMA FULL-SCREEN ANNOUNCEMENT / NEW ARRIVAL V2

   Picture fills television.
   Type badge at top.
   Title and summary sit at bottom.
   ========================================================= */

#announcementOverlay {
  padding:
    0 !important;

  overflow:
    hidden !important;

  background:
    #06120d !important;
}


/*
  Make the announcement content fill
  the complete television viewport.
*/

#announcementOverlay
.announcement-content-card {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    block !important;

  overflow:
    hidden !important;

  border-radius:
    0 !important;

  background:
    #06120d !important;

  text-align:
    left !important;
}


/* =========================================================
   FULL-SCREEN IMAGE
   ========================================================= */

#announcementOverlay
.announcement-display-image {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    1 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  display:
    block !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


#announcementOverlay
.announcement-display-image[hidden] {
  display:
    none !important;
}


/*
  Dark cinematic gradient ensures the
  title is readable regardless of image.
*/

#announcementOverlay
.announcement-content-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.02) 42%,
      rgba(0,0,0,.20) 61%,
      rgba(0,0,0,.76) 82%,
      rgba(0,0,0,.94) 100%
    );
}


/* =========================================================
   NEW ARRIVAL / ANNOUNCEMENT BADGE
   ========================================================= */

#announcementOverlay
.announcement-display-type {
  position:
    absolute !important;

  top:
    clamp(
      28px,
      4vh,
      58px
    ) !important;

  left:
    clamp(
      34px,
      4vw,
      78px
    ) !important;

  z-index:
    4 !important;

  margin:
    0 !important;

  padding:
    clamp(
      10px,
      1.1vw,
      17px
    )
    clamp(
      19px,
      2.2vw,
      34px
    ) !important;

  display:
    inline-flex !important;

  align-items:
    center;

  width:
    auto !important;

  border:
    2px solid
    rgba(232,190,76,.95) !important;

  border-radius:
    999px !important;

  background:
    rgba(5,18,13,.84) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.30) !important;

  backdrop-filter:
    blur(10px);

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

  font-size:
    clamp(
      17px,
      1.7vw,
      30px
    ) !important;

  line-height:
    1 !important;

  font-weight:
    900 !important;

  letter-spacing:
    .11em !important;

  white-space:
    nowrap;
}


/*
  Gold star only for New Arrival.
*/

#announcementOverlay.announcement-new-arrival
.announcement-display-type::before {
  content:
    "★";

  display:
    inline-block;

  margin-right:
    .55em;

  color:
    #efc24c;

  font-size:
    1.1em;
}


/* =========================================================
   BOTTOM INFORMATION PANEL
   ========================================================= */

#announcementOverlay
.announcement-display-bottom {
  position:
    absolute !important;

  left:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  z-index:
    4 !important;

  padding:
    clamp(
      26px,
      4vh,
      58px
    )
    clamp(
      38px,
      5vw,
      92px
    )
    clamp(
      32px,
      5vh,
      70px
    ) !important;

  background:
    linear-gradient(
      to top,
      rgba(2,8,6,.94),
      rgba(2,8,6,.73) 60%,
      rgba(2,8,6,0)
    );
}


/* Gold accent line */

#announcementOverlay
.announcement-display-bottom::before {
  content:
    "";

  display:
    block;

  width:
    clamp(
      72px,
      8vw,
      145px
    );

  height:
    5px;

  margin-bottom:
    clamp(
      13px,
      1.5vh,
      22px
    );

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      #f3c85a,
      #c99328
    );

  box-shadow:
    0 0 15px
    rgba(238,191,72,.3);
}


/* =========================================================
   TITLE
   ========================================================= */

#announcementOverlay
.announcement-display-title {
  position:
    relative !important;

  z-index:
    5 !important;

  max-width:
    92% !important;

  margin:
    0 0
    clamp(
      9px,
      1.2vh,
      18px
    ) !important;

  color:
    #ffffff !important;

  text-shadow:
    0 4px 15px
    rgba(0,0,0,.50);

  font-size:
    clamp(
      46px,
      5.2vw,
      94px
    ) !important;

  line-height:
    .98 !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.025em !important;
}


#announcementOverlay
.announcement-display-title[hidden] {
  display:
    none !important;
}


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

#announcementOverlay
.announcement-display-message {
  position:
    relative !important;

  z-index:
    5 !important;

  max-width:
    min(
      1200px,
      90%
    ) !important;

  margin:
    0 !important;

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

  text-shadow:
    0 3px 12px
    rgba(0,0,0,.48);

  font-size:
    clamp(
      23px,
      2.35vw,
      43px
    ) !important;

  line-height:
    1.25 !important;

  font-weight:
    650 !important;
}


/* =========================================================
   PRIORITY BORDER ACCENTS
   Does not replace your existing priority logic.
   ========================================================= */

#announcementOverlay.announcement-emergency
.announcement-display-type {
  border-color:
    #ff4a4a !important;
}


#announcementOverlay.announcement-high
.announcement-display-type {
  border-color:
    #ff9d32 !important;
}


#announcementOverlay.announcement-urgent
.announcement-display-type {
  border-color:
    #ffd13c !important;
}


/* =========================================================
   TEXT-ONLY ANNOUNCEMENT FALLBACK

   If no image exists, preserve an attractive
   full-screen branded background.
   ========================================================= */

#announcementOverlay
.announcement-display-image[hidden]
~ .announcement-display-bottom {
  background:
    linear-gradient(
      to top,
      rgba(3,25,17,.98),
      rgba(3,25,17,.90)
    );
}


/* =========================================================
   SMALL DISPLAY / TABLET
   ========================================================= */

@media (max-width: 900px) {

  #announcementOverlay
  .announcement-display-type {
    top:
      22px !important;

    left:
      24px !important;
  }


  #announcementOverlay
  .announcement-display-bottom {
    padding:
      26px
      28px
      35px !important;
  }


  #announcementOverlay
  .announcement-display-title {
    max-width:
      100% !important;
  }


  #announcementOverlay
  .announcement-display-message {
    max-width:
      100% !important;
  }
}



/* =========================================================
   AAROMA TV TO-DO LIFECYCLE DISPLAY
   ========================================================= */

.todo-display-item {
  position:
    relative;

  overflow:
    hidden;

  padding:
    15px 16px !important;

  border:
    2px solid
    transparent !important;

  border-radius:
    14px !important;

  transition:
    border-color .2s ease,
    background .2s ease;
}


/* LEFT STATUS STRIPE */

.todo-display-item::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    6px;

  background:
    #2f80ed;
}


/* =========================================================
   TOP STATUS / PRIORITY
   ========================================================= */

.todo-display-topline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  margin-bottom:
    9px;
}


.todo-display-state,
.todo-display-priority {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    5px 8px;

  border-radius:
    999px;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .055em;
}


.todo-display-state.pending {
  color:
    #135da8;

  background:
    #dfeeff;
}


.todo-display-state.due-soon {
  color:
    #855500;

  background:
    #ffe8a8;
}


.todo-display-state.overdue {
  color:
    #ffffff;

  background:
    #d92f2f;
}


.todo-display-state.completed {
  color:
    #176d37;

  background:
    #dff3e5;
}


.todo-display-state.cancelled {
  color:
    #5e6672;

  background:
    #e8ebef;
}


/* PRIORITIES */

.todo-display-priority.urgent {
  color:
    #c91f1f;

  background:
    #ffe1e1;
}


.todo-display-priority.high {
  color:
    #a75a00;

  background:
    #ffead1;
}


.todo-display-priority.normal {
  color:
    #257a43;

  background:
    #e1f3e6;
}


.todo-display-priority.low {
  color:
    #536172;

  background:
    #edf0f4;
}


/* =========================================================
   CONTENT
   ========================================================= */

.todo-display-title {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    19px !important;

  line-height:
    1.2;
}


.todo-display-item
.todo-body {
  display:
    block;

  margin-bottom:
    9px;

  font-size:
    14px;

  line-height:
    1.35;
}


.todo-display-deadline {
  display:
    grid;

  gap:
    4px;

  margin-top:
    8px;

  padding-top:
    8px;

  border-top:
    1px solid
    rgba(30,50,75,.12);
}


.todo-display-deadline small {
  font-size:
    13px;
}


.todo-display-time {
  font-size:
    13px;

  font-weight:
    900;
}


.todo-display-time.due-soon {
  color:
    #b77400;
}


.todo-display-time.overdue {
  color:
    #d92f2f;

  font-size:
    15px;
}


.todo-display-time.completed {
  color:
    #248346;
}


/* =========================================================
   CARD STATES
   ========================================================= */

.todo-display-item.todo-state-pending::before {
  background:
    #2f80ed;
}


.todo-display-item.todo-state-due-soon {
  border-color:
    rgba(235,170,25,.55) !important;

  background:
    #fffaf0 !important;
}


.todo-display-item.todo-state-due-soon::before {
  background:
    #e9a51a;
}


.todo-display-item.todo-state-overdue {
  border-color:
    rgba(217,47,47,.72) !important;

  background:
    #fff2f2 !important;

  box-shadow:
    0 0 0 1px
    rgba(217,47,47,.10),
    0 8px 24px
    rgba(217,47,47,.10) !important;
}


.todo-display-item.todo-state-overdue::before {
  background:
    #d92f2f;
}


.todo-display-item.todo-state-completed {
  border-color:
    rgba(42,151,81,.35) !important;

  background:
    #f4fbf6 !important;
}


.todo-display-item.todo-state-completed::before {
  background:
    #2a9751;
}


.todo-display-item.todo-state-cancelled {
  opacity:
    .62;
}


.todo-display-item.todo-state-cancelled::before {
  background:
    #77808d;
}


/* =========================================================
   TV / LARGE SCREEN
   ========================================================= */

@media (min-width: 1400px) {

  .todo-display-title {
    font-size:
      21px !important;
  }


  .todo-display-item
  .todo-body {
    font-size:
      15px;
  }


  .todo-display-state,
  .todo-display-priority {
    font-size:
      12px;
  }
}



/* =========================================================
   AAROMA FULL-SCREEN TO-DO
   ========================================================= */

.todo-overlay {
  z-index:
    1180 !important;

  display:
    grid;

  place-items:
    center;

  padding:
    clamp(
      70px,
      7vw,
      125px
    );

  background:
    radial-gradient(
      circle at 50% 40%,
      #152437 0%,
      #0a1524 58%,
      #07111e 100%
    );
}


.todo-overlay[hidden] {
  display:
    none !important;
}


.todo-overlay-shell {
  width:
    min(
      1180px,
      82vw
    );

  display:
    grid;

  gap:
    22px;

  text-align:
    center;
}


.todo-overlay-topline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;
}


.todo-overlay-status,
.todo-overlay-priority {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    125px;

  padding:
    9px 16px;

  border-radius:
    999px;

  font-size:
    clamp(
      14px,
      1.1vw,
      19px
    );

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.todo-overlay-label {
  color:
    #eab339;

  font-size:
    clamp(
      21px,
      2vw,
      34px
    );

  font-weight:
    900;

  letter-spacing:
    .24em;
}


.todo-overlay-title {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      54px,
      6.2vw,
      105px
    );

  line-height:
    1;

  font-weight:
    900;
}


.todo-overlay-description {
  max-width:
    980px;

  margin:
    0 auto;

  color:
    #d7deea;

  font-size:
    clamp(
      22px,
      2.1vw,
      36px
    );

  line-height:
    1.35;
}


.todo-overlay-details {
  display:
    grid;

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

  gap:
    18px;

  margin-top:
    15px;
}


.todo-overlay-detail {
  min-height:
    135px;

  display:
    grid;

  place-content:
    center;

  gap:
    10px;

  padding:
    20px;

  border:
    1px solid
    rgba(255,255,255,.19);

  border-radius:
    18px;

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

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


.todo-overlay-detail span {
  color:
    #eab339;

  font-size:
    clamp(
      13px,
      1vw,
      18px
    );

  font-weight:
    900;

  letter-spacing:
    .10em;
}


.todo-overlay-detail strong {
  color:
    #ffffff;

  font-size:
    clamp(
      23px,
      2vw,
      36px
    );

  line-height:
    1.15;
}


/* STATUS COLORS */

.todo-overlay-status {
  color:
    #ffffff;

  background:
    #247be6;
}


.todo-overlay.todo-overlay-due-soon
.todo-overlay-status {
  background:
    #dc9300;
}


.todo-overlay.todo-overlay-overdue
.todo-overlay-status {
  background:
    #d93434;
}


.todo-overlay.todo-overlay-overdue {
  background:
    radial-gradient(
      circle at 50% 40%,
      #31181c 0%,
      #150d13 58%,
      #090c13 100%
    );
}


.todo-overlay.todo-overlay-overdue
.todo-overlay-deadline-card {
  border-color:
    rgba(235,69,69,.68);

  background:
    rgba(185,35,35,.18);
}


.todo-overlay.todo-overlay-overdue
#todoOverlayDeadline {
  color:
    #ff7474;
}


/* PRIORITY COLORS */

.todo-overlay-priority {
  color:
    #185f34;

  background:
    #def3e5;
}


.todo-overlay-priority-urgent
.todo-overlay-priority {
  color:
    #ffffff;

  background:
    #d92e2e;
}


.todo-overlay-priority-high
.todo-overlay-priority {
  color:
    #ffffff;

  background:
    #d87b00;
}


.todo-overlay-priority-low
.todo-overlay-priority {
  color:
    #253446;

  background:
    #dfe5ec;
}


/* PHONE / PORTRAIT SAFETY */

@media (max-width: 760px) {

  .todo-overlay {
    padding:
      70px 20px 30px;
  }


  .todo-overlay-shell {
    width:
      100%;

    gap:
      16px;
  }


  .todo-overlay-details {
    grid-template-columns:
      1fr;
  }


  .todo-overlay-detail {
    min-height:
      95px;
  }
}