:root {
    --primary-color: var(--myceo-accent-blue);
    --secondary-color: var(--myceo-accent-blue);
    --accent-color: var(--myceo-status-critical);
    --text-color: var(--myceo-text-primary);
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #666;
    --white: #fff;
    --sidebar-width: 220px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

body {
    color: var(--text-color);
    background-color: var(--myceo-surface-1);
    line-height: 1.6;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--myceo-surface-2);
    color: var(--myceo-text-primary);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.logo-container {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--myceo-surface-1);
}

.logo-image {
    width: 80%;
    max-height: 60px;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--myceo-text-primary);
    display: flex;
    align-items: center;
}

.logo span {
    color: var(--secondary-color);
    margin-left: 5px;
}

.nav-menu {
    padding: 1rem 0;
}

.nav-section {
    margin-bottom: 5px;
}

/* ── Sidebar navigation (MYC-12) ────────────────────────────────────────────
 *
 * Two things were wrong. The hierarchy read BACKWARDS: a section header
 * carried a 4px border plus 15px of padding (text at 19px) while the
 * subsection header under it had padding alone (text at 15px), so "Products"
 * sat four pixels LEFT of the "Operational" it belongs to.
 *
 * And it was styled like page content - large, bold, accent-coloured headings
 * - rather than like a menu. A navigation column competing with the dashboard
 * for attention is a navigation column you read instead of use.
 *
 * One indent scale, each level clearly inside the one above:
 *   section header   20px
 *   subsection       34px
 *   item             34px  (48px when nested in a subsection)
 */

.nav-section-header {
    padding: 10px 15px 10px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--myceo-text-dim);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid transparent;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.nav-section-header:hover,
.nav-section.expanded > .nav-section-header {
    color: var(--myceo-text-primary);
    background-color: transparent;
    border-left-color: var(--myceo-accent-blue);
}

.nav-section-content {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Open on hover for pointers, and on .expanded for touch.
 *
 * Hover alone made the navigation UNUSABLE ON A PHONE: a touch device has no
 * hover, so the sections could never be opened and the dashboards were simply
 * unreachable. That matters more here than upstream - this demo is reached
 * from a marketing site, where a large share of visitors arrive on a phone.
 *
 * main.js toggles .expanded on tap; hover is left intact so desktop behaviour
 * is unchanged. */
.nav-section:hover .nav-section-content,
.nav-section.expanded .nav-section-content {
    height: auto;
}

.nav-item {
    display: block;
    padding: 7px 15px 7px 34px;
    font-size: 0.86rem;
    color: var(--myceo-text-secondary);
    text-decoration: none;
    border-left: 4px solid transparent;
    /* Colour and a rule, not movement. The old hover slid the item 10px to the
       right, which makes a menu feel like it is dodging the pointer. */
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.nav-item:hover {
    color: var(--myceo-text-primary);
    background-color: var(--myceo-surface-2);
}

.nav-item.active {
    color: var(--myceo-text-primary);
    border-left-color: var(--myceo-accent-blue);
    background-color: var(--myceo-surface-2);
}

/* ── Subsections ─────────────────────────────────────────────────────────── */

.nav-subsection { margin: 2px 0 6px; }

.nav-subsection-header {
    /* 34px: inside the 20px section header above it, which is the whole point. */
    padding: 6px 15px 6px 34px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--myceo-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: color 0.2s;
}

.nav-subsection-header:hover { color: var(--myceo-text-primary); }

/* The disclosure arrow never rendered: this was written ".nav-subsection-header:
   :after" - a space between the colons - which is not a pseudo-element, so the
   rule was dropped and the menu had no expand affordance at all. */
.nav-subsection-header::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.nav-subsection.collapsed .nav-subsection-header::after {
    transform: rotate(-45deg);
}

.nav-subsection-content { padding-left: 0; }

.nav-subsection.collapsed .nav-subsection-content { display: none; }

/* One step further in again. */
.nav-subsection-content .nav-item {
    padding: 6px 15px 6px 48px;
    font-size: 0.82rem;
}

.main-content-wrapper {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    display: flex;
    flex-direction: column;
}

header {
    background-color: var(--myceo-surface-1);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--medium-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.user-profile {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--myceo-accent-blue);
    /* Ink must contrast the CIRCLE it sits on, not the page behind it.
       The converter mapped this to the accent as well, giving accent on
       accent at 1:1 - present, correctly themed, and unreadable. */
    color: var(--myceo-bg-core);  /* on the accent circle, not beside it */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
}

.content-container {
    padding: 2rem;
    flex-grow: 1;
}

.page-title {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    border-bottom: 3px solid var(--secondary-color);
    padding-bottom: 10px;
    display: inline-block;
}

.main-content {
    background-color: var(--myceo-surface-1);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-height: 400px;
    padding: 20px;
}

/* ── Landing page (MYC-12) ──────────────────────────────────────────────────
 *
 * Was three emoji on three fixed-width cards that wrapped to a 2 + 1 orphan
 * row. Emoji render as a different vendor's cartoon on every platform, which
 * is the one thing a restrained near-black identity cannot carry.
 *
 * Icons are now line drawings at the same weight as the marketing site's, in
 * currentColor so they follow the theme and the card's hover state without a
 * second rule.
 */
.welcome-message {
    max-width: 720px;
    margin: 8px auto 0;
    text-align: center;
}

.home-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--myceo-text-dim);
    margin-bottom: 14px;
}

