@import "./styles.css";

/*******************************************************
 django-parler
 *******************************************************/
div.parler-language-tabs {
    @apply flex
    gap-2
    lg:gap-4
    mb-6
    px-4
    py-3
    flex-row
    lg:-mx-4
    m-0
    p-1
    rounded
    text-sm
    bg-base-100
    border-0
    border-b-0
    dark:bg-white/[.04]
    after:hidden;
}

div.parler-language-tabs span {
    @apply top-auto;
}

div.parler-language-tabs span.empty,
div.parler-language-tabs span.available {
    @apply flex
    flex-row
    items-center
    m-0
    px-2.5
    py-1
    rounded
    text-sm
    text-base-400
    font-medium
    bg-transparent
    border-0
    border-transparent
    hover:bg-base-700/[.04]
    hover:text-base-700
    dark:hover:bg-white/[.04]
    dark:hover:text-white;
}

div.parler-language-tabs span.current {
    @apply items-center
    px-2.5
    py-1
    rounded
    text-base-700
    font-medium
    bg-white
    border-transparent
    shadow-sm
    hover:bg-white
    dark:bg-base-900
    dark:text-white
    dark:hover:bg-base-900;
}

/*******************************************************
 versatile image
 *******************************************************/
.sizedimage-mod {
    @apply flex flex-col;
}

.sizedimage-mod img {
    @apply rounded max-h-48 my-4;
}

.sizedimage-mod .ppoi-point {
    @apply rounded-full w-3 h-3 bg-red-600 border-0;
}

.sizedimage-mod .image-wrap.outer {
    @apply border-0;
}

/*******************************************************
 django-cms
 *******************************************************/

/* Prevent content from being hidden under django cms Topbar  */
body.cms-admin-sideframe #page {
    @apply pt-[46px];
}

/* Prevent content from being hidden under django cms Topbar  */
body.cms-admin-sideframe #nav-sidebar-inner {
    @apply pt-[46px];
}

/* Prevent content from being hidden under django cms Topbar  */
#nav-sidebar .simplebar-content-wrapper {
    @apply mt-[46px];
}

/* Reposition Django CMS admin navigation controls  */
div.cms-sideframe {
    @apply !w-[calc(95%-64px)];
}

div.cms-sideframe .cms-sideframe-controls .cms-sideframe-history {
    @apply hidden;
}

/* Reposition Django CMS admin navigation controls  */
div.cms-sideframe .cms-sideframe-controls {
    @apply top-[58px] right-[calc(-5%-64px)];
}

body.cms-admin-sideframe:not(.djangocms-admin-style) {
    margin-block-start: 0;
}

/* Fix Modal displaying django parent admin navigation  */
body.cms-admin-modal #page #main {
    @apply pt-8;
}

/* Hide django submit row in modal  */
body.cms-admin-modal #page #main #submit-row {
    @apply hidden;
}

/* Hide main app side navigation in modal  */
body.cms-admin-modal #page > div.relative:first-child {
    @apply hidden;
}

/* Hide topbar in modal window !*TODO: breaks plugin display *!*/
body.cms-admin-modal #page #main > div:first-child {
    @apply hidden;
}

/* Hide meta navigation (view on site / version) in modal */
body.cms-admin-modal #page #main #content > div:not(#content-main) ul li a {
    @apply hidden;
}

/* Hide language tabs in django cms page content edit */
body #page #main #page_form_lang_tabs {
    @apply hidden;
}

/* Hide submit row in django cms page content edit - use unfold instead */
body #content-main .submit-row {
    @apply hidden;
}



/*******************************************************
 django-cms - pageContentAdmin - Action List
 //This is a workaround until a solution is found to render {% block object-tools-items %}
 *******************************************************/
body #page #main #content > div > ul {
    @apply flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-0 md:mt-0 max-md:w-full;
}

body #page #main #content > div > ul li {
    @apply md:first:rounded-l-default md:-ml-px max-md:last:rounded-b-default max-md:-mt-px border border-base-200 md:last:rounded-r-default dark:border-base-700 hover:text-primary-600 max-md:first:rounded-t-default dark:hover:text-primary-500;
}

