/* ============================================
   VARIABLER & RESET
   ============================================ */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dim:    #8B6F2F;
  --gold-glow:   rgba(201, 168, 76, 0.18);
  --black:       #080808;
  --dark:        #0F0F0F;
  --dark2:       #141414;
  --dark3:       #1C1C1C;
  --dark4:       #242424;
  --text:        #EDE5D4;
  --text-muted:  #7A7060;
  --text-soft:   #B8A898;
  --border:      rgba(201, 168, 76, 0.15);
  --border-soft: rgba(255, 255, 255, 0.05);
  --red:         rgba(255, 80, 80, 0.85);
  --green:       #5CB85C;
  --sidebar-w:   240px;
  --header-h:    60px;
}

/* ============================================
   ANIMATIONER
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  35%       { transform: translateX(8px); }
  55%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

@keyframes goldOrb {
  0%, 100% { opacity: 0.06; transform: scale(1)    translate(-50%, -50%); }
  50%       { opacity: 0.14; transform: scale(1.18) translate(-50%, -50%); }
}

@keyframes goldOrb2 {
  0%, 100% { opacity: 0.04; transform: scale(1)    translate(-50%, -50%); }
  50%       { opacity: 0.10; transform: scale(1.25) translate(-50%, -50%); }
}

@keyframes shimmerSweep {
  0%   { left: -60%; }
  100% { left: 160%; }
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(201, 168, 76, 0.2); }
  50%       { border-color: rgba(201, 168, 76, 0.6); }
}

@keyframes headerSlide {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sectionEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tabActive {
  from { opacity: 0.4; transform: scaleX(0.5); }
  to   { opacity: 1;   transform: scaleX(1); }
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92, 184, 92, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(92, 184, 92, 0); }
}

@keyframes loginBoxIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lineExpand {
  from { width: 0; opacity: 0; }
  to   { width: 48px; opacity: 1; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:  var(--black);
  color:       var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: var(--dark); }
::-webkit-scrollbar-thumb    { background: var(--gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================
   INLOGGNING
   ============================================ */
#loginScreen {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  background:      var(--black);
  position:        relative;
  overflow:        hidden;
}

#loginScreen::before,
#loginScreen::after {
  content:        '';
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
  left:           50%;
  top:            50%;
}

#loginScreen::before {
  width:      800px;
  height:     800px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.12) 0%, transparent 65%);
  animation:  goldOrb 6s ease-in-out infinite;
}

#loginScreen::after {
  width:      450px;
  height:     450px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 60%);
  animation:  goldOrb2 8s ease-in-out infinite reverse;
  top:        28%;
  left:       62%;
}

