/* STARS RCM PRO v4.5.1-uat1 — adaptive comfort + day/night theme */

html {
  color-scheme: dark;
  background: var(--bg, #0a0c10);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c10;
  --surface: #12161c;
  --surface2: #1a1f27;
  --surface3: #222933;
  --border: #262e39;
  --text: #eaeef3;
  --muted: #828d9b;
  --dim: #586170;
  --stars-elevated: #171c24;
  --stars-backdrop: rgba(2, 6, 12, .78);
  --stars-topbar: rgba(10, 12, 16, .91);
  --stars-nav: rgba(10, 12, 16, .96);
  --stars-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface2: #edf2f7;
  --surface3: #e2e8f0;
  --border: #cbd5e1;
  --text: #172033;
  --muted: #536273;
  --dim: #748094;
  --stars-elevated: #f8fafc;
  --stars-backdrop: rgba(31, 41, 55, .48);
  --stars-topbar: rgba(255, 255, 255, .93);
  --stars-nav: rgba(255, 255, 255, .97);
  --stars-shadow: 0 18px 46px rgba(30, 41, 59, .12);
  --stars-accent-text: #795600;

  --pc-bg: #f3f6fa;
  --pc-panel: #ffffff;
  --pc-panel2: #edf2f7;
  --pc-border: #cbd5e1;
  --pc-text: #172033;
  --pc-muted: #536273;
  --pw-bg: #f3f6fa;
  --pw-panel: #ffffff;
  --pw-panel2: #edf2f7;
  --pw-border: #cbd5e1;
  --pw-text: #172033;
  --pw-muted: #536273;
}

html,
body,
.app,
.topbar,
.bottomnav,
.sheet-body,
input,
select,
textarea,
button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

body {
  background: var(--bg);
  color: var(--text);
}

input,
select,
textarea {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: var(--dim);
}

.topbar {
  background: var(--stars-topbar);
}

.bottomnav {
  background: var(--stars-nav);
}

.sheet {
  background: var(--stars-backdrop);
}

.sheet-body {
  background: var(--surface);
  box-shadow: var(--stars-shadow);
}

.stars-theme-toggle {
  position: relative;
  isolation: isolate;
}

.stars-theme-toggle[data-mode="system"]::after {
  content: "A";
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: #171000;
  border: 2px solid var(--surface);
  font-size: 7px;
  font-weight: 950;
}

.stars-theme-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 480;
  transform: translateX(-50%);
  min-width: 190px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--stars-shadow);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  animation: stars-theme-in .18s ease;
}

@keyframes stars-theme-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
}

/* Light-mode compatibility for legacy modules that still contain dark surfaces. */
html[data-theme="light"] .login {
  background: radial-gradient(130% 90% at 50% 0%, #ffffff, #e8eef5 68%);
}

html[data-theme="light"] .card,
html[data-theme="light"] .unit-card,
html[data-theme="light"] .dl-item,
html[data-theme="light"] .profile-section,
html[data-theme="light"] .rcm-card,
html[data-theme="light"] .unit-form-card,
html[data-theme="light"] .en-menu-section,
html[data-theme="light"] .en-detail-card {
  box-shadow: 0 8px 26px rgba(30, 41, 59, .055);
}

html[data-theme="light"] .en-menu-hero {
  background: radial-gradient(120% 120% at 100% 0%, rgba(245, 183, 0, .14), transparent 55%), linear-gradient(145deg, #ffffff, #f7f4eb);
}

html[data-theme="light"] .en-menu-kpis div,
html[data-theme="light"] .rcm-score > div,
html[data-theme="light"] .talent-bio {
  background: rgba(30, 41, 59, .055);
}

html[data-theme="light"] .en-menu-row:active,
html[data-theme="light"] .en-row-icon {
  background: rgba(30, 41, 59, .065);
}

html[data-theme="light"] .urgent-banner {
  background: linear-gradient(135deg, #fff1f2, #ffffff);
}

html[data-theme="light"] .carousel:has(.no-media),
html[data-theme="light"] .no-media {
  background: var(--surface2);
  color: var(--muted);
}

html[data-theme="light"] :is(
  .en-menu-kpis b,
  .rcm-score b,
  .profile-section-head > button,
  .point-num,
  .en-credential a,
  .en-entry-sheet > small
) {
  color: var(--stars-accent-text);
}

html[data-theme="light"] .stars-loader-card {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 48px rgba(30, 41, 59, .16), 0 0 24px rgba(245, 183, 0, .1);
}

html[data-theme="light"] :is(
  .cmp-shell,
  .cmp-content,
  .cmp-register,
  .cmp-plan,
  .cmp-review,
  .cmp-detail,
  .cmp-import-card,
  .fcmp-panel,
  .fcmp-filter-panel,
  .fcmp-report-card,
  .fcmp-detail-section,
  .stars-sync-modal,
  .stars-sync-sheet,
  .stars-sync-row,
  .ufpc-workspace,
  .ufpc-main,
  .ufpc-sidebar,
  .ufpc-modal,
  .ufpc-form-section,
  .sf-item,
  .sf-history button,
  .sf-history > div,
  .sf-followup-list > button,
  .sf-edit-items article
) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="light"] :is(
  .cmp-filter,
  .cmp-detail-grid > div,
  .cmp-form,
  .cmp-form-grid > div,
  .fcmp-detail-grid > div,
  .fcmp-form-section,
  .stars-sync-metrics > div,
  .stars-sync-note,
  .ufpc-embedded,
  .ufpc-titlebar,
  .sf-group > h3,
  .sf-tabs button,
  .sf-reference-only,
  .sf-version-json
) {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="light"] :is(
  .cmp-shell,
  .fcmp-panel,
  .ufpc-workspace,
  .sf-item,
  .stars-sync-modal
) :is(p, small, label) {
  color: var(--muted);
}

html[data-theme="light"] .sf-main-actions {
  background: linear-gradient(transparent, var(--surface) 25%);
}

html[data-theme="light"] .sf-item > p,
html[data-theme="light"] .sf-reference span,
html[data-theme="light"] .sf-followup-list b {
  color: var(--text);
}

html[data-theme="light"] .sf-media a {
  background: var(--surface2);
  border-color: var(--border);
}

/* Touch comfort shared by phones and tablets. */
button,
[role="button"],
.chip,
.tab,
.nav-btn {
  touch-action: manipulation;
}

@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .icon-btn,
  .back-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-btn {
    min-height: 54px;
  }

  .sheet-body {
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }
}

/* Tablet: more information without losing touch-first navigation. */
@media (min-width: 768px) and (max-width: 1023px) {
  .app {
    width: 100%;
    max-width: 960px;
  }

  .bottomnav {
    width: min(100%, 760px);
    max-width: 760px;
  }

  #pageFeed .feed {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  #pageUnits .search-wrap {
    position: sticky;
    top: 56px;
    z-index: 35;
    background: var(--bg);
  }

  #pageUnits .unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 18px;
  }

  .en-menu-page,
  .en-subpage {
    max-width: 820px;
    margin-inline: auto;
  }

  .sheet-body {
    max-width: 720px;
  }
}

