/* /css/components.css */

.user-popover-menu {
    position: fixed;
    background-color: var(--apple-card-bg-light);
    border: 1px solid var(--apple-card-border-light);
    border-radius: 0.7rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    z-index: 1050;
    min-width: 160px;
    display: none;
    flex-direction: column;
    padding: 0.4rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.user-popover-menu.show {
    opacity: 1;
    visibility: visible;
    display: flex;
    transform: translateY(5px);
}

.user-popover-menu .popover-link {
    padding: 0.6rem 1rem;
    color: var(--sidebar-text-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
}

[data-bs-theme="dark"] .user-popover-menu {
    background-color: var(--apple-card-bg-dark);
    border-color: var(--apple-card-border-dark);
}

body.sidebar-hidden .user-popover-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.user-popover-menu .popover-link:hover {
    color: var(--apple-accent-color);
    background-color: var(--sidebar-link-hover-bg);
}


.note-actions .btn {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.card-glass,
.header-glass,
.card {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: var(--apple-card-bg-light);
    border: 1px solid var(--apple-card-border-light);
    border-radius: 1rem;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px var(--button-glow);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px var(--button-glow) !important;
}

/* Glassy informational boxes for modals */
.glass-context-box {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .glass-context-box {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .card-glass,
[data-bs-theme="dark"] .header-glass,
[data-bs-theme="dark"] .card {
    background-color: var(--apple-card-bg-dark);
    border: 1px solid var(--apple-card-border-dark);
    box-shadow: 0 6px 20px var(--button-glow);
}

/* Modal styles removed - consolidated in layout.php for priority */





.shimmer-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
    background-size: 200% 100%;
    animation: shimmer 5s infinite linear;
}

[data-bs-theme="dark"] .shimmer-overlay::after {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0));
}


header .navbar .nav-link {
    font-weight: 500;
}

#addNoteBtn {
    font-weight: 500;
}

.btn {
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.25s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* .btn-primary-blue styles are now in templates/theme_styles.php */

.btn:hover {
    box-shadow: 0 0 12px var(--button-glow);
    transform: translateY(-3px);
}

.btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 6px var(--button-glow);
}

/* .btn-primary dark mode override moved to templates/theme_styles.php */

/**
 * btn-primary2 — Uses the template's primary accent color (from settings).
 * Equivalent to btn-primary but always inherits the configured theme color.
 */
.btn-primary2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--apple-accent-color);
    --bs-btn-border-color: var(--apple-accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--apple-accent-color);
    --bs-btn-disabled-border-color: var(--apple-accent-color);
    background-color: var(--apple-accent-color);
    border-color: var(--apple-accent-color);
    color: #fff;
}

.btn-primary2:hover,
.btn-primary2:focus,
.btn-primary2:active,
.btn-primary2.active,
.show>.btn-primary2.dropdown-toggle {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.text-primary,
a {
    color: var(--apple-accent-color);
    text-decoration: none;
}

a {
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
}

header .nav-pills .nav-link {
    font-weight: 500;
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.25s ease, box-shadow 0.2s ease;
    color: var(--sidebar-text-color);
    background-color: transparent;
}

header .nav-pills .nav-link:not(.active):hover {
    background-color: var(--sidebar-link-hover-bg);
    transform: translateY(-2px);
}

header .nav-pills .nav-link.active,
header .nav-pills .show>.nav-link {
    background-color: var(--apple-accent-color);
    color: white;
    font-weight: 600;
    box-shadow: 0 0 12px var(--button-glow);
}

[data-bs-theme="dark"] header .nav-pills .nav-link.active,
[data-bs-theme="dark"] header .nav-pills .show>.nav-link {
    color: #1c1c1e;
}

header .nav-pills .nav-link.active:hover,
header .nav-pills .show>.nav-link:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 0 12px var(--button-glow);
}

#theme-switcher .btn {
    background-color: transparent;
    color: var(--sidebar-text-color);
    box-shadow: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-switcher .btn:hover {
    background-color: var(--sidebar-link-hover-bg);
    transform: none;
    box-shadow: none;
}

#theme-switcher .btn.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] #theme-switcher .btn.active {
    background-color: #495057;
}

/* --- Fix for ugly nav-tabs --- */
.nav-tabs {
    border-bottom: 2px solid var(--apple-card-border);
}

