@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap");

/**
 * Restore missing bottom margin from base elements in CKeditor
 */
.ck-content blockquote,
.ck-content dd,
.ck-content dl,
.ck-content figure,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6,
.ck-content p,
.ck-content pre,
.ck-content ol,
.ck-content ul {
    margin-bottom: 1em;
}

/**
 * Adjust the max-height of the flexblock-item-dropdown.
 * This is a workaround to ensure the dropdown is not cut off by the window.
 * We only apply it to the .max-h-search within the "Inhoud" tab,
 * to be sure no other elements with the same utility class are affected.
 */
div[label="Inhoud"] .max-h-search {
    max-height: 14.75rem;
    /* Originally set to 24.5rem */
}

/**
 * Do not cut off the content container,
 * because content may need to overflow,
 * in case of a dropdown list for example.
 * This is experimental and may cause problems elsewhere.
 */
div[dusk="content"] form .overflow-hidden {
    overflow: visible;
}

div[dusk="content"] form .overflow-hidden {
    overflow: visible;
}

/**
 * Adjust styling of the locale select field to
 * position it correctly in the header on settings pages.
 */
.locale-select-field {
    padding: 0px !important;
    top: -2.5rem;
}

.locale-select-field .form-input {
    padding-right: 1.75rem;
}

/**
 * Hide the "View" button of private attachments.
 * These files do not have a public URL and therefore cannot be viewed, only downloaded.
 */
a[href*="cms.moustacharchogli/intakes"],
a[href*="cms.ibiisadi/intakes"],
a[href*="cms.imojustmove/intakes"] {
    display: none;
}

/**
 * File-type advanced media library fields render help inside .gallery and again
 * in DefaultField. Images use type "media" and only get the outer help (if any).
 */
.gallery > .help-text.mt-2 {
    display: none;
}

/**
 * Nova Dashboard: hide the FILTERS toolbar when a view has no filters configured.
 */
.nova-dashboard-filter:has(.filter__inner:empty) .filter__header {
    display: none;
}

.nova-dashboard-filter:has(.filter__inner:empty) > div:first-child {
    height: auto !important;
    min-height: 2.75rem;
}

/**
 * Make the Chart.js canvas fill the full grid cell height.
 * The LoadingView wrapper uses flex-col/justify-center; overriding it here
 * makes the chart grow to fill the available space rather than centering.
 */
.nova-dashboard .chartjs-widget [dusk="loading-view"] {
    justify-content: flex-start !important;
}

.nova-dashboard
    .chartjs-widget
    [dusk="loading-view"]
    .h-full.rounded.overflow-hidden {
    flex: 1;
    min-height: 0;
}

/**
 * Graphique-inspired Nova 4 chrome.
 * Adapted from yassi/nova-graphique-theme (Nova 1, 2019) for Nova 4 markup.
 */
#app {
    --graphique-navy: #0a3d62;
    --graphique-primary: #82ccdd;
    --graphique-primary-dark: #60a3bc;
    --graphique-border: #efefef;
    --graphique-input-border: #bacad6;
    --graphique-header-bg: #f7f7f7;
    --graphique-muted: #f9f9f9;
    --graphique-heading: #0a3d62;
    --graphique-label: #0a3d62;
    --graphique-sidebar: #0a3d62;
    --graphique-sidebar-active: #60a3bc;
    --graphique-muted-text: #7c858e;
    font-family: "Open Sans", system-ui, sans-serif;
}

html.dark #app {
    --graphique-border: #374151;
    --graphique-input-border: #4b5563;
    --graphique-header-bg: #1f2937;
    --graphique-muted: #1f2937;
    --graphique-heading: #82ccdd;
    --graphique-label: #a8dce8;
    --graphique-sidebar: #d1d5db;
    --graphique-sidebar-active: #82ccdd;
    --graphique-muted-text: #9ca3af;
}

#app .rounded,
#app .rounded-md,
#app .rounded-lg,
#app .rounded-xl {
    border-radius: 0;
}

#app .rounded-full {
    border-radius: 9999px;
}

#app header.h-14 {
    box-shadow: none;
    border-bottom: 2px solid var(--graphique-border);
}

[dusk="content"] > .p-4 {
    border-left: 2px solid var(--graphique-border);
    border-top: 2px solid var(--graphique-border);
}

[dusk="sidebar-menu"] a,
[dusk="sidebar-menu"] button,
[dusk="sidebar-menu"] h3 {
    color: var(--graphique-sidebar);
}

[dusk="sidebar-menu"] a:hover,
[dusk="sidebar-menu"] button:hover {
    background-color: var(--graphique-muted);
}

[dusk="sidebar-menu"] a.font-bold,
[dusk="sidebar-menu"] button.font-bold,
[dusk="sidebar-menu"] h3.font-bold,
[dusk="sidebar-menu"] [data-active-link="true"] {
    color: var(--graphique-sidebar-active);
}

