/* ── AmpleoCRM Mobile — Design System ─────────────────
   Brand-variabler fra AmpleoCRM.Web
   Alle sider og komponenter bruger disse.
───────────────────────────────────────────────────── */
:root {
    --ampleo-primary:   #2A4D69;
    --ampleo-secondary: #62829D;
    --ampleo-vivid:     #0037CE;
    --ampleo-accent:    #9E7D5F;
    --ampleo-neutral:   #D9D9D9;
    --ampleo-bg:        #F8F9FA;
    --ampleo-text:      #333;
    --ampleo-text-muted:#6B7280;
    --ampleo-border:    #E5E7EB;
    --ampleo-card:      #FFFFFF;
    --ampleo-success:   #059669;
    --ampleo-warning:   #D97706;
    --ampleo-danger:    #DC2626;
    --ampleo-radius:    8px;
    --ampleo-radius-lg: 12px;
    --safe-top:         env(safe-area-inset-top, 0px);
    --safe-bottom:      env(safe-area-inset-bottom, 0px);
}

/* ── Global Reset ────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ampleo-bg);
    font-family: 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ampleo-text);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

h1:focus { outline: none; }

/* ── Loading ─────────────────────────────────────── */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    color: var(--ampleo-secondary);
    gap: 16px;
}

.app-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ampleo-neutral);
    border-top-color: var(--ampleo-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-spinner {
    text-align: center;
    padding: 40px 16px;
    color: var(--ampleo-text-muted);
    font-size: 14px;
}

/* ── Typography ──────────────────────────────────── */
.page-title {
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    color: var(--ampleo-primary);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ampleo-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 24px 0 12px;
}

/* ── Cards ───────────────────────────────────────── */
.card {
    background: var(--ampleo-card);
    border-radius: var(--ampleo-radius-lg);
    padding: 16px;
    margin-bottom: 10px;
    border: 1px solid var(--ampleo-border);
    transition: transform 0.1s, box-shadow 0.15s;
}

.card:active {
    transform: scale(0.985);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ampleo-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 13px;
    color: var(--ampleo-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ── Badges ──────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-primary { background: rgba(42,77,105,0.12); color: var(--ampleo-primary); }
.badge-success { background: rgba(5,150,105,0.12); color: var(--ampleo-success); }
.badge-warning { background: rgba(217,119,6,0.12); color: var(--ampleo-warning); }
.badge-danger  { background: rgba(220,38,38,0.12); color: var(--ampleo-danger); }
.badge-accent  { background: rgba(158,125,95,0.15); color: var(--ampleo-accent); }

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--ampleo-radius);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-primary {
    background: var(--ampleo-primary);
    color: white;
    box-shadow: 0 1px 3px rgba(42,77,105,0.3);
}
.btn-primary:active { background: #1E3A50; }
.btn-primary:disabled { opacity: 0.55; }

.btn-outline {
    background: var(--ampleo-card);
    color: var(--ampleo-primary);
    border: 2px solid var(--ampleo-primary);
}
.btn-outline:active { background: rgba(42,77,105,0.05); }

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ── FAB ─────────────────────────────────────────── */
.fab {
    position: fixed;
    bottom: calc(24px + var(--safe-bottom));
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ampleo-primary);
    color: white;
    font-size: 26px;
    border: none;
    box-shadow: 0 4px 16px rgba(42,77,105,0.35);
    cursor: pointer;
    z-index: 50;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab:active { transform: scale(0.92); }

/* ── Detail rows ─────────────────────────────────── */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ampleo-border);
    font-size: 14px;
    gap: 12px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    font-weight: 600;
    color: var(--ampleo-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ── Empty states ────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--ampleo-text-muted);
}
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.45;
    line-height: 1;
}
.empty-state .empty-icon i { font-size: 48px; }
.empty-state p {
    margin: 0;
    font-size: 15px;
}

/* ── Quick action icons (Bootstrap Icons) ── */
.quick-icon-bi {
    font-size: 26px;
    color: var(--ampleo-primary);
    line-height: 1;
}