.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--apple-secondary-text);
    padding: 0.5rem 0.2rem;
    margin-right: 1.5rem;
    margin-bottom: -2px;
    /* Aligns border with parent border */

    /* Reset all button-like styles */
    border-radius: 0;
    transform: none;
    box-shadow: none;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    background: transparent;
    border-bottom-color: var(--apple-secondary-text);
    color: var(--apple-text-color);
    transform: none;
    /* Override button hover */
    box-shadow: none;
    /* Override button hover */
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--apple-accent-color);
    border-bottom-color: var(--apple-accent-color);
    font-weight: 600;

    /* Reset all button-like active styles */
    transform: none;
    box-shadow: none;
}

/* --- Mail Test Result Box --- */
.mail-test-result {
    padding: 1rem 1.25rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    word-wrap: break-word;
}

/* Style the <pre> tag with the debug log */
.mail-test-result pre {
    text-align: left;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--apple-card-border);
    padding: 10px;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    /* Wrap long lines */
    word-break: break-all;
}

[data-bs-theme="dark"] .mail-test-result pre {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Glass Pills (Reusable Tab Style) --- */
.nav-pills.glass-pills {
    gap: 0.5rem;
}

.nav-pills.glass-pills .nav-link {
    font-weight: 500;
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.25s ease, box-shadow 0.2s ease;
    color: var(--sidebar-text-color);
    background-color: transparent;
}

.nav-pills.glass-pills .nav-link:not(.active):hover {
    background-color: var(--sidebar-link-hover-bg);
    transform: translateY(-2px);
}

.nav-pills.glass-pills .nav-link.active,
.nav-pills.glass-pills .show>.nav-link {
    background-color: var(--apple-accent-color);
    color: white;
    font-weight: 600;
    box-shadow: 0 0 12px var(--button-glow);
}

[data-bs-theme="dark"] .nav-pills.glass-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills.glass-pills .show>.nav-link {
    color: #1c1c1e;
}

.nav-pills.glass-pills .nav-link.active:hover,
.nav-pills.glass-pills .show>.nav-link:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 0 12px var(--button-glow);
}

/* --- Upload Drop Zone --- */
.upload-drop-zone {
    border: 2px dashed var(--apple-card-border-light);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--apple-card-bg-light);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    height: 100%;
}

[data-bs-theme="dark"] .upload-drop-zone {
    border-color: var(--apple-card-border-dark);
    background-color: var(--apple-card-bg-dark);
}

