M22
/
whatsapp_web_groups


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866
							// ============================================================
// M22 TECH CONSULTING - THEME STYLES
// Futurismo Cálido + Glassmorphism
// ============================================================
// 
// CONTEXTOS VISUALES:
// 1. Login/Auth: 100% Dark + Glassmorphism intenso
// 2. Sidebar: Dark + Glassmorphism sutil
// 3. Contenido Principal: Light + Glassmorphism elegante
//
// ============================================================

// -------------------------------------------------------
// VARIABLES
// -------------------------------------------------------
$m22-midnight: #0F111A;
$m22-sidebar-dark: #1C1633;
$m22-orange: #FF7C00;
$m22-magenta: #E0407B;
$m22-content-light: #F8F8F8;
$m22-white: #FFFFFF;
$m22-text-dark: #1A1A1A;
$m22-text-muted: #6B7280;
$m22-text-light: #A0A0A0;

// -------------------------------------------------------
// 0. EARLY INIT - Prevent sidebar flash on page load
// -------------------------------------------------------
// This class is applied to <html> by an inline script in <head>
// before the page renders, preventing the visual flash when
// restoring collapsed state from localStorage.

html.m22-sidebar-collapsed-init {
    // Sidebar VISIBLE but in collapsed state - NO transitions
    .m22-sidebar {
        width: 72px !important;
        
        // Kill ALL transitions during init
        &, *, *::before, *::after {
            transition: none !important;
            animation: none !important;
        }
        
        // CRITICAL: Fix icon positions to prevent movement
        .nav-link {
            position: relative !important;
            justify-content: center !important;
            padding: 0.75rem !important;
            
            // Apply to both icon selectors to cover all cases
            i.sidebar-icon,
            .fa:first-child {
                position: relative !important;
                flex-shrink: 0 !important;
                width: 20px !important;
                min-width: 20px !important;
                text-align: center !important;
                margin: 0 !important;
            }
        }
        
        // Also fix nav container padding to match collapsed state
        .sidebar-nav {
            padding: 1rem 0.5rem !important;
        }
        
        // Fix header padding and alignment
        .sidebar-header {
            padding: 0.75rem !important;
            justify-content: center !important;
        }
        
        // Hide logo when collapsed (same as normal collapsed state)
        .sidebar-logo {
            display: none !important;
        }
        
        // Center collapse button
        .sidebar-collapse-btn {
            margin: 0 auto !important;
        }
        
        // Fix footer padding
        .sidebar-footer {
            padding: 0.5rem !important;
        }
        
        // Fix user info when collapsed
        .sidebar-user-info {
            justify-content: center !important;
            padding: 0.5rem !important;
        }
        
        // Fix logout button when collapsed
        .sidebar-logout {
            padding: 0.625rem !important;
        }
        
        // Hide text elements - use absolute to remove from flow
        .sidebar-text,
        .sidebar-title,
        .sidebar-logo-text {
            opacity: 0 !important;
            visibility: hidden !important;
            width: 0 !important;
            position: absolute !important;
            left: -9999px !important; // Move off-screen to prevent layout shift
        }
        
        // SMART: Hide the original icon, show correct one via CSS
        .sidebar-collapse-btn {
            position: relative !important;
            
            i {
                // Hide original icon content
                visibility: hidden !important;
                position: relative;
                
                // Show chevron-right via ::after
                &::after {
                    content: "\f054"; // fa-chevron-right
                    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
                    font-weight: 900;
                    visibility: visible !important;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
    
    // Main content with correct margin - NO transitions
    #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar {
        margin-left: 72px !important;
        transition: none !important;
    }
    
    // When expanded (remove init class), allow normal behavior
    &:not(.m22-sidebar-collapsed-init) {
        .m22-sidebar {
            width: 260px !important;
            
            .sidebar-text,
            .sidebar-title,
            .sidebar-logo-text {
                opacity: 1 !important;
                visibility: visible !important;
                width: auto !important;
                position: static !important;
                left: auto !important;
            }
        }
        
        #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar {
            margin-left: 260px !important;
        }
    }
    
    // After JS initializes, enable transitions
    &.m22-sidebar-initialized {
        .m22-sidebar {
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            
            // Show original icon (JS already set the correct class)
            .sidebar-collapse-btn i {
                visibility: visible !important;
                
                &::after {
                    display: none;
                }
            }
            
            // Enable transitions for children
            .sidebar-text,
            .sidebar-title,
            .sidebar-logo-text,
            .nav-link,
            .sidebar-footer {
                transition: opacity 0.2s ease, visibility 0.2s ease !important;
            }
        }
        
        #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar {
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
    }
}

// -------------------------------------------------------
// 1. BASE STYLES (When M22 Theme is Active)
// -------------------------------------------------------

// Body base - Light background for content area
// Note: Login pages have their own dark background via login_custom.xml
#wrapwrap.o_has_m22_sidebar {
    background-color: $m22-content-light;
    // Subtle gradient texture for glassmorphism effect
    background-image: 
        radial-gradient(ellipse 80% 50% at 10% 20%, rgba($m22-orange, 0.04), transparent 50%),
        radial-gradient(ellipse 80% 50% at 90% 80%, rgba($m22-magenta, 0.04), transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

// -------------------------------------------------------
// 2. SIDEBAR - DARK GLASSMORPHISM
// -------------------------------------------------------
$sidebar-width-expanded: 260px;
$sidebar-width-collapsed: 72px;
$sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.m22-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: $sidebar-width-expanded;
    height: 100vh;
    z-index: 100;
    
    // Dark Glassmorphism
    background: rgba($m22-midnight, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    
    // Smooth width transition
    transition: width $sidebar-transition;

    // Prevent horizontal scroll - critical fix
    overflow: hidden;

    // Sidebar Header
    .sidebar-header {
        flex-shrink: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        min-height: 64px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    // Logo area
    .sidebar-logo {
        display: flex;
        align-items: center;
        overflow: hidden;
        flex-shrink: 0;
        
        img {
            max-height: 32px;
            width: auto;
            flex-shrink: 0;
            transition: opacity $sidebar-transition;
        }
    }

    // Navigation container
    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1rem 0.75rem;
        
        // Hide scrollbar when collapsed
        &::-webkit-scrollbar {
            width: 4px;
        }
    }

    // Nav Links - Base state
    .nav-link {
        display: flex;
        align-items: center;
        color: $m22-text-light;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        margin-bottom: 4px;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        transition: 
            background $sidebar-transition,
            color 0.2s ease,
            padding $sidebar-transition;

        // Icon styling
        i.sidebar-icon,
        .fa:first-child {
            width: 20px;
            min-width: 20px;
            text-align: center;
            font-size: 1.1rem;
            flex-shrink: 0;
            transition: margin $sidebar-transition;
        }

        // Text styling
        .sidebar-text {
            margin-left: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: 
                opacity 0.15s ease,
                visibility 0.15s ease,
                margin $sidebar-transition;
        }

        &:hover {
            color: $m22-white;
            background: rgba(255, 255, 255, 0.08);
        }

        &.active {
            background: linear-gradient(90deg, rgba($m22-orange, 0.15), rgba($m22-magenta, 0.1));
            color: $m22-orange;
            
            // Active indicator bar
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 60%;
                background: $m22-orange;
                border-radius: 0 2px 2px 0;
            }
        }
    }

    // Sidebar Footer
    .sidebar-footer {
        flex-shrink: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.75rem;
        overflow: hidden;
    }

    // User info section
    .sidebar-user-info {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        overflow: hidden;
        transition: background 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.05);
        }
    }

    // User Avatar
    .user-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: linear-gradient(135deg, $m22-orange, $m22-magenta);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $m22-white;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    // Collapse Button - Modern design
    .sidebar-collapse-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: $m22-text-light;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        flex-shrink: 0;

        i {
            font-size: 0.875rem;
            transition: transform 0.3s ease;
        }

        &:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: $m22-white;
        }

        &:active {
            transform: scale(0.95);
        }
    }

    // Logout Button
    .sidebar-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.625rem 1rem;
        color: $m22-text-light;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        background: transparent;
        text-decoration: none;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        overflow: hidden;

        i {
            flex-shrink: 0;
        }
        
        &:hover {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.4);
            color: #EF4444;
        }
    }

    // =========================================
    // COLLAPSED STATE - Desktop Only
    // =========================================
    &[data-collapsed="true"] {
        width: $sidebar-width-collapsed;

        // Header adjustments
        .sidebar-header {
            padding: 0.75rem !important;
            justify-content: center;
        }

        // Hide logo when collapsed
        .sidebar-logo {
            display: none;
        }

        // Center collapse button
        .sidebar-collapse-btn {
            margin: 0 auto;
        }

        // Nav adjustments
        .sidebar-nav {
            padding: 1rem 0.5rem;
        }

        // Nav link adjustments
        .nav-link {
            justify-content: center;
            padding: 0.75rem;
            
            // Hide text
        .sidebar-text {
            opacity: 0;
            visibility: hidden;
                width: 0;
                margin-left: 0;
                position: absolute;
        }

            // Center icon
            i.sidebar-icon,
            .fa:first-child {
                margin: 0;
            }

            // Adjust active indicator for collapsed
            &.active::before {
                height: 40%;
            }

            // Tooltip on hover when collapsed
            &::after {
                content: attr(title);
                position: absolute;
                left: calc(100% + 12px);
                top: 50%;
                transform: translateY(-50%);
                background: rgba($m22-midnight, 0.95);
                backdrop-filter: blur(10px);
                color: $m22-white;
                padding: 0.5rem 0.75rem;
                border-radius: 6px;
                font-size: 0.8125rem;
                white-space: nowrap;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.2s ease, visibility 0.2s ease;
                z-index: 1000;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            &:hover::after {
                opacity: 1;
                visibility: visible;
            }
        }

        // Footer adjustments
        .sidebar-footer {
            padding: 0.5rem;
        }

        // User info when collapsed
        .sidebar-user-info {
            justify-content: center;
            padding: 0.5rem;
            
            .sidebar-text {
                display: none;
            }
        }

        // Logout button when collapsed
        .sidebar-logout {
            padding: 0.625rem;
            
            .sidebar-text {
                display: none;
            }
        }
    }
}

