/* Variables */

:root {
    --colors-primary-500: 0, 106, 117;
    --colors-primary-400: 119, 192, 68;
    --colors-primary-200: 255, 197, 70;

    --WPC-Dark-Navy: #002839;
    --WPC-Dark-Green: #084F5E;
    --WPC-Dark-Teal: #006A75;
    --WPC-Emerald: #008E54;
    --WPC-Lime: #77C044;
    --WPC-Yellow: #FFC546;
    --WPC-Red: #C02B6C;
    --WPC-White: #fff;
    --WPC-Blue: #0000EE;
}

/* Login screen changes */
#login-body {
    background-color: var(--WPC-Dark-Green);
}

#login-body svg.h-8 {
    height: 3rem;
}

/* nav background colour */
header.bg-white {
    background-color: var(--WPC-Dark-Navy);
}

/* logo size */
header svg.h-6, .w-60 .h-12.px-2.rounded-lg.flex.items-center svg.h-6 {
    height: 3rem;
}

/* avatar dropdown — white name on dark navy header; no persistent yellow focus ring */
header .relative.z-\[40\] [id^="nova-ui-dropdown-button"] {
    box-shadow: none !important;
    color: var(--WPC-White) !important;
    height: 44px;
}

header .relative.z-\[40\] [id^="nova-ui-dropdown-button"] span,
header .relative.z-\[40\] [id^="nova-ui-dropdown-button"] svg {
    color: var(--WPC-White) !important;
}

/* Keep header dropdown panels clear of the notifications bell */
body [dusk="dropdown-teleported"] > [dusk="dropdown-menu"] {
    margin-top: 8px;
}

/* notifications icon colour */
header button[dusk="notifications-dropdown"] {
    color: var(--WPC-Dark-Navy);
    background-color: var(--WPC-Yellow);
    border-radius: 50%;
    margin-top: 0.7rem;
}

header div[dusk="global-search-component"] {
    margin-top: 0.3rem;
}

header div[dusk="global-search-component"] svg {
    top: 0 !important;
    background: var(--WPC-Red);
    height: 32px;
    border-radius: 8px 0 0 8px;
    padding-left: 6px;
    margin-left: 0 !important;
    width: 32px;
    padding-right: 6px;
    color: var(--WPC-White);
}

header input[dusk="global-search"] {
    border-radius: 12px 8px 8px 12px;
}

header input[dusk="global-search"]:focus {
    outline: none;
    box-shadow: none;
}

div[data-testid="content"] > div.w-60 {
    background-color: var(--WPC-Dark-Green);
    color: var(--WPC-White);
    min-height: 100%;
}

.sidebar-menu .relative:first-child .font-bold {
    outline: none;
    --tw-ring-shadow: none;
}