.upload-drop-zone:hover,
.upload-drop-zone.dragover {
    border-color: var(--apple-accent-color);
    background-color: var(--apple-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.upload-drop-zone.dragover {
    scale: 1.02;
    box-shadow: 0 0 20px var(--button-glow);
}

.upload-drop-zone i.upload-icon {
    font-size: 2.5rem;
    color: var(--apple-accent-color);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.upload-drop-zone.dragover i.upload-icon {
    transform: scale(1.2);
}

.upload-drop-zone .upload-text {
    font-weight: 500;
    color: var(--apple-text-color);
}

.upload-drop-zone .upload-hint {
    font-size: 0.85rem;
    color: var(--apple-secondary-text);
    margin-top: 0.5rem;
}

.upload-drop-zone .preview-container {
    margin-top: 1rem;
    max-width: 100%;
    position: relative;
}

.upload-drop-zone img {
    max-width: 100%;
    max-height: 100px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* === Tagify Theme Enhancements (Apple Glass Style) === */
.tagify {
    --tags-border-color: var(--apple-card-border-light);
    --tags-hover-border-color: var(--apple-accent-color);
    --tags-focus-border-color: var(--apple-accent-color);
    --tag-bg: rgba(var(--bs-primary-rgb), 0.1);
    --tag-hover: rgba(var(--bs-primary-rgb), 0.2);
    --tag-text-color: var(--apple-text-color);
    --tag-remove-btn-color: var(--apple-secondary-text);
    --tag-remove-btn-bg--hover: var(--apple-accent-color);
    --placeholder-color: var(--apple-secondary-text);
    --placeholder-color-focus: var(--apple-placeholder-color);

    border-radius: 0.6rem !important;
    background: transparent;
    padding: 0.3rem 0.5rem;
    border-color: var(--apple-card-border-light) !important;
    transition: all 0.3s ease;
    text-align: left !important;
    /* Forces left alignment even inside centered containers */
}


/* Glass Progress Bar (Modern Slim Theme) */
.glass-progress-wrapper {
    margin-top: 1.5rem;
    padding: 1.25rem 1.75rem 1.5rem 1.75rem;
    /* Balanced padding */
    background: rgba(var(--bs-primary-rgb), 0.03);
    border-radius: 1.25rem;
    border: 1px solid var(--apple-card-border-light);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    height: auto !important;
    min-height: fit-content;
    overflow: visible !important;
}

[data-bs-theme="dark"] .glass-progress-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--apple-card-border-dark);
}

.glass-progress {
    height: 8px !important;
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    border-radius: 50px !important;
    overflow: hidden;
    margin-bottom: 1.25rem;
    /* Increased for better spacing */
    position: relative;
}

.glass-progress-bar {
    height: 100%;
    background-color: var(--apple-accent-color) !important;
    border-radius: 50px;
    box-shadow: 0 0 15px var(--button-glow);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.glass-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

.progress-percent {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--apple-accent-color);
    line-height: normal !important;
}

.upload-progress-text {
    line-height: normal !important;
}

@keyframes shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

[data-bs-theme="dark"] .tagify {
    --tags-border-color: var(--apple-card-border-dark);
    --tag-bg: rgba(255, 255, 255, 0.15);
    --tag-hover: rgba(255, 255, 255, 0.25);
    --tag-text-color: #fff;
    --tag-remove-btn-color: rgba(255, 255, 255, 0.5);
    --placeholder-color: rgba(255, 255, 255, 0.45);
    --placeholder-color-focus: rgba(255, 255, 255, 0.3);

    border-color: var(--apple-card-border-dark) !important;
}

/* Active/Focus state */
.tagify--focus {
    border-color: var(--apple-accent-color) !important;
    box-shadow: 0 0 0 3px var(--button-glow) !important;
}

/* Fix Tagify Placeholder and Input Text in Dark Mode */
.tagify__input {
    color: var(--apple-text-color) !important;
    padding: 0.4rem 0.5rem !important;
}

[data-bs-theme="dark"] .tagify__input {
    color: #fff !important;
}

.tagify__input::before {
    color: var(--placeholder-color) !important;
    font-size: 0.9rem;
    line-height: normal;
}

[data-bs-theme="dark"] .tagify__input::before {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Tagify Dropdown Styling */
.tagify__dropdown {
    background: var(--apple-card-bg-light) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--apple-card-border-light) !important;
    border-radius: 0.8rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    margin-top: 5px;
    overflow: hidden;
    z-index: 9999;
}

[data-bs-theme="dark"] .tagify__dropdown {
    background: var(--apple-card-bg-dark) !important;
    border-color: var(--apple-card-border-dark) !important;
}

.tagify__dropdown__wrapper {
    background: transparent !important;
    border: 0 !important;
}

.tagify__dropdown__item {
    padding: 0.6rem 1rem !important;
    color: var(--apple-text-color) !important;
    transition: all 0.2s ease;
}

.tagify__dropdown__item--active {
    background: var(--apple-accent-color) !important;
    color: #fff !important;
}

/* Glass Table Row Highlighting (Apple Theme) */
.table tr.row-glass-danger td,
.table tr.row-glass-danger th {
    background-color: rgba(255, 59, 48, 0.08) !important;
    color: #ff3b30 !important;
}

.table tr.row-glass-warning td,
.table tr.row-glass-warning th {
    background-color: rgba(255, 159, 10, 0.1) !important;
    color: #ff9f0a !important;
}

.table tr.row-glass-info td,
.table tr.row-glass-info th {
    background-color: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
}

.table tr.row-glass-success td,
.table tr.row-glass-success th {
    background-color: rgba(52, 199, 89, 0.08) !important;
    color: #34c759 !important;
}

[data-bs-theme="dark"] .table tr.row-glass-danger td,
[data-bs-theme="dark"] .table tr.row-glass-danger th {
    background-color: rgba(255, 69, 58, 0.18) !important;
    color: #ff6961 !important;
}

[data-bs-theme="dark"] .table tr.row-glass-warning td,
[data-bs-theme="dark"] .table tr.row-glass-warning th {
    background-color: rgba(255, 214, 10, 0.18) !important;
    color: #ffd60a !important;
}

[data-bs-theme="dark"] .table tr.row-glass-info td,
[data-bs-theme="dark"] .table tr.row-glass-info th {
    background-color: rgba(10, 132, 255, 0.18) !important;
    color: #409cff !important;
}

[data-bs-theme="dark"] .table tr.row-glass-success td,
[data-bs-theme="dark"] .table tr.row-glass-success th {
    background-color: rgba(48, 209, 88, 0.18) !important;
    color: #63ff8b !important;
}

/* Ensure inputs inside these rows remain readable */
.row-glass-danger input,
.row-glass-warning input,
.row-glass-info input,
.row-glass-success input {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="dark"] .row-glass-danger input,
[data-bs-theme="dark"] .row-glass-warning input,
[data-bs-theme="dark"] .row-glass-info input,
[data-bs-theme="dark"] .row-glass-success input {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Dashboard Stat Card Glass Design */
.stat-card-glass {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    overflow: hidden;
}

.stat-card-glass:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.2);
}

.stat-icon-wrapper.bg-soft-primary {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.stat-icon-wrapper.bg-soft-success {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.stat-icon-wrapper.bg-soft-warning {
    background: rgba(255, 159, 10, 0.1);
    color: #ff9f0a;
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--apple-text-color);
    opacity: 0.7;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--apple-text-color);
}

/* Dark mode overrides for stat cards */
[data-bs-theme="dark"] .stat-card-glass {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(28, 28, 30, 0.6) !important;
}

[data-bs-theme="dark"] .stat-icon-wrapper {
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .stat-icon-wrapper.bg-soft-primary {
    background: rgba(10, 132, 255, 0.2);
    color: #409cff;
}

[data-bs-theme="dark"] .stat-icon-wrapper.bg-soft-success {
    background: rgba(48, 209, 88, 0.2);
    color: #63ff8b;
}

[data-bs-theme="dark"] .stat-icon-wrapper.bg-soft-warning {
    background: rgba(255, 214, 10, 0.2);
    color: #ffd60a;
}

[data-bs-theme="dark"] .tagify__dropdown__item--active {
    color: #1c1c1e !important;
}

/* Tagify-styled Wrapper for non-Tagify inputs (like Date) */
.tagify-styled-wrapper {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: auto;
    min-height: 55.6px;
}

.tagify-styled-wrapper:has(textarea) {
    align-items: flex-start;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

[data-bs-theme="dark"] .tagify-styled-wrapper {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12);
}

.tagify-styled-wrapper:focus-within {
    border-color: var(--apple-accent-color) !important;
    box-shadow: 0 0 0 3px var(--button-glow) !important;
}


.tagify-styled-wrapper input,
.tagify-styled-wrapper select,
.tagify-styled-wrapper textarea,
.tagify-styled-wrapper .form-control,
.tagify-styled-wrapper .form-select,
.tagify-styled-wrapper .tagify {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100%;
    color: var(--apple-text-color);
    cursor: pointer;
    font-size: 0.9rem;
    padding-left: 0.5rem !important;
}

/* Add custom arrow for select inside the wrapper */
.tagify-styled-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

[data-bs-theme="dark"] .tagify-styled-wrapper select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Ensure Tagify inside the wrapper doesn't have its own border/bg */
.tagify-styled-wrapper .tagify {
    border: none !important;
    box-shadow: none !important;
    --tags-border-color: transparent !important;
    padding: 0 !important;
}

/* Fix focus state for Tagify inside wrapper to avoid double focus rings */
.tagify-styled-wrapper .tagify--focus {
    box-shadow: none !important;
}

.tagify-styled-wrapper input::placeholder,
.tagify-styled-wrapper select::placeholder,
.tagify-styled-wrapper textarea::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .tagify-styled-wrapper input::placeholder,
[data-bs-theme="dark"] .tagify-styled-wrapper select::placeholder,
[data-bs-theme="dark"] .tagify-styled-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Hide number input spinners for a cleaner look */
.tagify-styled-wrapper input[type=number]::-webkit-inner-spin-button,
.tagify-styled-wrapper input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tagify-styled-wrapper input[type=number] {
    -moz-appearance: textfield;
}

/* ==========================================================================
   Quill Rich Text Editor - Apple Glassmorphism Design System
   ========================================================================== */

.quill-container-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .quill-container-wrapper {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12);
}

.quill-container-wrapper:focus-within {
    border-color: var(--apple-accent-color) !important;
    box-shadow: 0 0 0 3px var(--button-glow) !important;
}

/* --- Quill Toolbar --- */
.quill-container-wrapper .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    background: rgba(0, 0, 0, 0.02);
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-toolbar.ql-snow {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03);
}

