/* Paket Pintar product UI — shared internal workspace system */
:root {
    --pp-navy: #0b1220;
    --pp-navy-soft: #111c30;
    --pp-blue: #2563eb;
    --pp-blue-hover: #1d4ed8;
    --pp-surface: #ffffff;
    --pp-canvas: #f5f7fb;
    --pp-border: #e2e8f0;
    --pp-text: #172033;
    --pp-muted: #64748b;
    --pp-success: #15803d;
    --pp-warning: #b45309;
    --pp-danger: #b91c1c;
    --pp-radius: 12px;
    --pp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
}

.pp-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.app-shell {
    color: var(--pp-text) !important;
    background: var(--pp-canvas) !important;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.app-shell .sidebar {
    width: 248px !important;
    padding: 22px 14px !important;
    background: var(--pp-navy) !important;
    border-right: 1px solid rgba(255,255,255,.07);
    box-shadow: none !important;
}

.app-shell .sidebar-header {
    min-height: 50px;
    margin-bottom: 20px !important;
    padding: 0 6px 18px !important;
    border-bottom-color: rgba(255,255,255,.09) !important;
}

.app-shell .logo-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 9px !important;
    background: var(--pp-blue) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    letter-spacing: -.02em;
}

.app-shell .brand-title h2 { font-size: 14px !important; letter-spacing: -.01em; }
.app-shell .brand-title p { color: #7f8da4 !important; font-size: 10px !important; }
.app-shell .menu-nav { gap: 3px !important; }
.app-shell .menu-item {
    min-height: 44px;
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 9px !important;
    color: #9aa8bd !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.app-shell .menu-item:hover { background: rgba(255,255,255,.055) !important; color: #eef4ff !important; }
.app-shell .menu-item.active {
    color: #fff !important;
    background: #1d4ed8 !important;
    box-shadow: none !important;
}
.app-shell .menu-item svg { width: 18px !important; height: 18px !important; }
.app-shell .sidebar-toggle-btn {
    border-radius: 8px !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.12) !important;
}
.app-shell .sidebar-footer-logout { border-top-color: rgba(255,255,255,.09) !important; }
.app-shell .sidebar-logout-btn { border-radius: 9px !important; box-shadow: none !important; }
.app-shell button .pp-icon, .app-shell .btn .pp-icon { width: 16px; height: 16px; }

.app-shell .main-content {
    margin-left: 248px !important;
    width: calc(100% - 248px) !important;
    max-width: 1680px;
    padding: 0 32px 40px !important;
}

.app-shell .main-content > .header {
    position: sticky !important;
    top: 0;
    z-index: 45;
    min-height: 88px;
    margin: 0 -4px 26px !important;
    padding: 18px 4px !important;
    background: rgba(245,247,251,.94) !important;
    border-bottom: 1px solid rgba(226,232,240,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-shell .header h1 {
    color: var(--pp-text) !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    line-height: 1.2;
    letter-spacing: -.035em;
}
.app-shell .header p { color: var(--pp-muted) !important; font-size: 12px !important; margin-top: 4px; }
.app-shell .header-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin-right: 12px !important;
    border-radius: 9px !important;
    border: 1px solid var(--pp-border) !important;
    box-shadow: none !important;
    background: var(--pp-surface) !important;
}
.app-shell .avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--pp-navy-soft) !important;
    box-shadow: none !important;
    font-size: 13px !important;
}
.app-shell .user-info h4, .app-shell .user-profile h4 { color: var(--pp-text) !important; font-size: 13px !important; }
.app-shell .user-info p, .app-shell .user-profile p { color: var(--pp-muted) !important; font-size: 11px !important; }

.app-shell .card,
.app-shell .stat-card,
.app-shell .toolbar,
.app-shell .table-card,
.app-shell .filter-card,
.app-shell .search-card,
.app-shell .settings-nav,
.app-shell .settings-content,
.app-shell .paket-card,
.app-shell .modal-content,
.app-shell .modal-card,
.app-shell .user-modal-card {
    background: var(--pp-surface) !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
}