[dusk="sidebar-menu"] span.w-6.h-6:has(svg) {
    display: none;
}

h1[dusk="heading"]:not(:has(button)),
h1[dusk="index-heading"]:not(:has(button)) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 3rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--graphique-heading);
    text-align: center;
}

h1[dusk="heading"]:not(:has(button))::before,
h1[dusk="heading"]:not(:has(button))::after,
h1[dusk="index-heading"]:not(:has(button))::before,
h1[dusk="index-heading"]:not(:has(button))::after {
    content: "";
    flex: 1 1 0%;
    height: 1px;
    background-color: var(--graphique-heading);
}

h1[dusk="heading"]:not(:has(button))::before,
h1[dusk="index-heading"]:not(:has(button))::before {
    margin-right: 2rem;
}

h1[dusk="heading"]:not(:has(button))::after,
h1[dusk="index-heading"]:not(:has(button))::after {
    margin-left: 2rem;
}

#app .relative.overflow-hidden.bg-white.shadow,
#app .bg-white.shadow.rounded-lg,
html.dark #app .relative.overflow-hidden.shadow,
html.dark #app .shadow.rounded-lg {
    border: 2px solid var(--graphique-border);
    box-shadow: none;
    /* Keep overflow visible: nova-menu-builder parks #menu-builder-header
     * at top: -46px, and Nova dropdowns also need to escape the card. */
    overflow: visible;
}

#app .shadow:not(.form-input):not(.form-control),
#app .shadow-md:not(.form-input):not(.form-control),
#app .shadow-lg:not(.form-input):not(.form-control),
#app .shadow-b {
    box-shadow: none;
}

[dusk="resource-table"] thead,
[dusk="resource-table"] thead th {
    background-color: var(--graphique-header-bg);
    border-style: none;
}

[dusk="resource-table"] {
    border-color: var(--graphique-border);
}

#app form label {
    font-weight: 800;
    color: var(--graphique-label);
}

/*
 * Nova 4 draws field chrome with Tailwind rings (box-shadow). Graphique
 * zeroed those shadows; restore a real border so inputs stay visible.
 */
#app .form-control-bordered,
#app .form-input,
#app .form-control:not(button) {
    box-shadow: none;
    outline: none;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    border: 1px solid var(--graphique-input-border);
}

#app .form-control-bordered:focus,
#app .form-control-bordered:focus-within,
#app .form-input:focus,
#app .form-input:focus-within,
#app .form-control:not(button):focus,
#app .form-control:not(button):focus-within,
#app .form-control-focused {
    border-color: var(--graphique-primary-dark);
    box-shadow: none;
    outline: none;
}

#app .bg-primary-500,
#app .bg-primary-500:focus {
    box-shadow: none;
    outline: none;
    text-shadow: none;
}

#app nav.bg-gray-50,
#app .border-t.border-gray-200 {
    background-color: var(--graphique-border);
}

#app .text-80,
#app .o1-text-80 {
    color: var(--graphique-muted-text);
}

#app .text-90,
#app .o1-text-90 {
    color: var(--graphique-heading);
}

#app .handle {
    color: var(--graphique-heading);
}

#menu-builder-header .text-primary-500 {
    color: var(--graphique-heading);
}

/*
 * Disable Nova's cyan focus ring on the header logo and sidebar links.
 * Tailwind `focus:ring` / `ring-primary-200` looks out of place here.
 * Remove this block to restore keyboard focus outlines.
 */
#app header a:focus,
#app header a:focus-visible,
#app [dusk="sidebar-menu"] a:focus,
#app [dusk="sidebar-menu"] a:focus-visible,
#app [dusk="sidebar-menu"] button:focus,
#app [dusk="sidebar-menu"] button:focus-visible,
#app [dusk="sidebar-menu"] h3:focus,
#app [dusk="sidebar-menu"] h3:focus-visible,
#app .max-w-sm a:focus,
#app .max-w-sm a:focus-visible {
    outline: none;
    box-shadow: none;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}

/*
 * Nova DefaultButton / laravel-nova-ui Button use `dark:text-gray-900`.
 * Modals teleport outside #app, so this is not scoped to #app.
 */
html.dark .bg-primary-500,
html.dark .bg-primary-400,
html.dark .hover\:bg-primary-400:hover,
html.dark button.bg-primary-500,
html.dark button.bg-primary-500 span {
    color: #fff !important;
}

/*
 * CKEditor 5 content uses --ck-color-base-text (defaults to black).
 * nova-ckeditor's dark theme never sets that variable, so body copy
 * stays black on a dark editable surface.
 */
html.dark {
    --ck-color-base-text: #e5e7eb;
    --ck-color-text: #e5e7eb;
}

html.dark .ck.ck-editor .ck-editor__editable,
html.dark .ck.ck-editor .ck-content {
    color: #e5e7eb;
    background-color: rgb(17 24 39);
}