.quill-container-wrapper .ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Toolbar Icons */
.quill-container-wrapper .ql-snow .ql-stroke {
    stroke: rgba(60, 60, 67, 0.75);
    transition: stroke 0.15s ease;
}

.quill-container-wrapper .ql-snow .ql-fill {
    fill: rgba(60, 60, 67, 0.75);
    transition: fill 0.15s ease;
}

.quill-container-wrapper .ql-snow .ql-thin {
    stroke: rgba(60, 60, 67, 0.75);
    transition: stroke 0.15s ease;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-stroke {
    stroke: rgba(240, 240, 245, 0.8);
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-fill {
    fill: rgba(240, 240, 245, 0.8);
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-thin {
    stroke: rgba(240, 240, 245, 0.8);
}

/* Toolbar Buttons Hover & Active */
.quill-container-wrapper .ql-toolbar button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.quill-container-wrapper .ql-toolbar button:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-toolbar button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.quill-container-wrapper .ql-toolbar button:hover .ql-stroke,
.quill-container-wrapper .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--apple-accent-color) !important;
}

.quill-container-wrapper .ql-toolbar button:hover .ql-fill,
.quill-container-wrapper .ql-toolbar button.ql-active .ql-fill {
    fill: var(--apple-accent-color) !important;
}

.quill-container-wrapper .ql-toolbar button.ql-active {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
}

/* Pickers & Dropdowns in Toolbar */
.quill-container-wrapper .ql-snow .ql-picker {
    color: var(--apple-text-color);
    font-size: 0.85rem;
    height: 28px;
}

.quill-container-wrapper .ql-snow .ql-picker.ql-header {
    width: 98px;
}

.quill-container-wrapper .ql-snow .ql-picker.ql-size {
    width: 98px;
}

.quill-container-wrapper .ql-snow .ql-picker.ql-align {
    width: 34px;
}

.quill-container-wrapper .ql-snow .ql-picker.ql-color,
.quill-container-wrapper .ql-snow .ql-picker.ql-background {
    width: 28px;
}

.quill-container-wrapper .ql-snow .ql-picker-label {
    border-radius: 6px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
    border: none;
}

.quill-container-wrapper .ql-snow .ql-picker-label:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--apple-accent-color);
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-picker-label:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.quill-container-wrapper .ql-snow .ql-picker-options {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 1060;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-picker-options {
    background-color: rgba(36, 36, 40, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: #f2f2f7 !important;
}

.quill-container-wrapper .ql-snow .ql-picker-item {
    border-radius: 5px;
    padding: 4px 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.quill-container-wrapper .ql-snow .ql-picker-item:hover,
.quill-container-wrapper .ql-snow .ql-picker-item.ql-selected {
    color: var(--apple-accent-color) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* Tooltip for Links & Embeds */
.quill-container-wrapper .ql-snow .ql-tooltip {
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 12px;
    color: var(--apple-text-color);
    z-index: 1070;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-tooltip {
    background-color: rgba(36, 36, 42, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    color: #f2f2f7 !important;
}

.quill-container-wrapper .ql-snow .ql-tooltip input[type=text] {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 4px 8px;
    background: rgba(var(--bs-body-bg-rgb), 0.7);
    color: var(--apple-text-color);
    outline: none;
    font-size: 0.85rem;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-snow .ql-tooltip input[type=text] {
    border-color: rgba(255, 255, 255, 0.2);
}

.quill-container-wrapper .ql-snow .ql-tooltip a.ql-action,
.quill-container-wrapper .ql-snow .ql-tooltip a.ql-preview {
    color: var(--apple-accent-color) !important;
    font-weight: 500;
}

.quill-container-wrapper .ql-snow .ql-tooltip a.ql-remove {
    color: var(--bs-danger, #dc3545) !important;
}

/* --- Quill Editor Container --- */
.quill-container-wrapper .ql-container.ql-snow {
    border: none !important;
    background: transparent !important;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--apple-text-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.quill-container-wrapper .ql-editor {
    flex: 1;
    padding: 12px 14px;
    color: var(--apple-text-color);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.28) transparent;
}

.quill-container-wrapper .ql-editor::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.quill-container-wrapper .ql-editor::-webkit-scrollbar-track {
    background: transparent;
}

.quill-container-wrapper .ql-editor::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.28);
    border-radius: 10px;
}

.quill-container-wrapper .ql-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.55);
}

.quill-container-wrapper .ql-editor.ql-blank::before {
    color: var(--apple-placeholder-color, rgba(60, 60, 67, 0.4));
    font-style: normal;
    left: 14px;
    right: 14px;
}

[data-bs-theme="dark"] .quill-container-wrapper .ql-editor.ql-blank::before {
    color: var(--apple-placeholder-color, rgba(255, 255, 255, 0.35));
}