/* ─── SIDEBAR ─── */
    #app-sidebar {
      width: 240px;
      height: 100vh;
      background: #ffffff;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1100;
      transition: all var(--transition);
    }

    .sidebar-top {
      padding: 1.5rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--text-primary);
    }

    .sidebar-logo img {
      width: 32px;
      height: 32px;
    }

    .sidebar-nav {
      flex: 1;
      padding: 1.25rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      overflow-y: auto;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      color: var(--text-secondary);
      font-weight: 600;
      font-size: 0.88rem;
      border: none;
      background: transparent;
      cursor: pointer;
      text-align: left;
      transition: all var(--transition);
      width: 100%;
    }

    .nav-item:hover {
      background: var(--blue-50);
      color: var(--blue-600);
    }

    .nav-item.active {
      background: var(--blue-50);
      color: var(--blue-600);
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 1rem 0.75rem;
    }

    .sidebar-footer {
      padding: 1.25rem 0.75rem;
      border-top: 1px solid var(--border);
    }

    .logout-btn {
      color: var(--red-600);
    }

    .logout-btn:hover {
      background: var(--red-50);
      color: var(--red-700);
    }

    /* Adjust main content when sidebar is present */


    #navbar {
      width: 100%;
      position: sticky;
      top: 0;
      background: white;
      z-index: 1000;
    }



    /* Fix for corrupted alert styles if needed */
    .alert-info {
      background: var(--blue-50);
      color: var(--blue-700);
      border: 1px solid var(--blue-100);
      padding: 10px;
      border-radius: 8px;
      display: flex;
      gap: 8px;
    }

    .alert-success {
      background: var(--green-50);
      color: var(--green-700);
      border: 1px solid var(--green-100);
      padding: 10px;
      border-radius: 8px;
      display: flex;
      gap: 8px;
    }

    .alert-error {
      background: var(--red-50);
      color: var(--red-700);
      border: 1px solid var(--red-100);
      padding: 10px;
      border-radius: 8px;
      display: flex;
      gap: 8px;
    }

    /* Global Mobile Fixes to prevent horizontal scroll while allowing smooth vertical scroll */
    html {
      scroll-behavior: smooth !important;
    }

    body {
      max-width: 100vw;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      /* Force body to be the primary scroll container */
      position: relative;
      height: auto !important;
      min-height: 100vh;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Enable smooth momentum scrolling for everything */
    * {
      -webkit-overflow-scrolling: touch;
    }

    #app {
      max-width: 100vw;
      overflow-x: hidden;
      display: flex;
      flex-direction: row;
      min-height: 100vh;
    }

    .main-wrapper {
      flex: 1;
      width: 100%;
      margin-left: 240px;
      /* Reduced from 260px to give more space to content */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: visible;
      /* Allow body scroll */
    }

    /* Mobile Menu Button */
    .nav-mobile-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--blue-50);
      color: var(--blue-600);
      border: none;
      cursor: pointer;
      margin-right: 12px;
    }

    #sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      z-index: 1050;
      display: none;
    }

    #sidebar-overlay.active {
      display: block;
    }

    /* ─── MOBILE RESPONSIVE OVERRIDES ─── */
    @media (max-width: 991px) {
      #app-sidebar {
        transform: translateX(-100%);
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.15);
      }

      #app-sidebar.sidebar-open {
        transform: translateX(0);
      }

      #sidebar-close-btn {
        display: flex !important;
      }

      .main-wrapper {
        width: 100% !important;
        padding: 0 10px;
      }

      #navbar {
        height: auto !important;
        padding: 10px;
      }

      .nav-inner {
        padding: 0;
        gap: 10px;
      }

      .nav-user-stack,
      .nav-badge,
      .nav-user-name {
        display: none !important;
      }

      /* Stack Grids */
      .stats-grid,
      .top-row-grid,
      .mgm-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        width: 100% !important;
        align-items: center !important;
        /* Ensure children are centered */
      }

      /* Reset grid children for mobile flex container */
      #emp-sec,
      #emp-create-col,
      #create-sec,
      #chart-sec,
      #attendance-sec,
      .card,
      .team-members-sec {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: none !important;
      }

      #emp-list-body {
        max-height: none !important;
        overflow-y: visible !important;
      }

      .stat-card {
        width: 100% !important;
      }

      .workspace-switcher {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 5px;
      }

      .ws-btn {
        flex: 1 1 calc(50% - 1rem);
        font-size: 0.75rem !important;
        padding: 0.8rem 0.5rem !important;
        justify-content: center;
      }

      /* Table Responsiveness */
      .p3-table-wrap,
      .tbl-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
        width: calc(100% + 20px);
      }

      .p3-table,
      table {
        min-width: 800px;
      }

      /* Forms */
      .form-row,
      .grid-row {
        flex-direction: column !important;
      }

      .card-hd {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
      }

      .mode-switch-btns {
        width: 100%;
        justify-content: space-between;
      }

      #mobile-menu-btn {
        display: flex !important;
      }

      /* Login Screen Responsiveness */
      #login-screen {
        flex-direction: column !important;
        overflow-y: auto;
      }

      .login-left {
        display: flex !important;
        width: 100% !important;
        padding: 4rem 2rem !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .login-right {
        width: 100% !important;
        padding: 4rem 1.5rem !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: auto !important;
        background: #ffffff !important;
      }

      .login-form-wrap {
        width: 100% !important;
        max-width: 100%;
        padding: 0;
      }

      /* Modals and Overlays */
      .profile-modal {
        max-width: 95% !important;
        margin: 10px auto !important;
      }

      #main-content {
        padding: 1rem 0.5rem !important;
      }

      .page-hd {
        padding: 0 5px;
      }
    }

    /* ─── SCROLLING & INTERACTION FIXES ─── */
    .login-orb {
      pointer-events: none !important;
      z-index: -1 !important;
    }

    #main-content {
      position: relative;
      z-index: 10;
      pointer-events: auto !important;
      overflow-y: visible !important;
    }


    /* Ensure all containers work properly with scrolling */
    .panel,
    .card,
    .card-body,
    .tbl-wrap {
      overflow-y: auto !important;
      /* Changed from visible to auto to ensure internal scrollability if needed */
      max-height: 100%;
      height: auto !important;
      min-height: auto !important;
      overscroll-behavior: auto !important;
    }

    /* Specific fix for the employee list container which has max-height */
    #emp-list-body {
      max-height: 400px !important;
      overflow-y: auto !important;
      overscroll-behavior: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    /* Fixed navbar should not block everything below it */
    #navbar {
      pointer-events: none;
      position: sticky;
      top: 0;
      width: 100%;
      background: white;
      z-index: 1000;
      border-bottom: 1px solid var(--border);
    }

    #navbar>.nav-inner {
      pointer-events: auto;
    }

    /* ─── MOBILE RESPONSIVE ENHANCEMENTS (320px - 1024px) ─── */
    @media (max-width: 1024px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    @media (max-width: 768px) {
      .stats-grid {
        grid-template-columns: 1fr !important;
      }

      .nav-right {
        gap: 8px !important;
      }

      .nav-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
      }

      .page-hd h2 {
        font-size: 1.2rem !important;
      }

      /* Buttons accessibility: Touch friendly height */
      .btn,
      .nav-item,
      button {
        min-height: 44px;
      }

      .btn-sm {
        min-height: 32px;
      }

      /* Form improvements */
      .form-group input,
      .form-group select,
      .form-group textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom */
        padding: 12px !important;
      }

      /* Table Fixes: Stacked Layout for Mobile */
      .tbl-wrap table,
      .tbl-wrap thead,
      .tbl-wrap tbody,
      .tbl-wrap th,
      .tbl-wrap td,
      .tbl-wrap tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        /* Reset the 800px min-width from larger screens */
      }

      .tbl-wrap thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .tbl-wrap tr {
        border: 1px solid var(--border);
        margin-bottom: 2rem;
        background: white;
        border-radius: 12px;
        overflow: visible !important;
        box-shadow: var(--shadow-sm);
        display: block;
        position: relative;
        padding: 5px 0;
      }

      .tbl-wrap td {
        border: none !important;
        border-bottom: 1px solid var(--slate-100) !important;
        position: relative;
        padding: 0.75rem 1rem !important;
        display: block !important;
        /* Stacked layout: Label over Value */
        text-align: left !important;
        min-height: 0;
        font-size: 0.9rem;
        color: var(--text-primary) !important;
      }

      .tbl-wrap td:last-child {
        border-bottom: none !important;
        background: var(--slate-50);
        border-radius: 0 0 12px 12px;
        margin-top: 5px;
        display: flex !important;
        /* Keep label and button on the same line */
        justify-content: space-between;
        align-items: center;
        min-height: 4rem;
      }

      .emp-name-cell {
        display: flex !important;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
      }

      .tbl-wrap td:before {
        content: attr(data-label);
        display: block;
        /* Force it to be on its own line on top */
        font-weight: 800;
        color: var(--slate-500);
        text-transform: uppercase;
        font-size: 0.6rem;
        letter-spacing: 1px;
        margin-bottom: 4px;
      }

      /* Stacked dropdowns */
      .status-sel,
      .priority-sel,
      .assign-editor-sel {
        width: 100% !important;
        margin-top: 5px;
        height: 40px !important;
      }

      /* Modal Responsiveness Improvements */
      .modal-content,
      .prof-card,
      .td-modal-card {
        width: 92% !important;
        max-width: 92% !important;
        margin: 20px auto !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        padding: 1.25rem !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
      }

      .modal-hd h3 {
        font-size: 1.1rem !important;
      }

      /* Fix for extra-row (comments/media) in stacked layout */
      .task-extra-row {
        display: none;
        /* Default hidden */
        flex-direction: column;
        width: 100% !important;
        background: var(--slate-50) !important;
        border-radius: 0 0 12px 12px !important;
        margin-top: -1.5rem !important;
        margin-bottom: 1.5rem !important;
        border: 1px solid var(--border) !important;
        border-top: none !important;
      }

      .task-extra-row td {
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
      }

      .task-extra-row td:before {
        display: none !important;
      }
    }

    /* Small devices specific fixes (≤480px) */
    @media (max-width: 480px) {
      .page-hd h2 {
        font-size: 1.1rem !important;
      }

      .nav-user-stack {
        display: none !important;
      }

      .nav-right {
        gap: 6px !important;
      }

      .card-hd {
        padding: 0.75rem !important;
      }

      .card-title {
        font-size: 0.9rem !important;
      }

      /* dropdown visibility fixes */
      .notif-panel {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--nav-h) !important;
        border-radius: 0 0 16px 16px !important;
        height: auto !important;
        max-height: 80vh !important;
      }

      select.form-control,
      .status-sel {
        width: 100% !important;
        max-width: none !important;
        height: 48px !important;
      }
    }

    /* Extra small devices specific fixes */
    @media (max-width: 380px) {
      .nav-brand-name {
        display: none !important;
      }

      .workspace-switcher {
        flex-direction: column !important;
        gap: 8px !important;
      }

      .ws-btn {
        width: 100% !important;
        justify-content: center !important;
      }

      #pg-title {
        font-size: 1rem !important;
      }
    }

    .form-control,
    select.form-control,
    .priority-sel,
    .status-sel,
    .assign-editor-sel,
    option {
      font-size: 15px !important;
      color: var(--text-primary) !important;
      background-color: #ffffff !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 10px !important;
      height: 40px;
      /* Balanced height for main form controls */
      padding: 0.4rem 0.8rem !important;
      line-height: normal !important;
      text-overflow: clip !important;
      width: 100% !important;
      position: relative !important;
      z-index: 5 !important;
      box-shadow: none !important;
      -webkit-font-smoothing: antialiased;
    }

    /* Wrap buttons and inputs that share a row on mobile */
    @media (max-width: 480px) {
      .form-group>div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
      }

      .form-group>div[style*="display:flex"] button {
        width: 100% !important;
        height: 44px !important;
      }
    }

    select.form-control,
    .priority-sel,
    .status-sel,
    .assign-editor-sel {
      padding-right: 2.8rem !important;
      /* Keep space for arrow */
    }

    textarea.form-control {
      height: auto !important;
      min-height: 110px !important;
      padding: 12px 15px !important;
    }

    /* GLOBAL OVERFLOW FIX FOR MOBILE DROPDOWNS */
    @media (max-width: 768px) {

      .card,
      .panel,
      .tbl-wrap,
      tr,
      td,
      .main-wrapper,
      #main-content {
        overflow: visible !important;
      }

      .tbl-wrap td {
        padding-left: 38% !important;
        /* Reduced from 45% to give inputs more room */
        min-height: 3.2rem;
      }

      /* Ensure the Action column (last-child) remains visible and doesn't get squashed */
      .tbl-wrap td:last-child,
      .tbl-wrap td[data-label="Action"] {
        padding-left: 1rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 4.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: var(--slate-50) !important;
        border-top: 1px dashed var(--border) !important;
        position: relative !important;
        z-index: 5 !important;
      }

      .tbl-wrap td:last-child button,
      .tbl-wrap td[data-label="Action"] button,
      .btn-icon-danger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
      }

      .tbl-wrap td:before {
        width: 35%;
        /* Match the reduced padding */
      }

      .notif-panel {
        z-index: 99999 !important;
      }
    }

    .status-sel,
    .priority-sel {
      min-width: 140px !important;
    }

    .form-control::placeholder {
      color: #71717a !important;
      /* Slightly darker than before for better contrast */
      opacity: 1 !important;
    }

    /* Status-specific colors in dropdown */
    .status-sel.s-completed {
      border-color: var(--green-300) !important;
      color: var(--green-700) !important;
    }

    .status-sel.s-inprogress {
      border-color: var(--blue-300) !important;
      color: var(--blue-700) !important;
    }

    /* Scroll bar cleanup */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    /* Modal open scroll lock */
    body.modal-open {
      overflow: hidden !important;
      padding-right: 0px;
      /* Prevent layout shift if possible */
    }

    /* Fix for horizontal scroll on app container */
    #app {
      max-width: 100%;
      width: 100%;
      overflow-x: hidden;
    }

    /* Dashboard spacing fix - removed redundant margins */
    .dashboard-container-fixed {
      width: 100%;
    }

    /* ─── SCROLLBAR CUSTOMIZATION ─── */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f8fafc;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
      border: 2px solid #f8fafc;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Fix for smooth momentum and scroll behavior on panels */
    .tbl-wrap,
    .card-body,
    .panel-body,
    .modal-body,
    #main-content,
    #task-form-content,
    .sidebar-nav {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: auto !important;
    }

    /* Prevent text selection from interfering with rapid scrolling */
    .card-hd,
    .sidebar-top,
    .nav-brand-name {
      user-select: none;
    }

    /* 🛠️ TABLE COMPACT UI - Fixes the "Too Big" dropdowns in task lists */
    td .status-sel,
    td .priority-sel {
      height: 32px !important;
      padding: 0 0.5rem !important;
      padding-right: 1.25rem !important;
      font-size: 0.75rem !important;
      border-radius: 6px !important;
      width: 140px !important;
      min-width: 140px !important;
      background-position: right 0.35rem center !important;
    }

    .assign-editor-wrap {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 5px !important;
      margin-top: 5px !important;
      border-top: 1px dashed var(--border) !important;
      padding-top: 5px !important;
    }

    .assign-editor-sel {
      height: 28px !important;
      padding: 0 5px !important;
      font-size: 0.7rem !important;
      border-radius: 5px !important;
      flex: 1;
      min-width: 110px !important;
    }

    .btn-wf {
      height: 28px !important;
      padding: 0 10px !important;
      font-size: 0.7rem !important;
      border-radius: 5px !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 60px !important;
    }

    /* ─── MONTHLY REPORT STYLES ─── */
    .report-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
      width: 100%;
    }

    .report-card {
      background: white;
      padding: 1.5rem;
      border-radius: 20px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .report-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .report-stat-item {
      text-align: center;
      padding: 1rem;
      background: var(--gray-50);
      border-radius: 16px;
      border: 1px solid var(--gray-100);
    }

    .report-stat-label {
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .report-summary-card {
      background: linear-gradient(135deg, var(--blue-600) 0%, var(--violet-600) 100%);
      color: white;
      grid-column: 1 / -1;
      border-radius: 24px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2);
    }

    .report-summary-card::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    .report-stat-value {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 1;
    }





    @keyframes fadeInSlide {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-report {
      animation: fadeInSlide 0.6s ease-out forwards;
    }

    .report-card-premium {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .spinner-premium {
      width: 50px;
      height: 50px;
      border: 4px solid var(--slate-100);
      border-top-color: var(--blue-600);
      border-radius: 50%;
      animation: spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
      box-shadow: 0 0 15px rgba(37, 99, 235, 0.15);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    * {
      box-sizing: border-box;
    }

    model-viewer {
      touch-action: pan-y;
    }

    @media (max-width: 768px) {

      /* 0. GLOBAL SCROLL FIX */
      html,
      body,
      #app,
      .main-wrapper {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: visible !important;
        overflow-x: clip !important;
      }

      /* 1. RESPONSIVE LAYOUT */
      [style*="grid-template-columns"],
      .grid,
      .form-grid-2,
      .form-grid-3,
      .dashboard-grid,
      .attendance-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
      }

      /* 2. WIDTH & OVERFLOW */
      .main-wrapper,
      .card,
      .container,
      #main-content,
      [style*="max-width"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* 3. SIDEBAR */
      #app-sidebar {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 280px !important;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease-in-out !important;
      }

      #app-sidebar.show,
      #app-sidebar.active,
      body.sidebar-open #app-sidebar {
        left: 0 !important;
      }

      .main-wrapper {
        margin-left: 0 !important;
      }

      #mobile-menu-btn,
      #sidebar-close-btn {
        display: flex !important;
      }

      /* 4. TABLES */
      .tbl-wrap,
      .table-wrap,
      .p3-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        display: block !important;
      }

      table {
        min-width: 650px !important;
        width: 100% !important;
      }

      /* 5. FORMS */
      .form-control,
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea,
      .form-group {
        width: 100% !important;
        max-width: 100% !important;
      }

      [style*="display:flex; gap:1rem;"],
      [style*="display:flex; gap:1.25rem;"] {
        flex-direction: column !important;
      }

      /* 6. SPACING */
      .card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
      }

      main,
      #main-content {
        padding: 1rem !important;
      }

      /* 7. BUTTONS */
      .btn,
      .btn-primary,
      .btn-full,
      .login-submit-btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
      }

      .nav-mobile-btn,
      .nav-notif-btn,
      .remove-link-btn,
      .mc-del-btn,
      .btn-sm,
      button[style*="width:"] {
        width: auto !important;
        display: inline-flex !important;
      }

      /* 8. NAVBAR */
      #navbar,
      .nav-inner {
        padding: 0.5rem 1rem !important;
        justify-content: space-between !important;
      }

      .nav-right {
        gap: 0.75rem !important;
      }

      .nav-user-stack {
        display: none !important;
      }
    }

    #app-sidebar.sidebar-open {
      left: 0 !important;
    }

    /* ─── LOGIN MOBILE FIXES ─── */
    .login-brand img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      margin-bottom: 1.25rem;
      filter: drop-shadow(0 8px 16px rgba(99, 102, 241, 0.4));
    }

    @media (max-width: 991px) {
      .login-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 3.5rem 2rem !important;
      }

      .login-brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
      }

      .login-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.1rem !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 2.5rem !important;
        text-align: left !important;
      }

      .login-feature {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
      }

      .login-left-footer {
        display: block !important;
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-top: 1rem !important;
        opacity: 0.5 !important;
      }
    }

    /* --- FINAL DESKTOP STABILITY FIX --- */
    @media (min-width: 992px) {
      .main-wrapper {
        margin-left: 240px !important;
        width: calc(100% - 240px) !important;
      }

      #app-sidebar {
        left: 0 !important;
        transform: none !important;
      }
    }

    /* ─── LAYOUT SHIFT FIX ─── */
    /* Prevent content from shifting left on page refresh */
    .main-wrapper {
      margin-left: 240px !important;
      width: calc(100% - 240px) !important;
      transition: none !important;
      /* Force remove transition that causes animated shift on load */
    }

    @media (max-width: 991px) {
      .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
      }
    }

    /* Re-enable transition only after page has loaded */
    body.loaded .main-wrapper {
      transition: margin-left var(--transition), width var(--transition) !important;
    }