/* ============================================================
   GBA Citizens Observer App — Stylesheet
   css/app.css | FAFEN / FAFEN
   Design system: Deep blue #1B3F72, Tabler icons, pill nav
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
    --blue-900:     #042E55;
    --blue-800:     #084C82;
    --blue-700:     #0A5C9A;
    --blue-600:     #1470B0;
    --blue-400:     #4A8EC4;
    --blue-200:     #A0C4E8;
    --blue-100:     #CCE0F5;
    --blue-50:      #E6F2FB;

    --green:        #1A7A4A;
    --green-light:  #E3F5EC;

    --amber:        #F5A623;
    --amber-light:  #FEF4DC;
    --amber-dark:   #7A4F00;

    --red:          #CC2229;
    --red-light:    #FDECEA;

    --text-main:    #1A1A1A;
    --text-muted:   #6B7280;
    --text-hint:    #9CA3AF;

    --surface:      #F5F7FA;
    --border:       #E5E7EB;
    --white:        #FFFFFF;

    --radius-sm:    6px;
    --radius:       8px;
    --radius-lg:    12px;
    --radius-xl:    16px;

    --topbar-h:     56px;
    --syncbar-h:    44px;
    --bottomnav-h:  64px;

    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    color: var(--text-main);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

/* ---- App wrapper ------------------------------------------ */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--white);
    position: relative;
    overflow: hidden;
}

/* ---- Top bar ---------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-h);
    padding: 0 16px;
    background: var(--white);
    border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-logo img {
    border-radius: var(--radius-sm);
}

.topbar-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sync badge in top bar */
.sync-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--amber-light);
    color: var(--amber-dark);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.sync-badge .ti { font-size: 14px; }

/* ---- Sync bar (full width, below topbar) ------------------- */
.sync-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: var(--syncbar-h);
    background: var(--amber-light);
    border-bottom: 0.5px solid #F0C060;
    flex-shrink: 0;
}

.sync-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--amber-dark);
    font-size: 13px;
    font-weight: 500;
}

.sync-bar-left .ti { font-size: 16px; }

.btn-sync-now {
    padding: 6px 14px;
    background: var(--amber);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* ---- Screens ---------------------------------------------- */
.screen {
    display: none;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Padding bottom = nav height so content isn't hidden behind nav */
    padding-bottom: calc(var(--bottomnav-h) + 8px);
}

.screen.active { display: block; }

/* Auth screens: no bottom nav, centered layout */
#screen-login,
#screen-otp {
    display: none;
    flex: 1;
    overflow: hidden;
}

#screen-login.active,
#screen-otp.active { display: flex; flex-direction: column; }

.screen-content {
    padding: 16px;
}

.screen-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* ---- Auth screens ----------------------------------------- */
.auth-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px 24px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 20px;
}

.auth-logo img {
    border-radius: 0;
    margin-bottom: 10px;
}

.auth-app-name {
    font-size: 22px;
    font-weight: 500;
    color: var(--blue-800);
    margin-bottom: 4px;
}

.auth-tagline {
    font-size: 13px;
    color: var(--text-muted);
}

.auth-register-link {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 16px;
}

.auth-register-link a {
    color: var(--blue-700);
    text-decoration: none;
    font-weight: 500;
}

/* ---- Cards ------------------------------------------------- */
.card {
    background: var(--white);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}

/* ---- Observer card (dashboard) ---------------------------- */
.observer-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-800);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.observer-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main);
}

.observer-ps {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Stats row -------------------------------------------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.stat {
    text-align: center;
    padding: 8px;
    background: var(--surface);
    border-radius: var(--radius);
}

.stat-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--blue-800);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Section headers -------------------------------------- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px;
}

.section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Entry type grid (Observe screen) --------------------- */
.entry-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.entry-type-section-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 8px;
}

.entry-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--white);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.entry-type-btn:active {
    background: var(--blue-50);
    border-color: var(--blue-200);
}

.entry-type-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.entry-type-icon.blue {
    background: var(--blue-50);
    color: var(--blue-800);
}

.entry-type-icon.green {
    background: var(--green-light);
    color: var(--green);
}

.entry-type-icon.red {
    background: var(--red-light);
    color: var(--red);
}

.entry-type-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.3;
}

