/* ============================================================
   MERKID.IS — DESIGN SYSTEM v5 — "REFINED"
   ============================================================
   Geir mandate 2026-04-29: stop with the bull. No glassy effects,
   no silly button motions. Sjúklega notendavænt og flott — calm,
   functional, restrained. Less is more.

   This file disables the decorative layer of v4 and resets every
   interaction to its quietest reasonable form. Loads after every
   v4 rule so it owns the final look.

   Design principles:
   - One state per change. Hover changes color OR bg, not both
     plus a transform plus a shadow.
   - Solid colors over gradients.
   - One easing curve (ease-out), one duration (160ms).
   - Two shadow levels: subtle for cards, defined for floating modals.
   - No transforms on hover unless it's the only signal we have.
   - Smaller buttons. Tighter spacing. Sober typography.
   ============================================================ */

/* === 1. CALM TOKENS — overrides v4 noise =================== */

:root {
  --rf-dur:   160ms;
  --rf-ease:  cubic-bezier(0.32, 0.72, 0, 1);
  --rf-r:     6px;
  --rf-r-md:  10px;
  --rf-r-lg:  14px;
  --rf-sh-card:    0 1px 2px rgba(15, 26, 20, 0.05);
  --rf-sh-pop:     0 8px 24px rgba(15, 26, 20, 0.08), 0 2px 6px rgba(15, 26, 20, 0.04);
  --rf-sh-modal:   0 16px 48px rgba(15, 26, 20, 0.14), 0 4px 12px rgba(15, 26, 20, 0.06);
}

/* === 2. STRIP NOISE LAYERS ================================= */

/* Film grain — gone. Did nothing for ergonomics. */
body::before {
  display: none !important;
}

/* Background gradients — calmer single radial */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(27, 67, 50, 0.04) 0%, transparent 60%) !important;
}

/* Floating ghost label cards behind the empty-state canvas — visual
   noise that competes with the actual UI. Remove. */
#es-floaters,
.es-lbl {
  display: none !important;
}

