/* ============================================================ CRM Properti — style.css Exact class targets: .app-wrapper > .main-panel > .content-wrapper ============================================================ */ /* ── Google Font: DM Sans — tambahkan di header.php : ── */ /* ── Tokens ─────────────────────────────────────────────────── */ :root { --navy-950: #060D1F; --navy-900: #0A1628; --navy-800: #0F2040; --navy-700: #162B55; --teal-500: #00D4AA; --teal-400: #26DDBB; --teal-300: #6EECD6; --teal-glow: rgba(0,212,170,0.15); --amber-500: #FFB830; --amber-400: #FFC94D; --amber-glow: rgba(255,184,48,0.14); --coral-500: #FF5C5C; --coral-400: #FF7D7D; --coral-glow: rgba(255,92,92,0.14); --blue-500: #2B7FFF; --blue-400: #4D9FFF; --blue-glow: rgba(45,127,255,0.14); --w90: rgba(255,255,255,0.90); --w70: rgba(255,255,255,0.70); --w40: rgba(255,255,255,0.40); --w15: rgba(255,255,255,0.15); --w08: rgba(255,255,255,0.08); --w04: rgba(255,255,255,0.04); --font: 'DM Sans', system-ui, Arial, sans-serif; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill:100px; --ease: cubic-bezier(0.22,1,0.36,1); --sidebar-w: 240px; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } ul, ol { list-style: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; font-size: inherit; } a { color: var(--teal-400); text-decoration: none; transition: color 150ms; } a:hover { color: var(--teal-300); } /* ── Body ───────────────────────────────────────────────────── */ body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--w90); background: var(--navy-950); min-height: 100vh; overflow-x: hidden; } /* ════════════════════════════════════════════════════════════ CORE LAYOUT — exact class names dari header.php .app-wrapper > sidebar.php + .main-panel > topbar.php + .content-wrapper > .container-fluid ════════════════════════════════════════════════════════════ */ .app-wrapper { display: flex; min-height: 100vh; width: 100%; position: relative; } /* SIDEBAR — dari sidebar.php */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); flex-shrink: 0; background: var(--navy-900); border-right: 1px solid var(--w08); display: flex; flex-direction: column; position: fixed; /* fixed biar ga ikut scroll */ top: 0; left: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 200; scrollbar-width: none; transition: transform 300ms var(--ease); } .sidebar::-webkit-scrollbar { display: none; } /* MAIN PANEL — wrapper kanan (topbar + content) */ .main-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--sidebar-w); /* offset sidebar fixed */ width: calc(100% - var(--sidebar-w)); background: transparent; } /* TOPBAR — dari topbar.php */ .topbar { position: sticky; top: 0; z-index: 100; height: 60px; background: rgba(10,22,40,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--w08); display: flex; align-items: center; padding: 0 28px; gap: 12px; flex-shrink: 0; } /* CONTENT WRAPPER — semua konten page ada di sini */ .content-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; background: transparent; } /* CONTAINER FLUID — padding konten */ .content-wrapper > .container-fluid, .content-wrapper .container-fluid { padding: 28px 32px; flex: 1; width: 100%; max-width: 100%; } /* ════════════════════════════════════════════════════════════ SIDEBAR INTERNALS ════════════════════════════════════════════════════════════ */ /* Brand */ .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; border-bottom: 1px solid var(--w08); text-decoration: none; flex-shrink: 0; } .sidebar-brand img { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: contain; } .sidebar-brand-text, .sidebar-brand span { font-size: 16px; font-weight: 700; color: var(--w90); letter-spacing: -0.01em; white-space: nowrap; } /* Nav wrapper */ .sidebar .nav, .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; flex: 1; } /* Section heading */ .sidebar .sidebar-heading { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w40); padding: 16px 12px 6px; border-bottom: none; background: none; display: block; } /* Nav item container */ .sidebar .nav-item { display: block; width: 100%; margin-bottom: 1px; } /* Nav link */ .sidebar .nav-link, .sidebar .nav-item > a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--w70); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; width: 100%; transition: background 150ms, color 150ms; position: relative; } .sidebar .nav-link:hover, .sidebar .nav-item > a:hover { background: var(--w08); color: var(--w90); } .sidebar .nav-link.active, .sidebar .nav-item.active > .nav-link, .sidebar .nav-item > a.active { background: var(--teal-glow); color: var(--teal-400); } .sidebar .nav-link.active::before, .sidebar .nav-item.active > .nav-link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--teal-500); border-radius: var(--r-pill); } /* Icons */ .sidebar .nav-link i, .sidebar .nav-link .fas, .sidebar .nav-link .far { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.75; } .sidebar .nav-link.active i, .sidebar .nav-item.active .nav-link i { opacity: 1; } /* Divider */ .sidebar hr, .sidebar .sidebar-divider, hr.sidebar-divider { border: none; border-top: 1px solid var(--w08); margin: 6px 14px; } /* User footer */ .sidebar-footer, .sidebar .sidebar-user { padding: 14px 16px; border-top: 1px solid var(--w08); margin-top: auto; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ TOPBAR INTERNALS ════════════════════════════════════════════════════════════ */ .topbar-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.02em; flex: 1; } #sidebarToggle, #sidebarToggleTop, .sidebar-toggler { background: var(--w08); border: 1px solid var(--w08); border-radius: var(--r-sm); color: var(--w70); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms, color 150ms; flex-shrink: 0; } #sidebarToggle:hover, #sidebarToggleTop:hover { background: var(--w15); color: #fff; } .topbar .nav-item { position: relative; } .topbar .nav-link { color: var(--w70) !important; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; border-radius: var(--r-sm); transition: color 150ms; } .topbar .nav-link:hover { color: #fff !important; } .topbar .img-profile, .img-profile { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--w15); } .topbar-divider { border-left: 1px solid var(--w15); height: 28px; margin: 0 6px; } .badge-counter { position: absolute; top: 4px; right: 4px; background: var(--coral-500) !important; color: #fff !important; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: var(--r-pill); border: 2px solid var(--navy-950); line-height: 1; } /* ════════════════════════════════════════════════════════════ BOOTSTRAP GRID OVERRIDE (12-col CSS Grid) ════════════════════════════════════════════════════════════ */ .row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; } /* Reset Bootstrap col padding */ [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* All column spans */ .col-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1 { grid-column: span 1; } .col-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2 { grid-column: span 2; } .col-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3 { grid-column: span 3; } .col-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4 { grid-column: span 4; } .col-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5 { grid-column: span 5; } .col-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6 { grid-column: span 6; } .col-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7 { grid-column: span 7; } .col-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8 { grid-column: span 8; } .col-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9 { grid-column: span 9; } .col-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10 { grid-column: span 10; } .col-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11 { grid-column: span 11; } .col-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12 { grid-column: span 12; } .col { grid-column: span 12; } /* no-gutters inside card - flexbox override */ .no-gutters, .g-0 { display: flex !important; gap: 0 !important; margin: 0 !important; } .no-gutters .col, .no-gutters [class*="col-"], .g-0 .col, .g-0 [class*="col-"] { grid-column: unset !important; flex: 1; padding: 0 !important; } .no-gutters .col-auto, .g-0 .col-auto { grid-column: unset !important; flex: 0 0 auto; } /* Spacing helpers */ .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 14px !important; } .mb-4 { margin-bottom: 20px !important; } .mb-5 { margin-bottom: 32px !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 14px !important; } .mt-4 { margin-top: 20px !important; } .me-1,.mr-1 { margin-right: 4px !important; } .me-2,.mr-2 { margin-right: 8px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-3 { padding-top: 14px !important; padding-bottom: 14px !important; } .h-100 { height: 100%; } /* ════════════════════════════════════════════════════════════ CARDS ════════════════════════════════════════════════════════════ */ .card { background: var(--navy-900) !important; border: 1px solid var(--w08) !important; border-radius: var(--r-lg) !important; overflow: hidden; color: var(--w90); transition: border-color 250ms, transform 250ms; height: 100%; } .card:hover { border-color: var(--w15) !important; } .card.shadow { box-shadow: 0 4px 24px rgba(0,0,0,.35) !important; } .card-header { background: transparent !important; border-bottom: 1px solid var(--w08) !important; padding: 14px 20px !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; } .card-header h6, .card-header .m-0.font-weight-bold { font-size: 13px !important; font-weight: 700 !important; color: var(--w90) !important; text-transform: none !important; letter-spacing: 0.01em; margin: 0 !important; } /* Bootstrap text-primary in card header */ .card-header .text-primary { color: var(--teal-400) !important; } .card-body { padding: 20px !important; background: transparent !important; flex: 1; } /* ── Stat Cards (border-left-* from dashboard.php) ── */ .card.border-left-primary { border-top: 2px solid var(--teal-500) !important; border-left: none !important; } .card.border-left-success { border-top: 2px solid var(--teal-400) !important; border-left: none !important; } .card.border-left-info { border-top: 2px solid var(--blue-400) !important; border-left: none !important; } .card.border-left-warning { border-top: 2px solid var(--amber-500) !important; border-left: none !important; } .card.border-left-danger { border-top: 2px solid var(--coral-500) !important; border-left: none !important; } /* Fix .row.no-gutters inside stat card */ .card-body .row.no-gutters { display: flex !important; align-items: center !important; gap: 12px; margin: 0 !important; margin-bottom: 0 !important; } .card-body .row.no-gutters .col.mr-2 { grid-column: unset !important; flex: 1; min-width: 0; } .card-body .row.no-gutters .col-auto { grid-column: unset !important; flex: 0 0 auto; } /* Stat value (h5 class) */ .card .h5.mb-0.font-weight-bold.text-gray-800 { font-size: 28px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -0.03em; line-height: 1; } /* Stat label */ .card .text-xs.font-weight-bold.text-uppercase { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.09em; text-transform: uppercase !important; margin-bottom: 6px !important; display: block; } .card .text-primary { color: var(--teal-400) !important; } .card .text-success { color: var(--teal-300) !important; } .card .text-info { color: var(--blue-400) !important; } .card .text-warning { color: var(--amber-400) !important; } .card .text-danger { color: var(--coral-400) !important; } /* FA icons in stat cards */ .card .fa-2x { opacity: 0.20; font-size: 1.8em !important; } .card .text-gray-300 { color: var(--w40) !important; } .card .text-gray-800 { color: #fff !important; } /* ════════════════════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════════════════════ */ h1,.h1 { font-size: clamp(22px,3vw,32px); font-weight:700; color:#fff; letter-spacing:-0.025em; line-height:1.2; } h2,.h2 { font-size: clamp(18px,2.5vw,26px); font-weight:700; color:#fff; letter-spacing:-0.02em; } h3,.h3 { font-size: 20px; font-weight:700; color:#fff; } h4,.h4 { font-size: 17px; font-weight:700; color:#fff; } h5,.h5 { font-size: 15px; font-weight:700; color:#fff; } h6,.h6 { font-size: 11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--w40); } p { color: var(--w70); } .text-muted, .text-gray-400,.text-gray-500,.text-gray-600 { color: var(--w40) !important; } /* ════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════ */ .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border-radius: var(--r-sm) !important; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 150ms var(--ease); text-decoration: none !important; white-space: nowrap; line-height: 1; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--teal-500) !important; color: var(--navy-900) !important; border-color: var(--teal-500) !important; font-weight:700 !important; } .btn-primary:hover { background: var(--teal-400) !important; border-color: var(--teal-400) !important; box-shadow: 0 0 20px var(--teal-glow); } .btn-secondary { background: var(--w08) !important; color: var(--w70) !important; border-color: var(--w15) !important; } .btn-secondary:hover { background: var(--w15) !important; color:#fff !important; } .btn-success { background: var(--teal-glow) !important; color: var(--teal-400) !important; border-color: rgba(0,212,170,.3) !important; } .btn-success:hover { background: var(--teal-500) !important; color: var(--navy-900) !important; } .btn-info { background: var(--blue-glow) !important; color: var(--blue-400) !important; border-color: rgba(45,127,255,.3) !important; } .btn-info:hover { background: var(--blue-500) !important; color:#fff !important; } .btn-warning { background: var(--amber-glow) !important; color: var(--amber-400) !important; border-color: rgba(255,184,48,.3) !important; } .btn-warning:hover { background: var(--amber-500) !important; color: var(--navy-900) !important; } .btn-danger { background: var(--coral-glow) !important; color: var(--coral-400) !important; border-color: rgba(255,92,92,.3) !important; } .btn-danger:hover { background: var(--coral-500) !important; color:#fff !important; } .btn-sm { padding: 5px 12px !important; font-size: 12px !important; border-radius: 6px !important; } .btn-lg { padding: 11px 24px !important; font-size: 15px !important; } .float-end,.float-right { float:right !important; } /* ════════════════════════════════════════════════════════════ BADGES ════════════════════════════════════════════════════════════ */ .badge { display: inline-flex !important; align-items: center; padding: 3px 10px !important; border-radius: var(--r-pill) !important; font-size: 11px !important; font-weight: 700 !important; border: 1px solid transparent; line-height: 1.4; } .bg-primary,.badge-primary { background: var(--blue-glow) !important; color: var(--blue-400) !important; border-color: rgba(45,127,255,.25); } .bg-success,.badge-success { background: var(--teal-glow) !important; color: var(--teal-400) !important; border-color: rgba(0,212,170,.25); } .bg-info, .badge-info { background: var(--blue-glow) !important; color: var(--blue-400) !important; border-color: rgba(45,127,255,.25); } .bg-warning,.badge-warning { background: var(--amber-glow) !important; color: var(--amber-400) !important; border-color: rgba(255,184,48,.25); } .bg-danger, .badge-danger { background: var(--coral-glow) !important; color: var(--coral-400) !important; border-color: rgba(255,92,92,.25); } .bg-secondary { background: var(--w08) !important; color: var(--w70) !important; } /* ════════════════════════════════════════════════════════════ TABLES ════════════════════════════════════════════════════════════ */ .table-responsive { overflow-x: auto; border-radius: var(--r-md); } .table { width: 100%; border-collapse: separate !important; border-spacing: 0; font-size: 14px; color: var(--w70); background: transparent !important; margin-bottom: 0 !important; } .table thead th { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w40) !important; padding: 8px 12px 10px !important; border-bottom: 1px solid var(--w08) !important; border-top: none !important; background: transparent !important; white-space: nowrap; } .table td { padding: 10px 12px !important; border-bottom: 1px solid var(--w04) !important; border-top: none !important; vertical-align: middle; background: transparent !important; } .table tr:last-child td { border-bottom: none !important; } .table tbody tr:hover td { background: var(--w04) !important; color: var(--w90) !important; } .table td strong { color: var(--w90); } .table td small { color: var(--w40); font-size: 12px; } .table-sm td, .table-sm th { padding: 7px 12px !important; } /* ════════════════════════════════════════════════════════════ LIST GROUP ════════════════════════════════════════════════════════════ */ .list-group { display: flex; flex-direction: column; gap: 6px; } .list-group-item { background: var(--w04) !important; border: 1px solid var(--w08) !important; border-radius: var(--r-sm) !important; padding: 12px 16px !important; color: var(--w70) !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background 120ms, border-color 120ms; } .list-group-item:hover { background: var(--w08) !important; border-color: var(--w15) !important; } .list-group-item strong { color: var(--w90) !important; font-size: 14px; font-weight: 600; } .list-group-item small { color: var(--w40) !important; font-size: 12px; } /* ════════════════════════════════════════════════════════════ FORMS ════════════════════════════════════════════════════════════ */ .form-control, .form-select { background: var(--navy-800) !important; border: 1px solid var(--w15) !important; border-radius: var(--r-sm) !important; color: var(--w90) !important; padding: 9px 13px !important; font-size: 14px !important; outline: none !important; width: 100%; transition: border-color 150ms, box-shadow 150ms; -webkit-appearance: none; appearance: none; } .form-control::placeholder { color: var(--w40) !important; } .form-control:focus, .form-select:focus { border-color: var(--teal-500) !important; box-shadow: 0 0 0 3px var(--teal-glow) !important; } label, .form-label { font-size: 13px; font-weight: 600; color: var(--w70); display: block; margin-bottom: 5px; } .form-group, .mb-3 { margin-bottom: 18px; } /* ════════════════════════════════════════════════════════════ ALERTS ════════════════════════════════════════════════════════════ */ .alert { padding: 13px 17px; border-radius: var(--r-md); font-size: 14px; border: 1px solid; margin-bottom: 16px; } .alert-success { background: var(--teal-glow); border-color: rgba(0,212,170,.25); color: var(--teal-300); } .alert-warning { background: var(--amber-glow); border-color: rgba(255,184,48,.25); color: var(--amber-400); } .alert-danger { background: var(--coral-glow); border-color: rgba(255,92,92,.25); color: var(--coral-400); } .alert-info { background: var(--blue-glow); border-color: rgba(45,127,255,.25); color: var(--blue-400); } /* ════════════════════════════════════════════════════════════ MODAL ════════════════════════════════════════════════════════════ */ .modal-backdrop { background: rgba(6,13,31,.8) !important; backdrop-filter: blur(6px); } .modal-backdrop.show { opacity: 1 !important; } .modal-content { background: var(--navy-800) !important; border: 1px solid var(--w15) !important; border-radius: var(--r-xl) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; color: var(--w90); } .modal-header { background: transparent !important; border-bottom: 1px solid var(--w08) !important; padding: 18px 24px !important; } .modal-title { font-size: 17px; font-weight: 700; color: #fff; } .modal-body { padding: 24px !important; } .modal-footer { background: transparent !important; border-top: 1px solid var(--w08) !important; padding: 14px 24px !important; } .btn-close { filter: invert(1) !important; opacity: 0.7 !important; transition: opacity 150ms; } .btn-close:hover { opacity: 1 !important; } /* ════════════════════════════════════════════════════════════ DROPDOWN ════════════════════════════════════════════════════════════ */ .dropdown-menu { background: var(--navy-800) !important; border: 1px solid var(--w15) !important; border-radius: var(--r-md) !important; box-shadow: 0 16px 48px rgba(0,0,0,.5) !important; padding: 6px !important; } .dropdown-item { padding: 9px 12px; font-size: 14px; color: var(--w70) !important; border-radius: var(--r-sm); cursor:pointer; transition: background 120ms; } .dropdown-item:hover { background: var(--w08) !important; color: #fff !important; } .dropdown-item.active { background: var(--teal-glow) !important; color: var(--teal-400) !important; } .dropdown-divider { border-top: 1px solid var(--w08) !important; margin: 4px 0 !important; } /* ════════════════════════════════════════════════════════════ PROGRESS ════════════════════════════════════════════════════════════ */ .progress { height: 6px !important; background: var(--w08) !important; border-radius: var(--r-pill) !important; overflow: hidden; } .progress-bar { background: var(--teal-500) !important; border-radius: var(--r-pill); transition: width .7s var(--ease); } .progress-bar.bg-warning { background: var(--amber-500) !important; } .progress-bar.bg-danger { background: var(--coral-500) !important; } .progress-bar.bg-info { background: var(--blue-500) !important; } /* ════════════════════════════════════════════════════════════ PAGINATION ════════════════════════════════════════════════════════════ */ .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .page-link { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; background: var(--w08) !important; border: 1px solid var(--w08) !important; border-radius: var(--r-sm) !important; color: var(--w70) !important; font-size: 14px; text-decoration: none; transition: all 150ms; } .page-link:hover { background: var(--w15) !important; color: #fff !important; } .page-item.active .page-link { background: var(--teal-500) !important; border-color: var(--teal-500) !important; color: var(--navy-900) !important; font-weight: 700; } .page-item.disabled .page-link { opacity: .4; pointer-events: none; } /* ════════════════════════════════════════════════════════════ LOGIN PAGE ════════════════════════════════════════════════════════════ */ .login-container { max-width: 420px; margin: 80px auto; padding: 36px; background: var(--navy-900) !important; border: 1px solid var(--w08); border-radius: var(--r-xl); box-shadow: 0 24px 64px rgba(0,0,0,.5); color: var(--w90); } /* ════════════════════════════════════════════════════════════ UTILITIES ════════════════════════════════════════════════════════════ */ .d-flex { display: flex !important; } .d-block { display: block !important; } .d-none { display: none !important; } .d-grid { display: grid !important; } .flex-column { flex-direction: column !important; } .align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-5{gap:20px} .w-100{width:100%!important} .h-100{height:100%!important} .text-center{text-align:center!important} .text-end,.text-right{text-align:right!important} .fw-bold,.font-weight-bold{font-weight:700!important} .text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shadow{box-shadow:0 4px 24px rgba(0,0,0,.35)!important} .rounded{border-radius:var(--r-md)!important} .border-0{border:none!important} /* ════════════════════════════════════════════════════════════ SCROLLBAR ════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--w15); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--w40); } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 1280px) { :root { --sidebar-w: 220px; } .content-wrapper > .container-fluid { padding: 22px 24px; } .col-xl-3 { grid-column: span 6; } .col-xl-8 { grid-column: span 12; } .col-xl-4 { grid-column: span 12; } .col-lg-7 { grid-column: span 12; } .col-lg-5 { grid-column: span 12; } } @media (max-width: 992px) { :root { --sidebar-w: 70px; } .sidebar .nav-link span:not(.badge), .sidebar-brand .sidebar-brand-text, .sidebar-brand span, .sidebar .sidebar-heading { display: none !important; } .sidebar .nav-link { justify-content: center !important; padding: 12px 8px !important; } .sidebar-brand { justify-content: center !important; padding: 16px 8px !important; } .col-lg-6 { grid-column: span 6; } .col-md-6 { grid-column: span 6; } } @media (max-width: 768px) { :root { --sidebar-w: 0px; } .sidebar { transform: translateX(-240px); width: 240px !important; min-width: 240px !important; } .sidebar.open, body.sidebar-open .sidebar { transform: translateX(0); } .main-panel { margin-left: 0 !important; width: 100% !important; } .content-wrapper > .container-fluid { padding: 16px !important; } .topbar { padding: 0 16px !important; } .row { gap: 14px; margin-bottom: 16px; } .col-md-6,.col-xl-3 { grid-column: span 12; } .col-xl-6,.col-xl-8,.col-xl-4 { grid-column: span 12; } .col-lg-6,.col-lg-7,.col-lg-5 { grid-column: span 12; } } @media (max-width: 480px) { .card .h5.mb-0.font-weight-bold.text-gray-800 { font-size: 22px !important; } body { font-size: 14px; } } /* ════════════════════════════════════════════════════════════ ANIMATIONS ════════════════════════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } .animate-in { animation: fadeInUp .35s var(--ease) both; } /* ============================================ FIX DASHBOARD GRID - OVERRIDE SEMUA YANG SALAH ============================================ */ /* Reset row ke flexbox (bukan grid) */ .row { display: flex !important; flex-wrap: wrap !important; margin-right: -12px !important; margin-left: -12px !important; } /* Reset semua col */ [class*="col-"] { flex: 1 0 auto !important; padding-right: 12px !important; padding-left: 12px !important; } /* Ukuran specific */ .col-xl-3 { flex: 0 0 25% !important; max-width: 25% !important; } .col-xl-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } .col-xl-6 { flex: 0 0 50% !important; max-width: 50% !important; } .col-xl-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; } .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; } .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; } .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; } .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; } /* Card dalam column jadi full width */ [class*="col-"] > .card { width: 100% !important; margin-bottom: 0 !important; } /* Fix card body row no-gutters */ .card-body .row.no-gutters { display: flex !important; align-items: center !important; gap: 12px; margin: 0 !important; } .card-body .row.no-gutters .col.mr-2 { flex: 1 !important; } .card-body .row.no-gutters .col-auto { flex: 0 0 auto !important; } /* Hapus efek grid yang bikin berantakan */ [class*="row"] > [class*="col-"] { float: none !important; } /* Responsive */ @media (max-width: 992px) { .col-xl-3 { flex: 0 0 50% !important; max-width: 50% !important; } } @media (max-width: 768px) { .col-xl-3, .col-md-6, .col-xl-4, .col-xl-6, .col-xl-8, .col-lg-5, .col-lg-6, .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; } .row { margin-right: -8px !important; margin-left: -8px !important; } [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } }