* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #e9ecef; color: #212529; font-size: 14px; }
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ===== Topbar Ultimate ===== */
.topbar-ultimate {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 20px; height:56px; color:#fff;
  position:sticky; top:0; z-index:1030;
  background:linear-gradient(135deg, #1e2a5a 0%, #2a3a7a 25%, #3d4f8a 50%, #2a3a7a 75%, #1e2a5a 100%);
  background-size:200% 200%;
  animation:tuGradient 10s ease infinite;
  box-shadow:0 4px 24px rgba(30,42,90,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
@keyframes tuGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.topbar-ultimate::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(168,85,247,0.05) 0%, transparent 60%);
  pointer-events:none;
}
.topbar-ultimate::after {
  content:''; position:absolute; bottom:0; left:10%; right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(99,102,241,0.4), rgba(168,85,247,0.3), rgba(99,102,241,0.4), transparent);
}
.tu-bg-gradient { display:none; }

.tu-left, .tu-center, .tu-right { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.tu-left { flex:1; min-width:0; }
.tu-center { flex-shrink:0; }
.tu-right { flex:1; justify-content:flex-end; gap:8px; }

/* Hamburger */
.tu-hamburger {
  background:transparent; border:none; color:rgba(255,255,255,0.7);
  font-size:22px; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:10px; transition:all 0.2s; line-height:1;
}
.tu-hamburger:hover { background:rgba(255,255,255,0.08); color:#fff; }

/* Brand */
.tu-brand-wrap { display:flex; align-items:center; gap:10px; }
.tu-brand-icon {
  font-size:24px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(99,102,241,0.3));
}
.tu-brand { font-size:17px; font-weight:700; color:#fff; letter-spacing:-0.3px; background:linear-gradient(90deg,#fff,rgba(255,255,255,0.85)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tu-divider {
  display:inline-block; width:1px; height:20px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
  margin:0 6px;
}
.tu-divider-vert { height:26px; margin:0 4px; }
.tu-subtitle { font-size:12px; color:rgba(255,255,255,0.45); letter-spacing:0.5px; font-weight:400; }
.tu-page { font-size:12px; color:rgba(255,255,255,0.35); max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; }

/* Company Switcher - Glassmorphism */
.tu-company-btn {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  color:#fff; padding:6px 16px 6px 12px; border-radius:10px; font-size:13px;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:all 0.25s; backdrop-filter:blur(12px);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.tu-company-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.12); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.tu-company-btn i { font-size:16px; opacity:0.7; }
.tu-company-code { font-weight:600; letter-spacing:0.5px; }
.tu-company-name { opacity:0.6; font-size:12px; margin-left:4px; font-weight:400; }
.tu-currency-badge {
  background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(168,85,247,0.2)); padding:2px 10px; border-radius:6px;
  font-size:10px; font-weight:700; letter-spacing:0.5px; border:1px solid rgba(255,255,255,0.06);
}
.tu-company-icon {
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(99,102,241,0.3);
}
.tu-company-item.active { background:rgba(99,102,241,0.06) !important; }
.tu-company-item:hover { background:rgba(99,102,241,0.04); }

/* Icon Buttons */
.tu-icon-btn {
  background:transparent; border:none; color:rgba(255,255,255,0.6);
  font-size:19px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer; transition:all 0.2s; position:relative;
}
.tu-icon-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
.tu-shortcut {
  position:absolute; bottom:-1px; right:-1px;
  font-size:7px; font-weight:600; background:rgba(255,255,255,0.1);
  padding:0 4px; border-radius:4px; line-height:1.5;
  color:rgba(255,255,255,0.35); letter-spacing:0.3px;
}
.tu-create-btn {
  background:linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2));
  border:1px solid rgba(255,255,255,0.1);
  color:#fff; font-size:18px; width:auto; height:34px; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:0 14px 0 10px; border-radius:10px;
  cursor:pointer; transition:all 0.25s; position:relative;
  overflow:hidden;
}
.tu-create-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(99,102,241,0.3), rgba(168,85,247,0.3));
  opacity:0; transition:opacity 0.3s;
}
.tu-create-btn:hover::before { opacity:1; }
.tu-create-btn:hover { border-color:rgba(255,255,255,0.2); box-shadow:0 2px 12px rgba(99,102,241,0.2); }
.tu-create-btn .tu-create-label { font-size:11px; font-weight:500; position:relative; z-index:1; letter-spacing:0.3px; }
.tu-create-btn i { position:relative; z-index:1; font-size:15px; }
.tu-badge {
  position:absolute; top:2px; right:2px;
  background:#ef4444; color:#fff; font-size:8px; font-weight:700;
  padding:1px 5px; border-radius:8px; line-height:1.3; min-width:16px; text-align:center;
  box-shadow:0 0 8px rgba(239,68,68,0.4);
}
.tu-pulse-dot {
  position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:#ef4444; animation:tuPulse 1.5s ease-in-out infinite;
  box-shadow:0 0 6px rgba(239,68,68,0.5);
}
@keyframes tuPulse {
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:0.4; transform:scale(0.7)}
}