.login-box {
  background:  var(--dark2);
  border:      1px solid rgba(201, 168, 76, 0.25);
  padding:     3.5rem 2.75rem;
  width:       100%;
  max-width:   420px;
  text-align:  center;
  position:    relative;
  z-index:     1;
  animation:   loginBoxIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow:  0 0 80px rgba(201, 168, 76, 0.05),
               0 30px 80px rgba(0, 0, 0, 0.7),
               inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.login-box::before {
  content:    '';
  position:   absolute;
  top:        0; left: 50%;
  transform:  translateX(-50%);
  width:      60%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:    0.6;
}

.login-ornament {
  width:     48px;
  height:    1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:    0 auto 2rem;
  animation: lineExpand 0.8s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-logo {
  font-family:    'Cormorant Garamond', serif;
  font-size:      36px;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: 4px;
  margin-bottom:  0.4rem;
  text-shadow:    0 0 40px rgba(201, 168, 76, 0.25);
}

.login-sub {
  font-size:      10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  2.75rem;
}

.login-box label {
  display:        block;
  font-size:      10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  8px;
  text-align:     left;
  opacity:        0.85;
}

.login-box input {
  width:          100%;
  background:     var(--dark3);
  border:         1px solid var(--border);
  border-bottom:  1px solid rgba(201, 168, 76, 0.25);
  color:          var(--text);
  padding:        13px 16px;
  font-family:    'Jost', sans-serif;
  font-size:      14px;
  font-weight:    300;
  outline:        none;
  margin-bottom:  1.5rem;
  letter-spacing: 1px;
  transition:     border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.login-box input:focus {
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.03);
  box-shadow:   0 4px 20px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(201, 168, 76, 0.1);
}

.pw-field-wrap {
  position:      relative;
  margin-bottom: 1.75rem;
}

.pw-field-wrap input {
  margin-bottom: 0;
  padding-right: 3.5rem;
}

.pw-toggle {
  position:   absolute;
  right:      12px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    4px;
  display:    flex;
  align-items: center;
  color:      var(--text-muted);
  transition: color 0.2s;
}

.pw-toggle:hover { color: var(--gold); }

.pw-toggle svg {
  width:           18px;
  height:          18px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.login-btn {
  width:          100%;
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        15px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .3s;
  position:       relative;
  overflow:       hidden;
}

.login-btn::after {
  content:    '';
  position:   absolute;
  top: 0; left: -60%;
  width:      40%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform:  skewX(-15deg);
}

.login-btn:hover::after { animation: shimmerSweep 0.6s ease forwards; }
.login-btn:hover        { background: var(--gold-light); box-shadow: 0 8px 24px rgba(201,168,76,0.2); }
.login-btn:active       { transform: scale(0.98); }

.login-error {
  color:      #ff6b6b;
  font-size:  12px;
  margin-top: 1.25rem;
  letter-spacing: 0.5px;
  display:    none;
}

.login-error.shake {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ============================================
   ADMIN-APP LAYOUT
   ============================================ */
#adminApp {
  display:        none;
  flex-direction: column;
  min-height:     100vh;
  animation:      fadeIn 0.35s ease forwards;
}

/* ============================================
   HEADER
   ============================================ */
header {
  height:          var(--header-h);
  background:      rgba(12, 12, 12, 0.95);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.5rem;
  position:        sticky;
  top:             0;
  z-index:         50;
  backdrop-filter: blur(12px);
  animation:       headerSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  flex-shrink:     0;
  gap:             1rem;
}

header::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3) 30%, rgba(201,168,76,0.3) 70%, transparent);
  pointer-events: none;
}

.header-left {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-shrink: 0;
}

.menu-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      transparent;
  border:          1px solid var(--border);
  color:           var(--text-muted);
  cursor:          pointer;
  transition:      all 0.25s;
  flex-shrink:     0;
}

.menu-toggle:hover {
  border-color: var(--gold-dim);
  color:        var(--gold);
}

.menu-toggle svg { width: 18px; height: 18px; }

.header-logo {
  font-family:    'Cormorant Garamond', serif;
  font-size:      19px;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: 2px;
  white-space:    nowrap;
}

.header-admin-label {
  font-family:    'Jost', sans-serif;
  font-size:      9px;
  font-weight:    400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-left:    10px;
  vertical-align: middle;
}

.header-section-name {
  font-family:    'Cormorant Garamond', serif;
  font-size:      15px;
  font-style:     italic;
  color:          var(--text-muted);
  letter-spacing: 1px;
  flex:           1;
  text-align:     center;
  opacity:        0.7;
}

.header-user-chip {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   11px;
  letter-spacing: 1px;
  color:       var(--text-muted);
  flex-shrink: 0;
  padding:     5px 12px;
  border:      1px solid var(--border-soft);
  background:  rgba(255,255,255,0.02);
}

.header-user-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--green);
  animation:     dotPulse 2s ease-in-out infinite;
  flex-shrink:   0;
}

/* ============================================
   APP LAYOUT – SIDEBAR + CONTENT
   ============================================ */
.app-layout {
  display:  flex;
  flex:     1 1 auto;
  overflow: hidden;
  height:   calc(100vh - var(--header-h));
}

/* ============================================
   SIDEBAR
   ============================================ */