// -------------------------------------------------------
// 3. MAIN CONTENT AREA - LIGHT GLASSMORPHISM
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    main.o_main_with_sidebar {
        margin-left: $sidebar-width-expanded !important;
        min-height: 100vh;
        padding: 1.5rem 2rem;
        transition: margin-left $sidebar-transition;
        
        @media (max-width: 991px) {
            margin-left: 0 !important;
            padding: 1rem;
            padding-bottom: 80px; // Space for bottom nav
        }
    }
    }

// Glassmorphism Cards (Light Mode)
.m22-card,
.card,
#wrapwrap.o_has_m22_sidebar .card {
    background: rgba($m22-white, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        border-color: rgba($m22-orange, 0.15);
    }
}

// -------------------------------------------------------
// 4. TYPOGRAPHY - CONTEXT AWARE
// -------------------------------------------------------

// Light Context (Content Area)
#wrapwrap.o_has_m22_sidebar {
    color: $m22-text-dark;

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: $m22-text-dark !important;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
    }

    p, .text-muted {
        color: $m22-text-muted;
    }

    // Links
    a:not(.nav-link):not(.btn) {
        color: $m22-orange;
        text-decoration: none;
        transition: color 0.2s ease;

        &:hover {
            color: darken($m22-orange, 10%);
        }
    }
}