/* ── Form inputs ─────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ampleo-primary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ampleo-border);
    border-radius: var(--ampleo-radius);
    font-size: 15px;
    font-family: inherit;
    background: var(--ampleo-card);
    color: var(--ampleo-text);
    transition: border-color 0.15s;
}
.form-input:focus {
    border-color: var(--ampleo-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(42,77,105,0.1);
}
.form-input::placeholder { color: var(--ampleo-neutral); }

.form-card { padding: 20px; }
.form-actions { display: flex; gap: 12px; margin-top: 20px; }
.form-actions .btn { flex: 1; }

/* ── Detail-tabs (bruges på detail-sider) ────────── */
.detail-tab-bar {
    display: flex;
    background: var(--ampleo-card);
    border: 1px solid var(--ampleo-border);
    border-radius: var(--ampleo-radius);
    padding: 3px;
    margin-bottom: 14px;
}
.detail-tab {
    flex: 1;
    padding: 9px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ampleo-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.detail-tab-active {
    background: var(--ampleo-primary);
    color: white;
    box-shadow: 0 1px 4px rgba(42,77,105,0.2);
}

/* ── Tilbage-knap (bruges på detail- og formularsider) ── */
.btn-back {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--ampleo-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 16px;
    font-family: inherit;
    line-height: 1;
}
.btn-back:active { opacity: 0.65; }

.error-message {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.2);
    color: var(--ampleo-danger);
    padding: 10px 14px;
    border-radius: var(--ampleo-radius);
    margin-bottom: 16px;
    font-size: 14px;
}

/* ── Validation ──────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 2px solid var(--ampleo-success); border-radius: 4px; }
.invalid { outline: 2px solid var(--ampleo-danger); border-radius: 4px; }
.validation-message { color: var(--ampleo-danger); font-size: 13px; margin-top: 4px; }

/* ── Blazor error ────────────────────────────────── */
#blazor-error-ui {
    background: var(--ampleo-primary);
    color: white;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    display: none;
    left: 0;
    padding: 14px 20px;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: 14px;
}
#blazor-error-ui .reload { color: var(--ampleo-accent); margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 14px; }

/* ── Links ───────────────────────────────────────── */
a { color: var(--ampleo-secondary); text-decoration: none; }
a:hover { color: var(--ampleo-primary); }

/* ── Standalone-tilstand (installeret app i browser) ──────────────
   Reglerne her findes ikke i den native app, fordi en WebView ikke har
   browserens gestures. I en installeret PWA er de synlige fejl hvis de
   mangler.
───────────────────────────────────────────────────────────────── */
html, body {
    /* Pull-to-refresh genindlæser hele WASM-appen, og rubber-band-scroll
       afslører den hvide side bag layoutet. */
    overscroll-behavior: none;
}

/* iOS zoomer viewporten ind ved fokus på felter under 16px og zoomer
   aldrig ud igen. Gulvet gælder alle felter, også dem der kommer senere. */
input, select, textarea, button {
    font-size: max(16px, 1rem);
    font-family: inherit;
}

/* Blazors standard-fejlbanner ligger over indholdet; hold det inden for
   det sikre område så det ikke ender under home-indikatoren. */
#blazor-error-ui {
    background: var(--ampleo-warning);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 12px 16px calc(12px + var(--safe-bottom));
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 10px;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

/* ── Listerækker (deles af alle listesider) ───────────────────── */
.row-card {
    cursor: pointer;
}

.row-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.row-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(42,77,105,0.08);
    color: var(--ampleo-primary);
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-text {
    flex: 1;
    min-width: 0;
}

.row-chevron {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--ampleo-neutral);
}

.row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ampleo-text-muted);
}

.row-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.row-amount {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ampleo-success);
    white-space: nowrap;
}

/* ── Handlingsknapper på detaljesider ─────────────────────────── */
.action-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.action-btn {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 10px 6px;
    border: 1px solid var(--ampleo-border);
    border-radius: var(--ampleo-radius);
    background: var(--ampleo-card);
    color: var(--ampleo-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.action-btn i {
    font-size: 18px;
}

.action-btn:active {
    background: rgba(42,77,105,0.06);
}

/* ── Faneblade ────────────────────────────────────────────────── */
.tab-bar {
    display: flex;
    background: var(--ampleo-card);
    border: 1px solid var(--ampleo-border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}

.tab {
    flex: 1;
    min-height: 40px;
    padding: 9px 6px;
    border: none;
    background: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ampleo-text-muted);
}

.tab-active {
    background: var(--ampleo-primary);
    color: #fff;
}

/* ── Statuslinje ved gem ──────────────────────────────────────── */
.save-error {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.35);
    color: var(--ampleo-danger);
    border-radius: var(--ampleo-radius);
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

.save-ok {
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.35);
    color: var(--ampleo-success);
    border-radius: var(--ampleo-radius);
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

/* Samme FAB som knap-varianten, men som link (siderne navigerer). */
a.fab {
    text-decoration: none;
}

/* Løft FAB'en fri af installations-sheet'en mens den er åben, ellers dækker
   sheet'en netop den knap siden bruger til at oprette noget. Klassen sættes på
   body fra JS, fordi sheet'en er et selvstændigt komponent uden kendskab til
   siden under den. */
body.install-prompt-open .fab {
    bottom: calc(150px + var(--safe-bottom));
}