/* ================================================
   kasih@YPIP — Main Stylesheet
   Colour palette:
     Primary (MBIP Blue) : #003087
     Secondary (Gold)    : #FFB300
     Sidebar bg          : #002060
     Sidebar hover       : #003087
================================================ */

:root {
    --ypip-blue:    #003087;
    --ypip-blue-dk: #002060;
    --ypip-gold:    #FFB300;
    --sidebar-w:    260px;
    --topbar-h:     58px;
}

/* ── Reset / Base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    background: #f4f6f9;
    color: #212529;
}

/* ── Brand text ─────────────────────────────── */
.brand-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}
.brand-title-lg {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ypip-blue);
    letter-spacing: -1px;
}
.brand-at { color: var(--ypip-gold); }

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--ypip-blue-dk);
    z-index: 1030;
    transition: transform .25s ease;
    overflow: hidden;
}

.sidebar-brand {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px .5rem;
    font-size: .875rem;
    transition: background .15s, color .15s;
}
.sidebar-link:hover, .sidebar-link.active {
    background: var(--ypip-blue);
    color: #fff;
}
.sidebar-link i { font-size: 1rem; flex-shrink: 0; }

.sidebar-link.sub {
    padding: .4rem 1rem .4rem 2.4rem;
    font-size: .82rem;
}

.sub-nav { padding: .15rem 0 .3rem; }

.sidebar-divider {
    padding: .75rem 1.5rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.user-info { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ypip-gold);
    color: var(--ypip-blue-dk);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.user-name { font-size: .8rem; color: #fff; font-weight: 600; line-height: 1.2; }
.user-role { font-size: .7rem; color: rgba(255,255,255,.5); }

/* ── Sidebar collapsed (mobile) ─────────────── */
.sidebar-collapsed .sidebar  { transform: translateX(-100%); }
.sidebar-collapsed .main-content { margin-left: 0 !important; }

/* ══════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════ */
.main-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

.topbar {
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topbar-toggle {
    background: none; border: none; color: #555; padding: .25rem .4rem;
    border-radius: 5px;
}
.topbar-toggle:hover { background: #f0f0f0; }
.topbar-title { font-weight: 600; color: var(--ypip-blue); flex: 1; font-size: .95rem; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.page-content {
    flex: 1;
    padding: 1.5rem;
}

/* ══════════════════════════════════════════════
   AUTH PAGE
══════════════════════════════════════════════ */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--ypip-blue-dk) 0%, var(--ypip-blue) 60%, #1a4db3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-wrapper { width: 100%; max-width: 420px; }
.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.auth-header {
    background: linear-gradient(135deg, var(--ypip-blue-dk), var(--ypip-blue));
    padding: 2rem 2rem 1.5rem;
    text-align: center;
}
.auth-subtitle {
    color: rgba(255,255,255,.75);
    font-size: .82rem;
    margin: .5rem 0 0;
    line-height: 1.5;
}
.auth-body-inner { padding: 1.75rem 2rem; }
.auth-footer {
    padding: 1rem 2rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

/* ══════════════════════════════════════════════
   PUBLIC PAGE
══════════════════════════════════════════════ */
.public-body { background: #f4f6f9; }
.public-navbar {
    background: var(--ypip-blue-dk);
    padding: .75rem 0;
}
.public-navbar .brand-title { font-size: 1.3rem; }
.public-footer {
    padding: 1.5rem 0;
    border-top: 1px solid #dee2e6;
    margin-top: 3rem;
}

/* ══════════════════════════════════════════════
   CARDS & STATS
══════════════════════════════════════════════ */
.card { border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.card-header { background: #fff; border-bottom: 1px solid #e2e8f0; font-weight: 600; }

.stat-card {
    border-radius: 10px;
    padding: 1.25rem;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); color: #fff; }
.stat-number { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-label  { font-size: .78rem; opacity: .85; margin-top: .2rem; }
.stat-icon   { font-size: 2.5rem; opacity: .3; }

.bg-blue-gradient { background: linear-gradient(135deg, #003087, #1a56c7); }
.bg-gold-gradient { background: linear-gradient(135deg, #e67e00, #FFB300); }
.bg-green-gradient{ background: linear-gradient(135deg, #1a7a4a, #28a745); }
.bg-red-gradient  { background: linear-gradient(135deg, #7a1a1a, #dc3545); }
.bg-purple-gradient{background: linear-gradient(135deg, #4a1a7a, #6f42c1); }
.bg-teal-gradient { background: linear-gradient(135deg, #1a6a6a, #20c997); }

/* ══════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════ */
.table > thead > tr > th {
    background: #f8f9fa;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 2px solid #dee2e6;
}
.table > tbody > tr > td { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f0f4ff; }

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge { font-size: .72rem; font-weight: 600; padding: .3em .65em; }

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.form-label { font-weight: 600; font-size: .83rem; color: #495057; margin-bottom: .3rem; }
.form-control, .form-select {
    border-color: #ced4da;
    border-radius: 7px;
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ypip-blue);
    box-shadow: 0 0 0 .2rem rgba(0,48,135,.15);
}
.required-star { color: #dc3545; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn-primary {
    background: var(--ypip-blue);
    border-color: var(--ypip-blue);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ypip-blue-dk);
    border-color: var(--ypip-blue-dk);
}

/* ══════════════════════════════════════════════
   MAP
══════════════════════════════════════════════ */
.map-container { border-radius: 8px; overflow: hidden; border: 1px solid #ced4da; }
#permohonan-map, #bancian-map { height: 300px; width: 100%; }

/* ══════════════════════════════════════════════
   BANCIAN LAMPIRAN
══════════════════════════════════════════════ */
.lampiran-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.lampiran-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    aspect-ratio: 1;
    background: #f8f9fa;
}
.lampiran-item img { width: 100%; height: 100%; object-fit: cover; }
.lampiran-delete {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(220,53,69,.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; cursor: pointer;
    padding: 0;
}

/* ══════════════════════════════════════════════
   STATUS TIMELINE (public)
══════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute;
    left: .6rem; top: 0; bottom: 0;
    width: 2px; background: #dee2e6;
}
.timeline-item { position: relative; margin-bottom: 1.25rem; }
.timeline-dot {
    position: absolute;
    left: -1.55rem; top: .2rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--ypip-blue);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--ypip-blue);
}
.timeline-dot.done  { background: #28a745; box-shadow: 0 0 0 2px #28a745; }
.timeline-dot.active{ background: var(--ypip-gold); box-shadow: 0 0 0 2px var(--ypip-gold); }

/* ══════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.page-header h1 { font-size: 1.3rem; font-weight: 700; color: var(--ypip-blue); margin: 0; }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .page-content { padding: 1rem; }
}

/* ── Print ───────────────────────────────────── */
@media print {
    .sidebar, .topbar, .btn, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}