.admin-sidebar {
  width:           var(--sidebar-w);
  flex-shrink:     0;
  background:      var(--dark);
  border-right:    1px solid var(--border);
  display:         flex;
  flex-direction:  column;
  overflow-y:      auto;
  overflow-x:      hidden;
  position:        relative;
  transition:      transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-sidebar::before {
  content:        '';
  position:       absolute;
  top: 0; right: 0;
  width:          1px;
  height:         100%;
  background:     linear-gradient(180deg,
    transparent 0%,
    rgba(201,168,76,0.3) 20%,
    rgba(201,168,76,0.3) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.sidebar-brand {
  padding:       2rem 1.5rem 1.5rem;
  position:      relative;
  flex-shrink:   0;
}

.sidebar-brand-logo {
  font-family:    'Cormorant Garamond', serif;
  font-size:      22px;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: 3px;
  margin-bottom:  4px;
  text-shadow:    0 0 30px rgba(201,168,76,0.2);
}

.sidebar-brand-sub {
  font-size:      9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color:          var(--text-muted);
  opacity:        0.7;
}

.sidebar-brand-line {
  width:      0;
  height:     1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  margin-top: 1.25rem;
  animation:  lineExpand 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nav-items {
  flex:            1;
  padding:         0.75rem 0;
  display:         flex;
  flex-direction:  column;
  gap:             1px;
  overflow-y:      auto;
}

.nav-item {
  display:        flex;
  align-items:    center;
  gap:            11px;
  padding:        12px 1.5rem;
  background:     none;
  border:         none;
  border-left:    2px solid transparent;
  color:          var(--text-muted);
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor:         pointer;
  width:          100%;
  text-align:     left;
  transition:     color 0.2s, background 0.2s, border-color 0.2s;
  position:       relative;
  opacity:        0;
  animation:      navItemIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-item.active {
  color:         var(--gold);
  background:    rgba(201, 168, 76, 0.07);
  border-left:   2px solid var(--gold);
}

.nav-item.active::after {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      60px;
  background: linear-gradient(90deg, rgba(201,168,76,0.08), transparent);
  pointer-events: none;
}

.nav-item:hover:not(.active) {
  color:      var(--text-soft);
  background: rgba(255, 255, 255, 0.025);
  border-left-color: var(--gold-dim);
}

.nav-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       16px;
  height:      16px;
  opacity:     0.85;
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-icon svg {
  width:           16px;
  height:          16px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.nav-label { flex: 1; }

.nav-footer {
  padding:       1.25rem 1.25rem;
  border-top:    1px solid var(--border-soft);
  flex-shrink:   0;
}

.nav-preview-btn {
  display:        flex;
  align-items:    center;
  gap:            9px;
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--text-muted);
  padding:        9px 14px;
  font-family:    'Jost', sans-serif;
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor:         pointer;
  width:          100%;
  transition:     all 0.3s;
  text-decoration: none;
  margin-bottom:  8px;
}

.nav-preview-btn svg {
  width:           14px;
  height:          14px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
}

.nav-preview-btn:hover {
  border-color: var(--gold-dim);
  color:        var(--gold);
  background:   rgba(201, 168, 76, 0.04);
}

.nav-logout-btn {
  display:        flex;
  align-items:    center;
  gap:            9px;
  background:     transparent;
  border:         1px solid rgba(255, 80, 80, 0.2);
  color:          rgba(255, 100, 100, 0.45);
  padding:        9px 14px;
  font-family:    'Jost', sans-serif;
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor:         pointer;
  width:          100%;
  transition:     all 0.3s;
}

.nav-logout-btn svg {
  width:           14px;
  height:          14px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
}

.nav-logout-btn:hover {
  border-color: rgba(255, 80, 80, 0.55);
  color:        rgba(255, 100, 100, 0.85);
  background:   rgba(255, 80, 80, 0.04);
}

/* Overlay for mobile */
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    40;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}

/* ============================================
   CONTENT AREA
   ============================================ */
.content-area {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--black);
  position:   relative;
}

.admin-body {
  max-width: 960px;
  margin:    0 auto;
  padding:   2.5rem 2rem 4rem;
}

/* ============================================
   SECTIONS – VISA/DÖLJ
   ============================================ */
.admin-section {
  display: none;
  opacity: 0;
}

.admin-section.section-active {
  display:   block;
  animation: sectionEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
   SECTION PAGE HEADER
   ============================================ */
.section-page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.section-page-header::after {
  content:    '';
  position:   absolute;
  bottom:     -1px; left: 0;
  width:      48px;
  height:     1px;
  background: var(--gold);
}

.section-page-title {
  font-family:    'Cormorant Garamond', serif;
  font-size:      32px;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: 2px;
  margin-bottom:  0.5rem;
}

.section-page-desc {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.75;
  max-width:   600px;
}

/* ============================================
   INGET TILLTRÄDE
   ============================================ */
#noAccessMsg {
  text-align:  center;
  padding:     6rem 2rem;
  color:       var(--text-muted);
  font-size:   14px;
  line-height: 1.8;
}

/* ============================================
   SPARA-RAD
   ============================================ */
.save-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--dark2);
  border:          1px solid var(--border);
  border-left:     2px solid var(--gold-dim);
  padding:         1rem 1.5rem;
  margin-bottom:   2rem;
  flex-wrap:       wrap;
  gap:             1rem;
}

.save-bar p {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.6;
}

.save-bar p strong { color: var(--gold); font-weight: 400; }

.save-btn {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        12px 32px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .3s;
  position:       relative;
  overflow:       hidden;
  white-space:    nowrap;
}

.save-btn::after {
  content:    '';
  position:   absolute;
  top: 0; left: -60%;
  width:      40%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform:  skewX(-15deg);
}

.save-btn:hover::after  { animation: shimmerSweep 0.55s ease forwards; }
.save-btn:hover  { background: var(--gold-light); box-shadow: 0 4px 16px rgba(201,168,76,0.2); }
.save-btn:active { transform: scale(0.97); }

.save-btn.saved {
  background: var(--green);
  color:      #fff;
}

/* ============================================
   KATEGORI-FLIKAR
   ============================================ */
.cat-tabs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 1.5rem;
}

