/* =====================================================
   1. DESIGN VARIABLES
===================================================== */

:root{

  /* Accent palette */
  --accent-pink: #ff7fbf;
  --accent-pink-soft: rgba(255,127,191,.14);
  --accent-pink-soft-strong: rgba(255,127,191,.24);
  --accent-pink-tint: #fff0f7;

  --accent-blue: #9fd8ff;
  --accent-blue-soft: rgba(159,216,255,.16);
  --accent-blue-soft-strong: rgba(159,216,255,.22);

  --accent-mint: #a6f0d0;
  --accent-mint-soft: rgba(190,255,230,.22);
  --mint-soft-1: #dff7ee;
  --mint-soft-2: #c9f1e2;
  --mint-soft-border: #a6e3cc;
  --mint-complete: #bfead9;

  /* Backgrounds */
  --bg-app: #f7f4f1;
  --bg-card: rgba(255,255,255,0.92);

  /* Row hovers */
  --row-hover: rgba(0,0,0,0.04);
  --row-hover-strong: rgba(0,0,0,0.06);

  /* Borders */
  --border-main: rgba(0,0,0,0.08);
  --border-soft: rgba(0,0,0,0.06);

  /* Text */
  --text-main: #222;
  --text-muted: #555;
  --text-soft: #777;
  --text-on-dark: #fff;

  /* Shadows */
  --shadow-soft: 0 4px 10px rgba(0,0,0,0.05);
  --shadow-card: 0 10px 24px rgba(0,0,0,0.10);
  --shadow-strong: 0 12px 26px rgba(0,0,0,0.12);

  /* Footer gradient */
  --footer-grad-1: rgba(159,216,255,0.12);
  --footer-grad-2: rgba(159,216,255,0.20);

}


/* =====================================================
   2. BASE LAYOUT
===================================================== */

body{
  margin:0;
  
  color:var(--text-main);
}


.container{
  margin-top: 1.5rem;
}

.app-navbar{

  background: linear-gradient(
    135deg,
    var(--accent-pink-soft),
    var(--accent-blue-soft),
    var(--accent-mint-soft)
  );

  border-bottom: 1px solid var(--border-main);

}

.app-navbar .navbar-brand{
  font-weight:600;
}

.app-navbar .btn{
  border-color: var(--border-soft);
}

/* =====================================================
   3. CARDS
===================================================== */

.card{
  border:1px solid var(--border-main);
  box-shadow:var(--shadow-card);
}

.part-card{

  border-radius:1rem;

  border:1px solid var(--border-main);

  box-shadow: var(--shadow-soft), var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease;
}

.part-card:hover{
  transform:translateY(-2px);
  box-shadow: 
    var(--shadow-card), 
    var(--shadow-strong);
}


/* =====================================================
   4. CARD HEADER
===================================================== */

.part-card > .card-header{

  background: var(--accent-pink-soft);

  border-bottom:1px solid var(--border-main);

}

.part-card + .part-card{
  margin-top: 1.25rem;
}

.part-card > .card-header:hover{

  background: var(--accent-pink-soft-strong);
}


/* =====================================================
   5. PART HEADER (CLICKABLE)
===================================================== */

.part-header{
  cursor:pointer;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}


.part-header:hover{
  opacity:.85;
}

.part-notes{
  border-left:3px solid var(--border-soft);
  padding-left:.5rem;
  font-size:.85rem;
  font-weight:500;
  color:var(--bs-secondary-color);
  margin-top:2px;

  line-height:1.25;
}



/* =====================================================
   6. CARD BODY FIXES
===================================================== */

.part-card .card-body{
  padding-bottom: 0;
}


/* =====================================================
   7. INTRO / OUTRO
===================================================== */

.part-intro{
  background: var(--accent-blue-soft);
  border-bottom:1px solid var(--border-soft);
  margin:-0.5rem -1rem 0;
  padding:.6rem 1rem;
  line-height:1.25;
}

.part-outro{
  background:var(--accent-mint-soft);
  border-top:1px solid var(--border-soft);
  margin:0 -1rem -1rem;
  padding:.6rem 1rem;
}

.part-intro .small,
.part-outro .small{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.65;
}


/* =====================================================
   8. ROWS
===================================================== */

.row-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  border-color:var(--border-soft);
  padding:10px 6px;
  transition: background .15s ease, border-color .15s ease;
  cursor:pointer;
  border-left:3px solid transparent;
  user-select:none;
}