.app-shell .stats-grid { gap: 16px !important; margin-bottom: 22px !important; }
.app-shell .stat-card { min-height: 124px; padding: 20px !important; }
.app-shell .stat-card-info h3 { color: var(--pp-text) !important; font-size: 29px !important; letter-spacing: -.04em; }
.app-shell .stat-card-info p { color: var(--pp-muted) !important; font-size: 12px !important; }
.app-shell .stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
}
.app-shell .stat-icon .pp-icon { width: 20px; height: 20px; }
.app-shell .bg-blue { background: #eff6ff !important; color: #2563eb !important; }
.app-shell .bg-green { background: #ecfdf3 !important; color: #15803d !important; }
.app-shell .bg-orange { background: #fff7ed !important; color: #c2410c !important; }
.app-shell .bg-red { background: #fef2f2 !important; color: #b91c1c !important; }
.app-shell .content-grid { gap: 18px !important; }
.app-shell .card, .app-shell .table-card, .app-shell .filter-card { padding: 20px !important; }
.app-shell .card-header, .app-shell .table-header { margin-bottom: 18px !important; }
.app-shell .card-header h2, .app-shell .table-header h2, .app-shell .section-title { color: var(--pp-text) !important; font-size: 16px !important; letter-spacing: -.015em; }

.app-shell table { border-collapse: separate !important; border-spacing: 0 !important; }
.app-shell thead th {
    padding: 11px 13px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border-top: 1px solid var(--pp-border);
    border-bottom: 1px solid var(--pp-border) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
    white-space: nowrap;
}
.app-shell thead th:first-child { border-left: 1px solid var(--pp-border); border-radius: 8px 0 0 8px !important; }
.app-shell thead th:last-child { border-right: 1px solid var(--pp-border); border-radius: 0 8px 8px 0 !important; }
.app-shell tbody tr { border-bottom: 0 !important; }
.app-shell tbody td { padding: 14px 13px !important; border-bottom: 1px solid #edf1f6; color: #334155 !important; font-size: 12px !important; }
.app-shell tbody tr:hover { background: #fafcff !important; }

.app-shell input,
.app-shell select,
.app-shell textarea,
.app-shell .form-input,
.app-shell .form-select,
.app-shell .search-input,
.app-shell .filter-select {
    min-height: 42px;
    color: var(--pp-text) !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 13px !important;
}
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell .form-input:focus,
.app-shell .form-select:focus,
.app-shell .search-input:focus {
    outline: none !important;
    border-color: var(--pp-blue) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
.app-shell input::placeholder, .app-shell textarea::placeholder { color: #94a3b8 !important; }

.app-shell button,
.app-shell .btn,
.app-shell .btn-primary,
.app-shell .btn-secondary,
.app-shell .btn-save,
.app-shell .btn-submit,
.app-shell .btn-search,
.app-shell .btn-filter,
.app-shell .btn-export,
.app-shell .btn-checkout,
.app-shell .btn-action {
    border-radius: 9px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}
.app-shell .btn-primary,
.app-shell .btn-save,
.app-shell .btn-submit,
.app-shell .btn-search,
.app-shell .btn-filter,
.app-shell .btn-action {
    color: #fff !important;
    background: var(--pp-blue) !important;
    border-color: var(--pp-blue) !important;
}
.app-shell .btn-primary:hover,
.app-shell .btn-save:hover,
.app-shell .btn-submit:hover,
.app-shell .btn-search:hover,
.app-shell .btn-filter:hover { background: var(--pp-blue-hover) !important; transform: none !important; }
.app-shell .btn-secondary, .app-shell .btn-tertiary {
    color: #334155 !important;
    background: #fff !important;
    border: 1px solid var(--pp-border) !important;
}
.app-shell .btn-export { background: #166534 !important; color: #fff !important; }
.app-shell .action-btn { border-radius: 8px !important; font-size: 0 !important; }
.app-shell .action-btn .pp-icon { width: 16px; height: 16px; }

.app-shell .badge,
.app-shell .role-badge,
.app-shell .tower-badge,
.app-shell .unit-pill,
.app-shell .loker-badge,
.app-shell .ekspedisi-badge,
.app-shell .overdue-badge {
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}
.app-shell .badge-success { color: var(--pp-success) !important; background: #ecfdf3 !important; }
.app-shell .badge-danger, .app-shell .overdue-badge { color: var(--pp-danger) !important; background: #fef2f2 !important; }
.app-shell .badge-info { color: var(--pp-blue) !important; background: #eff6ff !important; }
.app-shell .petugas-badge, .app-shell .stat-badge {
    color: #475569 !important;
    background: #fff !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
.app-shell .petugas-badge { display: inline-flex !important; align-items: center; gap: 7px; }
.app-shell .settings-nav { padding: 10px !important; }
.app-shell .nav-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-size: 12px !important;
}
.app-shell .nav-item.active { color: var(--pp-blue) !important; background: #eff6ff !important; }
.app-shell .nav-item .pp-icon { width: 17px; height: 17px; }
.app-shell .notif-dropdown { border-radius: 12px !important; box-shadow: 0 18px 45px rgba(15,23,42,.14) !important; }
.app-shell .notif-icon { border-radius: 9px !important; }
.app-shell .notif-time { display: flex; align-items: center; gap: 5px; }

.app-shell .modal-overlay, .app-shell .modal-blur-overlay { background: rgba(11,18,32,.62) !important; backdrop-filter: blur(4px); }
.app-shell .modal-content, .app-shell .modal-card, .app-shell .user-modal-card { border-radius: 14px !important; }
.app-shell .upload-area { border-radius: 10px !important; background: #f8fafc !important; }
.app-shell .empty-state-icon, .app-shell .empty-icon, .app-shell .upload-icon, .app-shell .modal-icon { font-size: 0 !important; }
.app-shell .empty-state-icon .pp-icon, .app-shell .empty-icon .pp-icon, .app-shell .upload-icon .pp-icon, .app-shell .modal-icon .pp-icon { width: 28px; height: 28px; }
.app-shell .checkmark-circle { font-size: 0 !important; }
.app-shell .checkmark-circle .pp-icon { width: 32px; height: 32px; }

html.sidebar-collapsed .app-shell .main-content,
body.app-shell.sidebar-collapsed .main-content { margin-left: 80px !important; width: calc(100% - 80px) !important; }

@media (max-width: 1279.98px) {
    body.app-shell .sidebar { display: flex !important; width: 264px !important; }
    body.app-shell .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 20px 32px !important; }
    .app-shell .main-content > .header { min-height: 78px; margin-bottom: 20px !important; }
}

@media (max-width: 767.98px) {
    body.app-shell .main-content { padding: 0 14px 28px !important; }
    .app-shell .main-content > .header { align-items: center !important; gap: 10px; }
    .app-shell .header h1 { font-size: 20px !important; }
    .app-shell .header p { max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-shell .profile-area, .app-shell .top-bar-right { gap: 8px !important; }
    .app-shell .user-profile .user-info, .app-shell .user-profile > div:not(.avatar) { display: none; }
    .app-shell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .app-shell .stat-card { min-height: 110px; padding: 15px !important; }
    .app-shell .stat-card-info h3 { font-size: 24px !important; }
    .app-shell .content-grid { grid-template-columns: 1fr !important; }
    .app-shell .card, .app-shell .table-card, .app-shell .filter-card, .app-shell .toolbar { padding: 15px !important; }
    .app-shell .notif-dropdown { position: fixed !important; top: 72px !important; left: 12px !important; right: 12px !important; width: auto !important; }
}

/* Super-admin uses the same product language without the tenant sidebar. */
body.super-admin-shell {
    color: var(--pp-text) !important;
    background: var(--pp-canvas) !important;
}
.super-admin-shell .glass-container { max-width: 1440px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.super-admin-shell .header { position: sticky; top: 0; z-index: 20; padding: 16px 0 !important; background: rgba(245,247,251,.94) !important; border-bottom: 1px solid var(--pp-border) !important; backdrop-filter: blur(12px); }
.super-admin-shell .card, .super-admin-shell .stat-card, .super-admin-shell .modal-content { background: #fff !important; border: 1px solid var(--pp-border) !important; border-radius: 12px !important; box-shadow: var(--pp-shadow) !important; }
.super-admin-shell .stat-icon { border-radius: 10px !important; box-shadow: none !important; }
.super-admin-shell .btn { border-radius: 9px !important; box-shadow: none !important; }
.super-admin-shell .btn-primary { background: var(--pp-blue) !important; }
.super-admin-shell table thead { background: #f8fafc !important; }
.super-admin-shell table th { color: var(--pp-muted) !important; font-size: 10px !important; letter-spacing: .05em; }
.super-admin-shell table td { color: #334155 !important; border-bottom-color: #edf1f6 !important; }
.super-admin-shell input, .super-admin-shell textarea, .super-admin-shell select { border-radius: 9px !important; box-shadow: none !important; }

/* Public tracker: compact, calm, and aligned with the marketing site. */
body.tracking-shell { background: #eef2f7 !important; color: var(--pp-text) !important; }
.tracking-shell .mobile-container { max-width: 620px !important; min-height: 100vh; margin: 0 auto; background: #fff !important; box-shadow: 0 0 0 1px rgba(226,232,240,.9) !important; }
.tracking-shell .header { padding: 24px 24px 30px !important; background: var(--pp-navy) !important; border-radius: 0 !important; }
.tracking-shell .logo-box { background: var(--pp-blue) !important; border-radius: 9px !important; box-shadow: none !important; }
.tracking-shell .workspace-gate { background: #fff !important; border: 1px solid #dbe3ee !important; border-radius: 10px !important; }
.tracking-shell .workspace-input { color: var(--pp-text) !important; }
.tracking-shell .workspace-input::placeholder { color: #94a3b8 !important; }
.tracking-shell .workspace-confirm { color: #fff !important; background: var(--pp-blue) !important; border-radius: 8px !important; }
.tracking-shell .workspace-badge { color: #bfdbfe !important; background: rgba(37,99,235,.18) !important; border-radius: 999px !important; }
.tracking-shell button.workspace-badge { cursor: pointer; font-family: inherit; }
.tracking-shell .search-box-wrapper { border-radius: 10px !important; box-shadow: 0 8px 24px rgba(2,6,23,.18) !important; }
.tracking-shell .btn-search { background: var(--pp-blue) !important; border-radius: 8px !important; box-shadow: none !important; }
.tracking-shell .content { padding: 24px !important; }
.tracking-shell .tracking-card, .tracking-shell .info-card, .tracking-shell .result-summary { border: 1px solid var(--pp-border) !important; border-radius: 12px !important; box-shadow: none !important; }
.tracking-shell .courier-logo { font-size: 0 !important; border-radius: 10px !important; }
.tracking-shell .courier-logo .pp-icon { width: 23px; height: 23px; }
.tracking-shell .empty-state > div:first-child { font-size: 0 !important; }
.tracking-shell .empty-state > div:first-child .pp-icon { width: 36px; height: 36px; }
.tracking-shell .unit-pill, .tracking-shell .badge-status { border-radius: 999px !important; }
.tracking-shell .footer { color: #94a3b8 !important; }

@media (max-width: 640px) {
    .tracking-shell .mobile-container { max-width: none !important; box-shadow: none !important; }
    .tracking-shell .header { padding: 20px 18px 28px !important; }
    .tracking-shell .content { padding: 18px !important; }
}

/* Workspace login: same restrained visual language as the application. */
body.login-shell { background: var(--pp-canvas) !important; }
.login-shell .left-panel { background: var(--pp-navy) !important; }
.login-shell .glow-orb-1, .login-shell .glow-orb-2 { display: none !important; }
.login-shell .grid-pattern { opacity: .35; }
.login-shell .logo-symbol { background: var(--pp-blue) !important; border-radius: 9px !important; box-shadow: none !important; }
.login-shell .hero-pill, .login-shell .saas-badge, .login-shell .security-badge {
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.login-shell .typewriter-accent, .login-shell .tenant-highlight {
    color: #60a5fa !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
.login-shell .glass-card {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.login-shell .glass-card:hover { transform: none !important; background: rgba(255,255,255,.065) !important; }
.login-shell .glass-icon-box { border-radius: 9px !important; box-shadow: none !important; }
.login-shell .glass-icon-box .pp-icon { width: 20px; height: 20px; }
.login-shell .feature-check { border-radius: 7px !important; box-shadow: none !important; }
.login-shell .feature-check .pp-icon { width: 14px; height: 14px; }
.login-shell .right-panel { background: var(--pp-canvas) !important; }
.login-shell .form-container { max-width: 440px !important; }
.login-shell .step-indicator { border-radius: 999px !important; }
.login-shell .step-indicator > span { display: inline-flex; align-items: center; gap: 6px; }
.login-shell .step-indicator .pp-icon { width: 14px; height: 14px; }
.login-shell .form-input { border-radius: 9px !important; box-shadow: none !important; }
.login-shell .input-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; }
.login-shell .btn-primary-action {
    background: var(--pp-blue) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
.login-shell .btn-primary-action:hover { background: var(--pp-blue-hover) !important; transform: none !important; box-shadow: none !important; }
.login-shell .active-workspace-card, .login-shell .btn-portal-penghuni {
    border-radius: 10px !important;
    box-shadow: none !important;
}
.login-shell .btn-portal-penghuni .pp-icon { width: 18px; height: 18px; }
.login-shell .alert-error { border-radius: 9px !important; }

@media (max-width: 960px) {
    .login-shell .right-panel { background: #fff !important; }
}