.cat-tab {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--text-muted);
  padding:        8px 18px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .25s ease;
  position:       relative;
}

.cat-tab::after {
  content:    '';
  position:   absolute;
  bottom:     -1px; left: 50%;
  width:      0; height: 2px;
  background: var(--gold);
  transform:  translateX(-50%);
  transition: width .25s ease;
}

.cat-tab.active {
  border-color: var(--gold);
  color:        var(--gold);
  background:   rgba(201, 168, 76, 0.05);
}

.cat-tab.active::after {
  width: 60%;
  animation: tabActive 0.3s ease forwards;
}

.cat-tab:hover:not(.active) {
  border-color: var(--gold-dim);
  color:        var(--text-soft);
  transform:    translateY(-1px);
}

/* ============================================
   BYTA KATEGORINAMN
   ============================================ */
.cat-rename-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 1.5rem;
  padding:       1rem 1.25rem;
  background:    var(--dark2);
  border:        1px solid var(--border);
}

.cat-rename-row label {
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  white-space:    nowrap;
  opacity:        0.8;
}

.cat-rename-row input {
  flex:        1;
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     8px 12px;
  font-family: 'Jost', sans-serif;
  font-size:   14px;
  outline:     none;
  transition:  border-color 0.2s;
}

.cat-rename-row input:focus { border-color: var(--gold); }

.icon-btn {
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--text-muted);
  padding:     8px 14px;
  font-family: 'Jost', sans-serif;
  font-size:   11px;
  letter-spacing: 1px;
  cursor:      pointer;
  transition:  all .3s;
  white-space: nowrap;
}

.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* ============================================
   ARTIKLAR / RÄTTER
   ============================================ */
.items-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  1.5rem;
}

.admin-item {
  display:               grid;
  grid-template-columns: 1.5fr 1.5fr 2.5fr 85px 75px 58px 36px;
  gap:                   10px;
  align-items:           center;
  background:            var(--dark2);
  border:                1px solid var(--border-soft);
  border-left:           2px solid transparent;
  padding:               12px 14px;
  transition:            border-color .2s, transform .2s, box-shadow .2s, background .2s;
  opacity:               0;
}

.admin-item.visible {
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.admin-item:hover {
  border-left-color: var(--gold-dim);
  border-color:      rgba(201, 168, 76, 0.15);
  transform:         translateX(2px);
  background:        var(--dark3);
  box-shadow:        0 4px 20px rgba(0,0,0,0.3);
}

.admin-item input[type="text"],
.admin-item input[type="number"] {
  background:  var(--dark);
  border:      1px solid rgba(201, 168, 76, 0.1);
  color:       var(--text);
  padding:     8px 10px;
  font-family: 'Jost', sans-serif;
  font-size:   13px;
  width:       100%;
  outline:     none;
  transition:  border-color .2s, background .2s;
}

.admin-item input:focus {
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.02);
}

.admin-item input[type="number"] { text-align: right; }

.field-label {
  font-size:      9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  3px;
  opacity:        0.7;
}

