/* ============================================================
   Perjadin — sistem tampilan (mobile first)
   ============================================================ */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e7e9ee;
    --text: #101828;
    --muted: #667085;
    --muted-2: #98a2b3;
    --accent: #2563eb;
    --accent-ink: #1749b8;
    --accent-soft: #eef3ff;

    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .07);
    --bar-h: 76px;
}

* { -webkit-tap-highlight-color: transparent; }

/*
 * Bootstrap 5.3 tidak menyediakan utilitas .min-w-0, padahal tanpa min-width:0
 * anak flex menolak menyusut sehingga text-truncate tidak pernah bekerja dan
 * teks panjang mendorong elemen di sebelahnya keluar layar.
 */
.min-w-0 { min-width: 0 !important; }

body {
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

/* ---------- Navbar ---------- */
.app-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .5rem .25rem;
    padding-top: calc(.5rem + env(safe-area-inset-top));
}

.app-navbar .nav-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -.01em;
}

.app-navbar .nav-back {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: .1rem;
    border-radius: 50%;
}

.app-navbar .nav-back:active { background: var(--surface-2); }

.app-main {
    max-width: 720px;
    margin-inline: auto;
    padding: 1rem .9rem calc(var(--bar-h) + env(safe-area-inset-bottom) + 1rem);
}

/* ---------- Kartu ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}

.card-body { padding: 1rem; }

/* ---------- Tipografi ---------- */
.section-title {
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--text);
}

.label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 500;
}

.label-caps {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-2);
    font-weight: 600;
}

.money {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: -.01em;
}

.meta {
    font-size: .8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.meta .dot { color: var(--muted-2); }

/* ---------- Pil status / kategori ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.3;
    padding: .25rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pill-primary     { background: #eef3ff; color: #1749b8; }
.pill-info        { background: #e6f5fb; color: #0b6a85; }
.pill-warning     { background: #fff5e3; color: #a15c07; }
.pill-success     { background: #e7f6ec; color: #10683a; }
.pill-secondary   { background: #f1f3f6; color: #475467; }
.pill-personal    { background: #fff2e8; color: #b54708; }
.pill-cooperative { background: #eef2ff; color: #3538cd; }
.pill-departure   { background: #e8f6ef; color: #08694a; }
.pill-return      { background: #f6edff; color: #6b28d9; }

.count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .7rem;
    font-weight: 650;
    color: var(--muted);
}

/* ---------- Tombol ---------- */
.btn {
    border-radius: var(--radius-xs);
    font-weight: 550;
}

.btn-lg-touch { min-height: 48px; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus { background: var(--accent-ink); border-color: var(--accent-ink); }

.form-control,
.form-select {
    min-height: 46px;
    font-size: 1rem;            /* cegah auto-zoom iOS */
    border-radius: var(--radius-xs);
    border-color: var(--border);
}

.form-control:focus,
.form-select:focus {
    border-color: #b6cbff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.form-control-sm, .form-select-sm { min-height: 40px; font-size: .9rem; }

/* tombol ikon bulat */
.icon-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    padding: 0;
    flex: 0 0 auto;
}

.icon-btn:active { background: var(--surface-2); }
.icon-btn-danger { color: #d92d20; }
.icon-btn-accent { color: var(--accent); border-color: #cfdcff; background: var(--accent-soft); }

.add-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: #fff;
    padding: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}

/* ---------- Dashboard ---------- */
.hero-card {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e3a8a 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    padding: 1.15rem 1.1rem;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .25);
}

.hero-card .hero-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .78;
    font-weight: 600;
}

.hero-card .hero-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.hero-card .hero-sub {
    font-size: .78rem;
    opacity: .8;
    margin-top: .15rem;
}

.hero-card .hero-side {
    border-left: 1px solid rgba(255, 255, 255, .25);
    padding-left: .9rem;
}

.hero-card .hero-foot {
    display: flex;
    gap: 1.25rem;
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.hero-card .hero-foot-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.hero-card .hero-foot-value {
    font-size: .95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.tile {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem .8rem;
    height: 100%;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.tile:active { background: var(--surface-2); }

.tile .tile-top {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}

.tile .tile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tile .tile-label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 550;
    line-height: 1.2;
}

.tile .tile-value {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1;
}

.dot-primary   { background: #2563eb; }
.dot-info      { background: #0e9dc4; }
.dot-warning   { background: #f0a020; }
.dot-success   { background: #16a34a; }
.dot-secondary { background: #98a2b3; }

/* ---------- Kartu perjalanan ---------- */
.trip-card { margin-bottom: .6rem; }
.trip-card .card-body { padding: .85rem .95rem; }

.trip-card .trip-name {
    font-weight: 650;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.01em;
    display: block;
}

.trip-card:active { background: var(--surface-2); }

/* ---------- Daftar item (transport/penginapan/pengeluaran) ---------- */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 .15rem .55rem;
}

.section-head .head-left {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.section-head .head-sum {
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.item-card {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: .8rem .85rem;
    box-shadow: var(--shadow-sm);
}

.item-card + .item-card { margin-top: .5rem; }

.item-card .item-title {
    font-weight: 620;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.item-card .item-note {
    font-size: .8rem;
    color: var(--muted);
    margin-top: .3rem;
}

.item-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .65rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
}

.item-actions .btn-quiet {
    flex: 1 1 auto;
    min-height: 36px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 550;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.item-actions .btn-quiet:active { background: var(--surface-2); }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    color: var(--muted-2);
    padding: 1.5rem 1rem;
    font-size: .875rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.empty-state i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .35rem;
    opacity: .55;
}

/* ---------- Lampiran ---------- */
.att-block { margin-top: .6rem; }

.att-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    background: none;
    padding: .15rem 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 550;
}

.att-toggle .att-caret {
    font-size: .65rem;
    transition: transform .18s ease;
}

.att-toggle:not(.collapsed) { color: var(--accent); }
.att-toggle:not(.collapsed) .att-caret { transform: rotate(180deg); }

.att-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .55rem;
}

.att-tile {
    position: relative;
    width: 56px;
    height: 56px;
}

.att-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    text-decoration: none;
}

.att-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.att-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: var(--muted);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.att-doc i {
    font-size: 1.15rem;
    color: #8b95a5;
}

.att-tile:has(.att-doc) .att-link { background: var(--surface); }

/* Tombol hapus diletakkan di dalam tile supaya barisnya tetap rata. */
.att-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .68rem;
}

/* Area sentuh diperluas tanpa memperbesar tampilannya. */
.att-del::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.att-del:active { background: #d92d20; }

/* ---------- Pratinjau lampiran ---------- */
.att-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 240px;
    background: var(--surface-2);
}

.att-viewer.is-image { background: #0f1115; }

.att-viewer-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.att-viewer-docwrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.att-viewer-frame {
    width: 100%;
    height: 70vh;
    border: 0;
    background: #fff;
    flex: 1 1 auto;
}

.att-viewer-hint {
    padding: .55rem .85rem;
    font-size: .78rem;
    color: var(--muted);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    text-align: center;
}

#attachmentModal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
}

#attachmentModal .modal-footer > * { margin: 0; }

#attachmentModal .att-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

#attachmentModal .modal-body { padding: 0; }
#attachmentModal .modal-title { font-size: .92rem; }

/* Area sentuh penuh; margin kiri "auto" dipertahankan supaya tetap di kanan. */
#attachmentModal .btn-close {
    padding: .85rem;
    margin: -.6rem -.35rem -.6rem auto;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .att-viewer { min-height: 40vh; align-items: stretch; }
    .att-viewer-img { max-height: 60vh; }
    .att-viewer-frame { height: auto; min-height: 55vh; }
}

/* ---------- Rekap ---------- */
.recap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .4rem 0;
    font-size: .9rem;
}

.recap-row .recap-label { color: var(--muted); }

.recap-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .6rem 0 .2rem;
}

.recap-total .t-label { font-weight: 650; }
.recap-total .t-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

.recap-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: .6rem 0;
}

.callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    margin-top: .75rem;
}

