/*
 * File: sales-os-dashboard.css
 * Tujuan: Styling prototipe dashboard Sales OS
 * Tanggal: 17 Juli 2026
 * Modul: Dashboard
 */

:root {
  --primary: #0d6efd;
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;
  --purple: #7c5cff;
  --sidebar-bg: #1e2a3b;
  --sidebar-text: #c5cfe8;
  --page-bg: #f4f7fb;
  --card-bg: #ffffff;
  --text-main: #172033;
  --text-muted: #7a8496;
  --border: #e7ebf2;
  --shadow: 0 10px 28px rgba(31, 46, 72, 0.06);
  --sidebar-width: 248px;
  --topbar-height: 72px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text-main);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

button, input, select { font: inherit; }

a { text-decoration: none; }

.app-shell { min-height: 100vh; }

/* Sidebar legacy styling overridden by Tailwind CSS */


.sidebar-brand {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #6ea8fe);
  box-shadow: 0 8px 18px rgba(13,110,253,.28);
  font-size: 18px;
}

.brand-title { color: #fff; font-weight: 800; letter-spacing: .2px; font-size: 17px; }
.brand-subtitle { color: #93a4bd; font-size: 11px; margin-top: 1px; }

.sidebar-nav { padding: 20px 14px; flex: 1; }
.nav-section-label { padding: 0 12px 8px; color: #7e8ea5; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; }

.sidebar .nav-link {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--sidebar-text);
  font-weight: 600;
  transition: .2s ease;
}

.sidebar .nav-link i { width: 20px; text-align: center; font-size: 17px; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, #0d6efd, #2d7ff9);
  box-shadow: 0 8px 18px rgba(13,110,253,.26);
}

.nav-count {
  margin-left: auto;
  min-width: 23px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  color: #dfe8f6;
  font-size: 10px;
  font-weight: 800;
}
.nav-count.warning { background: rgba(255,193,7,.16); color: #ffd761; }
.nav-count.danger { background: rgba(220,53,69,.2); color: #ff9aa5; }
.sidebar .nav-link.active .nav-count { background: rgba(255,255,255,.18); color: #fff; }

.sidebar-footer { padding: 0 14px 18px; }
.storage-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  font-size: 12px;
}

.main-wrapper { min-height: 100vh; margin-left: var(--sidebar-width); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.global-search {
  width: min(410px, 38vw);
  height: 42px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: #8a94a6;
}
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-main); }
.global-search input::placeholder { color: #9ba4b4; }
.global-search kbd { border: 1px solid #dfe4eb; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #8a94a6; font-size: 10px; font-family: inherit; }

.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 10px; color: #606b7c; background: #fff; }
.icon-button:hover { color: var(--primary); border-color: #cad9f5; background: #f5f9ff; }
.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.profile-menu { display: flex; align-items: center; gap: 10px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); cursor: pointer; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1754b7; font-weight: 800; }
.profile-name { font-size: 13px; font-weight: 750; line-height: 1.2; }
.profile-role { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.profile-chevron { color: #9aa4b2; font-size: 11px; }

.main-content { padding: 28px; }
.page-heading { margin-bottom: 24px; }
.breadcrumb-text { display: flex; align-items: center; gap: 7px; color: #9aa4b2; font-size: 11px; font-weight: 600; margin-bottom: 9px; }
.breadcrumb-text span { color: #818c9f; }
.breadcrumb-text i { font-size: 8px; }
.breadcrumb-text strong { color: var(--primary); }
.page-heading h1 { margin: 0; color: #172033; font-size: clamp(24px, 2.2vw, 31px); font-weight: 800; letter-spacing: -.5px; }
.page-heading p { margin: 7px 0 0; color: var(--text-muted); }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.2s ease-in-out 1; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20%,40% { transform: rotate(-8deg); } }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  position: relative;
  min-height: 164px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; top: -45px; right: -35px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(31,46,72,.10); }
.stat-card.accent-primary { --accent: var(--primary); }
.stat-card.accent-success { --accent: var(--success); }
.stat-card.accent-info { --accent: #0ba6cf; }
.stat-card.accent-purple { --accent: var(--purple); }
.stat-card.accent-danger { --accent: var(--danger); }
.stat-card.accent-warning { --accent: #e8a500; }
.stat-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.stat-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-size: 18px; }
.trend, .mini-pill { padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.trend-up { background: #eaf8f1; color: #198754; }
.trend-down { background: #fff0f1; color: #dc3545; }
.mini-pill { background: #f0f4f9; color: #667085; }
.mini-pill.urgent { background: #fff0f1; color: #dc3545; }
.stat-label { color: var(--text-muted); font-size: 12px; font-weight: 650; }
.stat-value { margin-top: 3px; font-size: 27px; line-height: 1.2; font-weight: 850; letter-spacing: -.5px; }
.stat-value.currency { font-size: 22px; }
.stat-foot { margin-top: 8px; color: #9aa4b2; font-size: 10px; }

.dashboard-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-heading h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.1px; }
.card-heading p { margin: 5px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.card-link { flex: 0 0 auto; color: var(--primary); font-size: 11px; font-weight: 750; }
.card-link:hover { text-decoration: underline; }
.chart-filter { width: auto; min-width: 140px; color: #667085; border-color: var(--border); font-size: 11px; }
.chart-summary { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; }
.chart-summary div { display: flex; align-items: center; gap: 6px; }
.chart-summary strong { color: var(--text-main); }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-blue { background: #0d6efd; }
.dot-green { background: #22a06b; }
.dot-orange { background: #f59f00; }
.chart-wrap { position: relative; height: 282px; }

.target-card { overflow: hidden; }
.target-content { display: flex; flex-direction: column; align-items: center; padding: 6px 0 16px; text-align: center; }
.progress-ring {
  --size: 160px;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--progress) * 1%), #e9eef6 0);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.04);
}
.progress-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; box-shadow: 0 4px 18px rgba(13,110,253,.08); }
.progress-ring-inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.progress-ring-inner strong { font-size: 31px; line-height: 1; font-weight: 850; color: #1559bd; }
.progress-ring-inner span { margin-top: 5px; color: var(--text-muted); font-size: 10px; }
.target-numbers { margin-top: 16px; }
.target-earned { font-size: 18px; font-weight: 820; }
.target-label { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.target-insight { display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: #fff9e8; color: #7a5b00; }
.insight-icon { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #ffe9a6; color: #9c6b00; }
.target-insight strong { font-size: 11px; }
.target-insight p { margin: 3px 0 0; font-size: 10px; line-height: 1.45; }
.target-footer { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.target-footer i { color: var(--primary); margin-right: 4px; }

.reminder-list { display: flex; flex-direction: column; }
.reminder-item { display: grid; grid-template-columns: 47px minmax(0,1fr) 30px; align-items: center; gap: 10px; min-height: 69px; padding: 10px 0; border-bottom: 1px solid var(--border); transition: opacity .2s, transform .2s; }
.reminder-item:last-child { border-bottom: 0; }
.reminder-item.is-done { opacity: 0; transform: translateX(14px); }
.reminder-time { align-self: start; margin-top: 2px; padding: 5px 6px; border-radius: 7px; background: #eef5ff; color: #2664be; text-align: center; font-size: 10px; font-weight: 800; }
.reminder-time.urgent-time { background: #fff0f1; color: #d33545; }
.reminder-copy { min-width: 0; }
.reminder-copy strong, .reminder-copy span, .reminder-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-copy strong { font-size: 11px; }
.reminder-copy span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.reminder-copy small { margin-top: 5px; color: #8b95a6; font-size: 9px; }
.reminder-copy small i { margin-right: 4px; color: var(--primary); }
.mark-done { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dfe5ed; border-radius: 8px; background: #fff; color: #8d97a7; transition: .2s; }
.mark-done:hover { border-color: #b9e2cc; background: #edf9f3; color: var(--success); }

.mini-kanban { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.kanban-column { min-width: 0; padding: 10px; border-radius: 11px; background: #f7f9fc; border: 1px solid #edf0f5; }
.kanban-head { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; margin-bottom: 10px; }
.kanban-head strong { font-size: 10px; }
.kanban-head > span:last-child { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: #e9edf3; color: #6f7989; font-size: 9px; font-weight: 800; }
.kanban-dot { width: 7px; height: 7px; border-radius: 50%; }
.kanban-dot.new { background: #0dcaf0; }
.kanban-dot.qualified { background: #7c5cff; }
.kanban-dot.proposal { background: #f59f00; }
.lead-card { margin-bottom: 8px; padding: 10px; border: 1px solid #e7ebf2; border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgba(31,46,72,.035); }
.lead-card:last-child { margin-bottom: 0; }
.lead-card.highlighted { border-color: #d6e4ff; box-shadow: 0 6px 14px rgba(13,110,253,.08); }
.lead-card strong, .lead-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card strong { font-size: 10px; }
.lead-card span { margin-top: 4px; color: var(--text-muted); font-size: 9px; }
.lead-card div { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.lead-card b { color: #1559bd; font-size: 9px; }
.lead-card small { color: #98a2b3; font-size: 8px; }

.quotation-list { display: flex; flex-direction: column; }
.quotation-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--border); color: inherit; }
.quotation-item:last-child { border-bottom: 0; }
.quotation-item:hover .quote-copy strong { color: var(--primary); }
.quote-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef5ff; color: var(--primary); }
.quote-copy { min-width: 0; }
.quote-copy strong, .quote-copy span, .quote-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-copy strong { font-size: 10px; transition: color .2s; }
.quote-copy span { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.quote-copy small { margin-top: 4px; color: #455164; font-size: 9px; font-weight: 700; }
.quote-age { align-self: start; margin-top: 2px; color: #98a2b3; font-size: 8px; white-space: nowrap; }
.quote-age.urgent-age { color: var(--danger); font-weight: 750; }

@media (max-width: 1399.98px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .main-wrapper { margin-left: 0; }
  .topbar { padding: 0 18px; }
  .main-content { padding: 22px 18px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


@media (max-width: 575.98px) {
  :root { --topbar-height: 64px; }
  .topbar { padding: 0 12px; }
  .main-content { padding: 18px 12px 28px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading h1 { font-size: 24px; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { min-height: 145px; }
  .dashboard-card { padding: 16px; }
  .chart-wrap { height: 220px; }
  .chart-summary { gap: 10px; flex-wrap: wrap; }
  .chart-filter { display: none; }
  .profile-menu { padding-left: 8px; border-left: 0; }
  .target-footer { flex-direction: column; gap: 7px; }
  .mini-kanban { grid-template-columns: repeat(3, 180px); }
}

/*
 * File: public/css/sales-os.css
 * Tujuan: Styling global aplikasi penuh Sales OS
 * Tanggal: 17 Juli 2026
 * Modul: UI/UX
 */
.page-heading.compact { margin-bottom: 20px; }
.page-heading.compact h1 { font-size: 25px; }
.content-card { background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden; }
.content-card-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border);}
.content-card-header h2 {margin:0;font-size:15px;font-weight:800}.content-card-body{padding:20px}.content-card-footer{padding:14px 20px;border-top:1px solid var(--border);background:#fbfcfe}
.table-app{margin:0;font-size:12px}.table-app thead th{padding:12px 14px;background:#f7f9fc;color:#697386;font-size:10px;text-transform:uppercase;letter-spacing:.45px;border-bottom:1px solid var(--border);white-space:nowrap}.table-app tbody td{padding:13px 14px;vertical-align:middle;border-color:#edf0f4}.table-app tbody tr:hover{background:#fbfdff}.table-title{font-weight:750;color:var(--text-main)}.table-subtitle{display:block;margin-top:3px;color:var(--text-muted);font-size:10px}.avatar-sm{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#e9f2ff;color:#1661c8;font-weight:800;font-size:11px}.customer-cell{display:flex;align-items:center;gap:10px}.badge-soft{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:capitalize}.badge-soft.primary{background:#eaf2ff;color:#0d6efd}.badge-soft.success{background:#e9f8f0;color:#198754}.badge-soft.warning{background:#fff7df;color:#966a00}.badge-soft.danger{background:#fff0f1;color:#dc3545}.badge-soft.info{background:#e8f9fc;color:#087e94}.badge-soft.secondary{background:#eef1f5;color:#667085}.badge-soft.purple{background:#f0edff;color:#6548d9}
.filter-bar{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(130px,1fr)) auto;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);background:#fbfcfe}.filter-bar.three{grid-template-columns:minmax(240px,1.5fr) repeat(2,minmax(150px,1fr)) auto}.filter-bar .form-control,.filter-bar .form-select{font-size:11px;border-color:#e2e7ef}.search-control{position:relative}.search-control i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#98a2b3}.search-control input{padding-left:32px}
.action-buttons{display:flex;justify-content:flex-end;gap:5px}.btn-icon{width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border-radius:8px}.empty-state{padding:48px 20px;text-align:center;color:var(--text-muted)}.empty-state i{display:block;margin-bottom:12px;font-size:34px;color:#bac3d0}.empty-state strong{display:block;color:var(--text-main);font-size:14px}.empty-state span{display:block;margin-top:5px;font-size:11px}
.form-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}.form-section:last-child{border-bottom:0;margin-bottom:0}.form-section-title{margin-bottom:14px;font-size:12px;font-weight:800;color:#394358;text-transform:uppercase;letter-spacing:.45px}.form-label{font-size:11px;font-weight:700;color:#505b6e}.form-text{font-size:9px}.form-control,.form-select{border-color:#dfe5ed;font-size:12px}.form-control:focus,.form-select:focus{border-color:#8cbbff;box-shadow:0 0 0 .2rem rgba(13,110,253,.1)}
.detail-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px}.detail-identity{display:flex;align-items:center;gap:14px}.detail-logo{width:58px;height:58px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#e9f2ff,#f4f8ff);color:#0d6efd;font-weight:850;font-size:20px;border:1px solid #dce9fb;overflow:hidden}.detail-logo img{width:100%;height:100%;object-fit:cover}.detail-title h2{margin:0;font-size:20px;font-weight:850}.detail-title p{margin:5px 0 0;color:var(--text-muted);font-size:11px}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.info-item{padding:13px;border:1px solid var(--border);border-radius:10px}.info-label{color:var(--text-muted);font-size:9px;text-transform:uppercase;font-weight:750;letter-spacing:.4px}.info-value{margin-top:5px;font-size:12px;font-weight:650;word-break:break-word}.nav-tabs-app{padding:0 18px;border-bottom:1px solid var(--border)}.nav-tabs-app .nav-link{padding:14px 12px;border:0;border-bottom:2px solid transparent;color:#7a8496;font-size:11px;font-weight:700}.nav-tabs-app .nav-link.active{color:#0d6efd;border-color:#0d6efd;background:transparent}
.timeline{position:relative}.timeline::before{content:"";position:absolute;left:16px;top:12px;bottom:12px;width:1px;background:#e3e8ef}.timeline-item{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:10px 0}.timeline-icon{z-index:1;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eef5ff;color:#0d6efd;border:3px solid #fff}.timeline-content{padding:2px 0 12px;border-bottom:1px solid #edf0f4}.timeline-content strong{font-size:11px}.timeline-content time{float:right;color:#98a2b3;font-size:9px}.timeline-content p{margin:5px 0 0;color:#697386;font-size:10px;line-height:1.5}.timeline-outcome{margin-top:6px;padding:7px 9px;border-radius:7px;background:#f7f9fc;color:#4d596b;font-size:9px}
.pipeline-board{display:grid;grid-template-columns:repeat(7,minmax(260px,1fr));gap:14px;overflow-x:auto;padding-bottom:10px}.pipeline-column{min-height:520px;padding:12px;border:1px solid var(--border);border-radius:13px;background:#f6f8fb}.pipeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.pipeline-header strong{font-size:11px;text-transform:capitalize}.pipeline-count{min-width:23px;height:23px;display:grid;place-items:center;border-radius:999px;background:#e5eaf1;color:#637083;font-size:9px;font-weight:800}.pipeline-dropzone{min-height:450px}.pipeline-card{margin-bottom:10px;padding:12px;border:1px solid #e2e7ef;border-radius:10px;background:#fff;box-shadow:0 4px 12px rgba(31,46,72,.04);cursor:grab}.pipeline-card:active{cursor:grabbing}.pipeline-card h3{margin:0;font-size:11px;font-weight:800}.pipeline-card p{margin:4px 0;color:#7a8496;font-size:9px}.pipeline-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.pipeline-card-footer strong{color:#0d6efd;font-size:10px}.pipeline-card-footer small{color:#98a2b3;font-size:8px}.sortable-ghost{opacity:.35}.sortable-chosen{transform:rotate(1deg)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.summary-box{padding:16px;border:1px solid var(--border);border-radius:11px;background:#fff}.summary-box span{color:var(--text-muted);font-size:10px}.summary-box strong{display:block;margin-top:5px;font-size:18px}.quotation-items-table input,.quotation-items-table textarea,.quotation-items-table select{min-width:90px;font-size:11px}.quotation-items-table .item-name{min-width:170px}.quotation-summary{margin-left:auto;max-width:390px}.quotation-summary-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:11px}.quotation-summary-row.total{margin-top:6px;padding-top:12px;border-top:1px solid var(--border);font-size:15px;font-weight:850}.quotation-document{max-width:900px;margin:auto;padding:38px;background:#fff}.quotation-doc-header{display:flex;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:2px solid #1e2a3b}.quotation-doc-title{text-align:right}.quotation-doc-title h1{margin:0;font-size:28px}.quotation-doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:25px 0}.quotation-doc-table{width:100%;border-collapse:collapse;font-size:11px}.quotation-doc-table th,.quotation-doc-table td{padding:10px;border-bottom:1px solid #dfe5ed;text-align:left}.quotation-doc-table th{background:#f4f6f9}.quotation-doc-totals{width:360px;margin:20px 0 0 auto}.quotation-doc-totals div{display:flex;justify-content:space-between;padding:6px}.quotation-doc-totals .grand{font-size:16px;font-weight:800;border-top:2px solid #1e2a3b}
.auth-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f5f7fb}.auth-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:60px;color:#fff;background:radial-gradient(circle at 20% 20%,rgba(61,137,255,.45),transparent 35%),linear-gradient(140deg,#152236,#203c67)}.auth-visual-copy{max-width:520px}.auth-visual h1{font-size:44px;font-weight:900}.auth-visual p{font-size:16px;line-height:1.7;color:#c8d5e8}.auth-panel{display:flex;align-items:center;justify-content:center;padding:30px}.auth-card{width:min(420px,100%);padding:32px;border:1px solid #e3e8ef;border-radius:18px;background:#fff;box-shadow:0 22px 70px rgba(22,34,54,.11)}.auth-logo{display:flex;align-items:center;gap:11px;margin-bottom:28px}.auth-logo .brand-mark{flex:0 0 auto}.auth-card h2{font-size:24px;font-weight:850}.auth-card p{color:#7a8496;font-size:11px}
.installer-shell{min-height:100vh;padding:40px 16px;background:#eef2f7}.installer-card{max-width:880px;margin:auto;border:1px solid #dfe5ed;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(31,46,72,.1);overflow:hidden}.installer-header{padding:24px 28px;background:#1e2a3b;color:#fff}.installer-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:18px}.installer-step{height:6px;border-radius:999px;background:rgba(255,255,255,.16)}.installer-step.active{background:#4e9bff}.installer-body{padding:28px}.requirement-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf0f4}.requirement-row:last-child{border:0}
.settings-nav{position:sticky;top:90px}.settings-nav .list-group-item{font-size:11px;border-color:#e7ebf2}.settings-nav .list-group-item.active{background:#0d6efd;border-color:#0d6efd}.report-chart{height:290px}.log-agent{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1199.98px){.filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-bar .search-control{grid-column:span 2}.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.filter-bar,.filter-bar.three{grid-template-columns:1fr}.filter-bar .search-control{grid-column:auto}.content-card-header,.detail-hero{align-items:flex-start;flex-direction:column}.info-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr}.auth-page{grid-template-columns:1fr}.auth-visual{display:none}.installer-steps{grid-template-columns:repeat(3,1fr)}.table-responsive{font-size:11px}}

/* ==========================================================
   SALES OS — TYPOGRAPHY & MOBILE READABILITY UPDATE
   Tambahkan di bagian PALING BAWAH sales-os.css
   ========================================================== */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 16px;
  line-height: 1.55;
}

/* Teks umum */
p,
span,
label,
input,
select,
textarea,
button,
table {
  line-height: 1.5;
}

/* ==========================================================
   SIDEBAR & TOPBAR
   ========================================================== */

.brand-title {
  font-size: 19px;
}

.brand-subtitle {
  font-size: 13px;
}

.nav-section-label {
  font-size: 11px;
}

.sidebar .nav-link {
  min-height: 48px;
  font-size: 15px;
}

.sidebar .nav-link i {
  font-size: 19px;
}

.nav-count {
  min-width: 25px;
  height: 22px;
  font-size: 11px;
}

.storage-card {
  font-size: 13px;
}

.global-search input {
  font-size: 14px;
}

.profile-name {
  font-size: 14px;
}

.profile-role {
  font-size: 12px;
}

.notification-dot {
  font-size: 10px;
}

/* ==========================================================
   PAGE HEADING
   ========================================================== */

.breadcrumb-text {
  font-size: 13px;
}

.page-heading h1 {
  font-size: clamp(27px, 2.3vw, 34px);
}

.page-heading p {
  font-size: 15px;
  line-height: 1.55;
}

.page-heading.compact h1 {
  font-size: 28px;
}

/* ==========================================================
   STAT CARDS & DASHBOARD CARDS
   ========================================================== */

.stat-label {
  font-size: 14px;
}

.stat-value {
  font-size: 30px;
}

.stat-value.currency {
  font-size: 24px;
}

.stat-foot {
  font-size: 12px;
}

.trend,
.mini-pill {
  font-size: 11px;
}

.card-heading h2 {
  font-size: 17px;
}

.card-heading p {
  font-size: 13px;
}

.card-link {
  font-size: 13px;
}

.chart-filter {
  font-size: 13px;
}

.chart-summary {
  font-size: 12px;
}

/* Target bulanan */

.progress-ring-inner span {
  font-size: 12px;
}

.target-earned {
  font-size: 20px;
}

.target-label {
  font-size: 12px;
}

.target-insight strong {
  font-size: 13px;
}

.target-insight p {
  font-size: 12px;
}

.target-footer {
  font-size: 12px;
}

/* ==========================================================
   REMINDER
   ========================================================== */

.reminder-time {
  font-size: 12px;
}

.reminder-copy strong {
  font-size: 14px;
}

.reminder-copy span {
  font-size: 13px;
}

.reminder-copy small {
  font-size: 12px;
}

.mark-done {
  width: 36px;
  height: 36px;
}

/* ==========================================================
   MINI KANBAN & PIPELINE
   ========================================================== */

.kanban-head strong {
  font-size: 13px;
}

.kanban-head > span:last-child {
  font-size: 11px;
}

.lead-card strong {
  font-size: 13px;
}

.lead-card span {
  font-size: 12px;
}

.lead-card b {
  font-size: 12px;
}

.lead-card small {
  font-size: 11px;
}

.pipeline-header strong {
  font-size: 14px;
}

.pipeline-count {
  font-size: 11px;
}

.pipeline-card h3 {
  font-size: 14px;
}

.pipeline-card p {
  font-size: 12px;
}

.pipeline-card-footer strong {
  font-size: 13px;
}

.pipeline-card-footer small {
  font-size: 11px;
}

/* ==========================================================
   QUOTATION WIDGET
   ========================================================== */

.quote-copy strong {
  font-size: 13px;
}

.quote-copy span {
  font-size: 12px;
}

.quote-copy small {
  font-size: 12px;
}

.quote-age {
  font-size: 11px;
}

/* ==========================================================
   CONTENT CARD
   ========================================================== */

.content-card-header h2 {
  font-size: 17px;
}

.content-card-body {
  font-size: 14px;
}

/* ==========================================================
   TABLE
   ========================================================== */

.table-app {
  font-size: 14px;
}

.table-app thead th {
  padding: 13px 14px;
  font-size: 12px;
}

.table-app tbody td {
  padding: 14px;
}

.table-title {
  font-size: 14px;
}

.table-subtitle {
  font-size: 12px;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.badge-soft {
  padding: 6px 9px;
  font-size: 11px;
}

/* ==========================================================
   FORM, FILTER & BUTTON
   ========================================================== */

.form-label {
  font-size: 14px;
}

.form-text {
  font-size: 12px;
}

.form-section-title {
  font-size: 14px;
}

.form-control,
.form-select {
  min-height: 42px;
  font-size: 14px;
}

textarea.form-control {
  min-height: 110px;
}

.filter-bar .form-control,
.filter-bar .form-select {
  font-size: 14px;
}

.btn {
  font-size: 14px;
}

.btn-icon {
  width: 36px;
  height: 36px;
}

/* ==========================================================
   CUSTOMER / LEAD DETAIL
   ========================================================== */

.detail-title h2 {
  font-size: 23px;
}

.detail-title p {
  font-size: 13px;
}

.info-label {
  font-size: 11px;
}

.info-value {
  font-size: 14px;
}

.nav-tabs-app .nav-link {
  font-size: 13px;
}

/* ==========================================================
   TIMELINE
   ========================================================== */

.timeline-content strong {
  font-size: 14px;
}

.timeline-content time {
  font-size: 11px;
}

.timeline-content p {
  font-size: 13px;
}

.timeline-outcome {
  font-size: 12px;
}

/* ==========================================================
   SUMMARY & QUOTATION FORM
   ========================================================== */

.summary-box span {
  font-size: 12px;
}

.summary-box strong {
  font-size: 20px;
}

.quotation-items-table input,
.quotation-items-table textarea,
.quotation-items-table select {
  font-size: 14px;
}

.quotation-summary-row {
  font-size: 14px;
}

.quotation-summary-row.total {
  font-size: 17px;
}

/* ==========================================================
   AUTH / LOGIN
   ========================================================== */

.auth-card p {
  font-size: 14px;
}

.auth-card h2 {
  font-size: 27px;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {
  html,
  body {
    font-size: 16px;
  }

  .main-content {
    padding: 18px 14px 30px;
  }

  .page-heading h1,
  .page-heading.compact h1 {
    font-size: 26px;
    line-height: 1.25;
  }

  .page-heading p {
    font-size: 15px;
  }

  .breadcrumb-text {
    font-size: 12px;
  }

  .stat-card {
    min-height: 150px;
    padding: 18px;
  }

  .stat-label {
    font-size: 15px;
  }

  .stat-value {
    font-size: 31px;
  }

  .stat-foot {
    font-size: 13px;
  }

  .dashboard-card,
  .content-card-body {
    padding: 16px;
  }

  .card-heading h2,
  .content-card-header h2 {
    font-size: 18px;
  }

  .card-heading p {
    font-size: 14px;
  }

  /* Ukuran 16px mencegah browser mobile melakukan auto-zoom */
  .form-control,
  .form-select,
  textarea,
  input,
  select {
    font-size: 16px !important;
  }

  .form-control,
  .form-select,
  .btn {
    min-height: 44px;
  }

  .form-label {
    font-size: 15px;
  }

  .btn {
    font-size: 15px;
    padding: 9px 13px;
  }

  .table-app {
    font-size: 14px;
  }

  .table-app thead th {
    font-size: 12px;
  }

  .table-title {
    font-size: 14px;
  }

  .table-subtitle {
    font-size: 12px;
  }

  .badge-soft {
    font-size: 11px;
  }

  .reminder-copy strong {
    font-size: 14px;
  }

  .reminder-copy span,
  .reminder-copy small {
    font-size: 12px;
  }

  .nav-tabs-app {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .nav-tabs-app .nav-link {
    min-height: 44px;
    font-size: 14px;
  }

  .table-responsive {
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .action-buttons {
    gap: 8px;
  }

  .btn-icon,
  .mark-done,
  .icon-button {
    min-width: 42px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 575.98px) {
  .main-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .content-card-header {
    padding: 16px;
  }

  .detail-hero {
    padding: 18px 16px;
  }

  .detail-title h2 {
    font-size: 21px;
  }

  .mini-kanban {
    grid-template-columns: repeat(3, 220px);
  }

  .kanban-head strong,
  .lead-card strong {
    font-size: 14px;
  }

  .lead-card span,
  .lead-card b {
    font-size: 12px;
  }
}

/* Tailwind Modal & Dialog Utilities */
.modal-dialog-wrapper {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Modern Global & Custom Scrollbar Design System */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.65);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(79, 70, 229, 0.9);
}

/* Custom Scrollbar Helper Classes */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* Premium Gradient Neon Scrollbar for Sidebar Navigation */
#sidebar nav::-webkit-scrollbar {
  width: 6px;
}

#sidebar nav::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 9999px;
  margin: 6px 0;
}

#sidebar nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1 0%, #a855f7 100%);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar nav:hover::-webkit-scrollbar-thumb {
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.85);
}

#sidebar nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #818cf8 0%, #c084fc 100%) !important;
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.95), 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

#sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: #818cf8 rgba(15, 23, 42, 0.4);
}



/* Firefox Modern Thin Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}