body #page #main #content > div > ul li a {
    @apply cursor-pointer flex grow items-center gap-2 px-3 py-2 text-left whitespace-nowrap;
}

/*******************************************************
 django-cms - buttons
 *******************************************************/

div.cms .cms-btn-action {
    @apply text-white;
}

div.cms .cms-btn-caution {
    @apply dark:text-red-500 dark:bg-red-500/20 dark:border-red-500/20;
}

/*******************************************************
 django-cms - toolbars
 *******************************************************/

/* force button text color to white on hover - dark mode */
html[data-theme=dark] div.cms .cms-toolbar-item-navigation .cms-toolbar-item-navigation-hover > a {
    @apply text-white!;
}

/*******************************************************
 django-cms - pagetree
 *******************************************************/
.cms-pagetree-root {
    @apply rounded;
}

.cms-pagetree-header {
    @apply rounded-t;
}

.cms-pagetree-legend {
    @apply rounded-b;
}

div.cms-pagetree-header {
    @apply rounded-t text-primary-600 border-b-[var(--dca-gray-lighter)];
}

div.cms-pagetree-legend {
    @apply rounded-b border-b border-solid border-b-[var(--dca-gray-lighter)];
}

div.cms-pagetree-root {
    @apply !shadow-none;
}

.cms-pagetree-header-filter input {
    @apply bg-white border border-base-200 dark:border-base-600 rounded font-medium grow min-w-0 h-9 px-3 text-font-default-light text-sm focus:outline-none dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400;
}

.cms-pagetree-header-search button.cms-pagetree-header-search-btn {
    @apply cursor-pointer !rounded-full !bg-transparent !text-[var(--color-font-default-light)];
}

.cms-pagetree-header-search button.cms-pagetree-header-search-btn:hover {
    @apply !rounded-full !bg-base-100 text-primary-500;
}

div.cms-pagetree-header a.cms-btn-action {
    @apply !rounded !text-white bg-primary-500;
}

/* When the add button is moved to the Unfold header, hide the CMS inline
   button and remove trailing spacing from the last remaining element. */
.unfold-header-add .cms-pagetree-header-create {
    @apply !hidden;
}

.unfold-header-add .cms-pagetree-sites-list.cms-pagetree-dropdown {
    @apply mr-0 pr-0;
}

input#nav-filter {
    @apply bg-white dark:bg-base-900;
}

/*check & refactor */
.js-cms-pagetree-languages {
    @apply border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 rounded shadow-sm
    text-font-default-light text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none
    group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-base-900 dark:border-base-700
    dark:text-font-default-dark dark:focus:border-primary-600 dark:focus:ring-primary-700
    dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40 px-3 py-2 w-full pr-8 max-w-2xl appearance-none;
}


/*******************************************************
 djangocms-text - plugin
 *******************************************************/
.app-djangocms_text.model-text.change-form fieldset.module > div {
    @apply !border-0 !border-transparent shadow-none;
}

.app-djangocms_text.model-text.change-form #content {
    @apply max-w-full;
}

.cms-editor-inline-wrapper > div {
    @apply  border border-base-200 rounded-2xl !p-4 min-h-80 shadow-xs
}

textarea.CMS_Editor + div#id_body_editor.fixed {
    @apply mt-4;
}

textarea.CMS_Editor + div#id_body_editor.fixed .cms-toolbar[role=menubar] {
    @apply bg-base-50 dark:bg-base-800 p-4 rounded-2xl border-0 mb-16 mt-16;
}

textarea.CMS_Editor + div#id_body_editor.fixed .cms-toolbar[role=menubar] > * {
    @apply bg-transparent space-x-4 p-2 mx-1 my-2 rounded-lg;
}

textarea.CMS_Editor + div#id_body_editor.fixed .tiptap.ProseMirror {
    @apply !overflow-y-visible;
}

textarea.CMS_Editor + div#id_body_editor.fixed .tiptap.ProseMirror a[href] {
    @apply underline;
}

