:root {
    --m-bg-body: #ffffff;
    --m-card-white: #FFFFFF;
    --m-card-black: #1E1E1E;
    --m-card-yellow: #FBEFBE;
    --m-text-main: #1A1A1A;
    --m-text-muted: #6B7280;
    --m-border: rgba(0, 0, 0, 0.05);

    /* Radii */
    --m-radius-pill: 9999px;
    --m-radius-xl: 2.5rem;
    --m-radius-lg: 1.5rem;
    --m-radius-md: 1rem;

    /* Shadows */
    --m-shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    --m-shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    --m-glass-bg: rgba(255, 255, 255, 0.85);

    /* Premium Selector Variables */
    --m-accent: #4f46e5;
    --m-accent-focus: rgba(79, 70, 229, 0.05);
    --m-accent-lt: #f5f7ff;
    --m-bg-hover: #f9fafb;
    --m-pill-bg: #f3f4f6;

    /* Sidebar active nav item */
    --m-sidebar-active-bg: rgb(var(--color-primary-500) / 0.08);
    --m-sidebar-active-text: rgb(var(--color-primary-600));
}

.dark {
    --m-bg-body: #000000;
    --m-card-white: #1E1E1E;
    --m-text-main: #F8FAFC;
    --m-text-muted: #A1A1AA;
    --m-border: rgba(255, 255, 255, 0.1);
    --m-shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
    --m-glass-bg: rgba(30, 30, 30, 0.85);

    /* Premium Selector Variables */
    --m-accent: rgb(var(--color-primary-500));
    --m-accent-focus: rgba(255, 255, 255, 0.05);
    --m-accent-lt: rgba(255, 255, 255, 0.05);
    --m-bg-hover: rgba(255, 255, 255, 0.03);
    --m-pill-bg: rgba(255, 255, 255, 0.08);

    /* Sidebar active nav item */
    --m-sidebar-active-bg: rgb(var(--color-primary-500) / 0.12);
    --m-sidebar-active-text: rgb(var(--color-primary-400));
}

html.smooth-scroll {
    scroll-behavior: smooth;
}

body {
    font-family: 'Sitka Heading', 'Outfit', sans-serif;
    background: var(--m-bg-body) !important;
    color: var(--m-text-main);
    min-height: 100vh;
    margin: 0;
    overflow-x: clip; /* disable horizontal scrollbar globally without breaking sticky */
}

/* View Transition Animations */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}
.dark::view-transition-old(root) {
  z-index: 2;
}
.dark::view-transition-new(root) {
  z-index: 1;
}

html {
    overflow-x: clip; /* belt-and-suspenders fix */
    background-color: var(--m-bg-body) !important;
}