// Dark Context (Sidebar) - Already handled in .m22-sidebar

// -------------------------------------------------------
// 5. TABLES - LIGHT MODE GLASSMORPHISM
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    .table,
    .o_portal_my_doc_table,
    table {
        background: rgba($m22-white, 0.8);
        backdrop-filter: blur(8px);
        border-radius: 12px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;

        thead {
            background: rgba($m22-content-light, 0.9);
            
            th {
                color: $m22-text-dark;
                font-weight: 600;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                padding: 1rem 1.5rem;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            }
        }

        tbody {
            tr {
                transition: background 0.2s ease;

                &:hover {
                    background: rgba($m22-orange, 0.04);
                }

                td {
                    padding: 1rem 1.5rem;
                    color: $m22-text-dark;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    vertical-align: middle;
        }

                &:last-child td {
                    border-bottom: none;
                }
            }
        }

        // Links in tables
        a {
            color: $m22-orange;
            font-weight: 500;

        &:hover {
                text-decoration: underline;
            }
        }
        }
    }

// -------------------------------------------------------
// 6. BADGES & STATUS INDICATORS
// -------------------------------------------------------
// Universal badge styling for light content backgrounds
// Ensures all Bootstrap badges are visible with proper contrast

.badge {
    font-weight: 500;
    padding: 0.35em 0.75em;
    border-radius: 9999px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

// Primary - Orange M22 style
.badge-primary,
.text-bg-primary {
    background: rgba($m22-orange, 0.15) !important;
    color: darken($m22-orange, 5%) !important;
}

// Secondary - Gray
.badge-secondary,
.text-bg-secondary {
    background: rgba(107, 114, 128, 0.15) !important;
    color: #4B5563 !important;
}

// Success - Green
.badge-paid,
.badge-success,
.text-bg-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #16A34A !important;
}

// Warning - Yellow/Amber
.badge-pending,
.badge-warning,
.text-bg-warning {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #CA8A04 !important;
    }

// Danger - Red
.badge-overdue,
.badge-danger,
.text-bg-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #DC2626 !important;
}