/* The display face, as on the marketing site - this is the one line on the
   page carrying the brand rather than describing a feature. */
.home-title {
    font-family: var(--myceo-font-display, Georgia, serif);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--myceo-text-primary);
    margin: 0 0 18px;
}

.home-sub {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--myceo-text-secondary);
    margin: 0;
}

.home-sub strong { color: var(--myceo-text-primary); font-weight: 500; }

/* auto-fit rather than flex-wrap: three fixed 300px cards left an orphan on
   its own row at most widths. */
.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 48px auto 0;
    max-width: 1040px;
    align-items: stretch;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 26px 24px 22px;
    background-color: var(--myceo-surface-2);
    border: 1px solid var(--myceo-border-soft);
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s, background-color 0.35s;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--myceo-accent-blue);
    background-color: var(--myceo-surface-1);
}

.feature-card:focus-visible {
    outline: 2px solid var(--myceo-accent-blue);
    outline-offset: 3px;
}

.feature-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    color: var(--myceo-accent-blue);   /* currentColor drives the SVG strokes */
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--myceo-text-primary);
    margin: 0;
    text-align: left;
}

.feature-card p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--myceo-text-secondary);
    margin: 0;
    text-align: left;
}

/* Reads as a link on hover without being a second thing to click. */
.feature-go {
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--myceo-text-dim);
    transition: color 0.3s;
}

.feature-card:hover .feature-go { color: var(--myceo-accent-blue); }

@media (prefers-reduced-motion: reduce) {
    .feature-card, .feature-card:hover { transition: none; transform: none; }
}

iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--medium-gray);
    border-radius: 6px;
}