/* Clock - Digital Stylish */
.tu-clock {
  font-size:13px; color:rgba(255,255,255,0.5);
  font-family:'JetBrains Mono','Consolas','Courier New',monospace;
  padding:0 12px; letter-spacing:0.8px; font-weight:400;
  border-left:1px solid rgba(255,255,255,0.06);
  border-right:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  border-radius:6px;
  line-height:28px;
}

/* User Button */
.tu-user-btn {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  color:#fff;
  display:flex; align-items:center; gap:6px;
  padding:3px 10px 3px 3px; border-radius:16px;
  cursor:pointer; transition:all 0.25s;
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.tu-user-btn:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.1); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.tu-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:11px;
  box-shadow:0 0 0 2px rgba(99,102,241,0.2), 0 0 12px rgba(99,102,241,0.15);
  flex-shrink:0;
}
.tu-avatar-lg { width:36px; height:36px; font-size:14px; box-shadow:0 0 0 3px rgba(99,102,241,0.2); }
.tu-username { font-size:12px; font-weight:500; color:rgba(255,255,255,0.9); }
.tu-user-role { font-size:9px; color:rgba(255,255,255,0.4); padding:1px 8px; border-radius:8px; background:rgba(255,255,255,0.06); font-weight:400; letter-spacing:0.3px; }

/* Search Modal */
#globalSearchModal .modal-content { border-radius:16px !important; overflow:hidden; }
#globalSearchModal .search-filter { cursor:pointer; transition:all 0.15s; user-select:none; }
#globalSearchModal .search-filter:hover { transform:scale(1.04); }
#globalSearchModal .search-filter.active { background:var(--bs-primary) !important; color:#fff !important; }

