@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
    --primary: #1572e8;
    --primary-dark: #1269db;
    --secondary: #6861ce;
    --success: #31ce36;
    --info: #48abf7;
    --warning: #ffad46;
    --danger: #f25961;
    --bg-body: #f9fbfd;
    --bg-card: #ffffff;
    --sidebar: #1572e8;
    --text-main: #495057;
    --text-muted: #8d9498;
    --border: #ebedf2;
}

* { box-sizing: border-box; }
body { 
    margin: 0; 
    font-family: 'Lato', sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    font-size: 14px;
}

/* Layout */
.wrapper { display: flex; min-height: 100vh; }

/* Sidebar Styling - Blue like the image */
.sidebar { 
    width: 250px; 
    background: var(--sidebar); 
    color: #fff; 
    position: fixed; 
    inset: 0 auto 0 0; 
    z-index: 1000;
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
}

.sidebar .brand { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    padding: 0 25px; 
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 1px;
}

.sidebar .user-profile {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar .user-profile img {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2);
}

.sidebar .user-info .name { font-weight: 700; font-size: 14px; color: #fff; }
.sidebar .user-info .role { font-size: 11px; opacity: 0.7; display: block; color: #fff; }

.nav-container { padding: 15px 0; }
.nav-section-label { 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 15px 25px 5px; 
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
}

.nav-item { 
    display: flex; 
    align-items: center; 
    padding: 10px 25px; 
    color: rgba(255,255,255,0.8); 
    text-decoration: none;
    transition: 0.2s;
    font-weight: 500;
    gap: 12px;
}

.nav-item:hover, .nav-item.active { 
    background: rgba(255,255,255,0.15); 
    color: #fff; 
}

.nav-item i { font-size: 16px; width: 20px; text-align: center; }

/* Topbar - Blue Header */
.main-panel { 
    flex: 1; 
    margin-left: 250px; 
    display: flex; 
    flex-direction: column;
    min-width: 0;
}

.content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.topbar {
    height: 60px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
}

.topbar-content {
    width: 100%;
    max-width: 1280px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-bar { position: relative; width: 250px; }
.search-bar input {
    width: 100%;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 20px;
    padding: 8px 15px 8px 35px;
    color: #fff;
    font-size: 13px;
}
.search-bar input::placeholder { color: rgba(255,255,255,0.7); }
.search-bar i { position: absolute; left: 12px; top: 10px; opacity: 0.7; }

.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-icons { display: flex; gap: 15px; font-size: 18px; }
.topbar-icons i { cursor: pointer; opacity: 0.9; }

/* Dashboard Content */
.header-blue {
    background: var(--primary);
    padding: 30px 30px 90px;
    color: #fff;
}
.header-blue .content-wrapper { padding: 0; }

.header-blue h1 { font-size: 24px; font-weight: 700; margin: 0; }
.header-blue p { margin: 5px 0 0; opacity: 0.8; font-size: 13px; }

.header-actions { display: flex; gap: 10px; }

.content-body { margin: -55px auto 0; max-width: 1280px; padding: 0 30px 40px; width: 100%; }

.btn-white-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-white-fill {
    background: #fff;
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Cards */
.card {
    background: var(--bg-card);
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 15px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden;
}

.card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: #333; }
.card-header .sub { font-size: 12px; color: #888; display: block; margin-top: 4px; font-weight: 400; }
.card-body { padding: 20px; }

/* Grid */
.grid-stats-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; }
.grid-stats-row > *, .sales-row > * { min-width: 0; }
.card-body { min-width: 0; }
canvas { max-width: 100%; }

/* Stat Circles (Charts container) */
.stat-circles { display: flex; justify-content: space-around; padding: 10px 0; }
.circle-item { text-align: center; }
.circle-item canvas { width: 80px !important; height: 80px !important; margin: 0 auto 10px; }
.circle-item .label { font-weight: 700; font-size: 12px; color: #555; }

/* Income Card */
.income-summary { display: flex; flex-direction: column; gap: 15px; }
.summary-val { border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; }
.summary-val .title { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.summary-val .amount { font-size: 20px; font-weight: 900; color: var(--success); margin-top: 2px; }
.summary-val.spend .amount { color: var(--danger); }

/* Daily Sales Card - Blue */
.card-sales { background: var(--primary); color: #fff; padding: 25px; border-radius: 10px; height: 100%; }
.card-sales .title { font-size: 16px; font-weight: 700; }
.card-sales .date { font-size: 12px; opacity: 0.7; }
.card-sales .value { font-size: 28px; font-weight: 900; margin-top: 15px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 15px; font-weight: 700; color: #888; border-bottom: 2px solid #f1f1f1; font-size: 12px; text-transform: uppercase; }
td { padding: 12px 15px; border-bottom: 1px solid #f8f8f8; font-size: 13px; }

/* Utils */
.badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge-success { background: #e1f6e2; color: #31ce36; }
.badge-warning { background: #fff4e1; color: #ffad46; }
.badge-danger { background: #ffe9e9; color: #f25961; }
.badge-info { background: #e5f3ff; color: #48abf7; }

.footer { padding: 20px 30px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; display: flex; justify-content: space-between; }

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: 0.3s; }
    .sidebar.show { transform: translateX(0); }
    .main-panel { margin-left: 0; }
    .grid-stats-row { grid-template-columns: 1fr; }
    .menu-btn { display: block !important; }
}

/* ---------- kompatibilitas halaman lain ---------- */
.main { margin-left: 0; padding: 0; display: block; }
.page { padding: 28px 30px 40px; max-width: 1280px; margin: 0 auto; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: #1f2b3a; }
.page-head p { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; }
.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.card-pad { padding: 20px; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 900; letter-spacing: -.6px; margin-top: 4px; color: #1f2b3a; }
.stat-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.pill { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; background: #e1f6e2; color: #2d9d31; }
.table-wrap { overflow-x: auto; }
.muted { color: var(--text-muted); }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
td strong { white-space: nowrap; }
table { min-width: 760px; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; text-transform: capitalize; }
.b-green { background: #e1f6e2; color: #2d9d31; }
.b-yellow { background: #fff4e1; color: #b7791f; }
.b-red { background: #ffe9e9; color: #d63939; }
.b-blue { background: #e5f3ff; color: #1572e8; }
.b-gray { background: #eef1f5; color: #64748b; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 6px; border: 1px solid transparent; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; border-color: var(--border); color: #334155; }
.btn-outline:hover { background: #f8fafc; }
.btn-danger { background: #fff; border-color: #f8c0c0; color: var(--danger); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 5px; }
.btn-block { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1/-1; }
label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 6px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 13px; background: #fff; color: var(--text-main); outline: none; transition: .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,114,232,.12); }
textarea { min-height: 70px; resize: vertical; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; font-weight: 500; }
.alert-ok { background: #e1f6e2; color: #2d9d31; border: 1px solid #b9e8bc; }
.alert-err { background: #ffe9e9; color: #d63939; border: 1px solid #f8c0c0; }
.modal-back { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1200; align-items: center; justify-content: center; padding: 20px; }
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 10px; width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.modal h3 { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.modal .sub { color: var(--text-muted); font-size: 12px; margin-bottom: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 12px; font-weight: 700; color: #475569; text-decoration: none; }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty { padding: 44px 20px; text-align: center; color: #94a3b8; font-size: 13px; }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #e5f3ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; }
@media (max-width: 1100px) { .grid-stats { grid-template-columns: 1fr 1fr; } }
/* ---------- halaman publik & login ---------- */
.hero{background:linear-gradient(140deg,#0b4ea2,#1572e8 55%,#48abf7);color:#fff;padding:20px 0 90px}
.hero-nav{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.hero-body{max-width:1120px;margin:0 auto;padding:64px 24px 0;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.12;letter-spacing:-1.4px;font-weight:900}
.hero p{color:#d6e8ff;font-size:15px;line-height:1.7;margin:18px 0 0;max-width:520px}
.hero-badge{display:inline-flex;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.hero-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:22px;backdrop-filter:blur(8px)}
.hero-card .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px}
.hero-card .row:last-child{border:0}
.plans{max-width:1120px;margin:-58px auto 0;padding:0 24px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.plan{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;box-shadow:0 12px 30px rgba(15,23,42,.08)}
.plan.hot{border:2px solid var(--primary);position:relative}
.plan.hot:after{content:'PALING POPULER';position:absolute;top:-11px;left:26px;background:var(--primary);color:#fff;font-size:9px;letter-spacing:1px;font-weight:800;padding:4px 9px;border-radius:6px}
.plan h3{font-size:14px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px}
.price{font-size:30px;font-weight:900;letter-spacing:-1px;margin:10px 0 2px;color:#1f2b3a}
.plan ul{list-style:none;padding:16px 0 4px;margin:0;color:#475569;font-size:13px;line-height:2.1}
.plan li i{color:var(--success);margin-right:8px;font-size:11px}
.section{max-width:1120px;margin:0 auto;padding:30px 24px 70px}
.section h2{font-size:24px;font-weight:900;letter-spacing:-.5px;text-align:center;margin-bottom:8px}
.section .lead{text-align:center;color:var(--text-muted);margin:0 0 30px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:22px;border:1px solid var(--border);border-radius:12px;background:#fff}
.feature i{width:38px;height:38px;border-radius:10px;background:#e5f3ff;color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.feature h3{font-size:14px;font-weight:700;margin-bottom:6px}
.feature p{margin:0;color:var(--text-muted);font-size:12.5px;line-height:1.65}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.auth-side{background:linear-gradient(150deg,#0b4ea2,#1572e8);color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:space-between}
.auth-side h2{font-size:30px;line-height:1.25;letter-spacing:-.8px;color:#fff}
.auth-side p{color:#d6e8ff;line-height:1.7;font-size:14px}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:420px}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.brand-name{font-weight:800;letter-spacing:.4px;font-size:16px;color:#1f2b3a}
.brand-sub{font-size:10px;color:var(--text-muted);letter-spacing:1.4px;text-transform:uppercase}
@media(max-width:1100px){.hero-body{grid-template-columns:1fr}.plans,.features{grid-template-columns:1fr}}
@media(max-width:780px){.auth-wrap{grid-template-columns:1fr}.auth-side{display:none}.hero h1{font-size:30px}.hero-body{padding-top:34px}}

@media (max-width: 780px) { .grid-stats { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .page { padding: 18px; } }