@media (prefers-color-scheme: dark) {
    /* Body background – very dark amber */
    .app-body {
        min-height: 100vh;
        background: var(--system-black);
    }

    /* Top chrome: app header + sidebar brand strip */
    .app-header,
    #sidebar > div:first-child {
        background-color: var(--company-primary-900);
        border-bottom: 1px solid var(--company-primary-800);
        color: var(--company-primary-100);
    }

    .app-header h1 {
        color: var(--company-primary-100);
    }

    /* Avatar – still brandy, but readable */
    .avatar {
        border: 1px solid var(--system-black);
        background-color: var(--company-secondary-800);
        color: var(--company-secondary-100);
    }

    /* Sidebar body: dark amber panel */
    #sidebar {
        background-color: var(--company-primary-900);
        color: var(--company-primary-100);
    }

    /* Sidebar toggle (mobile) */
    #sidebar-toggle {
        background-color: var(--company-primary-800);
        color: var(--company-primary-100);
        border-color: var(--company-primary-600);
    }

    /* Nav base */
    #sidebar nav {
        color: var(--company-primary-100);
    }

    #sidebar nav a,
    #sidebar nav button {
        color: var(--company-primary-100);
        background-color: transparent;
    }

    /* Hover: slightly lighter amber */
    #sidebar nav a:hover,
    #sidebar nav button:hover {
        background-color: var(--company-primary-800);
        color: var(--company-primary-100);
    }

    /* Active/current item: darker chip + brighter border accent */
    #sidebar nav a.is-active,
    #sidebar nav button.is-active {
        background-color: var(--company-primary-800);
        border-left: 3px solid var(--company-primary-400);
    }

    .app-main header h1 {
        color: var(--company-primary-300);
    }

    .app-main header p {
        color: var(--company-primary-500);
    }


    /* Section labels ("Tickets", "Admin") – lighter amber text */
    #sidebar nav li.mt-3.px-2 {
        color: var(--company-primary-200);
    }

    /* Submenus – keep them visually part of the dark sidebar */
    #sidebar ul[id^="menu-"] {
        background-color: transparent; /* inherit sidebar bg */
    }

    #sidebar ul[id^="menu-"] ul {
        background-color: transparent; /* nested lists too */
    }

    /********* main content *********/
    /* Body background – very dark amber */
    .app-body {
        min-height: 100vh;
        background: var(--system-black);
    }

    /* Top chrome: app header + sidebar brand strip */
    .app-header,
    #sidebar > div:first-child {
        background-color: var(--company-primary-900);
        border-bottom: 1px solid var(--company-primary-800);
        color: var(--company-primary-100);
    }

    .app-header h1 {
        color: var(--company-primary-100);
    }

    /* Avatar – still brandy, but readable */
    .avatar {
        border: 1px solid var(--system-black);
        background-color: var(--company-secondary-800);
        color: var(--company-secondary-100);
    }

    /* Sidebar body: dark amber panel */
    #sidebar {
        background-color: var(--company-primary-900);
        color: var(--company-primary-100);
    }

    /* Sidebar toggle (mobile) */
    #sidebar-toggle {
        background-color: var(--company-primary-800);
        color: var(--company-primary-100);
        border-color: var(--company-primary-600);
    }

    /* Nav base */
    #sidebar nav {
        color: var(--company-primary-100);
    }

    #sidebar nav a,
    #sidebar nav button {
        color: var(--company-primary-100);
        background-color: transparent;
    }

    /* Hover: slightly lighter amber */
    #sidebar nav a:hover,
    #sidebar nav button:hover {
        background-color: var(--company-primary-800);
        color: var(--company-primary-100);
    }

    /* Active/current item: darker chip + brighter border accent */
    #sidebar nav a.is-active,
    #sidebar nav button.is-active {
        background-color: var(--company-primary-800);
        border-left: 3px solid var(--company-primary-400);
    }

    .app-main header h1 {
        color: var(--company-primary-300);
    }

    .app-main header p {
        color: var(--company-primary-500);
    }

    /********* main content *********/
    .ticket-card {
        background-color: var(--company-primary-900);
        border-radius: 0.5rem;
        outline: 1px solid var(--company-primary-800);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    }

    .ticket-card h2 {
        color: var(--company-primary-100);
    }

    .ticket-card p,
    .ticket-card span,
    .ticket-card .text-\[11px\] {
        color: var(--company-primary-300);
    }

    .ticket-card a {
        color: var(--system-blue-400);
    }

    .ticket-card a:hover {
        color: var(--system-blue-300);
    }

    .ticket-card .properties-panel {
        background-color: var(--system-black);
        border-radius: 0.375rem; /* match rounded-md */
        outline: 0;
    }

    .ticket-card .properties-panel h3 {
        color: var(--company-primary-200);
    }

    .ticket-card .properties-panel dt {
        color: var(--company-primary-100);
    }

    .ticket-card .properties-panel dd {
        color: var(--company-primary-300);
    }

    .status-pill {
        background-color: var(--system-blue-800);
        color: var(--system-blue-100);
    }

    .strong-header {
        background-color: var(--company-primary-900);
        border-bottom: 1px solid var(--company-primary-800);
        color: var(--company-primary-100);
    }

    .strong-header select {
        background-color: var(--company-primary-800);
        color: var(--company-primary-100);
        border-color: var(--company-primary-600);
    }

    /* Reply card body in dark mode */
    .reply-body {
        background-color: var(--system-black);
        color: var(--company-primary-100);
    }

    /* The blue "Note!" strip – darker blue on dark bg */
    .reply-body .border-l-4 {
        border-color: var(--system-blue-500);
        background-color: rgba(10, 35, 43, 0.9); /* approx system-blue-900 */
        color: var(--company-primary-100);
    }

    /* Toolbar row */
    .reply-body .border-b {
        border-color: var(--company-primary-800);
    }

    .reply-body select {
        background-color: var(--company-primary-900);
        border-color: var(--company-primary-700);
        color: var(--company-primary-100);
    }

    .reply-body button {
        color: var(--company-primary-100);
    }

    .reply-body button:hover {
        background-color: var(--company-primary-800);
    }

    /* Textarea */
    .reply-body textarea {
        background-color: var(--company-primary-900);
        border-color: var(--company-primary-700);
        color: var(--company-primary-100);
    }

    .reply-body textarea::placeholder {
        color: var(--company-primary-500);
    }

    /* Little footer text "Last updated by..." */
    .reply-body .text-\[11px\] {
    color: var(--company-primary-400);
}


    /********* Buttons **************/
    .btn-primary {
        background-color: var(--system-blue-800);
        color: white;
    }

    .btn-primary:hover {
        background-color: var(--system-blue-700);
    }

    .btn-secondary {
        border: 1px solid var(--company-primary-800);
        background-color: transparent;
        color: var(--company-primary-200);
    }

    .btn-secondary:hover {
        background-color: var(--company-primary-800);
    }


    /********* Buttons **************/
    .btn-primary {
        background-color: var(--system-blue-800);
        color: white;
    }

    .btn-primary:hover {
        background-color: var(--system-blue-700);
    }

    .btn-secondary {
        border: 1px solid var(--company-primary-800);
        background-color: transparent;
        color: var(--company-primary-200);
    }

    .btn-secondary:hover {
        background-color: var(--company-primary-800);
    }
}