/* ==========================================================================
   An Bảo Khang — native-style mobile app (mobile-only)
   Full-screen shell: fixed top bar + inner-scrolling content + bottom tab bar.
   ========================================================================== */
:root {
    --abk-primary: #12507b;
    --abk-primary-dark: #0d3c5c;
    --abk-accent: #f28c1d;
    --abk-bg: #f1f4f8;
    --abk-card: #ffffff;
    --abk-text: #16202b;
    --abk-muted: #6b7a8d;
    --abk-border: #e6eaf0;
    --abk-success: #23a26d;
    --abk-danger: #e0483d;
    --abk-warn: #e8a33d;
    --abk-shadow: 0 1px 3px rgba(18, 40, 66, .07), 0 1px 2px rgba(18, 40, 66, .04);
    --abk-radius: 16px;
    --abk-maxw: 560px;
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --appbar-h: 52px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #0d3c5c;
    color: var(--abk-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

/* Chrome (nav, tabs, buttons) is non-selectable like a native app; content stays selectable. */
body { -webkit-user-select: none; user-select: none; }
.abk-main, input, textarea, select, .abk-bubble, .abk-tl-note, .abk-li-sub { -webkit-user-select: text; user-select: text; }

a { color: var(--abk-primary); text-decoration: none; -webkit-touch-callout: none; }

/* App shell — a single non-scrolling viewport, content scrolls inside ------ */
.abk-app {
    position: relative;
    max-width: var(--abk-maxw);
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--abk-bg);
    overflow: hidden;
}

/* Top bar ------------------------------------------------------------------ */
.abk-appbar {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--abk-primary), var(--abk-primary-dark));
    color: #fff;
    padding: calc(var(--sat) + 8px) 8px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(var(--appbar-h) + var(--sat));
    box-shadow: 0 2px 10px rgba(13, 60, 92, .25);
    z-index: 20;
}
.abk-iconbtn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 24px; line-height: 1;
    border-radius: 50%; flex: 0 0 auto;
}
.abk-iconbtn:active { background: rgba(255,255,255,.15); }
.abk-appbar .abk-title {
    font-size: 17px; font-weight: 700; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 4px;
}
.abk-appbar.center .abk-title { text-align: center; }
.abk-appbar .abk-title.pad { padding-left: 8px; }
.abk-appbar-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.abk-appbar-spacer { width: 40px; flex: 0 0 auto; }

/* Scrollable content area -------------------------------------------------- */
.abk-main {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 14px calc(18px + var(--sab));
}
.abk-main.full { padding: 0; overflow: hidden; }

/* Bottom tab bar ----------------------------------------------------------- */
.abk-tabbar {
    flex: 0 0 auto;
    display: flex;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--abk-border);
    padding-bottom: var(--sab);
    z-index: 20;
}
.abk-tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 0 6px;
    color: var(--abk-muted);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .01em;
}
.abk-tab svg { width: 25px; height: 25px; display: block; }
.abk-tab.active { color: var(--abk-primary); }
.abk-tab:active { opacity: .55; }

/* Cards -------------------------------------------------------------------- */
.abk-card {
    background: var(--abk-card);
    border-radius: var(--abk-radius);
    box-shadow: var(--abk-shadow);
    padding: 16px;
    margin-bottom: 13px;
}
.abk-card-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.abk-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--abk-muted); margin: 6px 4px 9px; font-weight: 700; }