/* Topbar — solid surface, no glass blur */
.topbar {
  background: var(--m-paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 var(--m-line) !important;
}

/* Modal backdrop — keep blur (it's helpful) but cut saturation games */
.modal-bg {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* === 3. BUTTONS — calm, functional ========================= */

/* Primary action — solid forest, no gradient, no sheen */
.lp-btn-primary,
.btn-acc,
.auth-btn,
.es-btn-primary,
.ch-print-btn {
  background: var(--m-acc) !important;
  background-image: none !important;
  color: var(--m-on-acc) !important;
  border: 1px solid var(--m-acc) !important;
  border-radius: var(--rf-r) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 9px 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--rf-sh-card) !important;
  transition: background-color var(--rf-dur) var(--rf-ease),
              border-color var(--rf-dur) var(--rf-ease) !important;
}
.lp-btn-primary:hover,
.btn-acc:hover,
.auth-btn:hover,
.es-btn-primary:hover,
.ch-print-btn:hover {
  background: var(--m-acc-mid) !important;
  border-color: var(--m-acc-mid) !important;
  transform: none !important;
  box-shadow: var(--rf-sh-card) !important;
}
.lp-btn-primary:active,
.btn-acc:active,
.auth-btn:active,
.es-btn-primary:active,
.ch-print-btn:active {
  background: var(--m-acc-deep) !important;
  transform: none !important;
}

/* Kill the sliding shimmer on auth-btn */
.auth-btn::after { display: none !important; }
.auth-btn { padding: 13px 16px !important; font-size: 0.92rem !important; }

/* Secondary — outline */
.lp-btn-secondary,
.btn-sec,
.btn-ghost,
.es-btn-secondary {
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line-firm) !important;
  color: var(--m-ink) !important;
  border-radius: var(--rf-r) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 9px 16px !important;
  box-shadow: none !important;
  transition: border-color var(--rf-dur) var(--rf-ease),
              background-color var(--rf-dur) var(--rf-ease) !important;
}
.lp-btn-secondary:hover,
.btn-sec:hover,
.btn-ghost:hover,
.es-btn-secondary:hover {
  background: var(--m-bg-2) !important;
  border-color: var(--m-line-bold) !important;
  color: var(--m-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Topbar nav buttons — quieter */
.nb {
  border-radius: var(--rf-r) !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  padding: 7px 12px !important;
  border: none !important;
  background: transparent !important;
  color: var(--m-ink-2) !important;
  transition: background-color var(--rf-dur) var(--rf-ease),
              color var(--rf-dur) var(--rf-ease) !important;
}
.nb:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.nb.active {
  background: var(--m-acc) !important;
  background-image: none !important;
  color: var(--m-on-acc) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.nb.active:hover {
  background: var(--m-acc-mid) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Segment / type buttons */
.tp-btn, .seg-btn {
  border-radius: var(--rf-r) !important;
  font-weight: 500 !important;
  padding: 7px 11px !important;
  border: 1px solid var(--m-line) !important;
  background: var(--m-paper) !important;
  color: var(--m-ink-2) !important;
  box-shadow: none !important;
  transition: background-color var(--rf-dur) var(--rf-ease),
              border-color var(--rf-dur) var(--rf-ease),
              color var(--rf-dur) var(--rf-ease) !important;
}
.tp-btn:hover, .seg-btn:hover {
  background: var(--m-bg-2) !important;
  border-color: var(--m-line-firm) !important;
  color: var(--m-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.tp-btn.tp-active, .seg-btn.sa {
  background: var(--m-acc-tint) !important;
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* === 4. CARDS — constant elevation ========================= */

.dash-card,
.fsec {
  border-radius: var(--rf-r-md) !important;
  border: 1px solid var(--m-line) !important;
  background: var(--m-paper) !important;
  box-shadow: var(--rf-sh-card) !important;
  transition: border-color var(--rf-dur) var(--rf-ease) !important;
}
.dash-card:hover,
.fsec:hover {
  transform: none !important;
  box-shadow: var(--rf-sh-card) !important;
  border-color: var(--m-line-firm) !important;
}

/* === 5. INPUTS — tighter ==================================== */

.fi, .fi-ta, .fi-sel,
input[type="text"], input[type="email"],
input[type="password"], input[type="number"],
textarea, select {
  border-radius: var(--rf-r) !important;
  border: 1px solid var(--m-line-firm) !important;
  background: var(--m-paper) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  padding: 9px 11px !important;
  transition: border-color var(--rf-dur) var(--rf-ease),
              box-shadow var(--rf-dur) var(--rf-ease) !important;
}
.fi:focus, .fi-ta:focus, .fi-sel:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--m-acc) !important;
  box-shadow: 0 0 0 3px var(--m-acc-tint) !important;
}

/* Auth screen inputs — match (was bordered box, now bordered box but tighter) */
.afield input {
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line-firm) !important;
  border-radius: var(--rf-r) !important;
  padding: 11px 13px !important;
  font-size: 0.95rem !important;
}
.afield input:focus {
  border-color: var(--m-acc) !important;
  box-shadow: 0 0 0 3px var(--m-acc-tint) !important;
  background: var(--m-paper) !important;
}

/* === 6. AUTH SCREEN — calm =================================== */

.auth-box {
  border-radius: var(--rf-r-lg) !important;
  box-shadow: var(--rf-sh-modal) !important;
  padding: 40px 36px 44px !important;
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
}

/* Drop the gradient strip on top — it was decorative noise */
.auth-box::before { display: none !important; }

.auth-tabs {
  background: var(--m-bg-2) !important;
  border-radius: var(--rf-r) !important;
  padding: 3px !important;
  margin-bottom: 20px !important;
}
.auth-tab {
  padding: 9px 8px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 5px !important;
  color: var(--m-ink-3) !important;
  background: transparent !important;
}
.auth-tab.active {
  background: var(--m-paper) !important;
  color: var(--m-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--rf-sh-card) !important;
}

.afield label {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--m-ink-2) !important;
}

/* === 7. MODAL ✕ — no rotation =============================== */

.modal-x, .mcl,
button[aria-label="Loka"]:not(.btn-acc):not(.lp-btn-primary):not(.auth-btn) {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--rf-r) !important;
  background: transparent !important;
  border: none !important;
  color: var(--m-ink-3) !important;
  font-size: 0.95rem;
  transition: background-color var(--rf-dur) var(--rf-ease),
              color var(--rf-dur) var(--rf-ease) !important;
}
.modal-x:hover, .mcl:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
  transform: none !important;
}

/* === 8. MODAL — quieter ===================================== */

.modal {
  border-radius: var(--rf-r-lg) !important;
  box-shadow: var(--rf-sh-modal) !important;
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
}

/* Welcome modal step circles — calmer */
#mod-welcome [style*="background:var(--m-paper)"][style*="width:36px"] {
  background: var(--m-acc-tint) !important;
  color: var(--m-acc) !important;
  box-shadow: none !important;
}

/* === 9. SIDEBAR ACCORDION — quieter icons =================== */

.fsec-title {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  padding: 12px 16px !important;
}
.fsec.open > .fsec-title {
  color: var(--m-ink) !important;
  font-weight: 600 !important;
}
.fsec-title-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 13px !important;
  background: var(--m-bg-2) !important;
  border-radius: 5px !important;
}
.fsec.open > .fsec-title .fsec-title-icon {
  background: var(--m-acc-tint) !important;
}
.fsec:hover > .fsec-title .fsec-title-icon {
  transform: none !important;
}
.fsec:hover {
  background: transparent !important;
}
.fsec {
  border-bottom: 1px solid var(--m-line-soft) !important;
}

/* === 10. CHIPS / BADGES — sober ============================ */

.chip {
  border-radius: var(--rf-r) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 3px 8px !important;
}
.lp-live-pill {
  border-radius: var(--rf-r) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 3px 9px !important;
}
.lp-live-dot {
  box-shadow: none !important;
}