.callout .c-title { font-weight: 650; font-size: .85rem; line-height: 1.25; }
.callout .c-sub { font-size: .75rem; opacity: .8; }
.callout .c-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.callout-warning { background: #fff8e8; color: #8a5300; }
.callout-danger  { background: #fdecea; color: #a32319; }
.callout-success { background: #e9f7ee; color: #106b3c; }
.callout-muted   { background: var(--surface-2); color: var(--muted); }

.table-recap { font-size: .875rem; }
.table-recap > :not(caption) > * > * { padding: .6rem .75rem; }

/* ---------- Bar total melayang ---------- */
.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-bar .bar-inner {
    max-width: 720px;
    margin-inline: auto;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.bottom-bar .bar-value.tone-danger { color: #b42318; }
.bottom-bar .bar-value.tone-success { color: #12683a; }

.bottom-bar .bar-value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ---------- Filter ---------- */
.search-input .form-control { border-left: 0; padding-left: 0; }
.search-input .input-group-text {
    background: var(--surface);
    border-right: 0;
    color: var(--muted-2);
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-xs);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 550;
    min-height: 46px;
    padding: 0 .75rem;
}

.filter-toggle[aria-expanded="true"],
.filter-toggle.has-filter {
    border-color: #cfdcff;
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* ---------- Modal ---------- */
.modal-content { border: 0; border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header { padding: .9rem 1rem; }
.modal-body { padding: 1rem; }
.modal-footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
.modal-title { font-size: 1rem; font-weight: 650; }
.modal-body .form-label { font-weight: 550; font-size: .84rem; margin-bottom: .3rem; color: var(--muted); }

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
}

/* ---------- Kotak masuk lampiran ---------- */
.inbox-grid {
    display: grid;
    gap: .4rem;
    max-height: 240px;
    overflow-y: auto;
    padding-right: .15rem;
}

.inbox-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .45rem .6rem;
    cursor: pointer;
    background: var(--surface);
}

.inbox-item:has(input:checked) {
    border-color: #b6cbff;
    background: var(--accent-soft);
}

.inbox-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-2);
}

.inbox-thumb img { width: 100%; height: 100%; object-fit: cover; }

.inbox-meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
.inbox-name { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-sub { font-size: .72rem; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-border-radius: var(--radius-xs); }
.page-link { color: var(--accent); border-color: var(--border); }
.active > .page-link { background: var(--accent); border-color: var(--accent); }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
    body { font-size: 1rem; }
    .app-main { padding-top: 1.5rem; }
    .card-body { padding: 1.15rem; }
}