/* Hover 
.row-item:hover{
  background: var(--row-hover);
  border-left-color: var(--row-hover-strong);
}*/

/* Text */
.row-text{
  flex:1;
}

.row-check{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.strike{
  text-decoration:line-through;
  opacity:.40;
}

/* ⭐ NÄSTA VARV — viktigaste visuella signalen */
.row-item.next{
  background:rgba(46,164,79,.08);
  border-left-color:#2ea44f;
}

.row-item.next .row-icon{
  color:#2ea44f;
}

/* Extra tydlighet på hover för nästa */
.row-item.next:hover{
  background:rgba(46,164,79,.14);
}

.preserve-lines{
  white-space:pre-line;
}


.row-icon{
  width:22px;
  flex-shrink:0;
  font-size:1.2rem;
  color:#adb5bd;
  transition: transform .12s ease, color .15s ease;
}

.row-item.done .row-icon{
  color:#2ea44f;
}

.row-item:active .row-icon{
  transform:scale(.9);
}

/* =====================================================
   9. IMAGES
===================================================== */

.part-image{
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.pattern-image{

  border-radius:1rem;
  border:1px solid var(--border-main);
  box-shadow: var(--shadow-strong);

}

.pattern-thumb{

  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:.5rem;
  border:1px solid var(--border-main);
}


/* =====================================================
   10. PATTERN LIST
===================================================== */

.pattern-row{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.pattern-title{
  flex:1;
  cursor:pointer;
}


/* =====================================================
   11. DESCRIPTION SECTIONS
===================================================== */

.desc-section {
  background: var(--accent-pink-soft) ;
  border:1px solid var(--accent-pink-soft-strong);
  border-radius:.9rem;
  box-shadow: var(--shadow-strong);

  transition: background .2s ease;

}

.desc-section:hover{
  background: var(--accent-pink-soft-strong);
}

.section-title{
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:.25rem;
  text-transform:uppercase;
  font-size:.9rem;
}

.desc-items .col-md-6{
  padding-bottom:.25rem;
}

.desc-items li{
  list-style:none;
  padding-left:0;
  margin-bottom:.15rem;
}


/* =====================================================
   12. FOOTER
===================================================== */

.app-footer{

  background:linear-gradient(
    180deg,
    var(--footer-grad-1),
    var(--footer-grad-2)
  );

  margin-top:4rem;
  border-top:1px solid var(--accent-blue-soft);
  padding:2rem 1rem;
  text-align:center;
  font-size:.9rem;
  color:var(--text-muted);

}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin:1.5rem 0;
}

.footer-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;

  padding:.65rem 1rem;
  border-radius:10px;
  border:1px solid var(--border-main);
  background:var(--bg-card);

  text-decoration:none;
  color:var(--text-main);
  font-weight:500;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

.footer-links a:hover{
  background: #fff;
  border-color: var(--accent-pink);
}

/* =====================================================
   13. MOBILE FOOTER
===================================================== */

@media (max-width:576px){

  .footer-links{
    flex-direction:column;
    align-items:stretch;
  }

  .footer-links a{
    width:100%;
    text-align:center;
  }

}


/* =====================================================
   14. OFFLINE BANNER
===================================================== */

.offline-banner{

  width:100%;
  overflow:hidden;
  height:0;
  padding:0 8px;
  text-align:center;
  color:white;
  font-weight:500;
  transition:height .25s ease, padding .25s ease;

}

.offline-banner.show{

  height:40px;
  padding:8px;

}

/* =====================================================
   15. Progress bar 
===================================================== */

/* Wrapper */
.part-progress {
  min-width: 140px;        /* hindrar hopp */
  justify-content: flex-end;
}

/* Text */
.progress-text {
  font-size: 0.75rem;
  color: #6c757d;
  min-width: 36px;
  text-align: right;
}

/* Själva baren */
.part-progressbar {
  width: 90px;             /* smalare */
  height: 20px;            /* högre */
  background: var(--accent-mint-soft);
  border: 1px solid var(--mint-soft-border);
  border-radius: 999px;
  overflow: hidden;
}

/* Fyllnad */
.part-progressbar .progress-bar {
  background-color: var(--mint-soft-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);

}

/* Klar */
.part-progressbar .is-complete {
  background-color: var(--mint-complete);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}