.del-btn {
  background:      none;
  border:          1px solid rgba(255, 80, 80, 0.2);
  color:           rgba(255, 100, 100, 0.4);
  width:           36px;
  height:          36px;
  cursor:          pointer;
  font-size:       16px;
  transition:      all .3s;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.del-btn:hover { border-color: #ff4444; color: #ff4444; }

/* ============================================
   BILDUPPLADDNING
   ============================================ */
.img-upload-col { cursor: pointer; }

.admin-img-cell {
  position:        relative;
  width:           50px;
  height:          50px;
  border:          1px solid var(--border);
  background:      var(--dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        visible;
  transition:      border-color .25s;
}

.img-upload-col:hover .admin-img-cell { border-color: var(--gold); }

.admin-img-thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.admin-img-placeholder {
  font-size: 18px;
  opacity:   0.3;
}

.admin-img-remove {
  position:        absolute;
  top:             -7px; right: -7px;
  width:           16px; height: 16px;
  border-radius:   50%;
  background:      #ff4444;
  color:           #fff;
  border:          none;
  font-size:       9px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  z-index:         1;
  transition:      background .2s;
}

.admin-img-remove:hover { background: #cc0000; }

.add-item-btn {
  background:     transparent;
  border:         1px dashed var(--gold-dim);
  color:          var(--gold);
  padding:        13px;
  width:          100%;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .3s;
  opacity:        0.8;
}

.add-item-btn:hover {
  background:   rgba(201, 168, 76, 0.05);
  border-color: var(--gold);
  opacity:      1;
}

/* ============================================
   LÄGG TILL KATEGORI
   ============================================ */
.add-cat-row {
  display:     flex;
  gap:         10px;
  align-items: center;
  margin-top:  2rem;
  padding-top: 2rem;
  border-top:  1px solid var(--border);
}

.add-cat-row input {
  flex:        1;
  background:  var(--dark2);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     10px 14px;
  font-family: 'Jost', sans-serif;
  font-size:   14px;
  outline:     none;
}

.add-cat-row input:focus { border-color: var(--gold); }

.add-cat-btn {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        10px 24px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 1.5px;
  cursor:         pointer;
  transition:     all .3s;
  white-space:    nowrap;
}

.add-cat-btn:hover { background: var(--gold-light); }

/* ============================================
   QR-KOD
   ============================================ */
.qr-section {
  background: var(--dark2);
  border:     1px solid var(--border);
  padding:    2.5rem;
}

.qr-controls {
  display:       flex;
  gap:           12px;
  align-items:   center;
  flex-wrap:     wrap;
  margin-bottom: 2rem;
}

.qr-controls input {
  flex:        1;
  min-width:   200px;
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     11px 14px;
  font-family: 'Jost', sans-serif;
  font-size:   14px;
  outline:     none;
  transition:  border-color 0.2s;
}

.qr-controls input:focus { border-color: var(--gold); }

.gen-btn {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        11px 24px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 1.5px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all .3s;
}

.gen-btn:hover { background: var(--gold-light); }

.dl-btn, .print-btn {
  background:     transparent;
  border:         1px solid var(--gold-dim);
  color:          var(--gold);
  padding:        11px 20px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  letter-spacing: 1px;
  cursor:         pointer;
  display:        none;
  transition:     all .3s;
}

.dl-btn:hover, .print-btn:hover {
  background: rgba(201, 168, 76, 0.07);
  border-color: var(--gold);
}

#qrcode canvas,
#qrcode img { border: 8px solid white; }

/* ============================================
   BYT LÖSENORD
   ============================================ */
.pw-section {
  background: var(--dark2);
  border:     1px solid var(--border);
  padding:    2.5rem;
}

.pw-row {
  display:               grid;
  grid-template-columns: 1fr 1fr auto;
  gap:                   14px;
  align-items:           end;
}

.pw-row label {
  display:        block;
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  8px;
  opacity:        0.85;
}

.pw-row input {
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     11px 14px;
  font-family: 'Jost', sans-serif;
  font-size:   14px;
  outline:     none;
  width:       100%;
  transition:  border-color .2s;
}

.pw-row input:focus { border-color: var(--gold); }

.pw-save-btn {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        11px 28px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 1.5px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all .3s;
}

.pw-save-btn:hover { background: var(--gold-light); }

.pw-msg {
  font-size:  13px;
  margin-top: 1rem;
}

/* ============================================
   KAMPANJBILDER / BILDSPEL
   ============================================ */
.promo-admin-section {
  background: var(--dark2);
  border:     1px solid var(--border);
  padding:    2rem;
}

.promo-empty {
  font-size:  13px;
  color:      var(--text-muted);
  font-style: italic;
  padding:    1rem 0;
}

.promo-grid {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  1.5rem;
}

.promo-admin-card {
  display:      grid;
  grid-template-columns: 260px 1fr;
  gap:          16px;
  align-items:  center;
  background:   var(--dark3);
  border:       1px solid var(--border-soft);
  border-left:  2px solid transparent;
  padding:      12px;
  transition:   border-color .2s, background .2s;
}

.promo-admin-card:hover {
  border-left-color: var(--gold-dim);
  border-color:      rgba(201,168,76,0.12);
  background:        var(--dark4);
}

.promo-admin-img-wrap {
  width:        260px;
  aspect-ratio: 16 / 5;
  overflow:     hidden;
  flex-shrink:  0;
  background:   var(--dark);
}

.promo-admin-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.promo-admin-controls {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.promo-admin-btns {
  display:  flex;
  gap:      8px;
  flex-wrap: wrap;
}

.promo-add-row {
  display:       flex;
  gap:           10px;
  flex-wrap:     wrap;
  margin-bottom: 1rem;
}

.promo-add-btn {
  display:        flex;
  align-items:    center;
  gap:            7px;
  background:     transparent;
  border:         1px dashed var(--gold-dim);
  color:          var(--gold);
  padding:        10px 16px;
  flex:           1;
  min-width:      140px;
  font-family:    'Jost', sans-serif;
  font-size:      10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .3s;
  white-space:    nowrap;
  opacity:        0.8;
}

.promo-add-btn svg {
  width:  14px;
  height: 14px;
  flex-shrink: 0;
}

.promo-add-btn:hover {
  background:   rgba(201, 168, 76, 0.06);
  border-color: var(--gold);
  opacity:      1;
}

.promo-url-row {
  display:       flex;
  gap:           10px;
  align-items:   center;
  flex-wrap:     wrap;
  margin-bottom: 1.5rem;
  padding:       14px;
  border:        1px solid var(--border);
  background:    rgba(255,255,255,0.015);
}

.promo-url-row .site-input { flex: 1; min-width: 200px; }

.promo-url-type {
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     10px 12px;
  font-family: 'Jost', sans-serif;
  font-size:   13px;
  cursor:      pointer;
}

.promo-url-confirm { flex: 0 0 auto; }

.promo-video-thumb {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           100%;
  height:          100%;
  background:      var(--dark3);
  color:           var(--gold);
}

.promo-video-thumb span  { font-size: 26px; }
.promo-video-thumb small {
  font-size:  9px;
  color:      var(--text-muted);
  word-break: break-all;
  text-align: center;
  padding:    0 8px;
  max-height: 36px;
  overflow:   hidden;
}

.promo-save-row {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding-top: 1.25rem;
  border-top:  1px solid var(--border);
}

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

/* ============================================
   REDIGERA WEBBPLATS
   ============================================ */
.site-section {
  background: var(--dark2);
  border:     1px solid var(--border);
  padding:    2rem;
}

.site-lang-tabs {
  display:       flex;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: 1.75rem;
}

.site-lang-tab {
  background:     var(--dark3);
  border:         1px solid var(--border);
  color:          var(--text-muted);
  padding:        8px 18px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  letter-spacing: 1.5px;
  cursor:         pointer;
  transition:     all .25s;
}

.site-lang-tab.active {
  border-color: var(--gold);
  color:        var(--gold);
  background:   rgba(201, 168, 76, 0.06);
}

.site-lang-tab:hover:not(.active) {
  border-color: var(--gold-dim);
  color:        var(--text-soft);
}

.site-field-section {
  margin-bottom: 2rem;
  animation: fadeInUp 0.3s ease both;
}

.site-field-section-title {
  font-size:      10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--gold);
  padding-bottom: 0.6rem;
  border-bottom:  1px solid var(--border);
  margin-bottom:  1rem;
  opacity:        0.8;
}

.site-fields-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.site-field-row {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.site-field-row.full-width { grid-column: 1 / -1; }

.site-field-label {
  font-size:      10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--text-muted);
  opacity:        0.8;
}

.site-input,
.site-textarea {
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     9px 13px;
  font-family: 'Jost', sans-serif;
  font-size:   13px;
  outline:     none;
  width:       100%;
  transition:  border-color .2s, background .2s;
  resize:      vertical;
}

.site-input:focus,
.site-textarea:focus {
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.02);
}

.site-input.changed,
.site-textarea.changed {
  border-color: rgba(201, 168, 76, 0.45);
  background:   rgba(201, 168, 76, 0.03);
}

.site-textarea { min-height: 80px; line-height: 1.65; }

#siteUniversalContainer {
  margin-top:  2rem;
  padding-top: 2rem;
  border-top:  1px solid var(--border);
}

#siteUniversalContainer .site-field-section:first-child::before {
  content:        'Öppettider, adress & ikoner';
  display:        block;
  font-size:      10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  1.25rem;
  opacity:        0.7;
}

.site-save-row {
  display:     flex;
  align-items: center;
  gap:         1rem;
  margin-top:  1.5rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--border);
}