/* Desktop: side rail, wider workspace, multi-column data. */
@media (min-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  .app {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 28px 32px 112px;
  }

  .topbar {
    min-height: 64px;
    padding: 10px 18px;
    border-inline: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
  }

  .topbar .tt {
    font-size: 20px;
  }

  .bottomnav {
    left: max(0px, calc((100vw - 1440px) / 2));
    top: 0;
    bottom: auto;
    transform: none;
    width: 88px;
    max-width: none;
    height: 100dvh;
    padding: 18px 8px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    border-top: 0;
    border-right: 1px solid var(--border);
    box-shadow: 10px 0 34px rgba(0, 0, 0, .08);
  }

  .bottomnav::before {
    content: "STARS\A RCM";
    white-space: pre;
    display: grid;
    place-items: center;
    min-height: 56px;
    margin-bottom: 14px;
    color: var(--accent);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 950;
    letter-spacing: 1px;
    text-align: center;
  }

  .nav-btn {
    flex: 0 0 auto;
    width: 70px;
    min-height: 62px;
    padding: 9px 4px;
    border: 1px solid transparent;
    border-radius: 14px;
  }

  .nav-btn:hover {
    background: var(--surface2);
    border-color: var(--border);
  }

  .nav-btn.active {
    background: rgba(245, 183, 0, .1);
    border-color: rgba(245, 183, 0, .38);
  }

  .nav-btn small {
    font-size: 8px;
    margin-top: 6px;
  }

  .nav-plus {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-color: var(--stars-nav);
  }

  #pageFeed > .chips {
    position: sticky;
    top: 64px;
    z-index: 35;
    margin: 14px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--stars-topbar);
    backdrop-filter: blur(14px);
  }

  #pageFeed .feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 0 0 24px;
  }

  #pageFeed .card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    align-self: start;
  }

  #pageUnits .search-wrap {
    position: sticky;
    top: 64px;
    z-index: 35;
    padding: 16px 0 12px;
    background: var(--bg);
  }

  #pageUnits .unit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 0 24px;
  }

  #pageUnits .unit-card {
    min-height: 104px;
    margin: 0;
  }

  .en-menu-page {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 0 32px;
  }

  .en-menu-hero {
    grid-column: span 5;
    margin: 0;
  }

  .en-unit-entry-note {
    grid-column: span 7;
    margin: 0;
  }

  .en-menu-section {
    grid-column: span 6;
    margin: 0;
  }

  .en-logout,
  .en-menu-foot {
    grid-column: 1 / -1;
    margin: 0;
  }

  .en-subpage {
    max-width: 1120px;
    margin-inline: auto;
    padding: 20px 0 36px;
  }

  .sheet {
    align-items: center;
    padding: 28px 28px 28px 112px;
  }

  .sheet-body {
    width: min(860px, calc(100vw - 180px));
    max-width: 860px;
    max-height: calc(100dvh - 56px);
    padding: 20px 24px 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
  }

  .sheet-body .grab {
    display: none;
  }

  :is(.form-2, .fcmp-grid-2, .cmp-form-grid, .ufpc-form-grid) {
    gap: 12px;
  }

  :is(.dsp-table-wrap, .ufpc-table-shell, .sap-table-wrap, .pc-table-wrap) {
    overflow: auto;
    max-width: 100%;
  }

  [class$="-shell"],
  [class*="-shell "] {
    max-width: none;
  }

  .stars-theme-toast {
    left: calc(50% + 44px);
    bottom: 28px;
  }
}

@media (min-width: 1320px) {
  #pageUnits .unit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .app,
  .topbar,
  .bottomnav,
  .sheet-body,
  input,
  select,
  textarea,
  button {
    transition: none !important;
  }
}