:root {
      --primary-color: #0052cc;
      --primary-hover: #0747a6;
      --bg-body: #f4f6f9;
      --bg-sidebar: #ffffff;
      --text-main: #172b4d;
      --text-muted: #6b778c;
      --border-color: #ebecf0;
      
      /* Semantic Lifecycle Colors based on new UI */
      --status-baik-bg: #e6f4ea; --status-baik-text: #198754;
      --status-dipinjam-bg: #fff3cd; --status-dipinjam-text: #fd7e14;
      --status-rusak-bg: #fff0eb; --status-rusak-text: #ff8b52;
      --status-gudang-bg: #f3e8ff; --status-gudang-text: #6f42c1;
      --status-musnah-bg: #e2e3e5; --status-musnah-text: #383d41;
    }

    body { font-family: 'Inter', sans-serif; background-color: var(--bg-body); color: var(--text-main); overflow-x: hidden; }

    /* TYPOGRAPHY & UTILITIES */
    .fs-7 { font-size: 0.85rem; }
    .fs-8 { font-size: 0.75rem; }
    .fw-semibold { font-weight: 600; }
    .text-primary-custom { color: var(--primary-color) !important; }
    .bg-primary-custom { background-color: var(--primary-color) !important; }
    .cursor-pointer { cursor: pointer; }
    .object-fit-cover { object-fit: cover; }
    .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* LAYOUT */
    #mainApp { display: flex; min-height: 100vh; }
    #publicView { min-height: 100vh; background-color: #f4f5f7; display: flex; flex-direction: column; align-items: center; padding: 20px; }

    /* SIDEBAR (Desktop) */
    .sidebar {
      width: 260px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color);
      display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
      z-index: 1040; transition: transform 0.3s ease;
    }
    .sidebar-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; }
    .sidebar-header i { font-size: 1.5rem; color: var(--primary-color); }
    .sidebar-menu { flex: 1; overflow-y: auto; padding: 15px 0; }
    .nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; padding: 10px 20px 5px; margin-top: 10px; }
    .nav-item-custom {
      padding: 10px 20px; display: flex; align-items: center; gap: 12px;
      color: var(--text-main); text-decoration: none; font-weight: 500;
      transition: all 0.2s ease; border-left: 3px solid transparent;
    }
    .nav-item-custom:hover { background-color: #ebecf0; color: var(--primary-color); }
    .nav-item-custom.active { background-color: #e6effc; color: var(--primary-color); border-left-color: var(--primary-color); }
    .nav-item-custom i { width: 20px; text-align: center; }

    /* CONTENT AREA */
    .content-wrapper { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; width: calc(100% - 260px); }
    .topbar {
      height: 64px; 
      background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%) !important; 
      border-bottom: none !important;
      display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
      position: sticky; top: 0; z-index: 1030;
      box-shadow: 0 4px 15px rgba(0, 82, 204, 0.15);
    }
    .topbar .text-dark, .topbar .text-muted { color: rgba(255,255,255,0.9) !important; }
    .topbar .fw-bold, .topbar .fw-semibold { color: #fff !important; }
    .topbar .bg-primary-custom, .topbar .bg-success-subtle { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
    .topbar .btn-light { background: rgba(255,255,255,0.2) !important; border: 1px solid rgba(255,255,255,0.3) !important; }
    .topbar .btn-light i { color: #fff !important; }
    .page-content { padding: 24px; }

    /* CARDS & PANELS */
    .card-enterprise {
      background: #fff; border: 1px solid var(--border-color); border-radius: 16px;
      box-shadow: 0 2px 10px rgba(9, 30, 66, 0.03); margin-bottom: 20px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(9, 30, 66, 0.08); }
    
    /* BADGES */
    .badge-status { padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 0.75rem; border: 1px solid transparent; }
    .bs-baik { background-color: var(--status-baik-bg); color: var(--status-baik-text); }
    .bs-dipinjam { background-color: var(--status-dipinjam-bg); color: var(--status-dipinjam-text); }
    .bs-rusak { background-color: var(--status-rusak-bg); color: var(--status-rusak-text); }
    .bs-gudang { background-color: var(--status-gudang-bg); color: var(--status-gudang-text); }
    .bs-musnah { background-color: var(--status-musnah-bg); color: var(--status-musnah-text); }

    /* ANALYTICS */
    .report-card { border-left: 4px solid var(--primary-color); }
    .report-card.alert-card { border-left-color: var(--status-rusak-text); background-color: #fffaf9; }
    .insight-list { list-style: none; padding: 0; margin: 0; }
    .insight-list li { padding: 10px 0; border-bottom: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
    .insight-list li:last-child { border-bottom: none; }

    /* MOBILE UI SPECIFICS (DASHBOARD & ASET) */
    .mob-hero { background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%); color: white; border-radius: 20px; position: relative; overflow: hidden; }
    .mob-hero .hero-img { position: absolute; right: -20px; bottom: -20px; height: 140px; opacity: 0.9; }
    .mob-stat-card { border-radius: 16px; border: 1px solid var(--border-color); background: #fff; padding: 16px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
    .mob-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
    .mob-filter-chip { padding: 10px 20px; border-radius: 24px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--border-color); background: #fff; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; min-width: 90px; }
    .mob-filter-chip.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
    .mob-filter-chip .chip-count { font-size: 1.1rem; font-weight: 700; margin-top: 4px; color: var(--text-main); }
    .mob-filter-chip.active .chip-count { color: #fff !important; }
    
    /* App-like Grid Menu for Mobile Dashboard */
    .mob-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 10px; margin-bottom: 24px; }
    .mob-menu-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer; }
    .mob-menu-icon { width: 55px; height: 55px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition: transform 0.2s; color: var(--primary-color); }
    .mob-menu-item:hover .mob-menu-icon { transform: scale(1.05); }

    .mob-aset-card { border-radius: 16px; border: 1px solid var(--border-color); background: #fff; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
    .mob-fab-container { position: fixed; bottom: 100px; right: 20px; z-index: 1030; display: flex; flex-direction: column; gap: 12px; align-items: center; }
    .mob-fab { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 16px rgba(0,0,0,0.2); border: none; }
    
    /* BOTTOM NAV */
    .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%) !important; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 20px rgba(0, 82, 204, 0.2); z-index: 1040; padding: 8px 10px 12px; justify-content: space-around; align-items: flex-end; }
    .mobile-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.65rem; font-weight: 600; width: 60px; }
    .mobile-bottom-nav .nav-item.active { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
    .mobile-bottom-nav .nav-item i { font-size: 1.3rem; margin-bottom: 4px; }
    .scan-fab-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 60px; }
    .scan-fab { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background: #fff !important; color: #0052cc !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; border: 4px solid var(--bg-body); z-index: 1050; }
    
    /* Adjust specific responsive overrides */
    @media (max-width: 991px) {
      .mobile-bottom-nav { display: flex; }
      .sidebar { transform: translateX(-100%); display: none !important; }
      .content-wrapper { margin-left: 0; width: 100%; padding-bottom: 80px !important; }
      .desktop-topbar-items { display: none !important; }
      .topbar { padding: 15px 20px; height: auto; position: static; }
      .page-content { padding: 20px; }
    }

    /* SKELETON & NOTIF */
    .placeholder-glow .placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .notif-dropdown { width: 320px; max-height: 400px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 12px; border: 1px solid var(--border-color); }
    .notif-item { border-bottom: 1px solid #f0f0f0; padding: 12px 16px; transition: background 0.2s; }
    .notif-item:hover { background: #f8f9fa; }
    .notif-dropdown .text-dark { color: #212529 !important; }
    .notif-dropdown .text-muted { color: #6c757d !important; }
    
    /* PRINT & QR */
    @media print { 
      body.printing-stickers * { visibility: hidden !important; }
      body.printing-stickers #stickerPrintArea, body.printing-stickers #stickerPrintArea * { visibility: visible !important; }
      body.printing-stickers #stickerPrintArea { position: absolute; left: 0; top: 0; display: grid !important; grid-template-columns: repeat(4, 7cm) !important; gap: 2px !important; justify-content: center !important; align-content: start !important; width: 100%; box-sizing: border-box; margin: 0; }
      body.printing-stickers .sticker-card { border: 1.5px solid #000 !important; border-radius: 0 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
      @page { size: A4 landscape; margin: 10mm 7mm; }
    }
    .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, 7cm); gap: 0.5cm; justify-content: center; }
    .sticker-card { width: 7cm; height: 3cm; border: 1px dashed #a5adba; padding: 6px 8px; background: #fff; display: flex; flex-direction: column; gap: 4px; border-radius: 6px; box-sizing: border-box; overflow: hidden; page-break-inside: avoid; }
    .sticker-header { display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #333; padding-bottom: 3px; }
    .sticker-header img { width: 22px; height: 22px; object-fit: contain; }
    .sticker-title { font-size: 0.65rem; font-weight: 800; color: #000; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; margin: 0; }
    .sticker-body { display: flex; align-items: center; gap: 8px; flex-grow: 1; overflow: hidden; }
    .scanner-viewport { width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; border: 3px dashed var(--primary-color); border-radius: 16px; position: relative; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .scanner-line { position: absolute; width: 90%; height: 2px; background: #00ff00; box-shadow: 0 0 10px #00ff00; top: 10%; animation: scanline 2s linear infinite; }
    @keyframes scanline { 0% { top: 10%; } 50% { top: 90%; } 100% { top: 10%; } }
    .img-preview { width: 100%; height: 150px; border-radius: 8px; border: 1px dashed var(--border-color); object-fit: contain; background: #f4f5f7; }
    .table-checkbox { width: 20px; height: 20px; cursor: pointer; border-radius: 4px; border: 2px solid #ccc; }
    
    /* ASSET CARD GRID */
    .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
    @media (max-width: 768px) { .asset-grid { grid-template-columns: 1fr; } }
    @media print {
      body.printing-report > *:not(#printArea) { display: none !important; }
      #printArea { display: block !important; position: static !important; width: 100%; margin: 0; padding: 20px; }
      #printArea .table { border-collapse: collapse !important; width: 100% !important; }
      #printArea .table th, #printArea .table td { border: 1px solid #000 !important; color: #000 !important; padding: 8px !important; }
      #printArea .badge { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }
      #printArea .text-primary, #printArea .text-danger, #printArea .text-success, #printArea .text-warning { color: #000 !important; }
    }