/* Global Mobile Scale Reset */
@media (max-width: 640px) {
    :root {
        --m-radius-xl: 1.75rem;
        --m-radius-lg: 1.25rem;
    }
    
    body {
        font-size: 15px;
    }

    .m-card, .m-card-dark, .m-card-yellow {
        padding: 1.5rem !important;
    }

    h1 {
        font-size: 2.25rem !important;
        letter-spacing: -0.04em !important;
    }
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

:root {
    --m-rail-width: 80px;
    --m-sidebar-width: 280px;
    --m-topbar-height: 70px;
    --m-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-layout-group {
    display: flex;
    min-height: 100vh;
}

.m-sidebar {
    width: var(--m-rail-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--m-card-white);
    border-right: 1px solid var(--m-border);
    z-index: 1001;
    /* KEY FIX: flex column with no overflow on the container itself */
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem;
    overflow: hidden; /* clips the pushed-out scrollbar */
    box-sizing: border-box;
    /* transition width ONLY */
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    will-change: width, transform;
}

/* Hover-Expand Logic (Desktop Only) */
@media (min-width: 1025px) {
    .m-sidebar:hover,
    .m-sidebar.locked {
        width: var(--m-sidebar-width);
    }
}

/* =============================================
   SIDEBAR LOGO
   ============================================= */
.m-sidebar-logo {
    height: var(--m-topbar-height);
    flex-shrink: 0;
    /* Negative margins to pull the border to the edges of the sidebar */
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 1.25rem; /* 0.75rem from sidebar + 0.5rem original padding */
    padding-right: 1.25rem;
    margin-bottom: 0.5rem; 
    border-bottom: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    overflow: hidden;
    color: var(--m-text-main);
}


.m-sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem; /* tighter — was 0.35rem */
    overflow-y: scroll;  /* always scroll, but bar is pushed outside */
    overflow-x: hidden;
    /* Prevent left-edge clipping for outlines and active states */
    margin-left: -0.5rem;
    padding-left: 0.5rem;
    /* Push scrollbar outside the container — takes zero visual space */
    margin-right: -0.75rem;
    padding-right: 0.75rem;
    /* Completely hide scrollbar on Firefox */
    scrollbar-width: none;
}

/* Completely hide scrollbar on Webkit — zero width, zero space */
.m-sidebar-nav::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* =============================================
   SIDEBAR FOOTER — Fixed at bottom, never scroll
   ============================================= */
.m-sidebar-footer {
    flex-shrink: 0; /* never compress */
    padding-top: 1rem;
    border-top: 1px solid var(--m-border);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Profile Card in Footer */
.m-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 1rem; /* match .m-sidebar-item gap */
    padding: 0 1rem; /* match .m-sidebar-item padding */
    border-radius: 14px;
    transition: background 0.2s;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    color: var(--m-text-main);
    height: 44px; /* exact same height as nav items */
    flex-shrink: 0;
}

.m-sidebar-profile:hover {
    background: var(--m-bg-hover);
}

.m-sidebar-profile-avatar {
    /* Match svg icon dimensions from .m-sidebar-item svg exactly */
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-600)) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.m-sidebar-profile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.m-sidebar-profile-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--m-text-main);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-sidebar-profile-role {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================
   SIDEBAR NAV ITEMS
   ============================================= */
.m-sidebar-item {
    height: 44px;
    flex-shrink: 0;
    padding: 0 1rem;
    border-radius: 12px;
    color: var(--m-text-main);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    box-sizing: border-box;
}

.m-sidebar-item:hover {
    background: var(--m-bg-hover);
    color: var(--m-text-main);
}

.m-sidebar-item.active {
    background: var(--m-sidebar-active-bg);
    color: var(--m-sidebar-active-text);
}

.m-sidebar-item svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    stroke-width: 2.25;
}

/* =============================================
   LABEL TRANSITIONS
   ============================================= */
.m-sidebar-label {
    opacity: 0;
    transition: opacity 0.2s 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1025px) {
    .m-sidebar:hover .m-sidebar-label,
    .m-sidebar.locked .m-sidebar-label {
        opacity: 1;
    }
    .m-sidebar:hover .m-sidebar-profile-info,
    .m-sidebar.locked .m-sidebar-profile-info {
        opacity: 1;
    }
}

.m-sidebar-profile-info {
    opacity: 0;
    transition: opacity 0.2s 0.1s;
}

@media (max-width: 1024px) {
    .m-sidebar-label { opacity: 1; }
    .m-sidebar-profile-info { opacity: 1; }
}

/* Section divider label — zero height when collapsed so no phantom gap */
.m-sidebar-section-label {
    padding: 0 1rem;
    margin-bottom: 0.35rem;
    font-size: 10px;
    font-weight: 800;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    /* When label is hidden (collapsed), collapse its height too */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s 0.1s, margin-bottom 0.2s 0.1s;
    margin-bottom: 0;
}

/* Reveal height only when sidebar is expanded */
@media (min-width: 1025px) {
    .m-sidebar:hover .m-sidebar-section-label,
    .m-sidebar.locked .m-sidebar-section-label {
        max-height: 2rem;
        margin-bottom: 0.35rem;
    }
}

