:root {
    --primary: #7FB9EF;
    --primary-dark: #5a9fd6;
    --primary-light: #e8f3fc;
    --primary-soft: #f2f8fd;
}

body {
    background-color: var(--primary-soft);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== Cards with soft shadow & rounded corners ===== */
.card, .soft-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(31, 60, 92, 0.08);
}

.btn {
    border-radius: 0.65rem;
    font-weight: 500;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #16324a;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.btn-outline-primary {
    color: var(--primary-dark);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #16324a;
}

.form-control, .form-select {
    border-radius: 0.65rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(127, 185, 239, 0.25);
}

.text-primary-custom { color: var(--primary-dark) !important; }
.bg-primary-custom { background-color: var(--primary) !important; }

/* ===== Auth page ===== */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-light) 100%);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(31, 60, 92, 0.14);
}
.auth-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 2rem;
    margin: 0 auto;
}

/* ===== Sidebar (admin) ===== */
.sidebar {
    min-height: 100vh;
    background: #fff;
    border-right: 1px solid #eef2f7;
}
.sidebar .nav-link {
    color: #4a5b6b;
    border-radius: 0.65rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.sidebar .nav-link:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.sidebar .nav-link.active {
    background: var(--primary);
    color: #16324a;
}
.sidebar .nav-link i {
    width: 22px;
    margin-right: 0.5rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .sidebar { min-height: auto; }
}

/* ===== Portal steps / type cards ===== */
.step-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.type-card, .merek-card {
    border: 2px solid #eef2f7;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: #33475b;
}
.type-card:hover, .merek-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(127, 185, 239, 0.28);
    transform: translateY(-3px);
    color: var(--primary-dark);
    text-decoration: none;
}
.type-card i { font-size: 2.4rem; color: var(--primary-dark); margin-bottom: 0.75rem; }
.merek-card i { font-size: 1.8rem; }

/* ===== File cards ===== */
.file-card {
    border: 1px solid #eef2f7;
    border-radius: 1rem;
}
.file-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.9rem;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.file-meta {
    font-size: 0.85rem;
    color: #6b7a8c;
}
.file-meta i { margin-right: 0.3rem; width: 14px; text-align: center; }

/* ===== Small helpers ===== */
.empty-state { padding: 3rem 1rem; }
.empty-state i { font-size: 3rem; color: #c2d2e0; }
.breadcrumb { background: transparent; margin-bottom: 0; }
.stat-card { border-radius: 1rem; }
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 0.8rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.table > :not(caption) > * > * { padding: 0.75rem 0.5rem; }
.pagination .page-link { border-radius: 0.5rem; margin: 0 2px; color: var(--primary-dark); }
.pagination .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: #16324a; }