/* ============================================================
   WORLDWIDEGANGSTER – Global CSS  (mobile-first)
   ============================================================ */

/* ── Reset + grundläggande ── */
html, body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #0d1117;
    color: #e6edf3;
    margin: 0;
    padding: 0;
    /* Förhindra horisontell scroll på alla sidor */
    overflow-x: hidden;
    /* Smidig scroll på iOS */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Ingen blå highlight vid tap (Android/iOS) */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

/* Touch-action: förhindrar 300ms fördröjning */
a, button, [role="button"] {
    touch-action: manipulation;
}

/* ── Scrollbar – dark gangster-stil ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c51f1f; }

/* ── Touch-targets: minimum 44×44px (Apple HIG) ── */
.mud-button,
.mud-icon-button,
.mud-nav-link,
.mud-chip,
.mud-fab {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Knappar med text: lite extra padding på mobil */
@media (max-width: 599px) {
    .mud-button-root {
        padding: 10px 16px !important;
        font-size: 0.875rem !important;
    }
    .mud-icon-button {
        padding: 10px !important;
    }
    /* MudContainer: ingen sidpadding som klipper innehåll */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* MudGrid items: full bredd på xs */
    .mud-grid > .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    /* Text klipper inte */
    .mud-typography {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Tabeller scrollar horisontellt istf att krascha */
    .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Form inputs: full bredd + mer padding för tummar */
    .mud-input-root {
        min-height: 48px !important;
    }
    /* Snackbar: full bredd längst ner */
    .mud-snackbar-location-bottom-center .mud-snackbar,
    .mud-snackbar-location-bottom-left .mud-snackbar {
        width: calc(100vw - 24px) !important;
        margin: 0 12px 12px !important;
    }
    /* AppBar: hindra innehåll från att flöda ut */
    .mud-appbar {
        overflow: hidden;
    }
}

/* ── MudDialog: fullscreen på xs/sm ── */
@media (max-width: 767px) {
    .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }
    .mud-dialog-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px !important;
    }
    .mud-dialog-title {
        padding: 14px 16px 10px !important;
    }
    .mud-dialog-actions {
        padding: 10px 16px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .mud-dialog-actions .mud-button {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* ── MudDrawer: stäng overlay täcker hela skärmen ── */
.mud-overlay-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
}

/* ── Glöd-effekt för primärknappar (bara desktop hover) ── */
@media (hover: hover) {
    .mud-button-filled-primary:hover {
        box-shadow: 0 0 16px rgba(197, 31, 31, 0.5) !important;
    }
    /* Gangster-kort hover */
    .mud-card:hover { transform: translateY(-1px); }
}

/* Gangster-kort transition */
.mud-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }

/* ── :active state för touch-feedback ── */
.mud-button-filled-primary:active {
    box-shadow: 0 0 8px rgba(197, 31, 31, 0.6) !important;
    filter: brightness(0.9);
}
a:active, button:active { opacity: 0.8; }

/* ── Feed scroll ── */
.feed-list { max-height: 400px; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* ── Wanted level pulsate ── */
@keyframes pulsate-red {
    0%   { text-shadow: 0 0 4px #c51f1f; }
    50%  { text-shadow: 0 0 16px #c51f1f, 0 0 32px rgba(197,31,31,0.6); }
    100% { text-shadow: 0 0 4px #c51f1f; }
}
.wanted-max { animation: pulsate-red 1.5s infinite; }

/* ── NavLink aktiv ── */
.mud-nav-link.active {
    background: rgba(197, 31, 31, 0.15) !important;
    border-left: 3px solid #c51f1f !important;
}

/* ── NavMenu: större touch-target per länk ── */
.mud-nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

/* ── Felgräns ── */
.blazor-error-boundary {
    background: #2d1515;
    border: 1px solid #c51f1f;
    padding: 1rem 1.5rem;
    color: #f85149;
    border-radius: 6px;
}
.blazor-error-boundary::after { content: "Ett fel uppstod. Ladda om sidan." }

/* ── Validering ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #2ea043; }
.invalid { outline: 1px solid #f85149; }
.validation-message { color: #f85149; font-size: 0.8rem; }

/* ── AppBar stats: dölj på xs ── */
.appbar-stats-desktop { display: flex; align-items: center; gap: 8px; }
@media (max-width: 599px) {
    .appbar-stats-desktop { display: none !important; }
}

/* ── Safe area (iPhone notch / home bar) ── */
body {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ── /hood-gömning: låst-banner (alla sidor) + panel på /hood ── */
.gw-hidelock { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:10px 14px; border-radius:8px;
  background:linear-gradient(90deg,rgba(120,10,10,.55),rgba(12,10,8,.95)); border:1px solid #7a1414; border-left:3px solid #d4af37;
  box-shadow:0 0 24px rgba(200,20,20,.15); color:#f1e6cc; }
.gw-hidelock__ico { font-size:24px; flex-shrink:0; }
.gw-hidelock__txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.gw-hidelock__txt b { font-family:'Oswald',sans-serif; letter-spacing:.06em; color:#f5c451; text-transform:uppercase; font-size:14px; }
.gw-hidelock__txt small { color:#c8b99a; font-size:12px; }
.gw-hidelock__btn, .gw-hide__btn { flex-shrink:0; padding:9px 14px; border-radius:4px; border:1px solid #6b4a06; cursor:pointer; font-weight:800; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#140d02; background:linear-gradient(180deg,#f5c451,#b8860b); }
.gw-hidelock__btn:disabled, .gw-hide__btn:disabled { opacity:.45; cursor:not-allowed; }
.gw-hidelock__wait { flex-shrink:0; color:#c8b99a; font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .gw-hidelock { flex-wrap:wrap; } .gw-hidelock__btn { width:100%; } }

.gw-hide { margin:0 0 16px; padding:14px; border-radius:10px; background:linear-gradient(180deg,#15110d,#0a0908); border:1px solid rgba(212,175,55,.3); color:#eee2c6; }
.gw-hide--hidden { border-color:#d4af37; box-shadow:0 0 28px rgba(212,175,55,.15); }
.gw-hide--locked { border-color:#6d1a1a; }
.gw-hide__head { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.gw-hide__ico { font-size:30px; }
.gw-hide__head h3 { margin:0; font-family:'Oswald',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#f5c451; font-size:17px; }
.gw-hide__head small { color:#a89878; }
.gw-hide__timers { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:10px; }
.gw-hide__timers > div { padding:8px 10px; border-radius:6px; background:#0b0a09; border:1px solid rgba(212,175,55,.2); display:flex; flex-direction:column; }
.gw-hide__timers > div.red { border-color:#7a1414; background:rgba(120,10,10,.2); }
.gw-hide__timers small { color:#a89878; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.gw-hide__timers b { font-size:18px; color:#f5d77a; font-variant-numeric:tabular-nums; }
.gw-hide__timers .red b { color:#ff6b5a; }
.gw-hide__note { margin:0 0 10px; font-size:13px; color:#d9c9a6; }
.gw-hide__btn { width:100%; padding:12px; font-size:13px; }
.gw-hide__btn--off { background:linear-gradient(180deg,#d61e1e,#8e0e0e); color:#fff; border-color:#5c0707; }
.gw-hide__rules { margin:12px 0 0; padding:10px 0 0 0; list-style:none; border-top:1px solid rgba(212,175,55,.15); font-size:12px; color:#a89878; display:grid; gap:4px; }