footer {
    background-color: var(--myceo-surface-1);
    color: var(--myceo-text-secondary);
    text-align: center;
    padding: 1rem 2rem;
    border-top: 1px solid var(--medium-gray);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.9rem;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--myceo-accent-blue);
    animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Error messages */
  .error-message {
    background-color: rgba(225, 29, 72, 0.12);
    color: var(--myceo-status-critical);
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    text-align: center;
  }
  
  /* Dashboard container styles */
  .dashboard-container {
    padding: 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Style adjustments for embedded dashboards */
  #content-area .dashboard-container {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  /* Make sure dashboard content doesn't overflow */
  .content-container {
    overflow-x: hidden;
  }
/* Access-denied screen (MYC-12). Was two inline styles: a #00205b heading and
   #666 body text, both left over from the upstream identity. On this ground
   they measure 1.24:1 and 3.35:1 - unreadable, and only ever shown at the
   moment someone needs to read why they were refused. Tokens, so they follow
   whichever theme is active. */
.access-denied-title { color: var(--myceo-text-primary); margin-bottom: 8px; }
.access-denied-body  { color: var(--myceo-text-secondary); line-height: 1.6; }

/* ── The mark keeps its dark ground in light mode (MYC-12) ──────────────────
 *
 * myceo_mark.svg is a luminous orb: a glow drawn to sit on near-black. On a
 * white sidebar the glow has nothing to read against and the mark looks washed
 * out and grubby, which is the one thing a logo cannot do.
 *
 * Rather than commission a second mark, the corner it lives in keeps the brand
 * ground in both themes. That is also how the identity actually reads - the
 * marketing site is near-black throughout - so this is the brand asserting
 * itself in the corner, not a patch.
 *
 * Scoped to [data-theme="light"] and the system-light case, because in dark
 * mode the surrounding sidebar is already dark and a separate panel there
 * would just add an edge for no reason.
 */
:root[data-theme="light"] .logo-container {
  background-color: #05070A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
:root[data-theme="light"] .logo-container .myceo-wordmark-tag { color: #7A8FA3; }

/* ── Form controls state BOTH colours, always (MYC-12) ──────────────────────
 *
 * A control that sets neither takes the browser's white field and INHERITS
 * its ink from whatever surrounds it. On a dark theme that is near-white text
 * on white - 1.18:1 - and you cannot see what you are typing. It bit the
 * analyst composer and all four Customer Lookup search boxes, which is the
 * signature of a missing base rule rather than four separate mistakes.
 *
 * Set here so the next input added inherits something sensible; anything with
 * a deliberate treatment overrides it as usual.
 */
input, textarea, select {
  background-color: var(--myceo-surface-2);
  color: var(--myceo-text-primary);
}

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

/* A bare <button> defaults to the browser's grey buttonface, which on this
   ground is a light slab. Visible in the window between a dashboard rendering
   and its own stylesheet arriving - base_style ships with the shell, so this
   covers that gap. Anything with a class of its own still wins. */
button {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
}

/* Card kebab menus start CLOSED, stated in the shell's own stylesheet.
 *
 * dropdown_menu_style.css already hides them, but it arrives with the
 * dashboard - so between a dashboard rendering and its stylesheet loading,
 * every card showed its menu contents: a "Download" button and a stray toggle,
 * on every card at once. That flash is what read as a large download button
 * appearing during load.
 *
 * The feature stylesheet's .active rule is more specific, so it still opens
 * them on click. */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
}

/* ── Loading overlay, defined ONCE (MYC-12) ────────────────────────────────
 *
 * Five dashboards each carried their own .loading-overlay, all of them a
 * near-opaque WHITE sheet: on the dark theme every calculation covered the
 * page in a light slab. Same class, five copies, five chances to miss one -
 * and I did miss four when I fixed the segments overlay.
 *
 * `position` deliberately not set here. Some of these cover a container
 * (absolute, with the container position:relative) and some cover the
 * viewport (fixed), and flattening that difference would move overlays onto
 * the wrong element.
 */
.loading-overlay {
  background: rgba(5, 7, 10, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: var(--myceo-text-primary);
}

:root[data-theme="light"] .loading-overlay { background: rgba(255, 255, 255, 0.9); }

.loading-content { text-align: center; }

/* Retry button injected by main.js when a dashboard fails to load. Was inline
   styles using the upstream brand navy with white ink - the last of the 42
   client-palette literals in the JS. */
.myceo-retry-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--myceo-accent-blue);
  color: var(--myceo-bg-core);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.myceo-retry-btn:hover { opacity: 0.9; }

/* Signed in, waiting on approval (MYC-18). Rendered in place rather than by
   redirecting: their session is valid, so sign-in would bounce them back. */
.access-pending {
    max-width: 34rem;
    margin: 18vh auto;
    padding: 0 1.5rem;
    text-align: center;
    font-family: var(--myceo-font-body, system-ui, sans-serif);
    color: var(--myceo-text-primary, #E6EDF3);
}

.access-pending h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.access-pending p {
    color: var(--myceo-text-secondary, #A8B3C2);
    line-height: 1.6;
}

.access-pending-note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--myceo-text-dim, #6B8299);
}