/* Dropdown common */
.dropdown-menu.shadow-lg { border:none !important; color:#212529 !important; }
.dropdown-menu.shadow-lg .dropdown-item { color:#212529 !important; }
.dropdown-menu.shadow-lg .dropdown-item:hover { background:#f0f2ff !important; color:#1a237e !important; }
.dropdown-menu.shadow-lg small { color:#6c757d !important; }
.dropdown-menu.shadow-lg .text-muted { color:#6c757d !important; }
.dropdown-menu.shadow-lg .border-bottom { border-color:#dee2e6 !important; }
.dropdown-menu.shadow-lg .badge { color:#212529 !important; }
.dropdown-menu.shadow-lg .fw-bold { color:#212529 !important; }
.dropdown-menu.shadow-lg strong { color:#212529 !important; }
.dropdown-menu.shadow-lg .text-primary { color:#0d6efd !important; }
.dropdown-menu.shadow-lg .text-danger { color:#dc3545 !important; }

/* ===== Main Menu ===== */
.main-menu { position:sticky; top:56px; z-index:1025; background:linear-gradient(to bottom, #4a7fc1, #2e5d96); padding:0; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
.main-menu ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.main-menu li a { display:block; padding:6px 12px; color:#fff; font-size:12px; border-right:1px solid rgba(255,255,255,0.15); transition:background 0.15s; }
.main-menu li a:hover, .main-menu li a.active { background:rgba(0,0,0,0.25); color:#fff; }

.text-purple { color:#6f42c1 !important; }

/* ===== Main Content ===== */
.main { padding:12px; background:#f0f2f5; min-height:calc(100vh - 112px); padding-bottom:96px; }

/* ===== Status Bar Ultimate ===== */
.status-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:1020;
  height:40px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  background:rgba(248,249,252,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(0,0,0,0.04);
  font-size:11px; color:#495057;
  box-shadow:0 -1px 20px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8);
  transition:opacity 0.3s;
  user-select:none;
}
.status-left { display:flex; align-items:center; gap:10px; }
.status-left .sb-brand {
  font-weight:700; font-size:12px; color:#6366f1;
  letter-spacing:-0.3px;
  display:flex; align-items:center; gap:6px;
}
.status-left .sb-brand i { font-size:11px; color:#6366f1; }
.status-left .sb-sep {
  width:3px; height:3px; border-radius:50%;
  background:#adb5bd;
}
.status-left .sb-info {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  color:#6c757d;
}
.status-left .sb-info .sb-item {
  display:flex; align-items:center; gap:4px;
  padding:1px 6px; border-radius:4px;
  transition:all 0.2s; cursor:default; color:#6c757d;
}
.status-left .sb-info .sb-item:hover {
  background:rgba(99,102,241,0.06);
  color:#495057;
}
.status-left .sb-info .sb-item i { font-size:9px; color:#adb5bd; }
.status-left .sb-info .sb-item span { color:#6c757d; }

.status-right { display:flex; align-items:center; gap:12px; }
.status-right .sb-version {
  background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));
  color:#6366f1;
  padding:2px 10px; border-radius:6px; font-weight:600; font-size:10px;
  letter-spacing:0.5px; border:1px solid rgba(99,102,241,0.1);
  transition:all 0.2s; cursor:default;
}
.status-right .sb-version:hover { background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.15)); }
.status-right .sb-time {
  font-family:'Consolas','Courier New',monospace;
  font-size:11px; color:#868e96;
  display:flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:6px;
  transition:all 0.2s; cursor:default;
}
.status-right .sb-time:hover { color:#495057; }
.status-right .sb-time i { font-size:10px; color:#adb5bd; }
.status-right .sb-status {
  display:flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:6px;
  transition:all 0.2s; cursor:default;
}
.status-right .sb-status .sb-dot {
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,#10b981,#059669);
  box-shadow:0 0 6px rgba(16,185,129,0.3);
  animation:sbPulse 2s ease-in-out infinite;
}
@keyframes sbPulse {
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:0.6; transform:scale(0.85)}
}
.status-right .sb-status span { font-size:10px; color:#868e96; letter-spacing:0.3px; }

/* ===== Quick actions ===== */
.quick-row { display:grid; grid-template-columns:repeat(11, 1fr); gap:5px; margin-bottom:10px; }
.quick-card { background:var(--qc,#0d6efd); color:#fff; border-radius:5px; padding:12px 3px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; box-shadow:0 1px 3px rgba(0,0,0,0.15); transition:all 0.15s; }
.quick-card i { font-size:24px; }
.quick-card:hover { transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.2); color:#fff; }

/* ===== KPI Cards ===== */
.kpi-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:10px; }
.kpi { position:relative; border-radius:6px; padding:14px 18px; color:#fff; min-height:105px; box-shadow:0 2px 4px rgba(0,0,0,0.1); overflow:hidden; }
.kpi-blue { background:linear-gradient(135deg, #3a8dde, #1e6fcf); }
.kpi-red { background:linear-gradient(135deg, #e85a5a, #c93a3a); }
.kpi-green { background:linear-gradient(135deg, #4cc76b, #2ea147); }
.kpi-purple { background:linear-gradient(135deg, #8e6dd0, #6a47b5); }
.kpi-olive { background:linear-gradient(135deg, #b3b34a, #8a8a2c); }
.kpi-pink { background:linear-gradient(135deg, #d664a3, #b5407e); }
.kpi-title { font-size:13px; opacity:0.95; }
.kpi-value { font-size:26px; font-weight:700; margin-top:6px; }
.kpi-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:36px; opacity:0.35; }
.kpi-foot { font-size:10px; margin-top:6px; opacity:0.95; }

/* ===== Alerts ===== */
.alerts-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.alert-pill { padding:5px 12px; border-radius:16px; font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.alert-pill:hover { opacity:0.85; }

/* ===== Panel ===== */
.panel { border:1px solid #dee2e6; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #eee; background:#f8f9fa; }
.panel-head h5 { margin:0; font-size:14px; }
.panel-tabs .tab { border:1px solid #dee2e6; background:#fff; padding:3px 12px; font-size:11px; cursor:pointer; border-radius:3px; margin-left:3px; }
.panel-tabs .tab.active { background:#c2185b; color:#fff; border-color:#c2185b; }
.panel-body { padding:12px; }

.ann { display:flex; gap:8px; padding:8px; background:#eef5fc; border-radius:4px; margin-bottom:6px; }
.ann-bar { width:3px; background:#0d6efd; border-radius:2px; }
.ann-title { font-weight:600; font-size:12px; }
.ann-body { font-size:11px; color:#495057; margin-top:2px; }

/* ===== Login ===== */
/* ===== Login Ultimate ===== */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #eef2ff 0%, #f8fafc 35%, #e0e7ff 65%, #f0f4ff 100%);
  background-size:400% 400%;
  animation:loginBg 14s ease infinite;
}
@keyframes loginBg {
  0%{background-position:0% 50%}
  33%{background-position:100% 50%}
  66%{background-position:50% 0%}
  100%{background-position:0% 50%}
}
.login-page::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(99,102,241,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139,92,246,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.02) 0%, transparent 70%);
  pointer-events:none;
}
/* Floating orbs - light */
.login-page .orb {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:orbFloat 25s ease-in-out infinite;
}
.login-page .orb:nth-child(1) {
  width:360px; height:360px; top:-100px; left:-100px;
  background:radial-gradient(circle, rgba(99,102,241,0.06), transparent 70%);
  animation-delay:0s;
}
.login-page .orb:nth-child(2) {
  width:240px; height:240px; bottom:-60px; right:-60px;
  background:radial-gradient(circle, rgba(139,92,246,0.05), transparent 70%);
  animation-delay:-6s;
}
.login-page .orb:nth-child(3) {
  width:180px; height:180px; top:35%; right:8%;
  background:radial-gradient(circle, rgba(99,102,241,0.04), transparent 70%);
  animation-delay:-12s;
}
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(35px,-25px) scale(1.06)}
  50%{transform:translate(-25px,15px) scale(0.94)}
  75%{transform:translate(15px,25px) scale(1.03)}
}
.login-card {
  position:relative; z-index:1;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.7);
  padding:44px 40px; border-radius:24px; width:400px;
  box-shadow:0 20px 60px rgba(99,102,241,0.06), 0 8px 24px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.8);
  animation:cardIn 0.7s ease-out;
}
@keyframes cardIn {
  from{opacity:0; transform:translateY(24px) scale(0.96)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.login-brand {
  text-align:center; margin-bottom:32px;
}
.login-brand-icon {
  font-size:42px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(99,102,241,0.15));
  display:inline-block;
  animation:brandPulse 3s ease-in-out infinite;
}
@keyframes brandPulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.login-brand h3 {
  font-size:24px; font-weight:700; margin:10px 0 4px;
  background:linear-gradient(135deg,#1e293b,#475569);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.login-brand p {
  font-size:13px; color:#94a3b8; letter-spacing:0.5px;
  margin:0;
}
.login-card .form-label {
  color:#64748b; font-size:12px; font-weight:600;
  letter-spacing:0.3px; text-transform:uppercase; margin-bottom:5px;
}
.login-card .form-control {
  background:#fff; border:1.5px solid #e2e8f0;
  border-radius:12px; color:#1e293b; padding:11px 16px; font-size:14px;
  transition:all 0.25s; box-shadow:none;
}
.login-card .form-control:focus {
  background:#fff; border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,0.08);
}
.login-card .form-control::placeholder { color:#94a3b8; }
.login-card .input-group { position:relative; }
.login-card .input-group .form-control { padding-right:44px; }
.login-card .input-group .btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:#94a3b8;
  padding:6px 10px; font-size:17px; z-index:5; cursor:pointer; border-radius:8px;
  transition:all 0.2s;
}
.login-card .input-group .btn:hover { color:#6366f1; }
.login-card .btn-submit {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border:none; color:#fff; padding:12px; border-radius:12px;
  font-size:14px; font-weight:600; letter-spacing:0.5px;
  cursor:pointer; transition:all 0.3s; width:100%;
  box-shadow:0 4px 16px rgba(99,102,241,0.2);
  margin-top:4px;
}
.login-card .btn-submit:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(99,102,241,0.25);
}
.login-card .btn-submit:active { transform:translateY(0); }
.login-card .alert {
  background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.15);
  color:#dc2626; font-size:13px; border-radius:12px; padding:10px 14px;
}
.login-card .demo-info {
  text-align:center; margin-top:24px; padding-top:18px;
  border-top:1px solid #f1f5f9;
}
.login-card .demo-info small {
  color:#94a3b8; font-size:11px;
}
.login-card .demo-info .badge {
  background:#eef2ff; color:#6366f1;
  font-size:11px; padding:4px 14px; border-radius:8px; font-weight:500;
}
/* ===== Tables ===== */
.table-sm > :not(caption) > * > * { padding: 0.3rem 0.4rem; font-size: 12px; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .topbar-ultimate { padding: 0 8px; height: 52px; }
  .tu-brand { font-size: 14px; }
  .tu-brand small { display: none; }
  .tu-search { width: 120px; }
  .tu-search input { font-size: 12px; padding: 3px 8px; }
  .tu-clock { display: none; }
  .tu-user-role { display: none; }
  .tu-username { display: none; }
  .tu-quick-create .btn span { display: none; }
  .main { margin-left: 0 !important; padding: 8px !important; }
  .main-menu { width: 100% !important; height: auto !important; position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; flex-direction: row !important; overflow-x: auto !important; padding: 4px 0 !important; z-index: 1050 !important; background: #fff !important; border-top: 1px solid #dee2e6 !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important; }
  .main-menu a, .main-menu .nav-link { flex: 0 0 auto; padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; }
  .main-menu a span, .main-menu .nav-link span { font-size: 9px; }
  .main-menu a i, .main-menu .nav-link i { font-size: 16px !important; }
  .main-menu ul { flex-wrap: nowrap; }
  .card-header { padding: 6px 10px !important; }
  .card-body { padding: 8px !important; }
  .table { font-size: 10px !important; }
  .table td, .table th { padding: 4px 6px !important; }
  .row.g-2 > [class*="col-"] { margin-bottom: 6px; }
  .modal-dialog { margin: 5px; }
  h5 { font-size: 14px !important; }
  .container-fluid { padding: 0 4px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .row.g-2.px-2 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-6, .col-lg-4, .col-lg-8 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
  .d-none.d-md-inline, .d-none.d-lg-inline { display: none !important; }
  .d-md-none { display: inline-block !important; }
  .card.shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
  .main { padding-bottom: 104px !important; }
}

@media (max-width: 575.98px) {
  .row.g-2.px-2 > .col-md-3, .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-lg-3 { flex: 0 0 100% !important; max-width: 100% !important; }
  h4 { font-size: 16px !important; }
  .topbar-ultimate .btn-sm { font-size: 11px; padding: 2px 6px; }
  .tu-search-bar { display: none; }
  .tu-hamburger { display: flex !important; }
  .tu-quick-create { display: none; }
  .tu-notif-btn { padding: 4px !important; }
  .tu-avatar { width: 28px; height: 28px; font-size: 11px; }
}

.main .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Aging Report Ultimate ===== */
.aging-progress { border-radius:2px; background:rgba(0,0,0,0.04); }
.aging-progress .progress-bar { border-radius:0; }
.aging-progress .progress-bar:first-child { border-radius:2px 0 0 2px; }
.aging-progress .progress-bar:last-child { border-radius:0 2px 2px 0; }
.aging-progress .progress-bar.bg-orange { background:#f97316 !important; }
.table-danger-soft { background:rgba(220,53,69,0.03) !important; }
.table-danger-soft:hover { background:rgba(220,53,69,0.06) !important; }