.site-msg {
  font-size:  13px;
  color:      var(--text-muted);
  min-height: 1.2em;
}

/* ============================================
   HANTERA KONTON
   ============================================ */
.users-section {
  background: var(--dark2);
  border:     1px solid var(--border);
  padding:    2rem;
}

.users-table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   2rem;
}

.users-table th {
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  text-align:     left;
  padding:        8px 12px;
  border-bottom:  1px solid var(--border);
  opacity:        0.85;
}

.users-table td {
  padding:        10px 12px;
  font-size:      13px;
  color:          var(--text);
  border-bottom:  1px solid rgba(201, 168, 76, 0.06);
  vertical-align: middle;
}

.users-table tr:last-child td { border-bottom: none; }

.users-table tbody tr {
  opacity:    0;
  transition: background 0.2s;
}

.users-table tbody tr.visible {
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.users-table tr:hover td { background: rgba(201, 168, 76, 0.03); }

.perms-cell  { color: var(--text-muted) !important; font-size: 12px !important; }
.actions-cell { display: flex; gap: 8px; }

.you-badge {
  display:        inline-block;
  background:     rgba(201, 168, 76, 0.12);
  color:          var(--gold);
  font-size:      9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        2px 7px;
  margin-left:    8px;
  border:         1px solid var(--border);
}

/* ============================================
   LÄGG TILL KONTO
   ============================================ */
.add-user-form {
  border-top:  1px solid var(--border);
  padding-top: 1.75rem;
}

.add-user-form h4 {
  font-family:   'Cormorant Garamond', serif;
  font-size:     20px;
  font-weight:   300;
  color:         var(--gold);
  margin-bottom: 1.25rem;
  letter-spacing: 1px;
}

.add-user-fields {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           12px;
  margin-bottom: 1.25rem;
}

.add-user-fields label {
  display:        block;
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  6px;
  opacity:        0.85;
}

.add-user-fields input {
  width:       100%;
  background:  var(--dark3);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     11px 14px;
  font-family: 'Jost', sans-serif;
  font-size:   14px;
  outline:     none;
  transition:  border-color .2s;
}

.add-user-fields input:focus { border-color: var(--gold); }

/* ============================================
   BEHÖRIGHETS-CHECKBOXAR
   ============================================ */
.perm-group { margin-bottom: 1.25rem; }

.perm-group-label {
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  10px;
  opacity:        0.85;
}

.perms-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap:                   8px;
}

