/* Client-only app shell, shared by browser and future WebView clients. */
.client-app {
    --client-primary: #0c766b;
    --client-muted: #657574;
    background: #f3f6f5;
    color: #172f2c;
    -webkit-tap-highlight-color: transparent;
}
.client-app::before { display: none; }
.client-app .app-shell { min-height: 100vh; min-height: 100dvh; display: block; }
.client-app .sidebar { display: none !important; }
.client-app .main-panel { max-width: 1040px; margin-inline: auto; }
.client-app .topbar {
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    min-height: 78px; background: #fff; box-shadow: none; border-bottom: 1px solid #e2eae7; gap: 12px; z-index: 20;
}
.client-app .topbar::after { display: none; }
.client-app .topbar > div { min-width: 0; overflow-wrap: anywhere; }
.client-app .topbar .small { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.client-app .page-title { background: none; color: #172f2c; -webkit-text-fill-color: currentColor; font-size: 22px; line-height: 1.3; }
.client-menu-button, .client-header-help { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 14px; background: #eef5f2; color: #0c766b; font-size: 21px; text-decoration: none; }
.client-header-help { margin-left: auto; }
.client-app .content-wrap { padding: 20px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
.client-app .data-panel, .client-app .stat-card { background: #fff; border: 1px solid #e2eae7; border-radius: 18px; box-shadow: none; padding: 20px; }
.client-app .data-panel::before, .client-app .stat-card::before, .client-app .stat-card::after { display: none; }
.client-app .stat-card:hover { transform: none; box-shadow: none; }
.client-app .stat-card { height: 100%; }
.client-app .stat-card > i { display: inline-grid; place-items: center; width: 38px; height: 38px; color: #0c766b; background: #e7f4ee; border-radius: 12px; font-size: 20px; box-shadow: none; }
.client-app .stat-card h3 { color: #172f2c; font-size: clamp(22px, 4vw, 28px); overflow-wrap: anywhere; }
.client-app .stat-card p { font-size: 13px; }
.client-app .text-muted { color: var(--client-muted) !important; }
.client-app .btn { min-height: 46px; border-radius: 12px; padding: 11px 16px; font-weight: 600; white-space: normal; }
.client-app .btn-primary { background: #0c766b; border-color: #0c766b; box-shadow: none; }
.client-app .btn-primary:hover { background: #095b53; border-color: #095b53; }
.client-app .btn-outline-primary { color: #0c766b; border-color: #0c766b; }
.client-app .btn-outline-primary:hover { color: #fff; background: #0c766b; }
.client-app .form-control, .client-app .form-select { min-height: 48px; border-radius: 12px; border-color: #cfddd6; font-size: 16px; background-color: #fff; }
.client-app .form-control:focus, .client-app .form-select:focus { border-color: #0c766b; box-shadow: 0 0 0 3px #0c766b20; }
.client-app .form-control[readonly] { background: #f3f6f5; }
.client-app .form-label { font-size: 14px; font-weight: 600; }
.client-app .form-text { line-height: 1.6; }
.client-app :focus-visible { outline: 3px solid #087dba; outline-offset: 3px; }
.client-welcome { background: #0c766b; color: white; border-radius: 22px; padding: 26px 24px; margin-bottom: 26px; }
.client-eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #c7e9dd; margin-bottom: 12px; }
.client-welcome h2 { font-size: clamp(24px, 5vw, 32px); font-weight: 750; overflow-wrap: anywhere; }
.client-welcome p { font-size: 14px; line-height: 1.6; color: #dbefe8; max-width: 380px; margin: 12px 0 20px; }
.client-welcome .btn { color: #0c766b; background: #fff; border: 0; }
.client-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.client-section-heading h2 { font-size: 17px; font-weight: 700; margin: 0; }
.client-section-heading span { font-size: 12px; color: #657574; }
.client-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 24px; }
.client-quick-actions a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #172f2c; background: #fff; border: 1px solid #e2eae7; border-radius: 16px; padding: 16px; font-size: 14px; font-weight: 600; }
.client-quick-actions a > i:first-child { color: #0c766b; font-size: 22px; }
.client-quick-actions a > i:last-child { margin-left: auto; font-size: 12px; color: #657574; }
.client-account-note { text-align: center; padding: 14px; color: #657574; font-size: 12px; overflow-wrap: anywhere; }
.client-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px max(8px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); background: #fff; border-top: 1px solid #dde7e1; box-shadow: 0 -4px 24px #172f2c06; z-index: 1000; }
.client-tab { border: 0; background: transparent; text-decoration: none; color: #657574; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 4px 0; font-size: 11px; font-weight: 600; }
.client-tab i { display: grid; place-items: center; width: 48px; height: 28px; font-size: 21px; border-radius: 12px; }
.client-tab.active { color: #0c766b; }
.client-tab.active i { background: #e1f2e9; }
.client-tab:hover { color: #0c766b; }
.client-app .offcanvas { width: min(88vw, 360px); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.client-app .offcanvas .side-link { min-height: 48px; }
.client-app .offcanvas .side-link.active { color: #0c766b; background: #e7f4ee; box-shadow: none; }
.client-app .table-search-wrap { margin-bottom: 16px; }
.client-app .table-search-box { max-width: none; }
.client-app .table-search-box .input-group-text { background: #f3f6f5; border-color: #cfddd6; border-radius: 12px 0 0 12px; }
.client-app .client-support-guide { border-radius: 16px; overflow: hidden; }
.client-app.login-screen { padding: max(28px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.client-app .login-card { background: #fff; border: 1px solid #e2eae7; border-radius: 24px; padding: 28px; box-shadow: 0 16px 50px #172f2c0a; }
.client-app .brand span { background: #0c766b; color: #fff; box-shadow: none; border-radius: 13px; }
.client-login-title { font-size: 28px; font-weight: 750; }
.client-problem-page { max-width: 720px; margin-inline: auto; }
.client-queue-notice { background: #e8f3ee; border: 1px solid #c9e3d6; border-radius: 18px; padding: 20px; }
.client-queue-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.client-queue-count { display: grid; place-items: center; min-width: 60px; min-height: 60px; padding: 8px; border-radius: 16px; background: #0c766b; color: #fff; font-size: 26px; font-weight: 750; }
.client-queue-heading h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.client-queue-heading p { margin: 0; font-size: 12px; color: #51685f; }
.client-queue-notice > p { font-size: 13px; line-height: 1.7; color: #34564b; }
.client-queue-position { color: #0c766b; font-size: 18px; }
.client-support-details summary { cursor: pointer; font-size: 14px; font-weight: 650; min-height: 44px; align-content: center; }
.client-support-details li { margin-bottom: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.client-support-policy { font-size: 14px; line-height: 1.85; }
.client-support-policy h3 { font-weight: 750; margin-bottom: 8px; }
.client-paid-service-notice { background: #fff3df; border: 2px solid #d78c26; border-radius: 16px; padding: 20px; margin-bottom: 20px; color: #714510; }
.client-paid-service-notice h2 { font-size: clamp(20px, 4.5vw, 25px); font-weight: 800; line-height: 1.6; margin: 0 0 12px; }
.client-paid-service-notice p { font-size: 16px; line-height: 1.9; }
.client-app .login-card h5 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
@media screen and (max-width: 767px) {
    .client-app .content-wrap { padding-top: 16px; }
    .client-app .data-panel, .client-app .stat-card { padding: 16px; }
    .client-quick-actions { grid-template-columns: 1fr; }
    .client-app .client-record-list { display: block; margin-bottom: 0; }
    .client-record-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .client-record-list tbody { display: grid; gap: 12px; }
    .client-app .client-record-list tbody tr { display: block; border: 1px solid #dfe8e2; border-radius: 14px; padding: 6px 14px; background: #fff; box-shadow: none; }
    .client-app .client-record-list tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border: 0; border-bottom: 1px solid #eff3f0; background: transparent; box-shadow: none; text-align: right !important; font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
    .client-app .client-record-list tbody td:last-child { border-bottom: 0; }
    .client-record-list td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: #657574; text-align: left; flex: 0 0 36%; }
    .client-record-value { min-width: 0; flex: 1; overflow-wrap: anywhere; }
    .client-app .client-record-list .ticket-complaint-cell { max-width: none; min-width: 0; }
    .client-app .client-record-list .ticket-progress { min-width: 0; }
    .client-app .client-record-list .client-record-value form { text-align: left; }
    .client-app .client-record-list td[colspan] { display: block; text-align: center !important; }
    .client-app .client-record-list .badge { white-space: normal; text-align: right; }
    .client-app .client-record-list .btn { font-size: 13px; }
}
@media print {
    .client-bottom-nav, .client-app .topbar, .client-quick-actions { display: none !important; }
    .client-app .content-wrap { padding: 0; }
    .client-app .main-panel { max-width: none; }
}