// Info - Cyan/Blue
.badge-info,
.text-bg-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #2563EB !important;
}

// Light - Gray with dark text (CRITICAL for helpdesk stages)
.badge-light,
.text-bg-light,
.bg-200 {
    background: rgba(0, 0, 0, 0.06) !important;
    color: $m22-text-dark !important;
}

// Dark - Dark bg with light text
.badge-dark,
.text-bg-dark {
    background: rgba($m22-midnight, 0.85) !important;
    color: $m22-white !important;
}

// -------------------------------------------------------
// 7. BUTTONS - M22 STYLE
// -------------------------------------------------------
.btn-m22-primary,
.btn-primary {
    background: linear-gradient(90deg, $m22-orange, $m22-magenta) !important;
    border: none !important;
    color: $m22-white !important;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba($m22-orange, 0.25);
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba($m22-orange, 0.35);
        opacity: 0.95;
    }

    &:active {
        transform: translateY(0);
    }
}

.btn-outline-primary {
    color: $m22-orange !important;
    border-color: $m22-orange !important;
    background: transparent !important;

    &:hover {
        background: rgba($m22-orange, 0.1) !important;
    }
}

// -------------------------------------------------------
// 8. FORM INPUTS - LIGHT GLASSMORPHISM
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        background: rgba($m22-white, 0.9);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        color: $m22-text-dark;
        padding: 0.625rem 1rem;
        transition: all 0.2s ease;

        &:focus {
            border-color: $m22-orange;
            box-shadow: 0 0 0 3px rgba($m22-orange, 0.15);
            outline: none;
        }

        &::placeholder {
            color: $m22-text-muted;
        }
    }

    label {
        color: $m22-text-dark;
        font-weight: 500;
        font-size: 0.875rem;
    }
}

// -------------------------------------------------------
// 9. BREADCRUMBS
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    .breadcrumb {
        background: transparent;
        padding: 0;
        margin-bottom: 1.5rem;

        .breadcrumb-item {
            color: $m22-text-muted;
            font-size: 0.875rem;

            a {
                color: $m22-text-muted;

                &:hover {
                    color: $m22-orange;
                }
            }

            &.active {
                color: $m22-text-dark;
                font-weight: 500;
            }

            + .breadcrumb-item::before {
                color: $m22-text-muted;
            }
        }
    }
}

// -------------------------------------------------------
// 10. MOBILE SIDEBAR & BOTTOM NAV
// -------------------------------------------------------
@media (max-width: 991px) {
    .m22-sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;

        &.m22-sidebar-open {
            transform: translateX(0);
        }
    }
}

// Sidebar Backdrop (Mobile)
.m22-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

    &.visible {
        opacity: 1;
        visibility: visible;
    }
}

// Bottom Navigation (Mobile)
.m22-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($m22-midnight, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1030;
    padding: 0.5rem 0;

    .bottom-nav-item {
        color: $m22-text-light;
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 0.5rem;
        flex: 1;
        text-align: center;

        i, .fa {
            font-size: 1.25rem;
            display: block;
            margin-bottom: 0.25rem;
        }

        .bottom-nav-label {
            font-size: 0.7rem;
            display: block;
        }

        &:hover,
        &.active {
            color: $m22-orange;
        }
        
        // More button styling
        &#m22_more_btn {
            color: $m22-text-light;
            
            &:hover,
            &:focus {
                color: $m22-orange;
                outline: none;
            }
        }
    }
}

// -------------------------------------------------------
// 10.1. BOTTOM SHEET (iOS Style with Tailwind)
// -------------------------------------------------------
// Override Tailwind classes to match theme colors
#m22_bottom_sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; // Above bottom nav (1030)
    
    // Hidden by default (CSS fallback if Tailwind doesn't work)
    display: none;
    pointer-events: none;
    
    &.visible {
        display: block;
        pointer-events: auto;
    }
    
    // Backdrop with theme colors
    #m22_bottom_sheet_backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba($m22-midnight, 0.75);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity 0.3s ease;
        
        &.show {
            opacity: 1;
        }
    }
    
    // Sheet content - Theme integration
    #m22_bottom_sheet_content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba($m22-white, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        border-radius: 24px 24px 0 0;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &.show {
            transform: translateY(0);
        }
        
        // Handle indicator
        .rounded-full {
            background: rgba($m22-text-muted, 0.3);
        }
        
        // Header
        h3 {
            color: $m22-text-dark;
        }
        
        // Sheet items with theme colors
        .m22-sheet-item {
            color: $m22-text-dark;
            
            &:hover {
                background: rgba($m22-orange, 0.08);
                
                i {
                    color: $m22-orange;
                }
            }
            
            i.fa:first-child {
                color: $m22-text-muted;
                transition: color 0.2s ease;
            }
        }
        
        // Close button
        button#m22_bottom_sheet_close {
            background: rgba($m22-content-light, 0.9);
            color: $m22-text-dark;
            
            &:hover {
                background: rgba($m22-content-light, 1);
                color: $m22-orange;
            }
        }
        
        // Scrollbar styling for sheet content
        .overflow-y-auto {
            &::-webkit-scrollbar {
                width: 4px;
            }
            
            &::-webkit-scrollbar-track {
                background: transparent;
            }
            
            &::-webkit-scrollbar-thumb {
                background: rgba($m22-orange, 0.3);
                border-radius: 2px;
                
                &:hover {
                    background: rgba($m22-orange, 0.5);
                }
            }
        }
    }
}