@media (max-width: 1024px) {
    .m-sidebar-section-label {
        max-height: 2rem;
        margin-bottom: 0.35rem;
    }
}



/* =============================================
   UNIFIED TOP BAR
   ============================================= */
.m-top-bar {
    height: var(--m-topbar-height);
    background: var(--m-glass-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 40;
}

@media (max-width: 640px) {
    .m-top-bar {
        padding: 0 0.75rem;
    }
}



/* =============================================
   MOBILE SIDE DRAWER
   ============================================= */
@media (max-width: 1024px) {
    .m-sidebar {
        transform: translateX(-100%);
        width: var(--m-sidebar-width) !important;
        box-shadow: none;
    }
    
    .m-sidebar.active {
        transform: translateX(0);
        box-shadow: 20px 0 100px rgba(0, 0, 0, 0.3);
    }
}

/* =============================================
   CONTENT AREA AUTO-SHIFT
   ============================================= */
.m-main-content {
    flex: 1;
    margin-left: var(--m-rail-width);
    min-width: 0;
    transition: margin-left var(--m-transition);
}

.m-sidebar.locked ~ .m-main-content {
    margin-left: var(--m-sidebar-width);
}

@media (max-width: 1024px) {
    .m-top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 950 !important;
    }

    .m-main-content {
        margin-left: 0 !important;
        padding-top: var(--m-topbar-height) !important;
    }
}

/* =============================================
   CARDS
   ============================================= */
.m-card {
    background: var(--m-card-white);
    border-radius: var(--m-radius-xl);
    box-shadow: var(--m-shadow-card);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

@media (min-width: 640px) {
    .m-card {
        padding: 2rem;
    }
}

.m-card-dark {
    background: var(--m-card-black);
    color: white;
    border-radius: var(--m-radius-xl);
    box-shadow: var(--m-shadow-card);
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .m-card-dark {
        padding: 2rem;
    }
}

.m-card-yellow {
    background: var(--m-card-yellow);
    color: var(--m-text-main);
    border-radius: var(--m-radius-xl);
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .m-card-yellow {
        padding: 2rem;
    }
}

.m-app-wrapper {
    max-width: 2560px;
    margin: 0 auto;
    padding: 1rem 1.25rem 3rem 1.25rem;
}

@media (min-width: 640px) {
    .m-app-wrapper {
        padding: 1rem 2rem 3rem 2rem;
    }
}

/* Main Content Container — used in base.html */
.m-content-container {
    max-width: 2560px;
    margin: 0 auto;
    /* Mobile: generous horizontal padding so nothing bleeds to edges */
    padding: 1rem 1.25rem 0.5rem 1.25rem;
}

@media (min-width: 480px) {
    .m-content-container {
        padding: 1rem 1.75rem 0.5rem 1.75rem;
    }
}

@media (min-width: 640px) {
    .m-content-container {
        padding: 1rem 2rem 0.5rem 2rem;
    }
}

@media (min-width: 1025px) {
    /* Desktop: sidebar (80px rail) is always visible, add extra left breathing room.
       Kept tight through the common 13"-laptop range (1024-1919px) so pages read as
       dense as GitHub/Bitbucket instead of mostly empty padding. */
    .m-content-container {
        padding: 1rem 2rem 0.5rem 2rem;
    }
}

@media (min-width: 1280px) {
    .m-content-container {
        padding: 1rem 2.25rem 0.5rem 2.25rem;
    }
}

@media (min-width: 1920px) {
    /* Only genuinely large monitors get the extra breathing room */
    .m-content-container {
        padding: 1.5rem 3rem 0.5rem 3rem;
    }
}

/* Page header */
.m-page-header {
    margin-bottom: 2.5rem;
}

.m-page-header h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.05em;
    line-height: 0.95;
    margin-bottom: 0.75rem;
}