.sidebar-menu .relative .font-bold {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-color: var(--WPC-Lime);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.sidebar-menu button {
    color: var(--WPC-White);
}

/* Nova 5 collapse arrows use text-gray-700 on IconArrow */
.sidebar-menu button .text-gray-700,
.sidebar-menu h4 .text-gray-700,
.sidebar-menu button svg,
.sidebar-menu h4 svg {
    color: var(--WPC-White) !important;
}

.sidebar-menu a, .sidebar-item-title {
    color: var(--WPC-White);
}

.sidebar-menu a:hover, .sidebar-menu button:hover {
    color: var(--WPC-Dark-Green) !important;
}

.sidebar-menu button:hover .text-gray-700,
.sidebar-menu h4:hover .text-gray-700,
.sidebar-menu button:hover svg,
.sidebar-menu h4:hover svg {
    color: var(--WPC-Dark-Green) !important;
}

.sidebar-menu a:focus {
    color: var(--WPC-White);
    box-shadow: none;
}

.p-4.space-y-8 {
    background-color: #dde7ee;
    min-height: 100vh;
}


/* MOBILE */
button[aria-label="Toggle Sidebar"] {
    color: var(--WPC-White);
}

div.bg-white.relative.flex-1.flex.flex-col.max-w-xxs.w-full {
    background-color: var(--WPC-Dark-Green);
}

/* MOBILE SIDEBAR */
.bg-white.dark\:bg-gray-800.relative.flex.flex-col.max-w-xxs.w-full {
    background-color: var(--WPC-Dark-Green);
}

/* MOBILE SIDEBAR LOGO */
.hidden.lg\:w-60.shrink-0.md\:flex.items-center {
    display: flex;
}

header .hidden.lg\:w-60.shrink-0.md\:flex.items-center {
    /* media query for only on mobile */
    @media (max-width: 1023px) {
        width: 0;
    }
}


/* Progress Bars */
.grid.md\:grid-cols-12.gap-6 > div:nth-child(1) .bg-green-500, .grid.md\:grid-cols-12.gap-6 > div:nth-child(1) .bg-yellow-300 {
    background-color: var(--WPC-Red);
}

.grid.md\:grid-cols-12.gap-6 > div:nth-child(2) .bg-green-500, .grid.md\:grid-cols-12.gap-6 > div:nth-child(2) .bg-yellow-300 {
    background-color: var(--WPC-Yellow);
}

.grid.md\:grid-cols-12.gap-6 > div:nth-child(3) .bg-green-500, .grid.md\:grid-cols-12.gap-6 > div:nth-child(3) .bg-yellow-300 {
    background-color: var(--WPC-Emerald);
}


/* Editor JS */
.editor-js-content, .editor-js {
    font-size: 1rem;
    overflow-wrap: normal;
    word-break: normal;
}

.editor-js-embed {
    aspect-ratio: 16/9;
}

.editor-js-image img {
    max-height: 600px;
}

.editor-js-content ul, .editor-js-content ol {
    margin: 0;
    padding-left: 40px;
    outline: none;
}

.editor-js-content ul {
    list-style: disc;
}

.editor-js-content ol {
    list-style: decimal;
}

.editor-js-content .editor-js-block {
    padding: 0 !important;
}

.editor-js-content a {
    text-decoration: underline;
    color: var(--WPC-Blue);
}

.editor-js-content a:hover {
    color: var(--WPC-Dark-Navy);
}

/* Style Headings */
.relative h1, .editor-js h1 {
    font-size: 2rem !important;
    line-height: 2rem;
    color: var(--WPC-Dark-Green);
    font-weight: 600 !important;
    margin: 0;
    margin-bottom: 0.75em !important;

    padding: 0.6em 0 3px !important;
    outline: none;

}

.relative h2, .editor-js-content h2, .editor-js h2 {
    font-size: 21px;
    font-weight: 600 !important;
    margin: 0 0 -0.9em !important;
    padding: 1em 0 !important;

    line-height: 1.25em !important;
    outline: none;
}

.editor-js-content h3, .editor-js h3 {
    font-size: 20px;
    font-weight: 600 !important;

    padding: 0.6em 0 3px !important;
    margin: 0 !important;
    line-height: 1.25em !important;
    outline: none;
}

.md\:flex.items-center.mb-3 {
    margin-bottom: 2rem;
}


.relative h4, .editor-js-content h4, .editor-js h4 {
    font-size: 19px;
    color: var(--WPC-Dark-Green);
    font-weight: 600 !important;

    padding: 0.6em 0 3px;
    margin: 0;
    line-height: 1.25em;
    outline: none;
}

.relative h5, .editor-js-content h5, .editor-js h5 {
    font-weight: 600 !important;

    padding: 0.6em 0 3px;
    margin: 0;
    line-height: 1.25em;
    outline: none;
}

/* Style Organisation, Student etc. Rows */
.flex.flex-col.-mx-6.px-6.py-2.space-y-2 {
    font-size: 1rem;
}

/* No small text */
body .text-sm {
    font-size: 1rem;
}


.ce-toolbar__plus {
    background-color: var(--WPC-Lime) !important;
    color: var(--WPC-White) !important;
}

/* Nova 5 date fields use w-56 (fixed width); other controls use w-full */
input.form-control[type="date"] {
    width: 100% !important;
    max-width: 100%;
}