// Dark mode support (if implemented later)
@media (prefers-color-scheme: dark) {
    #m22_bottom_sheet {
        #m22_bottom_sheet_content {
            background: rgba($m22-midnight, 0.98);
            
            h3 {
                color: $m22-white;
            }
            
            .m22-sheet-item {
                color: $m22-white;
                
                &:hover {
                    background: rgba($m22-orange, 0.15);
                }
            }
            
            button#m22_bottom_sheet_close {
                background: rgba($m22-sidebar-dark, 0.9);
                color: $m22-white;
                
                &:hover {
                    background: rgba($m22-sidebar-dark, 1);
                }
            }
        }
    }
}

// -------------------------------------------------------
// 11. GRADIENT TEXT UTILITY
// -------------------------------------------------------
.text-gradient {
    background: linear-gradient(90deg, $m22-orange, $m22-magenta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }

// -------------------------------------------------------
// 12. SCROLLBAR STYLING
// -------------------------------------------------------
.m22-sidebar .sidebar-nav,
#wrapwrap.o_has_m22_sidebar main {
    scroll-behavior: smooth;
    
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba($m22-orange, 0.3);
        border-radius: 3px;

        &:hover {
            background: rgba($m22-orange, 0.5);
        }
    }
}

// Dark scrollbar for sidebar
.m22-sidebar .sidebar-nav {
    &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }
}