.m-page-subheader {
    color: #6B7280;
    font-weight: 500;
    font-size: 0.95rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.m-btn {
    border-radius: var(--m-radius-pill);
    font-weight: 600;
    transition: all 0.2s;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m-btn-black {
    background: var(--m-card-black);
    color: white;
}

.m-btn-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =============================================
   TABLES
   ============================================= */
.m-table-container {
    background: white;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-card);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--m-border);
}

/* =============================================
   FORMS & INPUTS
   ============================================= */
form label:not(.flex):not([for*="is_active"]):not([for*="is_staff"]):not([for*="is_superuser"]):not(.form-check-label) {
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    color: #374151 !important;
    margin-bottom: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.mb-3:has(input[type="checkbox"]),
.form-check,
.flex.items-center.mb-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.mb-3:has(input[type="checkbox"]) label,
.form-check label,
.flex.items-center.mb-3 label {
    display: inline-block !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1.25rem !important;
    background-color: #F9FAFB !important;
    border: 1.5px solid #EAECF0 !important;
    border-radius: var(--m-radius-md) !important;
    font-size: 0.9rem !important;
    color: var(--m-text-main) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--m-card-black) !important;
    background-color: white !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04) !important;
}

select {
    padding-right: 3rem !important;
    appearance: none !important; /* remove native OS chrome (arrow, border) */
    -webkit-appearance: none !important;
}