/* ---- Entries list ----------------------------------------- */
.entries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entry-card {
    background: var(--white);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.entry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--blue-50);
    border-bottom: 0.5px solid var(--blue-100);
}

.entry-card-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue-800);
}

.entry-card-time {
    font-size: 11px;
    color: var(--blue-400);
}

.entry-card-body {
    padding: 10px 14px;
}

.entry-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.entry-card-summary {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
}

.entry-card-footer {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ---- Empty state ------------------------------------------ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-hint);
}

.empty-state .ti {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 14px;
}

/* ---- Badges ----------------------------------------------- */
.badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-blue   { background: var(--blue-50);    color: var(--blue-800); }
.badge-green  { background: var(--green-light); color: var(--green); }
.badge-amber  { background: var(--amber-light); color: var(--amber-dark); }
.badge-red    { background: var(--red-light);   color: var(--red); }
.badge-grey   { background: var(--surface);     color: var(--text-muted);
                border: 0.5px solid var(--border); }

/* ---- Form fields ------------------------------------------ */
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 6px;
}

.field-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-main);
    outline: none;
    transition: border-color 0.15s;
}

.input:focus { border-color: var(--blue-400); }

.input-otp {
    font-size: 24px;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Phone input with +92 prefix */
.phone-input-row {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.phone-prefix {
    padding: 12px 12px;
    background: var(--surface);
    font-size: 15px;
    color: var(--text-muted);
    border-right: 0.5px solid var(--border);
    flex-shrink: 0;
}

.phone-input-row .input {
    border: none;
    border-radius: 0;
}

/* Yes / No buttons */
.yn-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.yn-btn {
    padding: 12px;
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    transition: all 0.15s;
}

.yn-btn.selected-yes {
    background: var(--blue-800);
    color: var(--white);
    border-color: var(--blue-800);
}

.yn-btn.selected-no {
    background: var(--red-light);
    color: var(--red);
    border-color: var(--red);
}

/* Counter field */
.counter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.counter-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 0.5px solid var(--border);
    background: var(--surface);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    flex-shrink: 0;
}

.counter-btn.counter-add {
    background: var(--blue-800);
    border-color: var(--blue-800);
    color: var(--white);
}

.counter-value {
    flex: 1;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-main);
}

/* Select / dropdown */
.select-filter {
    padding: 8px 12px;
    font-size: 13px;
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-main);
    outline: none;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-row .select-filter { width: 100%; }

/* ---- Buttons ---------------------------------------------- */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--blue-800);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:active { background: var(--blue-900); }

.btn-primary.btn-large {
    padding: 16px;
    font-size: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    cursor: pointer;
}

.btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--red-light);
    color: var(--red);
    border: 0.5px solid var(--red);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
}

/* ---- Form actions bar ------------------------------------- */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--white);
    border-top: 0.5px solid var(--border);
    position: sticky;
    bottom: var(--bottomnav-h);
}

/* ---- Profile rows ----------------------------------------- */
.profile-card { margin-bottom: 12px; }

.profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
}

.profile-row .ti {
    font-size: 18px;
    color: var(--blue-600);
    width: 24px;
    flex-shrink: 0;
}

.profile-row-label {
    color: var(--text-muted);
    flex: 1;
}

.profile-row-value {
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
}

/* ---- Divider ---------------------------------------------- */
.divider {
    border: none;
    border-top: 0.5px solid var(--border);
    margin: 4px 0;
}

/* ---- Bottom navigation ------------------------------------ */
.bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: var(--bottomnav-h);
    background: var(--white);
    border-top: 0.5px solid var(--border);
    flex-shrink: 0;
    padding: 6px 4px;
    gap: 2px;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-muted);
}

.nav-btn .ti { font-size: 22px; }

.nav-btn span {
    font-size: 10px;
    font-weight: 400;
}

/* Active state — pill highlight (Option A) */
.nav-btn.active {
    background: var(--blue-50);
    color: var(--blue-800);
}

.nav-btn.active span { font-weight: 500; }

/* ---- Utility ---------------------------------------------- */
.hidden { display: none !important; }

/* ---- FAFEN branding on login screen ----------------------- */
.auth-shell {
    background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 60%);
}

.auth-logo img {
    box-shadow: none;
}

.auth-app-name {
    color: var(--blue-800);
}

.fafen-tagline-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.fafen-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}