.perm-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   12px;
  color:       var(--text-soft);
  padding:     9px 12px;
  border:      1px solid var(--border-soft);
  background:  var(--dark3);
  transition:  border-color .2s, background .2s;
  user-select: none;
}

.perm-item:hover { border-color: var(--gold-dim); background: var(--dark4); }

.perm-item input[type="checkbox"] {
  accent-color: var(--gold);
  width:        15px;
  height:       15px;
  cursor:       pointer;
  flex-shrink:  0;
}

.perm-item input[type="checkbox"]:disabled + span { color: var(--text-muted); }

.add-user-btn {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        11px 28px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 1.5px;
  cursor:         pointer;
  transition:     all .3s;
  margin-top:     0.25rem;
  position:       relative;
  overflow:       hidden;
}

.add-user-btn::after {
  content:    '';
  position:   absolute;
  top: 0; left: -60%;
  width:      40%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform:  skewX(-15deg);
}

.add-user-btn:hover::after { animation: shimmerSweep 0.55s ease forwards; }
.add-user-btn:hover  { background: var(--gold-light); }
.add-user-btn:active { transform: scale(0.97); }

.form-msg {
  font-size:  13px;
  margin-top: 0.75rem;
  min-height: 1.2em;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.0);
  z-index:         100;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  transition:      background 0.3s ease;
}