// -------------------------------------------------------
// 13. PORTAL-SPECIFIC OVERRIDES
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    // Hide duplicate sidebar elements in "My Account" page only
    .o_portal_wrap {
        // Hide the offcanvas sidebar (mobile duplicate)
        #accountOffCanvas {
            display: none !important;
        }
    }

    // Portal container
    .o_portal {
        background: transparent;
    }

    // Card styling in portal - Glassmorphism Light
    .o_portal_wrap .card,
    .o_portal_sidebar .card {
        background: rgba($m22-white, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        }

    // Ensure main portal sidebar container is visible
    .o_portal_sidebar {
        display: block !important;
    }

    // =========================================
    // Native Odoo Record Sidebar Styling
    // (Actions panel: total, buttons, contact)
    // =========================================
    .o_portal_sidebar_content {
        // Glassmorphism container
        background: rgba($m22-white, 0.9);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

        // Total amount - Prominent display
        > .position-relative {
            h2, .h2 {
                color: $m22-orange !important;
                font-weight: 700;
                font-size: 2rem;
            }
        }

        // All headings in sidebar
        h2, .h2, h4, .h4, h5, .h5, h6, .h6 {
            color: $m22-text-dark !important;
        }

        // Muted text - Make it visible
        .text-muted, small {
            color: $m22-text-muted !important;
        }

        // ---- BUTTONS ----
        // Primary buttons (Accept, Sign, Pay)
        .btn-primary {
            background: linear-gradient(90deg, $m22-orange, $m22-magenta) !important;
            border: none !important;
            color: $m22-white !important;
            font-weight: 600;
            padding: 0.75rem 1.25rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba($m22-orange, 0.25);
            
            &:hover {
                opacity: 0.9;
                transform: translateY(-1px);
            }
        }

        // Light buttons (View Details, Download PDF)
        .btn-light {
            background: rgba($m22-content-light, 0.9) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            color: $m22-text-dark !important;
            font-weight: 500;
            padding: 0.625rem 1rem;
            border-radius: 8px;
            
            &:hover {
                background: rgba($m22-content-light, 1) !important;
                border-color: $m22-orange !important;
                color: $m22-orange !important;
        }

            i, .fa {
                color: $m22-text-muted;
            }
        }

        // Outline buttons
        .btn-outline-primary {
            color: $m22-orange !important;
            border-color: $m22-orange !important;
            background: transparent !important;

            &:hover {
                background: rgba($m22-orange, 0.1) !important;
            }
        }

        // ---- NAVIGATION (navspy and general nav links) ----
        // Generic nav-link styling for sidebar navigation
        .nav.flex-column,
        .navspy, 
        .bs-sidenav,
        [role="complementary"] {
            .nav-link {
                color: $m22-text-muted !important;
                padding: 0.5rem 0;
                font-size: 0.875rem;
                border-left: 2px solid transparent;
                padding-left: 0.75rem;
                transition: all 0.2s ease;
                
                &:hover {
                    color: $m22-orange !important;
                    border-left-color: rgba($m22-orange, 0.3);
                }

                &.active {
                    color: $m22-orange !important;
                    font-weight: 600;
                    border-left-color: $m22-orange;
                }
            }

            // Nav items without explicit nav-link class
            .nav-item > a:not(.btn) {
                color: $m22-text-muted !important;
                text-decoration: none;
                display: block;
                padding: 0.5rem 0;
                font-size: 0.875rem;
                transition: color 0.2s ease;

                &:hover {
                    color: $m22-orange !important;
        }
            }
        }

        // Specific fix for helpdesk ticket sidebar links
        #ticket-nav,
        #ticket-links {
            .nav-link {
                color: $m22-text-dark !important;
                font-weight: 500;
                
                &:hover {
                    color: $m22-orange !important;
                }
            }
        }

        // ---- CONTACT SECTION ----
        .o_portal_contact_details,
        [class*="contact"] {
            h5, h6, .h5, .h6 {
                color: $m22-text-muted !important;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-bottom: 0.75rem;
            }

            // Contact name
            .fw-bold, strong, b {
                color: $m22-text-dark !important;
            }

            // Contact link
            a {
                color: $m22-orange !important;
                text-decoration: none;
                font-weight: 500;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        // ---- LIST GROUP ITEMS ----
        .list-group-item {
            background: rgba($m22-white, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            padding: 1rem;
            
            .text-success {
                color: #16A34A !important;
        }
    }

        // ---- DIVIDER ----
        hr {
            border-color: rgba(0, 0, 0, 0.08);
}

        // Hide "Powered by Odoo" in our theme
        > .d-none.d-lg-block.mt-5.small.text-center.text-muted {
            display: none !important;
        }
    }

    // Vertical divider between sidebar and content
    .o_portal_sale_sidebar > .vr,
    .o_portal_invoice_sidebar > .vr {
        background-color: rgba(0, 0, 0, 0.08) !important;
    }

    // =========================================
    // ADAPTIVE CONTENT WIDTH
    // Different widths for list vs detail pages
    // =========================================
    main.o_main_with_sidebar {
        // Default: Centered content for detail pages
        .container,
        .o_m22_portal_container {
            @media (min-width: 992px) {
                max-width: 1200px;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    // LISTADO PAGES: Full width for list tables
    // Target containers that contain portal document tables
    #wrapwrap.o_has_m22_sidebar {
        // When container has list table, make it full width
        .container:has(.o_portal_my_doc_table),
        .o_m22_portal_container:has(.o_portal_my_doc_table) {
            max-width: 100% !important;
            padding-left: 2rem;
            padding-right: 2rem;
            
            @media (max-width: 991px) {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }

        // DETAIL WITH NATIVE SIDEBAR: Wider layout for 2 columns  
        // Pages with native Odoo sidebar (tickets detail, invoices detail)
        .container:has(.o_portal_sidebar):not(:has(.o_portal_my_doc_table)),
        .o_m22_portal_container:has(.o_portal_sidebar):not(:has(.o_portal_my_doc_table)),
        .container:has(#ticket-nav),
        .o_m22_portal_container:has(#ticket-nav) {
            max-width: 1400px !important;
            margin-left: auto;
            margin-right: auto;
        }
    }

    // Utility classes for manual control (if needed)
    .m22-full-width {
        max-width: 100% !important;
        padding-left: 2rem;
        padding-right: 2rem;
        
        @media (max-width: 991px) {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }

    .m22-content-centered {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .m22-content-wide {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}

// -------------------------------------------------------
// 14. ANIMATIONS & TRANSITIONS
// -------------------------------------------------------
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.m22-card,
#wrapwrap.o_has_m22_sidebar .card {
    animation: fadeIn 0.3s ease-out;
}

// -------------------------------------------------------
// 15. COLLAPSED SIDEBAR STATE - Main Content Adjustment
// -------------------------------------------------------
body.sidebar-collapsed {
    #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar {
        @media (min-width: 992px) {
            margin-left: $sidebar-width-collapsed !important;
        }
    }
}

// -------------------------------------------------------
// 16. HIDE HEADER & FOOTER (Theme-specific)
// Note: This is conditional via templates, but CSS backup
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    header#top,
    #top_menu_container,
    .o_header_standard,
    footer.o_footer,
    #footer,
    .o_footer_copyright {
        display: none !important;
    }
}

// -------------------------------------------------------
// 17. PORTAL LAYOUT ADJUSTMENTS
// Ocultar sidebar nativo del portal (solo en my/account)
// Expandir contenido a ancho completo
// Asegurar que filtros del portal se muestren en desktop
// -------------------------------------------------------
#wrapwrap.o_has_m22_sidebar {
    // Ocultar el sidebar nativo de "My Account" (col-lg-4)
    .o_portal_wrap .container {
        .row.justify-content-between {
            .d-none.d-lg-flex.justify-content-end.col-lg-4 {
                display: none !important;
            }
            
            // Ocultar offcanvas también
            #accountOffCanvas {
                display: none !important;
            }
            
            // Expandir contenido a ancho completo
            .o_portal_content {
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 100% !important;
            }
        }
    }
    
    // Asegurar que el navbar de filtros del portal siempre se muestre en desktop
    // IMPORTANTE: Los filtros usan clases de Bootstrap (.collapse) que pueden estar rotas si Tailwind reemplaza Bootstrap
    // Forzamos display con máxima especificidad
    .o_portal_wrap {
        nav.o_portal_navbar {
            // En desktop, siempre mostrar los filtros
            @media (min-width: 992px) {
                .collapse {
                    display: flex !important;
                    visibility: visible !important;
                    height: auto !important;
                }
                
                .navbar-collapse {
                    display: flex !important;
                    flex-basis: auto !important;
                    visibility: visible !important;
                }
                
                #o_portal_navbar_content {
                    display: flex !important;
                    visibility: visible !important;
                }
            }
            
            // =========================================
            // PORTAL NAVBAR - Estilos específicos
            // Corrección de inputs, dropdowns y posicionamiento
            // =========================================
            
            // Contenedor principal del navbar - Ajuste de alineación
            .navbar-nav,
            #o_portal_navbar_content {
                align-items: center;
                gap: 0.75rem;
            }
            
            // Input de búsqueda - Fondo claro glassmorphism
            input[type="text"],
            input[type="search"],
            .form-control,
            input.form-control {
                background: rgba($m22-white, 0.9) !important;
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                border: 1px solid rgba(0, 0, 0, 0.1) !important;
                border-radius: 8px !important;
                color: $m22-text-dark !important;
                padding: 0.5rem 1rem !important;
                transition: all 0.2s ease;
                
                &::placeholder {
                    color: $m22-text-muted !important;
                }
                
                &:focus {
                    background: rgba($m22-white, 0.95) !important;
                    border-color: $m22-orange !important;
                    box-shadow: 0 0 0 3px rgba($m22-orange, 0.15) !important;
                    outline: none !important;
                }
            }
            
            // Botones dropdown - Estilo claro glassmorphism
            .btn,
            .btn-group > .btn,
            button[data-bs-toggle="dropdown"],
            button.dropdown-toggle {
                background: rgba($m22-white, 0.9) !important;
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                border: 1px solid rgba(0, 0, 0, 0.1) !important;
                border-radius: 8px !important;
                color: $m22-text-dark !important;
                padding: 0.5rem 1rem !important;
                font-weight: 500;
                transition: all 0.2s ease;
                
                &:hover,
                &:focus {
                    background: rgba($m22-white, 0.95) !important;
                    border-color: rgba($m22-orange, 0.3) !important;
                    color: $m22-text-dark !important;
                }
                
                &:active,
                &.active,
                &[aria-expanded="true"] {
                    background: rgba($m22-content-light, 0.95) !important;
                    border-color: rgba($m22-orange, 0.2) !important;
                    color: $m22-text-dark !important;
                    box-shadow: 0 0 0 2px rgba($m22-orange, 0.1) !important;
                }
            }
            
            // Menú dropdown - Estilo claro
            .dropdown-menu {
                background: rgba($m22-white, 0.98) !important;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(0, 0, 0, 0.08) !important;
                border-radius: 12px !important;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
                padding: 0.5rem 0 !important;
                margin-top: 0.5rem !important;
                
                .dropdown-item {
                    color: $m22-text-dark !important;
                    padding: 0.625rem 1.25rem !important;
                    transition: all 0.15s ease;
                    
                    &:hover {
                        background: rgba($m22-orange, 0.08) !important;
                        color: $m22-text-dark !important;
                    }
                    
                    &:active,
                    &.active {
                        background: rgba($m22-orange, 0.12) !important;
                        color: $m22-text-dark !important;
                        font-weight: 500;
                    }
                }
            }
            
            // Labels de los dropdowns (Ordenar por, Filtrar por, etc.)
            label,
            .form-label {
                color: $m22-text-dark !important;
                font-weight: 500;
                font-size: 0.875rem;
                margin-bottom: 0.25rem;
                margin-right: 0.5rem;
            }
            
            // Botón de búsqueda (icono)
            button[type="submit"],
            .btn-search,
            button:has(.fa-search) {
                background: rgba($m22-white, 0.9) !important;
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                border: 1px solid rgba(0, 0, 0, 0.1) !important;
                border-radius: 8px !important;
                color: $m22-text-muted !important;
                padding: 0.5rem 0.75rem !important;
                transition: all 0.2s ease;
                
                &:hover {
                    background: rgba($m22-white, 0.95) !important;
                    border-color: $m22-orange !important;
                    color: $m22-orange !important;
                }
            }
            
            // Ajuste de espaciado y alineación vertical
            .form-group,
            .input-group {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                margin-bottom: 0;
            }
            
            // Asegurar que los elementos estén alineados verticalmente
            .d-flex,
            .navbar-nav {
                align-items: center;
            }
        }
    }

    // -------------------------------------------------------
    // 18. HELPDESK TICKETS DASHBOARD
    // -------------------------------------------------------
    // Dashboard Cards - Glassmorphism Light
    .m22-dashboard-card {
        background: rgba($m22-white, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            border-color: rgba($m22-orange, 0.15);
            transform: translateY(-2px);
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-title {
            color: $m22-text-dark;
            font-weight: 600;
            font-size: 1.125rem;
        }

        h3 {
            color: $m22-text-dark;
            font-weight: 700;
            font-size: 2rem;
        }

        h6 {
            color: $m22-text-muted;
            font-weight: 500;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }
    }

    // Dashboard Icon Container
    .m22-dashboard-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba($m22-content-light, 0.8);
    }

    // Stage Cards (mini cards in summary)
    .m22-stage-card {
        background: rgba($m22-white, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;

        &:hover {
            background: rgba($m22-white, 0.8);
            border-color: rgba($m22-orange, 0.2);
            transform: translateY(-2px);
        }
    }

    // Progress Bar Customization
    .progress {
        background: rgba($m22-content-light, 0.8);
        border-radius: 4px;
        overflow: hidden;
    }

    // Table in Dashboard
    .m22-dashboard-card {
        .table {
            margin-bottom: 0;

            thead th {
                background: transparent;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                color: $m22-text-muted;
                font-weight: 600;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                padding: 0.75rem 1rem;
            }

            tbody tr {
                transition: background 0.2s ease;

                &:hover {
                    background: rgba($m22-orange, 0.04);
                }

                td {
                    padding: 1rem;
                    color: $m22-text-dark;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    vertical-align: middle;

                    a {
                        color: $m22-orange;
                        font-weight: 500;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

    // List Group Items (Waiting Response)
    .list-group-item {
        background: rgba($m22-white, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;

        &:hover {
            background: rgba($m22-orange, 0.08);
            border-color: rgba($m22-orange, 0.2);
            transform: translateX(4px);
        }

        h6 {
            color: $m22-text-dark;
            font-weight: 600;
        }

        .text-muted {
            color: $m22-text-muted;
        }
    }

    // Border Warning for Waiting Response Card
    .border-warning {
        border-color: rgba(234, 179, 8, 0.3) !important;
        border-width: 2px;
    }

    // -------------------------------------------------------
    // 19. HELPDESK TICKET APPROVAL BANNER
    // -------------------------------------------------------
    .m22-approval-banner {
        background: rgba($m22-white, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 2px solid rgba($m22-orange, 0.3);
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba($m22-orange, 0.1);
        padding: 1.5rem;

        .alert-heading {
            color: $m22-text-dark;
            font-weight: 600;
            font-size: 1.125rem;

            i {
                color: $m22-orange;
            }
        }

        p {
            color: $m22-text-muted;
        }

        .btn-success {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            border: none;
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
            }
        }

        .btn-warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border: none;
            color: white;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
                color: white;
            }
        }
    }
}