/* Custom CSS for Tailwind template */

/*
   *  [ USER BADGES ]
   */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin: 0 0.0rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Default badge */
.badge {
    background-color: #e2e8f0;
    color: #475569;
}

.dark .badge {
    background-color: #334155;
    color: #e2e8f0;
}

/* Primary */
.badge-primary {
    background-color: #6366f1;
    color: #ffffff;
}

.dark .badge-primary {
    background-color: #6366f1;
    color: #ffffff;
}

/* Secondary */
.badge-secondary {
    background-color: #64748b;
    color: #ffffff;
}

.dark .badge-secondary {
    background-color: #475569;
    color: #ffffff;
}

/* Success */
.badge-success {
    background-color: #10b981;
    color: #ffffff;
}

.dark .badge-success {
    background-color: #10b981;
    color: #ffffff;
}

/* Info */
.badge-info {
    background-color: #0ea5e9;
    color: #ffffff;
}

.dark .badge-info {
    background-color: #0ea5e9;
    color: #ffffff;
}

/* Warning */
.badge-warning {
    background-color: #f59e0b;
    color: #1e2937;
}

.dark .badge-warning {
    background-color: #fbbf24;
    color: #1e2937;
}

/* Danger */
.badge-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.dark .badge-danger {
    background-color: #ef4444;
    color: #ffffff;
}

/* Light */
.badge-light {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.dark .badge-light {
    background-color: #1e2937;
    color: #e2e8f0;
    border-color: #334155;
}

/* Dark */
.badge-dark {
    background-color: #1e2937;
    color: #ffffff;
}

.dark .badge-dark {
    background-color: #f8fafc;
    color: #0f172a;
}

/* Hover effects */
a.badge:hover,
a.badge:focus,
.badge:hover,
.badge:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-decoration: none;
}

.dark a.badge:hover,
.dark a.badge:focus,
.dark .badge:hover,
.dark .badge:focus {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/*
   *  [ Pagination ]
   */

.nl-pagination {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nl-pagination-link {
    display: inline-flex;
    min-width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    padding: 0 0.75rem;
    color: rgb(15 23 42);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nl-pagination-link:hover {
    background: rgb(241 245 249);
}

.nl-pagination-link.active {
    border-color: rgb(79 70 229);
    background: rgb(79 70 229);
    color: #fff;
}

.nl-pagination-link.active:hover {
    background: rgb(99 102 241);
}

.nl-pagination-link.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

html.dark .nl-pagination-link {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
    color: rgb(248 250 252);
}

html.dark .nl-pagination-link:hover {
    background: rgb(30 41 59);
}

html.dark .nl-pagination-link.active {
    border-color: rgb(79 70 229);
    background: rgb(79 70 229);
    color: #fff;
}

/*
   *  [ Dark mode icon ]
   */

.fa-moon {
    color: #f1c400;
}

.fa-sun {
    color: #f39c00;
}

/*
 *  [ EMOJI SIZING ]
 */

.joypixels,
.twemoji {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

#reactions {
    margin-top: 1rem;
    padding: .7em 1.2em .7em 1.2em;
    min-height: 32.5px;
    font-size: 12px;
}

/* ====================== TINY MCE DARK MODE FIX ====================== */

/* Main editor container */
body.dark .tox-tinymce {
    border-color: #0b1224 !important;
    box-shadow: none !important;
}

/* Toolbar */
body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__primary > div {
    background-color: #0b1224 !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark .tox .tox-menubar {
    background-color: #0b1224 !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark .tox .tox-toolbar__group {
    background-color: transparent !important;
}

/* Buttons & Icons */
body.dark .tox .tox-tbtn {
    color: #cbd5e1 !important;
}

body.dark .tox .tox-tbtn:hover,
body.dark .tox .tox-tbtn--active {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Menu / Dropdowns */
body.dark .tox .tox-menu {
    background-color: #0b1224 !important;
    border-color: #0e1629 !important;
}

body.dark .tox .tox-collection__item {
    color: #e2e8f0 !important;
}

body.dark .tox .tox-collection__item:hover {
    background-color: #0b1224 !important;
}

/* Editable Area (most important) */
/* Main Content Area - This is the most important part */
body.dark .tox .tox-edit-area__iframe,
body.dark .tox .mce-content-body,
body.dark body.mce-content-body {
    background-color: #020617 !important;
    color: #e2e8f0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

body.dark body.mce-content-body,
body.dark .tox .mce-content-body {
    background-color: #0b1224 !important;   /* slate-900 */
    color: #e2e8f0 !important;              /* slate-200 */
    font-family: system-ui, -apple-system, sans-serif !important;
    line-height: 1.7 !important;
}

/* Headings & Links inside editor */
body.dark .tox .mce-content-body h1,
body.dark .tox .mce-content-body h2,
body.dark .tox .mce-content-body h3 {
    color: #f8fafc !important;
}

body.dark .tox .mce-content-body a {
    color: #6366f1 !important;   /* your indigo */
}

/* Code blocks */
body.dark .tox .mce-content-body pre,
body.dark .tox .mce-content-body code {
    background-color: #0b1224 !important;
    color: #e2e8f0 !important;
}

/* Status bar */
body.dark .tox .tox-statusbar {
    background-color: #0b1224 !important;
    color: #94a3b8 !important;
    border-top: 1px solid #0b1224 !important;
}

/*
   *  [ COOKIE NOTICE ]
   */

.cc-window.cc-floating {
    padding: 1rem 1.5rem;
    background-color: #fff !important;
    color: rgba(0, 0, 0, .68) !important;
    -webkit-box-shadow: 0 1px 3px 0 #bababb, 0 0 1px 1px #bababb;
    box-shadow: 0 1px 3px 0 #bababb, 0 0 1px 1px #bababb;
    border: none;
    border-radius: .28571429rem;
    cursor: default;
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    opacity: 1;
    transition: .5s all ease;
}

/*
   *  [ Select2 ]
   */

.ts-control {
    min-height: 38px !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgb(226 232 240) !important;
    background: rgb(255 255 255) !important;
    color: rgb(15 23 42) !important;

    padding: 6px 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

.ts-wrapper {
    margin-top: 0.5rem;
}

/* Focus */
.ts-wrapper.focus .ts-control {
    border-color: rgb(99 102 241) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15) !important;
}

/* Dropdown */
.ts-dropdown {
    border-radius: 0.75rem !important;
    border: 1px solid rgb(226 232 240) !important;
    background: rgb(255 255 255) !important;
    color: rgb(15 23 42) !important;

    box-shadow:
            0 10px 15px -3px rgba(0,0,0,.1),
            0 4px 6px -4px rgba(0,0,0,.1) !important;

    overflow: hidden;
    z-index: 50;
}

/* Dropdown options */
.ts-dropdown .option {
    padding: 10px 12px;
}

/* Selected tags */
.ts-wrapper.multi .ts-control > div {
    background: rgb(99 102 241) !important;
    color: white !important;

    border-radius: 0.5rem;
    padding: 2px 8px;
    margin: 2px;
}

/* Input inside control */
.ts-control input {
    color: inherit !important;
}

/* Dark mode */
.dark .ts-control {
    background: rgb(11,18,36) !important;
    border-color: rgb(30,41,59) !important;
    color: rgb(241 245 249) !important;
}

.dark .ts-dropdown {
    background: rgb(11,18,36) !important;
    border-color: rgb(30,41,59) !important;
    color: rgb(241 245 249) !important;
}

.dark .ts-dropdown .active {
    background: rgb(30 41 59) !important;
}