/* Modern Toastify Styling */
      .toastify {
        position: fixed !important;
        left: 50% !important;
        top: 0.5rem !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 99999 !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        
        /* Modern styling */
        padding: 10px 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
        font-family: 'Kanit', sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        backdrop-filter: blur(10px) !important;
        white-space: nowrap !important;
        
        /* Smooth animation */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      
      .toastify.on {
        opacity: 1 !important;
      }
      
      /* Success toast - Clean & minimal */
      .toastify.toastify-success {
        background: #ffffff !important;
        color: #1a202c !important;
        border-left: 4px solid #48bb78 !important;
        box-shadow: 0 4px 12px rgba(72, 187, 120, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
      }
      
      /* Error toast - Clean & minimal */
      .toastify.toastify-error {
        background: #ffffff !important;
        color: #1a202c !important;
        border-left: 4px solid #f56565 !important;
        box-shadow: 0 4px 12px rgba(245, 101, 101, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
      }

      /* Warning toast - Clean & minimal */
      .toastify.toastify-warning {
        background: #ffffff !important;
        color: #1a202c !important;
        border-left: 4px solid #f59e0b !important;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
      }

      /* Info toast - Clean & minimal */
      .toastify.toastify-info {
        background: #ffffff !important;
        color: #1a202c !important;
        border-left: 4px solid #3b82f6 !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
      }
      
      /* Progress bar - Modern & sleek */
      .toastify-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 0 0 12px 12px;
        animation: toastProgress linear;
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
      }
      
      @keyframes toastProgress {
        from { width: 100%; }
        to { width: 0%; }
      }
      
      /* Hover effect */
      .toastify:hover {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.15) !important;
        transform: translateX(-50%) translateY(-2px) !important;
      }
      body {
        box-sizing: border-box;
        font-family: "Kanit", sans-serif;
        overflow-x: hidden;
      }
      body.app-shell {
        --app-color-bg: #f3fbfb;
        --app-color-bg-soft: #edf9f7;
        --app-color-surface: rgba(255, 255, 255, 0.74);
        --app-color-surface-strong: rgba(255, 255, 255, 0.88);
        --app-color-border: rgba(255, 255, 255, 0.58);
        --app-color-border-soft: rgba(148, 163, 184, 0.22);
        --app-color-text-primary: #0f172a;
        --app-color-text-secondary: #1f2937;
        --app-color-text-muted: #475569;
        --app-color-primary: #0f9f93;
        --app-color-primary-strong: #0b8a7f;
        --app-color-primary-accent: #14b8a6;
        --app-color-primary-accent-strong: #10b981;
        --app-color-secondary: #0f8bd7;
        --app-color-secondary-strong: #0369a1;
        --app-color-info-bg: rgba(224, 242, 254, 0.88);
        --app-color-info-text: #075985;
        --app-color-success-bg: rgba(220, 252, 231, 0.9);
        --app-color-success-text: #166534;
        --app-color-danger-bg: rgba(255, 228, 230, 0.92);
        --app-color-danger-text: #be123c;
        --app-shadow-soft: 0 10px 26px rgba(15, 118, 110, 0.08);
        --app-shadow-medium: 0 14px 34px rgba(15, 118, 110, 0.12);
        --app-shadow-strong: 0 18px 38px rgba(15, 118, 110, 0.18);
        background:
          radial-gradient(circle at top left, rgba(153, 246, 228, 0.28), transparent 26%),
          radial-gradient(circle at top right, rgba(125, 211, 252, 0.22), transparent 24%),
          linear-gradient(180deg, #f6fcfc 0%, var(--app-color-bg) 42%, var(--app-color-bg-soft) 100%);
        color: var(--app-color-text-primary);
        min-height: 100vh;
      }
      body.app-shell .loading-spinner {
        border-top-color: var(--app-color-primary-accent);
      }
      body.app-shell .glass-card,
      body.app-shell .glass-card-light,
      body.app-shell .glass-card-strong,
      body.app-shell .app-panel-card,
      body.app-shell .app-panel-muted {
        border-color: var(--app-color-border);
        box-shadow: var(--app-shadow-soft);
      }
      body.app-shell .glass-card {
        background: var(--app-color-surface);
      }
      body.app-shell .glass-card-light,
      body.app-shell .app-panel-muted {
        background: rgba(255, 255, 255, 0.64);
      }
      body.app-shell .glass-card-strong,
      body.app-shell .app-panel-card {
        background: var(--app-color-surface-strong);
        box-shadow: var(--app-shadow-medium);
      }
      body.app-shell .glass-sidebar {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 253, 250, 0.88) 45%,
            rgba(236, 253, 245, 0.84) 100%
          );
        border-right-color: rgba(255, 255, 255, 0.7);
        box-shadow: 10px 0 30px rgba(15, 118, 110, 0.08);
      }
      body.app-shell .glass-topbar {
        background: rgba(255, 255, 255, 0.78);
        border-bottom-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
      }
      body.app-shell .glass-btn {
        background-color: rgba(255, 255, 255, 0.78);
        border-color: rgba(255, 255, 255, 0.58);
        color: var(--app-color-text-primary);
        box-shadow: 0 8px 18px rgba(15, 118, 110, 0.1);
      }
      body.app-shell .glass-btn:hover {
        background-color: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
      }
      body.app-shell .glass-text-primary {
        color: var(--app-color-text-primary);
      }
      body.app-shell .glass-text-secondary {
        color: var(--app-color-text-secondary);
      }
      body.app-shell .glass-text-muted {
        color: var(--app-color-text-muted);
      }
      body.app-shell .calendar-day:hover {
        background-color: rgba(224, 247, 245, 0.9);
        box-shadow: inset 0 0 0 2px rgba(15, 159, 147, 0.28);
      }
      body.app-shell .calendar-day.calendar-today {
        background: rgba(15, 159, 147, 0.08) !important;
        box-shadow: inset 0 0 0 2px rgba(15, 159, 147, 0.42) !important;
      }
      body.app-shell .calendar-day-number-today {
        background: linear-gradient(
          135deg,
          var(--app-color-primary-accent) 0%,
          var(--app-color-primary-accent-strong) 100%
        );
        box-shadow: 0 6px 16px rgba(15, 159, 147, 0.24);
      }
      body.app-shell .app-toolbar-input,
      body.app-shell .input,
      body.app-shell .glass-input {
        background: rgba(255, 255, 255, 0.9);
        border-color: var(--app-color-border-soft);
        color: var(--app-color-text-primary);
      }
      body.app-shell .app-toolbar-input:focus,
      body.app-shell .input:focus,
      body.app-shell .glass-input:focus {
        border-color: rgba(15, 159, 147, 0.45);
        box-shadow: 0 0 0 3px rgba(15, 159, 147, 0.12);
        background: rgba(255, 255, 255, 0.98);
      }
      body.app-shell .app-soft-btn,
      body.app-shell .btn-soft {
        background: rgba(255, 255, 255, 0.78);
        border-color: rgba(203, 213, 225, 0.82);
        color: var(--app-color-text-muted);
      }
      body.app-shell .app-soft-btn:hover,
      body.app-shell .btn-soft:hover {
        background: rgba(255, 255, 255, 0.94);
      }
      body.app-shell .app-primary-btn,
      body.app-shell .btn,
      body.app-shell .btn-gradient-primary,
      body.app-shell .app-mobile-menu-btn,
      body.app-shell .app-brand-gradient-bg {
        background: linear-gradient(
          135deg,
          var(--app-color-primary-accent) 0%,
          var(--app-color-primary-accent-strong) 100%
        );
        color: #ffffff;
      }
      body.app-shell .app-primary-btn,
      body.app-shell .btn,
      body.app-shell .btn-gradient-primary,
      body.app-shell .app-mobile-menu-btn {
        box-shadow: 0 12px 28px rgba(15, 159, 147, 0.2);
      }
      body.app-shell .app-primary-btn:hover,
      body.app-shell .btn:hover,
      body.app-shell .btn-gradient-primary:hover,
      body.app-shell .app-mobile-menu-btn:hover {
        box-shadow: var(--app-shadow-strong);
      }
      body.app-shell .app-secondary-btn {
        background: linear-gradient(
          135deg,
          var(--app-color-secondary) 0%,
          var(--app-color-secondary-strong) 100%
        );
        color: #ffffff;
      }
      body.app-shell .app-icon-btn {
        background: rgba(255, 255, 255, 0.84);
        border-color: rgba(203, 213, 225, 0.82);
        color: var(--app-color-text-muted);
      }
      body.app-shell .app-icon-btn-warn {
        border-color: rgba(253, 230, 138, 0.95);
        color: #b45309;
      }
      body.app-shell .app-chip-btn {
        background: rgba(255, 255, 255, 0.76);
        border-color: rgba(203, 213, 225, 0.72);
        color: var(--app-color-text-secondary);
      }
      body.app-shell .app-chip-btn-active,
      body.app-shell .menu-item.active {
        background: linear-gradient(
          135deg,
          rgba(20, 184, 166, 0.16) 0%,
          rgba(16, 185, 129, 0.22) 100%
        );
        border-color: rgba(20, 184, 166, 0.08);
        box-shadow: 0 10px 22px rgba(15, 159, 147, 0.12);
      }
      body.app-shell .menu-item.active {
        color: var(--app-color-text-primary);
      }
      body.app-shell .app-table-body {
        background: rgba(255, 255, 255, 0.66);
      }
      body.app-shell .app-table-row {
        background: rgba(255, 255, 255, 0.42);
      }
      body.app-shell .app-table-row:nth-child(even) {
        background: rgba(248, 250, 252, 0.8);
      }
      body.app-shell .app-table-row:hover {
        background: rgba(255, 255, 255, 0.9);
      }
      body.app-shell .app-status-pill-info {
        background: var(--app-color-info-bg);
        color: var(--app-color-info-text);
      }
      body.app-shell .app-status-pill-danger {
        background: var(--app-color-danger-bg);
        color: var(--app-color-danger-text);
      }
      body.app-shell .app-status-pill-success {
        background: var(--app-color-success-bg);
        color: var(--app-color-success-text);
      }
      body.app-shell .app-status-pill-muted {
        background: rgba(226, 232, 240, 0.84);
        color: var(--app-color-text-muted);
      }
      body.app-shell .app-table-action {
        color: var(--app-color-secondary-strong);
      }
      body.app-shell .app-table-action:hover {
        color: #075985;
      }
      body.app-shell .app-table-action-danger {
        color: var(--app-color-danger-text);
      }
      body.app-shell .app-brand-gradient-text,
      body.app-shell .gradient-text {
        background: linear-gradient(
          135deg,
          var(--app-color-primary) 0%,
          var(--app-color-primary-accent-strong) 65%,
          #22c55e 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      body.app-shell .app-page-subtitle {
        color: var(--app-color-text-muted);
      }
      body.app-shell .app-mobile-menu-btn {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
      }
      body.app-shell .app-mobile-menu-btn:hover {
        transform: scale(1.05);
      }
      body.app-shell .app-loading-overlay {
        background: rgba(247, 252, 251, 0.56);
      }
      body.app-shell .app-loading-panel {
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid rgba(255, 255, 255, 0.68);
        box-shadow: var(--app-shadow-medium);
      }
      body.app-shell .app-loading-text {
        color: var(--app-color-text-secondary);
      }
      body.app-shell .app-section-card-header {
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.34) 0%,
          rgba(255, 255, 255, 0.12) 100%
        );
        border-bottom: 1px solid rgba(255, 255, 255, 0.42);
      }
      body.app-shell .app-table-head {
        background: rgba(248, 250, 252, 0.92);
        border-bottom: 1px solid rgba(226, 232, 240, 0.92);
        color: var(--app-color-text-muted);
      }
      body.app-shell .app-table-head-cell {
        color: var(--app-color-text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      body.app-shell .app-table-body-default {
        background: rgba(255, 255, 255, 0.92);
      }
      body.app-shell .app-modal-backdrop {
        background: rgba(15, 23, 42, 0.38);
      }
      body.app-shell .app-modal-shell {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.68);
        box-shadow: var(--app-shadow-strong);
      }
      body.app-shell .app-modal-header {
        background: linear-gradient(
          90deg,
          rgba(240, 253, 250, 0.9) 0%,
          rgba(255, 255, 255, 0.86) 52%,
          rgba(236, 253, 245, 0.78) 100%
        );
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      }
      body.app-shell .app-modal-title-icon {
        background: linear-gradient(
          135deg,
          var(--app-color-primary-accent) 0%,
          var(--app-color-primary-accent-strong) 100%
        );
        color: #ffffff;
        box-shadow: 0 14px 26px rgba(15, 159, 147, 0.18);
      }
      body.app-shell .app-modal-title {
        color: var(--app-color-text-primary);
      }
      body.app-shell .app-modal-subtitle {
        color: #64748b;
      }
      body.app-shell .app-modal-close-btn {
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(203, 213, 225, 0.82);
        color: #64748b;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
      }
      body.app-shell .app-modal-close-btn:hover {
        background: rgba(255, 255, 255, 0.96);
        color: var(--app-color-text-primary);
      }
      body.app-shell .app-kpi-icon {
        background: linear-gradient(
          135deg,
          var(--app-color-primary-accent) 0%,
          var(--app-color-primary-accent-strong) 100%
        );
        color: #ffffff;
      }
      .line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
      }
      #mainContent {
        transition: margin-left 420ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 240ms ease-in-out;
      }
      .loading-spinner {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #26a69a;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .calendar-day {
        transition: background-color 0.2s ease, box-shadow 0.2s ease,
          transform 0.2s ease;
        min-height: 60px;
      }
      
      /* Responsive calendar day heights */
      @media (max-width: 640px) {
        .calendar-day {
          min-height: 50px;
          font-size: 0.75rem;
        }
      }
      
      @media (min-width: 641px) and (max-width: 768px) {
        .calendar-day {
          min-height: 55px;
          font-size: 0.8125rem;
        }
      }
      
      .calendar-day:hover {
        background-color: #e6f7ff; /* subtle sky tone */
        color: inherit; /* keep text readable */
        box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.35);
        transform: translateY(-1px);
      }

      /* Today highlight */
      .calendar-day.calendar-today {
        background: rgba(20, 184, 166, 0.08) !important;
        box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.45) !important;
      }

      .calendar-day-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.4rem;
        height: 1.4rem;
        border-radius: 9999px;
        padding: 0 0.3rem;
        font-size: 0.75rem;
      }
      
      @media (min-width: 640px) {
        .calendar-day-number {
          min-width: 1.65rem;
          height: 1.65rem;
          padding: 0 0.4rem;
          font-size: 0.875rem;
        }
      }

      .calendar-day-number-today {
        background: rgba(20, 184, 166, 0.95);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.22);
      }
      
      @media (min-width: 640px) {
        .calendar-day-number-today {
          box-shadow: 0 6px 16px rgba(20, 184, 166, 0.22);
        }
      }

      /* Month calendar layout + Google Calendar-like event bars */
      .calendar-month {
        width: 100%;
      }

      .calendar-header {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.125rem;
        font-size: 0.6875rem;
        font-weight: 600;
        padding-bottom: 0.25rem;
      }
      
      @media (min-width: 640px) {
        .calendar-header {
          gap: 0.25rem;
          font-size: 0.75rem;
          padding-bottom: 0.5rem;
        }
      }

      .calendar-week {
        position: relative;
        overflow: hidden;
      }

      .calendar-week-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.125rem;
      }
      
      @media (min-width: 640px) {
        .calendar-week-grid {
          gap: 0.25rem;
        }
      }

      /* Absolute layer above cells for multi-day bars */
      .calendar-week-bars {
        position: absolute;
        left: 0;
        right: 0;
        top: 32px;
        padding: 0 2px;
        pointer-events: none; /* allow day-cell clicks; bars re-enable */
      }
      
      @media (min-width: 640px) {
        .calendar-week-bars {
          top: 34px;
          padding: 0 3px;
        }
      }

      .calendar-event-bar {
        position: absolute;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        height: 16px;
        line-height: 16px;
        font-size: 0.625rem;
        padding: 0 4px;
        border-radius: 9999px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.35);
        will-change: left, width, top;
        transform: translateZ(0);
        transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1),
          width 320ms cubic-bezier(0.22, 1, 0.36, 1),
          top 320ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 180ms ease;
      }
      
      @media (min-width: 640px) {
        .calendar-event-bar {
          height: 18px;
          line-height: 18px;
          font-size: 0.6875rem;
          padding: 0 6px;
        }
      }

      .calendar-event-bar:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25),
          0 1px 2px rgba(0, 0, 0, 0.08);
      }

      .calendar-day-count {
        margin-top: auto;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        font-size: 0.625rem;
        line-height: 1;
        padding: 2px 0 3px;
        border-radius: 6px;
        background: transparent;
        color: rgba(71, 85, 105, 0.95);
        font-weight: 600;
        cursor: pointer;
        border: 0;
        text-decoration: none;
      }
      
      @media (min-width: 640px) {
        .calendar-day-count {
          gap: 0.35rem;
          font-size: 0.6875rem;
          padding: 2px 0 4px;
        }
      }
      
      .calendar-day-count:hover {
        background: transparent;
        color: rgba(30, 41, 59, 1);
        text-decoration: underline;
      }
      .calendar-day-count:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
      }

      @media (min-width: 768px) {
        .calendar-week-bars {
          top: 36px;
          padding: 0 4px;
        }
        .calendar-event-bar {
          height: 20px;
          line-height: 20px;
          font-size: 0.75rem;
          padding: 0 8px;
        }
        .calendar-day-count {
          font-size: 0.6875rem;
        }
      }
      .sidebar-transition {
        transition: transform 0.3s ease-in-out;
      }
      .task-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
      }
      .modal-backdrop {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
      /* Blur background for SweetAlert2 overlays (exclude toasts) */
      .swal2-container:not(.swal2-toast) {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background-color: rgba(0, 0, 0, 0.25) !important;
        z-index: 99998 !important;
      }
      /* Toasts should not dim/blur background */
      .swal2-container.swal2-toast {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: transparent !important;
      }
      .soft-shadow {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      }

      /* ============================================
         GLASSMORPHISM STYLES - Performance Optimized
         - GPU acceleration with translateZ(0)
         - Browser fallback with @supports
         - WCAG AA contrast (4.5:1) with darker text
         - Max 2 backdrop-filter layers
         ============================================ */
      
      /* Base glass card - for main containers */
      .glass-card {
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.4);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
        transform: translateZ(0); /* GPU acceleration */
        -webkit-transform: translateZ(0);
      }
      
      /* Light glass card - lighter opacity */
      .glass-card-light {
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.35);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Strong glass card - for prominent sections */
      .glass-card-strong {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Glass input fields */
      .glass-input {
        background: rgba(255, 255, 255, 0.6);
        border: 2px solid rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        color: #1e293b; /* slate-900 for contrast */
      }
      
      .glass-input:focus {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(6, 182, 212, 0.6); /* cyan-500 */
        outline: none;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
      }
      
      .glass-input::placeholder {
        color: #64748b; /* slate-500 for sufficient contrast */
      }
      
      /* Glass buttons */
      .glass-btn {
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        color: #0f172a; /* slate-900 */
        transition: all 0.2s ease;
      }
      
      .glass-btn:hover {
        background-color: rgba(255, 255, 255, 0.85);
        box-shadow: 0 6px 16px rgba(20, 184, 166, 0.25);
        transform: translateZ(0) translateY(-1px);
      }
      
      .glass-btn:active {
        transform: translateZ(0) translateY(0);
      }
      
      /* Glass table header */
      .glass-thead {
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Glass table row */
      .glass-tr {
        background: rgba(255, 255, 255, 0.4);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        transition: background 0.2s ease;
      }
      
      .glass-tr:hover {
        background: rgba(255, 255, 255, 0.6);
      }
      
      /* Glass sidebar */
      .glass-sidebar {
        background: linear-gradient(180deg, 
          rgba(255, 255, 255, 0.85) 0%, 
          rgba(240, 249, 255, 0.85) 50%,
          rgba(224, 242, 254, 0.8) 100%);
        border-right: 1px solid rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

      .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 0.2rem 0;
      }

      .sidebar-brand-mark {
        flex: 0 0 auto;
      }

      .sidebar-brand-mark-inner {
        width: 3.15rem;
        height: 3.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      .sidebar-brand-logo {
        width: 3rem;
        height: 3rem;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 10px 18px rgba(20, 184, 166, 0.18));
        transform: translateY(-1px);
      }

      .sidebar-brand-copy {
        min-width: 0;
        line-height: 1.08;
      }

      .sidebar-brand-title {
        font-size: 1.18rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 0.28rem;
      }

      .sidebar-brand-subtitle {
        font-size: 0.7rem;
        line-height: 1.2;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }

      /* Superadmin: black sidebar theme (scoped) */
      .superadmin-sidebar.glass-sidebar {
        background: rgba(0, 0, 0, 0.92);
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.25);
      }

      .superadmin-sidebar .glass-text-primary,
      .superadmin-sidebar .glass-text-secondary {
        color: rgba(255, 255, 255, 0.92);
      }

      .superadmin-sidebar .glass-text-muted {
        color: rgba(255, 255, 255, 0.72);
      }

      .superadmin-sidebar .glass-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.92);
        box-shadow: none;
      }

      .superadmin-sidebar .glass-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: none;
        transform: translateZ(0);
      }

      .superadmin-sidebar .sa-nav-link.sa-nav-active {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-weight: 600;
        position: relative;
      }

      .superadmin-sidebar .sa-nav-link.sa-nav-active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        bottom: 10%;
        width: 3px;
        border-radius: 9999px;
        background: rgba(16, 185, 129, 0.95);
      }

      .superadmin-sidebar .sa-nav-group {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .superadmin-sidebar .sa-nav-group:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .superadmin-sidebar .sa-nav-group-title {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin: 0.25rem 0 0.5rem;
        padding: 0 0.25rem;
      }

      .superadmin-sidebar .sa-nav-group-toggle {
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        padding: 0.25rem;
        margin: 0.25rem 0 0.5rem;
        cursor: pointer;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }

      .superadmin-sidebar .sa-nav-group-toggle::after {
        content: "\25BE";
        opacity: 0.85;
        transform: translateY(-1px);
      }

      .superadmin-sidebar .sa-nav-group.sa-nav-collapsed .sa-nav-group-toggle::after {
        content: "\25B8";
        transform: translateY(-1px);
      }

      .superadmin-sidebar .sa-nav-group.sa-nav-collapsed .sa-nav-group-links {
        display: none;
      }
      
      /* Glass topbar */
      .glass-topbar {
        background: rgba(255, 255, 255, 0.75);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Glass modal backdrop - Layer 1 */
      .glass-modal-backdrop {
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Glass modal content - Layer 2 (max depth) */
      .glass-modal-content {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        /* NO backdrop-filter here to avoid 3-layer nesting */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Text colors for accessibility on glass backgrounds */
      .glass-text-primary {
        color: #0f172a; /* slate-900 - Contrast 14.59:1 on white/75 */
      }
      
      .glass-text-secondary {
        color: #1e293b; /* slate-800 - Contrast 11.3:1 */
      }
      
      .glass-text-muted {
        color: #334155; /* slate-700 - Contrast 8.59:1 */
      }
      
      /* Fallback for browsers without backdrop-filter support */
      @supports not (backdrop-filter: blur(10px)) {
        .glass-card,
        .glass-card-light,
        .glass-card-strong {
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .glass-input {
          background: rgba(255, 255, 255, 0.98);
        }
        
         .glass-btn {
           background-color: rgba(255, 255, 255, 0.98);
         }
        
        .glass-sidebar,
        .glass-topbar {
          background: rgba(255, 255, 255, 0.98);
        }
        
        .glass-thead,
        .glass-tr {
          background: rgba(255, 255, 255, 0.95);
        }
        
        .glass-modal-backdrop {
          background: rgba(255, 255, 255, 0.85);
        }
        
        .glass-modal-content {
          background: rgba(255, 255, 255, 0.98);
        }
      }
      /* Hide order column in Members table */
      #membersSection table thead th:first-child,
      #membersSection table tbody td:first-child {
        display: none;
      }
      /* Add red asterisk to required labels */
      label.required::after {
        content: " *";
        color: #ef4444; /* Tailwind red-500 */
        margin-left: 0.25rem;
      }
    

/* Extracted from superadmin.html on 2025-11-03T09:23:40.8090370+07:00 */

      body {
        font-family: Kanit, sans-serif;
      }
      .sidebar {
        width: 260px;
      }
      .sa-container {
        margin-left: 260px;
        width: calc(100% - 260px);
        min-height: 100vh;
      }
      .hidden {
        display: none;
      }

      /* Superadmin responsive layout (sidebar + content) */
      @media (max-width: 1023px) {
        .sidebar {
          transform: translateX(-110%);
          transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
          z-index: 30;
          width: 260px;
          max-width: calc(100vw - 3rem);
        }
        .sa-container {
          margin-left: 0;
          width: 100%;
        }
        body.sa-sidebar-open .sidebar {
          transform: translateX(0);
        }
        body.sa-sidebar-open {
          overflow: hidden;
        }
      }
      /* Modal */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 40;
      }
      .modal-card {
        width: 100%;
        max-width: 720px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
      }
      .modal-header {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .modal-body {
        padding: 1rem;
      }
      .modal-footer {
        padding: 0.75rem 1rem;
        border-top: 1px solid #e5e7eb;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
      }
      .btn {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        color: #fff;
        background: #0d9488;
        transition: background 0.2s;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
      }
      .btn:hover {
        background: #0f766e;
      }
      .btn-danger {
        background: #dc2626;
      }
      .btn-danger:hover {
        background: #b91c1c;
      }
      .btn-outline {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #d1d5db;
        background: #fff;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
      }
      .btn-outline:hover {
        background: #f9fafb;
      }
      /* Match outline button visual height to solid button */
      .btn-equal {
        padding-top: 0.4375rem;
        padding-bottom: 0.4375rem;
      }
      .btn-soft {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        background: #e5e7eb;
        color: #111827;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
      }
      .btn-soft:hover {
        background: #d1d5db;
      }
      .btn-back {
        position: relative;
        color: #111827;
        border-color: #cbd5e1;
      }
      .btn-back:hover {
        color: #0f172a;
      }
      .btn-back {
        padding-left: 2.25rem;
      }
      .btn-back::before {
        content: "\2190";
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        opacity: 0;
        transition: all 0.15s;
        color: #111827;
      }
      .btn-back:hover::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }
      .input {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
      }
      .app-page-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.02em;
      }
      .app-page-subtitle {
        font-size: 0.925rem;
        color: #334155;
      }
      .app-panel-card {
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1);
      }
      .app-panel-muted {
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.4);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08);
      }
      .app-toolbar-input {
        width: 100%;
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(255, 255, 255, 0.9);
        color: #0f172a;
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
      }
      .app-toolbar-input:focus {
        outline: none;
        border-color: rgba(45, 212, 191, 0.7);
        box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
        background: rgba(255, 255, 255, 0.98);
      }
      .app-toolbar-input-sm {
        min-height: 2.125rem;
        padding: 0.375rem 0.625rem;
        border-radius: 0.7rem;
        font-size: 0.8125rem;
      }
      .app-soft-btn,
      .app-primary-btn,
      .app-secondary-btn,
      .app-icon-btn,
      .app-chip-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.75rem;
        transition: all 0.2s ease;
        white-space: nowrap;
      }
      .app-soft-btn {
        min-height: 2.25rem;
        padding: 0.5rem 0.875rem;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(203, 213, 225, 0.85);
        color: #334155;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
      }
      .app-soft-btn:hover {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(148, 163, 184, 0.9);
      }
      .app-primary-btn {
        min-height: 2.5rem;
        padding: 0.55rem 1rem;
        background: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(20, 184, 166, 0.22);
      }
      .app-primary-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(20, 184, 166, 0.28);
      }
      .app-soft-btn-sm,
      .app-primary-btn-sm {
        min-height: 2.125rem;
        padding: 0.4rem 0.75rem;
        border-radius: 0.7rem;
        font-size: 0.8125rem;
      }
      .app-secondary-btn {
        min-height: 2.5rem;
        padding: 0.55rem 1rem;
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(14, 165, 233, 0.2);
      }
      .app-secondary-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(14, 165, 233, 0.26);
      }
      .app-icon-btn {
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid rgba(203, 213, 225, 0.85);
        background: rgba(255, 255, 255, 0.82);
        color: #475569;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
      }
      .app-icon-btn:hover {
        background: rgba(255, 255, 255, 0.96);
      }
      .app-icon-btn-warn {
        border-color: rgba(253, 230, 138, 0.95);
        color: #b45309;
      }
      .app-icon-btn-warn:hover {
        background: rgba(255, 251, 235, 0.96);
      }
      .app-chip-btn {
        min-height: 2.25rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid rgba(203, 213, 225, 0.75);
        background: rgba(255, 255, 255, 0.72);
        color: #1f2937;
        font-size: 0.75rem;
        font-weight: 500;
      }
      .app-chip-btn:hover {
        background: rgba(255, 255, 255, 0.92);
      }
      .app-placeholder-card {
        border: 1px dashed rgba(148, 163, 184, 0.55);
        background: rgba(240, 249, 255, 0.72);
        color: #0f172a;
      }
      .app-form-label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #475569;
      }
      .app-table-head {
        background: rgba(248, 250, 252, 0.92);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        color: #475569;
      }
      .app-table-head-cell {
        color: #475569;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .app-table-body {
        background: rgba(255, 255, 255, 0.58);
      }
      .app-table-row {
        background: rgba(255, 255, 255, 0.36);
        transition: background-color 0.2s ease;
      }
      .app-table-row:nth-child(even) {
        background: rgba(248, 250, 252, 0.78);
      }
      .app-table-row:hover {
        background: rgba(255, 255, 255, 0.88);
      }
      .app-empty-hint {
        color: #64748b;
        font-size: 0.75rem;
        text-align: center;
      }
      .app-meta-inline {
        color: #64748b;
        font-size: 0.75rem;
      }
      .app-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 9999px;
        padding: 0.125rem 0.6rem;
        font-size: 0.75rem;
        font-weight: 600;
      }
      .app-status-pill-info {
        background: rgba(224, 242, 254, 0.9);
        color: #0369a1;
      }
      .app-status-pill-danger {
        background: rgba(255, 228, 230, 0.92);
        color: #be123c;
      }
      .app-status-pill-success {
        background: rgba(220, 252, 231, 0.92);
        color: #15803d;
      }
      .app-status-pill-muted {
        background: rgba(226, 232, 240, 0.88);
        color: #475569;
      }
      .app-table-action,
      .app-table-action-danger {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        font-weight: 500;
        transition: color 0.2s ease;
      }
      .app-table-action {
        color: #0284c7;
      }
      .app-table-action:hover {
        color: #0369a1;
      }
      .app-table-action-danger {
        color: #e11d48;
      }
      .app-table-action-danger:hover {
        color: #be123c;
      }
      .app-chip-btn-active {
        background: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 8px 18px rgba(20, 184, 166, 0.2);
      }
      .clean-panel {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 1rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      }
      .clean-panel .section-title {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
      }
      .clean-panel .section-subtitle {
        font-size: 0.875rem;
        color: #6b7280;
      }
      .survey-results-page {
        background: radial-gradient(circle at top, #eef2ff 0%, #f8fafc 45%, #ecfeff 100%);
        color: #0f172a;
        min-height: 100vh;
      }
      .survey-results-page .clean-panel {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(148, 163, 184, 0.25);
        border-radius: 1.1rem;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
      }
      .survey-results-page .clean-panel::before {
        display: none;
      }
      .survey-results-page .clean-panel.p-4::before,
      .survey-results-page .clean-panel.p-5::before,
      .survey-results-page .clean-panel.p-6::before {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
      .survey-results-page .section-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: #0f172a;
      }
      .survey-results-page .section-subtitle {
        font-size: 0.8rem;
        color: #64748b;
      }
      .survey-results-page .label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #64748b;
      }
      .survey-results-page .input {
        border-radius: 0.8rem;
        border: 1px solid rgba(148, 163, 184, 0.5);
        background: #ffffff;
        padding: 0.55rem 0.8rem;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
      }
      .survey-results-page .input:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
        outline: none;
      }
      .survey-results-page table thead {
        background: linear-gradient(90deg, #f1f5f9 0%, #f8fafc 100%);
      }
      .survey-results-page table thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #475569;
      }
      .survey-results-page .survey-results-table th,
      .survey-results-page .survey-results-table td {
        white-space: nowrap;
        vertical-align: middle;
      }
      .survey-results-page .survey-results-table td:nth-child(3) {
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .survey-results-page .badge {
        border-radius: 999px;
        padding: 0.2rem 0.6rem;
        font-weight: 600;
      }
      .survey-results-page #overviewTopSubServices .text-gray-400 {
        color: #94a3b8;
      }
      .task-modal-clean .task-section {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.75rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      }
      .task-modal-clean .task-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 0.5rem;
      }
      .task-modal-clean .task-panel {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.75rem;
      }
      .task-modal-clean input[type="text"],
      .task-modal-clean input[type="number"],
      .task-modal-clean input[type="datetime-local"],
      .task-modal-clean select,
      .task-modal-clean textarea {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        box-shadow: none;
      }
      .task-modal-clean input[type="text"]:focus,
      .task-modal-clean input[type="number"]:focus,
      .task-modal-clean input[type="datetime-local"]:focus,
      .task-modal-clean select:focus,
      .task-modal-clean textarea:focus {
        outline: none;
        border-color: #94a3b8;
        box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
      }
      .label {
        font-size: 0.875rem;
        color: #4b5563;
      }
      .card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        background: #f3f4f6;
        color: #111827;
      }
      .switch {
        position: relative;
        width: 44px;
        height: 24px;
        display: inline-block;
      }
      .switch input {
        display: none;
      }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #e5e7eb;
        transition: 0.2s;
        border-radius: 9999px;
      }
      .slider:before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 4px;
        top: 3px;
        background: white;
        transition: 0.2s;
        border-radius: 9999px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
      input:checked + .slider {
        background: #10b981;
      }
      input:checked + .slider:before {
        transform: translateX(20px);
      }
      .toast {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 100000;
        background: #111827;
        color: #fff;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        opacity: 0.95;
      }
      .muted {
        color: #6b7280;
        font-size: 0.875rem;
      }

      /* Horizontal scroll hint for wide tables (keep all columns visible via swipe) */
      .scroll-shadow-x {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        box-shadow: inset 14px 0 14px -14px rgba(0, 0, 0, 0.18),
          inset -14px 0 14px -14px rgba(0, 0, 0, 0.18);
      }

      /* Skeleton Loading Animation */
      .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s ease-in-out infinite;
        border-radius: 4px;
      }

      @keyframes skeleton-loading {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }

      .skeleton-text {
        height: 1rem;
        margin-bottom: 0.5rem;
      }

      .skeleton-text:last-child {
        width: 80%;
      }

      .skeleton-card {
        padding: 1.5rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .skeleton-table-row {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
      }

      .skeleton-table-cell {
        height: 1.25rem;
        flex: 1;
      }

      .skeleton-calendar-cell {
        aspect-ratio: 1;
        border-radius: 0.5rem;
      }

      /* Hide skeleton when content loaded */
      .content-loaded .skeleton-wrapper {
        display: none;
      }
      
      /* ===== Modern Task Modal Animations ===== */
      @keyframes modalFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      @keyframes modalSlideIn {
        from {
          opacity: 0;
          transform: scale(0.95) translateY(-20px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      /* Apply animations when modal is shown */
      #taskModal.flex {
        animation: modalFadeIn 0.3s ease-out;
      }
      
      #taskModal.flex #taskModalContent {
        animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        opacity: 1;
        transform: scale(1) translateY(0);
      }
      
      .animate-fadeIn {
        animation: fadeIn 0.2s ease-out;
      }
      
      /* Smooth transitions for form inputs */
      input:focus, select:focus, textarea:focus {
        transform: translateY(-1px);
      }
      
      /* Gradient text for headings */
      .gradient-text {
        background: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      /* Glass effect for inputs */
      .glass-input {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.9);
      }
      
      /* Hover lift effect */
      .hover-lift {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }
      
      /* Modern Card Styles */
      .modern-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        border-radius: 1rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .modern-card:hover {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
      }
      
      /* Modern Button Gradients */
      .btn-gradient-primary {
        background: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
        transition: all 0.3s ease;
      }
      
      .btn-gradient-primary:hover {
        box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
        transform: translateY(-2px);
      }
      
      .btn-gradient-secondary {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
      }
      
      .btn-gradient-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
      }
      
      /* Active Menu Item */
      .menu-item.active {
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
      }

      .menu-group-toggle .menu-group-caret {
        transform: rotate(0deg);
      }

      .menu-group-toggle.menu-group-open .menu-group-caret {
        transform: rotate(90deg);
      }

      .menu-group-items .menu-subitem {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        font-size: 0.875rem;
      }

      .menu-group-items .menu-subitem .w-10 {
        width: 2rem;
        height: 2rem;
      }

      .menu-group-items .menu-subitem .text-sm {
        font-size: 0.75rem;
      }
      
      /* Smooth Page Transitions */
      .page-transition {
        animation: fadeInUp 0.4s ease-out;
      }
      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      /* Custom Scrollbar */
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      
      ::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 6px;
      }
      
      ::-webkit-scrollbar-thumb {
        background: #9ca3af;
        border-radius: 6px;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: #d1d5db;
      }
      
      /* ===== Print Styles for Task View Modal ===== */
      @media print {
        /* Hide unnecessary elements */
        body * {
          visibility: hidden;
        }
        
        #taskViewModal,
        #taskViewModal * {
          visibility: visible;
        }
        
        #taskViewModal {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          background: white !important;
          backdrop-filter: none !important;
        }
        
        /* Hide interactive elements */
        .print\\:hidden {
          display: none !important;
        }
        
        /* Optimize layout for print */
        #taskViewModalContent {
          max-height: none !important;
          border: none !important;
          box-shadow: none !important;
          border-radius: 0 !important;
        }
        
        /* Page break control */
        .print-avoid-break {
          page-break-inside: avoid;
          break-inside: avoid;
        }
        
        .print-section {
          page-break-inside: auto;
        }
        
        /* Remove backgrounds and effects for better printing */
        .backdrop-blur-md,
        .backdrop-blur-xl {
          backdrop-filter: none !important;
        }
        
        .bg-gradient-to-r,
        .bg-gradient-to-br,
        .bg-gradient-to-l {
          background: white !important;
        }
        
        /* Ensure text is readable */
        .text-transparent {
          -webkit-text-fill-color: initial !important;
          background-clip: initial !important;
          color: #1a202c !important;
        }
        
        /* Optimize shadows for print */
        .shadow-lg,
        .shadow-xl,
        .shadow-2xl,
        .shadow-md {
          box-shadow: none !important;
        }
        
        /* Make borders visible */
        .border-white\/50,
        .border-white\/60 {
          border-color: #e5e7eb !important;
        }
        
        /* Print-specific utilities */
        .print\\:bg-gray-50 {
          background-color: #f9fafb !important;
        }
        
        .print\\:bg-white {
          background-color: white !important;
        }
        
        .print\\:border-gray-300 {
          border-color: #d1d5db !important;
        }
        
        .print\\:border-gray-200 {
          border-color: #e5e7eb !important;
        }
        
        .print\\:text-gray-900 {
          color: #1a202c !important;
        }
        
        .print\\:bg-none {
          background: none !important;
        }
        
        .print\\:block {
          display: block !important;
        }
        
        .print\\:text-sm {
          font-size: 0.875rem !important;
        }
        
        .print\\:text-xs {
          font-size: 0.75rem !important;
        }
        
        .print\\:w-6 {
          width: 1.5rem !important;
        }
        
        .print\\:h-6 {
          height: 1.5rem !important;
        }
        
        .print\\:p-4 {
          padding: 1rem !important;
        }
        
        .print\\:grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        
        .print\\:gap-4 {
          gap: 1rem !important;
        }
        
        .print\\:overflow-visible {
          overflow: visible !important;
        }
        
        .print\\:max-h-none {
          max-height: none !important;
        }
        
        .print\\:shadow-none {
          box-shadow: none !important;
        }
        
        .print\\:border-0 {
          border-width: 0 !important;
        }
        
        .print\\:border-b {
          border-bottom-width: 1px !important;
        }
        
        .print\\:relative {
          position: relative !important;
        }
        
        .print\\:backdrop-blur-none {
          backdrop-filter: none !important;
        }
        
        /* Page margins */
          @page {
            margin: 1cm;
            size: A4;
          }
        }