.modal-overlay.open { background: rgba(0, 0, 0, 0.82); }

.modal-box {
  background: var(--dark2);
  border:     1px solid rgba(201, 168, 76, 0.3);
  width:      100%;
  max-width:  500px;
  padding:    2.25rem;
  box-shadow: 0 0 80px rgba(201, 168, 76, 0.07),
              0 40px 100px rgba(0,0,0,0.75),
              inset 0 1px 0 rgba(255,255,255,0.03);
  animation:  scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-box::before {
  content:    '';
  display:    block;
  width:      40%;
  height:     1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  margin-bottom: 1.5rem;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.5rem;
  font-family:     'Cormorant Garamond', serif;
  font-size:       24px;
  font-weight:     300;
  color:           var(--gold);
  letter-spacing:  1px;
}

.modal-close {
  background:  none;
  border:      none;
  color:       var(--text-muted);
  font-size:   16px;
  cursor:      pointer;
  padding:     4px 8px;
  transition:  color .2s;
  line-height: 1;
}

.modal-close:hover { color: var(--text); }

.modal-label {
  display:        block;
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  6px;
  margin-top:     1.1rem;
  opacity:        0.85;
}

.modal-label:first-of-type { margin-top: 0; }

.modal-input {
  width:         100%;
  background:    var(--dark3);
  border:        1px solid var(--border);
  color:         var(--text);
  padding:       11px 14px;
  font-family:   'Jost', sans-serif;
  font-size:     14px;
  outline:       none;
  margin-bottom: 0.25rem;
  transition:    border-color .2s;
}

.modal-input:focus { border-color: var(--gold); }

.modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             12px;
  margin-top:      1.75rem;
  padding-top:     1.25rem;
  border-top:      1px solid var(--border);
}

.modal-cancel {
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--text-muted);
  padding:     10px 22px;
  font-family: 'Jost', sans-serif;
  font-size:   11px;
  letter-spacing: 1px;
  cursor:      pointer;
  transition:  all .3s;
}

.modal-cancel:hover { border-color: var(--text-muted); color: var(--text); }

.modal-save {
  background:     var(--gold);
  color:          var(--black);
  border:         none;
  padding:        10px 28px;
  font-family:    'Jost', sans-serif;
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 1.5px;
  cursor:         pointer;
  transition:     all .3s;
}

.modal-save:hover { background: var(--gold-light); }

/* ============================================
   RESPONSIV (mobil)
   ============================================ */
@media (max-width: 768px) {
  :root { --sidebar-w: 260px; }

  .menu-toggle { display: flex; }

  .admin-sidebar {
    position:  fixed;
    left:      0; top: var(--header-h); bottom: 0;
    z-index:   45;
    transform: translateX(-100%);
    box-shadow: 4px 0 30px rgba(0,0,0,0.6);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open { display: block; }

  .header-section-name { display: none; }
}

@media (max-width: 600px) {
  .admin-body { padding: 1.5rem 1rem 3rem; }

  .admin-item {
    grid-template-columns: 1fr 58px 36px;
  }
  .admin-item .arname-col,
  .admin-item .desc-col,
  .admin-item .price-col,
  .admin-item .discount-col { grid-column: 1; }
  .admin-item .img-upload-col {
    grid-column: 2;
    grid-row:    1 / 3;
    align-self:  center;
  }

  .pw-row { grid-template-columns: 1fr; }
  .add-user-fields { grid-template-columns: 1fr; }
  .perms-grid { grid-template-columns: 1fr 1fr; }
  .site-fields-grid { grid-template-columns: 1fr; }

  .promo-admin-card { grid-template-columns: 1fr; }
  .promo-admin-img-wrap { width: 100%; }

  .section-page-title { font-size: 24px; }

  .modal-box { padding: 1.5rem; }
}