/* === 11. TOPBAR ICONS ====================================== */

.user-btn, .dm-toggle, .appr-bell {
  border-radius: var(--rf-r) !important;
  border: 1px solid var(--m-line) !important;
  background: transparent !important;
  transition: background-color var(--rf-dur) var(--rf-ease),
              border-color var(--rf-dur) var(--rf-ease) !important;
}
.user-btn:hover, .dm-toggle:hover, .appr-bell:hover {
  background: var(--m-bg-2) !important;
  border-color: var(--m-line-firm) !important;
  color: var(--m-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.user-av {
  background: var(--m-acc) !important;
  background-image: none !important;
  border-radius: var(--rf-r) !important;
  box-shadow: none !important;
}

/* === 12. TOOLBAR (canvas) =================================== */

.tb2-btn {
  border-radius: var(--rf-r) !important;
}
.tb2-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--m-bg-2) !important;
}
.tb2-btn.active, .tb2-btn.on {
  background: var(--m-acc-tint) !important;
  color: var(--m-acc) !important;
  border-color: var(--m-acc) !important;
  box-shadow: none !important;
}

/* === 13. SAVESTATE PILL — quieter ========================== */

.savestate {
  border-radius: var(--rf-r) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  background: var(--m-bg-2) !important;
  border: 1px solid var(--m-line) !important;
}

/* === 14. SCROLLBARS — thinner ============================== */

.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--m-line-firm) !important;
  border: 2px solid transparent;
}

/* === 15. SWATCHES — no scale =============================== */

.swatch {
  transition: border-color var(--rf-dur) var(--rf-ease) !important;
}
.swatch:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* === 16. IMG THUMB — no scale ============================== */

.img-thumb {
  transition: border-color var(--rf-dur) var(--rf-ease) !important;
}
.img-thumb:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* === 17. SIDEBAR ITEMS — no padding nudge ================== */

.sb-item:hover,
.umenu-item:hover,
.mac-item:hover {
  padding-left: inherit !important;
}

/* === 18. UMENU dropdown — quieter ========================== */

.umenu {
  border-radius: var(--rf-r-md) !important;
  box-shadow: var(--rf-sh-pop) !important;
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
}
.umenu-item {
  border-radius: var(--rf-r) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
}
.umenu-item:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
}

/* === 19. TYPOGRAPHY — calm down ============================ */

/* The hero MERKID.IS used to be ExtraBold; now Bold is enough */
.auth-logo-text {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(2.2rem, 4.6vw, 3rem) !important;
}
.auth-logo-text span {
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
}

/* Modal titles — less shouty */
.modal-title,
.modal h2,
.modal h3 {
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
}

/* KPI numbers — less cinematic */
.dash-kpi {
  font-weight: 600 !important;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem) !important;
  letter-spacing: -0.025em !important;
}

/* === 20. KILL EXTRA ANIMATIONS ============================= */

/* Disable all the named keyframes that v4/v3 stitched on */
.dash-card, .fsec, .modal, .auth-box,
.lp-btn-primary, .btn-acc, .auth-btn,
.dash-bar, .stat-box .sv,
.appr-bell-badge {
  animation: none !important;
}

/* No more pulsing dots / shimmers / glows on idle elements */
.lp-live-dot {
  animation: none !important;
}

/* === 21. AUTH BOTTOM CAPTION ============================== */

.auth-box::after {
  font-size: 0.55rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  opacity: 0.5 !important;
}

/* === 22. SEGMENT / SAFN TABS ============================== */

.safn-doc-tab {
  border-radius: var(--rf-r) !important;
  padding: 7px 12px !important;
  font-weight: 500 !important;
}

/* === 23. BRAND TABS — match calmness ====================== */

.brand-tabs {
  border-radius: var(--rf-r) !important;
  padding: 3px !important;
}
.brand-tab {
  border-radius: 5px !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  padding: 8px 10px !important;
}
.brand-tab.active {
  font-weight: 600 !important;
  box-shadow: var(--rf-sh-card) !important;
}

/* === 24. SUBTLE FOCUS RINGS =============================== */

*:focus-visible {
  outline: 2px solid var(--m-acc) !important;
  outline-offset: 1px !important;
}

/* === 25. PANELS — flat surfaces =========================== */

.p-left, .p-right {
  background: var(--m-paper) !important;
  border-color: var(--m-line) !important;
}

.ph {
  background: transparent !important;
  border-bottom: 1px solid var(--m-line) !important;
  padding: 14px 16px !important;
}

/* === 26. APPROVAL BADGE — solid ========================== */

.appr-bell-badge {
  background: var(--m-acc) !important;
  color: var(--m-on-acc) !important;
  box-shadow: 0 0 0 2px var(--m-paper) !important;
}

/* === 27. MOBILE — refine the preview banner ============== */

@media (max-width: 760px) {
  .canvas-wrap::before {
    background: var(--m-bg-2);
    border: 1px solid var(--m-line);
    color: var(--m-ink-2);
  }
}

/* === END v5 ================================================ */