input[type="checkbox"]:not(.sr-only) {
    appearance: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 1.5px solid #D0D5DD !important;
    border-radius: 6px !important;
    background-color: white !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.form-check, 
.flex.items-center.mb-3:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

.form-check label,
.flex.items-center.mb-3:has(input[type="checkbox"]) label {
    display: inline-block !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    color: #4B5563 !important;
}

input[type="checkbox"]:not(.sr-only):checked {
    background-color: rgb(var(--color-primary-600)) !important;
    border-color: rgb(var(--color-primary-600)) !important;
}

input[type="checkbox"]:not(.sr-only):checked::after {
    content: "" !important;
    width: 6px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    margin-bottom: 2px !important;
}

.mb-3:has(input[type="checkbox"]) input[type="checkbox"],
.form-check input[type="checkbox"],
.flex.items-center.mb-3 input[type="checkbox"] {
    order: -1 !important;
}

.help-block,
.text-muted,
[id$="-help-text"] {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    margin-top: 0.5rem !important;
}

.mb-3:has(input[type="checkbox"]) .help-block,
.mb-3:has(input[type="checkbox"]) [id$="-help-text"],
.flex.items-center.mb-3 .help-block {
    width: 100% !important;
    margin-top: 0.25rem !important;
}

.invalid-feedback,
.text-danger,
[id$="-error"],
.m-field-error {
    display: block !important;
    font-family: 'Sitka Heading', 'Outfit', sans-serif !important;
    font-size: 10px !important;
    color: #D92D20 !important;
    margin-top: 0.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    animation: field-error-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.m-input-invalid {
    border-color: #D92D20 !important;
    background-color: #FFFBFA !important;
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.05) !important;
}

.m-label-invalid {
    color: #D92D20 !important;
}

@keyframes field-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mb-3 {
    margin-bottom: 1.5rem !important;
}

.asteriskField {
    color: #D92D20 !important;
    margin-left: 2px !important;
}

/* =============================================
   CUSTOM THIN SCROLLBAR (global utility)
   ============================================= */
.scrollbar-thin::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* =============================================
   DARK MODE OVERRIDES & CORRECTIONS
   ============================================= */
.dark .m-page-header h1 {
    color: #F8FAFC !important;
}

.dark .m-page-subheader {
    color: #94A3B8 !important;
}

/* Django Crispy Form & Label adjustments */
.dark form label:not(.flex):not([for*="is_active"]):not([for*="is_staff"]):not([for*="is_superuser"]):not(.form-check-label) {
    color: #94A3B8 !important;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="url"],
.dark input[type="tel"],
.dark input[type="date"],
.dark select,
.dark textarea {
    background-color: #1E1E1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #F8FAFC !important;
}

.dark input:disabled,
.dark input[disabled],
.dark select:disabled,
.dark textarea:disabled {
    background-color: rgba(30, 30, 30, 0.5) !important;
    color: #64748B !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
    -webkit-text-fill-color: #64748B !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: rgb(var(--color-primary-500)) !important;
    background-color: #09090B !important;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-500), 0.15) !important;
}

.dark input[type="checkbox"]:not(.sr-only) {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: #1E1E1E !important;
}

.dark input[type="checkbox"]:not(.sr-only):checked {
    background-color: rgb(var(--color-primary-500)) !important;
    border-color: rgb(var(--color-primary-500)) !important;
}

.dark .form-check label,
.dark .flex.items-center.mb-3:has(input[type="checkbox"]) label {
    color: #A1A1AA !important;
}

.dark .help-block,
.dark .text-muted,
.dark [id$="-help-text"] {
    color: #A1A1AA !important;
}

.dark .m-table-container {
    background: #1E1E1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* =============================================
   LOGIN PILL — reset global input styles
   ============================================= */
.login-pill input[type="text"],
.login-pill input[type="email"],
.login-pill input[type="password"] {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    height: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.login-pill input[type="text"]:focus,
.login-pill input[type="email"]:focus,
.login-pill input[type="password"]:focus {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.dark .login-pill input[type="text"],
.dark .login-pill input[type="email"],
.dark .login-pill input[type="password"] {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}

.dark .login-pill input[type="text"]:focus,
.dark .login-pill input[type="email"]:focus,
.dark .login-pill input[type="password"]:focus {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =============================================
   SUBMENU TRANSITIONS
   ============================================= */
.m-sidebar-submenu {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s 0.1s, visibility 0s 0.3s, height 0.2s;
}

@media (min-width: 1025px) {
    .m-sidebar:hover .m-sidebar-submenu,
    .m-sidebar.locked .m-sidebar-submenu {
        opacity: 1;
        visibility: visible;
        height: auto;
        transition: opacity 0.2s 0.1s, visibility 0s 0s, height 0.2s;
        overflow: visible;
    }
}

/* =============================================
   DESCRIPTION (QUILL) EDITOR TOOLBAR
   ============================================= */
/* Pinned sticky toolbar at the top of the editor container when page scrolls (only on the workitem detail layout) */
#detail-main-layout .quill-wrapper .ql-toolbar.ql-snow {
    position: sticky;
    top: var(--m-topbar-height, 70px);
    z-index: 30;
    background: #ffffff;
}
.dark #detail-main-layout .quill-wrapper .ql-toolbar.ql-snow {
    background: #0f172a;
}

/* Pinned sticky toolbar at the top of the editor container when scrolling inside the global create modal */
#gcm-form-area .quill-wrapper .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
}
.dark #gcm-form-area .quill-wrapper .ql-toolbar.ql-snow {
    background: #09090B;
}
.quill-wrapper .ql-container.ql-snow {
    height: auto;
}

/* Quill's default "unset" label text is literally 'Normal' for both the Header
   (Text Format) and Size pickers, so both show the same word side by side.
   Relabel the Header picker's default to 'Paragraph' to tell them apart.
   Quill sets data-value="" (empty string) on the default item — NOT a missing attribute. */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=""]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=""]::before {
    content: 'Paragraph' !important;
}

.ql-editor li:has(.ql-size-small) > .ql-ui {
    font-size: .75em;
}
.ql-editor li:has(.ql-size-large) > .ql-ui {
    font-size: 1.5em;
}
.ql-editor li:has(.ql-size-huge) > .ql-ui {
    font-size: 2.5em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item {
    font-size: 13px !important;
}