/* Hero card (greeting / project header) ------------------------------------ */
.abk-hero {
    background: linear-gradient(135deg, #1a6199, var(--abk-primary-dark));
    color: #fff;
    border-radius: var(--abk-radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(13, 60, 92, .22);
}

/* Progress bars ------------------------------------------------------------ */
.abk-progress-group { display: flex; flex-direction: column; gap: 14px; }
.abk-progress .abk-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.abk-progress .abk-progress-label { font-size: 13px; font-weight: 600; }
.abk-progress .abk-progress-value { font-size: 14px; font-weight: 800; }
.abk-progress-track { height: 12px; background: #e9edf2; border-radius: 8px; overflow: hidden; }
.abk-progress-fill { height: 100%; border-radius: 8px; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.abk-progress-fill.build { background: linear-gradient(90deg, #2aa9e0, var(--abk-primary)); }
.abk-progress-fill.cost { background: linear-gradient(90deg, #f7b34d, var(--abk-accent)); }
.abk-progress-sub { font-size: 11.5px; color: var(--abk-muted); margin-top: 5px; }

/* Icon grid (features) ----------------------------------------------------- */
.abk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abk-tile {
    background: var(--abk-card);
    border-radius: var(--abk-radius);
    box-shadow: var(--abk-shadow);
    padding: 14px 6px 12px;
    text-align: center;
    color: var(--abk-text);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-height: 104px; justify-content: center;
    transition: transform .12s ease;
}
.abk-tile:active { transform: scale(.94); }
/* Icon glyph is always centered within its coloured box, in grids and lists alike. */
.abk-tile-ic {
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; color: #fff;
}
.abk-tile .abk-tile-ic {
    width: 50px; height: 50px; border-radius: 15px;
    font-size: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.abk-tile .abk-tile-label { font-size: 12px; font-weight: 600; line-height: 1.2; }

/* Public project showcase cards ------------------------------------------- */
.abk-pp-card { background: var(--abk-card); border-radius: 14px; box-shadow: var(--abk-shadow); overflow: hidden; }
.abk-pp-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; background: #000; }
.abk-pp-photos::-webkit-scrollbar { display: none; }
.abk-pp-photos a { flex: 0 0 100%; scroll-snap-align: center; }
.abk-pp-photos img { width: 100%; height: 190px; object-fit: cover; display: block; }
.abk-pp-noimg { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: linear-gradient(135deg, #e9eef4, #dbe4ee); color: #9fb0c2; }
.abk-pp-noimg .abk-pp-logo { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 4px 12px rgba(13,60,92,.18); }
.abk-pp-link { display: block; text-decoration: none; color: inherit; }
/* Dashboard sections that render every label in upper case. */
.abk-upper .abk-tile-label,
.abk-upper .abk-li-title,
.abk-upper .abk-li-sub { text-transform: uppercase; }
.abk-pp-body { padding: 12px 14px; }

/* Lists -------------------------------------------------------------------- */
.abk-list { display: flex; flex-direction: column; gap: 10px; }
.abk-list-item {
    background: var(--abk-card);
    border-radius: 14px;
    box-shadow: var(--abk-shadow);
    padding: 14px;
    display: flex; align-items: center; gap: 12px;
    color: var(--abk-text);
    transition: transform .1s ease, background .1s ease;
}
.abk-list-item:active { transform: scale(.985); background: #fbfcfe; }
.abk-list-item .abk-li-main { flex: 1; min-width: 0; }
.abk-list-item .abk-li-title { font-weight: 600; font-size: 14.5px; }
.abk-list-item .abk-li-sub { font-size: 12px; color: var(--abk-muted); margin-top: 2px; }
.abk-list-item .abk-chev { color: #c4cdd8; font-size: 20px; flex: 0 0 auto; }

/* Chips / badges ----------------------------------------------------------- */
.abk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #eef2f6; color: var(--abk-muted); }
.abk-chip.stage { color: #fff; }
.abk-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.abk-badge.ok { background: #e2f5ec; color: var(--abk-success); }
.abk-badge.pending { background: #fdf3e0; color: var(--abk-warn); }
.abk-badge.danger { background: #fde8e6; color: var(--abk-danger); }
.abk-badge.info { background: #e6f2fb; color: var(--abk-primary); }

/* Timeline ----------------------------------------------------------------- */
.abk-timeline { position: relative; margin: 4px 0 0; padding-left: 26px; }
.abk-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--abk-border); }
.abk-tl-item { position: relative; padding-bottom: 18px; }
.abk-tl-item:last-child { padding-bottom: 0; }
.abk-tl-dot { position: absolute; left: -26px; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--abk-border); background: var(--abk-primary); }
.abk-tl-title { font-weight: 700; font-size: 14px; }
.abk-tl-meta { font-size: 12px; color: var(--abk-muted); margin: 2px 0 4px; }
.abk-tl-note { font-size: 13px; }
.abk-tl-pct { font-size: 12px; font-weight: 700; color: var(--abk-primary); }
.abk-tl-acts { margin-top: 8px; background: #f6f8fb; border-radius: 10px; padding: 8px 10px; }
.abk-tl-acts > summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--abk-muted); }
.abk-tl-acts > summary::-webkit-details-marker { display: none; }
.abk-chk { list-style: none; margin: 6px 0 0; padding-left: 0; }
.abk-chk .abk-chk { margin: 4px 0 4px 16px; padding-left: 8px; border-left: 2px solid var(--abk-border); }
.abk-chk-item { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; font-size: 13px; flex-wrap: wrap; }
.abk-chk-mark { flex: 0 0 auto; font-size: 13px; line-height: 1.3; }
.abk-chk-name { flex: 1; min-width: 0; }
.abk-chk-name.done { color: var(--abk-muted); }

/* Chat --------------------------------------------------------------------- */
.abk-chat-wrap { display: flex; flex-direction: column; height: 100%; }
.abk-chat-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 10px; background: #eef1f5; }
.abk-msg { max-width: 80%; display: flex; flex-direction: column; }
.abk-msg .abk-msg-sender { font-size: 11px; color: var(--abk-muted); margin: 0 6px 2px; }
.abk-msg .abk-bubble { padding: 9px 13px; border-radius: 18px; font-size: 14px; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.abk-msg .abk-bubble img { max-width: 100%; border-radius: 12px; display: block; margin-top: 4px; }
.abk-msg .abk-bubble video { max-width: 100%; width: 220px; border-radius: 12px; display: block; margin-top: 4px; background: #000; }
.abk-msg .abk-msg-time { font-size: 10px; color: var(--abk-muted); margin: 2px 8px 0; }
.abk-msg.them { align-self: flex-start; }
.abk-msg.them .abk-bubble { background: #fff; border-bottom-left-radius: 5px; }
.abk-msg.me { align-self: flex-end; align-items: flex-end; }
.abk-msg.me .abk-bubble { background: var(--abk-primary); color: #fff; border-bottom-right-radius: 5px; }
.abk-chat-input { display: flex; gap: 8px; padding: 8px 10px calc(8px + var(--sab)); background: #fff; border-top: 1px solid var(--abk-border); align-items: center; }
.abk-chat-input textarea { flex: 1; resize: none; border: 1px solid var(--abk-border); border-radius: 20px; padding: 9px 14px; font-size: 15px; font-family: inherit; max-height: 90px; background: #f4f6f9; }
.abk-chat-input .abk-attach { color: var(--abk-primary); font-size: 24px; cursor: pointer; padding: 4px; }
.abk-chat-empty { text-align: center; color: var(--abk-muted); font-size: 13px; padding: 30px 16px; }

/* Forms / buttons ---------------------------------------------------------- */
.abk-field { margin-bottom: 12px; }
.abk-field label { display: block; font-size: 12px; font-weight: 600; color: var(--abk-muted); margin-bottom: 5px; }
.abk-field input, .abk-field select, .abk-field textarea { width: 100%; border: 1px solid var(--abk-border); border-radius: 12px; padding: 12px; font-size: 16px; font-family: inherit; background: #fff; }
.abk-field input:focus, .abk-field select:focus, .abk-field textarea:focus { outline: none; border-color: var(--abk-primary); box-shadow: 0 0 0 3px rgba(18,80,123,.12); }
.abk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border: none; border-radius: 14px; padding: 14px 16px;
    font-size: 15.5px; font-weight: 700; cursor: pointer;
    background: var(--abk-primary); color: #fff;
    transition: transform .1s ease, filter .1s ease;
}
.abk-btn:active { transform: scale(.98); filter: brightness(.94); }
.abk-btn.accent { background: var(--abk-accent); }
.abk-btn.outline { background: #fff; color: var(--abk-primary); border: 1.5px solid var(--abk-primary); }
.abk-btn.sm { width: auto; padding: 9px 16px; font-size: 13px; border-radius: 11px; }
.abk-btn.ghost { background: transparent; color: var(--abk-primary); }
.abk-btn.danger { background: #fdecea; color: var(--abk-danger); }

/* Misc --------------------------------------------------------------------- */
.abk-empty { text-align: center; color: var(--abk-muted); padding: 46px 20px; }
.abk-empty .abk-empty-ic { font-size: 44px; opacity: .35; }
.abk-money { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--abk-muted); }
.abk-hr { height: 1px; background: var(--abk-border); border: 0; margin: 12px 0; }
.abk-flex { display: flex; align-items: center; gap: 10px; }
.abk-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* details/summary as native-ish disclosure */
details.abk-card > summary { list-style: none; }
details.abk-card > summary::-webkit-details-marker { display: none; }

/* Work-report evidence timeline ------------------------------------------- */
.abk-stage { background: var(--abk-card); border-radius: 14px; box-shadow: var(--abk-shadow); margin-bottom: 10px; overflow: hidden; }
.abk-stage.current { box-shadow: 0 0 0 2px rgba(18,80,123,.18), var(--abk-shadow); }
.abk-stage > summary { list-style: none; cursor: pointer; padding: 14px; display: flex; align-items: center; gap: 9px; }
.abk-stage > summary::-webkit-details-marker { display: none; }
.abk-stage-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.abk-stage-name { font-weight: 700; font-size: 15px; }
.abk-stage-caret { color: var(--abk-muted); transition: transform .2s; font-size: 12px; }
.abk-stage[open] > summary .abk-stage-caret { transform: rotate(180deg); }
.abk-stage-body { padding: 0 12px 12px; }

.abk-act { border-top: 1px solid var(--abk-border); }
.abk-act:first-child { border-top: 0; }
.abk-act > summary { list-style: none; cursor: pointer; padding: 10px 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abk-act > summary::-webkit-details-marker { display: none; }
.abk-act.current > summary { background: #f2f8fd; border-radius: 8px; padding: 10px 8px; }
.abk-act-mark { flex: 0 0 auto; }
.abk-act-name { font-weight: 600; font-size: 14px; flex: 1; min-width: 60%; }
.abk-act-name.done { color: var(--abk-muted); }
.abk-act-body { padding: 4px 2px 10px 22px; }
.abk-media-badge { font-size: 11px; font-weight: 700; color: var(--abk-primary); background: #e6f2fb; border-radius: 20px; padding: 2px 8px; }

.abk-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.abk-media-grid:empty { margin: 0; }
.abk-ev { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #000; display: block; }
video.abk-ev { object-fit: cover; }
.abk-ev-empty { font-size: 12px; padding: 6px 0; grid-column: 1 / -1; }
.abk-ev-more { margin-top: 8px; }
.abk-upload { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--abk-primary); border: 1.5px dashed var(--abk-primary); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.abk-upload:active { opacity: .7; }