textarea.CMS_Editor + div#id_body_editor.fixed .tiptap-separator:empty {
    @apply p-0;
}

textarea.CMS_Editor + div#id_body_editor.fixed .cms-toolbar .dropdown-content {
    @apply border-base-200 dark:border-base-700 rounded-2xl shadow-2xl;
}

textarea.CMS_Editor + div#id_body_editor.fixed .cms-linkfield-wrapper input {
    @apply border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 rounded-default shadow-xs text-font-default-light text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 group-[.errors]:border-red-600 focus:group-[.errors]:outline-red-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:outline-red-500 dark:scheme-dark group-[.primary]:border-transparent px-3 py-2 w-full max-w-2xl;
}

textarea.CMS_Editor + div#id_body_editor.fixed .cms-linkfield-wrapper select {
    @apply border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 rounded-default shadow-xs text-font-default-light text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 group-[.errors]:border-red-600 focus:group-[.errors]:outline-red-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:outline-red-500 dark:scheme-dark group-[.primary]:border-transparent px-3 py-2 w-full pr-8 max-w-2xl appearance-none;
}

/*******************************************************
 django-cms - djangocms-versioning
 *******************************************************/

button.djangocms-versioning.submit {
    @apply mx-10 m-5 border border-base-200 cursor-pointer font-medium px-3 py-2 rounded-default transition-all w-full hover:bg-base-50 lg:block lg:w-auto dark:border-base-700  dark:hover:text-base-200 dark:hover:bg-base-900;
}

/*******************************************************
 django-cms - theme
 *******************************************************/

/* django cms colors for light/dark/system */
html:root {
    --dca-light-mode: 1;
    --dca-dark-mode: 0;
    --dca-white: theme('colors.white');
    --dca-black: theme('colors.black');
    --dca-shadow: theme('colors.base.950');
    --dca-primary: theme('colors.primary.600') !important;
    --dca-gray: theme('colors.base.500');
    --dca-gray-lightest: theme('colors.base.100');
    --dca-gray-lighter: theme('colors.base.200');
    --dca-gray-light: theme('colors.base.400');
    --dca-gray-darker: theme('colors.base.700');
    --dca-gray-darkest: theme('colors.base.800');
    --dca-gray-super-lightest: theme('colors.base.50');
    --active-brightness: 0.9;
    --focus-brightness: 0.95;
}

html.dark,
html:root[data-theme=dark] {
    --dca-light-mode: 0;
    --dca-dark-mode: 1;
    --dca-white: theme('colors.base.900');
    --dca-black: theme('colors.white');
    --dca-shadow: theme('colors.white');
    --dca-primary: theme('colors.primary.600');
    --dca-gray: theme('colors.base.300') !important;
    --dca-gray-lightest: theme('colors.base.700');
    --dca-gray-lighter: theme('colors.base.600');
    --dca-gray-light: theme('colors.base.400');
    --dca-gray-darker: theme('colors.base.200');
    --dca-gray-darkest: theme('colors.base.100');
    --dca-gray-super-lightest: theme('colors.base.800');
    --active-brightness: 2;
    --focus-brightness: 1.5;
}

@media (prefers-color-scheme: dark) {
    html:root:not([data-theme]),
    html:root[data-theme=auto] {
        --dca-light-mode: 0;
        --dca-dark-mode: 1;
        --dca-white: theme('colors.base.900');
        --dca-black: theme('colors.white');
        --dca-shadow: theme('colors.white');
        --dca-primary: theme('colors.primary.600') !important;
        --dca-gray: theme('colors.base.300');
        --dca-gray-lightest: theme('colors.base.700');
        --dca-gray-lighter: theme('colors.base.600');
        --dca-gray-light: theme('colors.base.400');
        --dca-gray-darker: theme('colors.base.200');
        --dca-gray-darkest: theme('colors.base.100');
        --dca-gray-super-lightest: theme('colors.base.800');
        --active-brightness: 2;
        --focus-brightness: 1.5;
    }
}