@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  /* ---- Themes ----
     Each theme below just redefines the same set of CSS variables
     (colors). Every other rule in this file only reads these variables,
     so switching themes never needs any other rule to change. */

  /* Light theme (default) */
  :root,
  body[data-theme="light"]{
    --bg:#F5F4F0;
    --surface:#FFFFFF;
    --ink:#1E2430;
    --ink-soft:#6B7180;
    --border:#E1DFD6;
    --urgent:#D9642B;
    --urgent-soft:#FBE9DE;
    --project:#276E64;
    --project-soft:#E1EFEC;
    --done-bg:#EFEEEA;
    --shadow:rgba(30,36,48,0.04);
    --shadow-hover:rgba(30,36,48,0.07);
    --waiting-fg:#A8791A; --waiting-bg:#FBF3DF; --waiting-border:#F0DCA0;
    --donebadge-fg:#3E7A58; --donebadge-bg:#E4F2E9; --donebadge-border:#BFE0CC;
    --priority:#B8860B; --priority-soft:#FBF0D9;
  }

  /* Night Shift theme — dark, warm accents */
  body[data-theme="night-shift"]{
    --bg:#14171C;
    --surface:#1C2027;
    --ink:#E8E9ED;
    --ink-soft:#8B93A3;
    --border:#2C313B;
    --urgent:#E2874A;
    --urgent-soft:#3A2A1E;
    --project:#5FC2B3;
    --project-soft:#1B3330;
    --done-bg:#1A1E24;
    --shadow:rgba(0,0,0,0.25);
    --shadow-hover:rgba(0,0,0,0.4);
    --waiting-fg:#E6C25C; --waiting-bg:#332B14; --waiting-border:#4D4020;
    --donebadge-fg:#7FCB9A; --donebadge-bg:#16281E; --donebadge-border:#2A4536;
    --priority:#E8C468; --priority-soft:#332B14;
  }

  /* Terminal theme — dark, green-on-black */
  body[data-theme="terminal"]{
    --bg:#0D1310;
    --surface:#121A16;
    --ink:#CFEFD8;
    --ink-soft:#5F8F72;
    --border:#22352A;
    --urgent:#E8A23C;
    --urgent-soft:#2E2412;
    --project:#4ADE9C;
    --project-soft:#123322;
    --done-bg:#101713;
    --shadow:rgba(0,0,0,0.35);
    --shadow-hover:rgba(0,0,0,0.5);
    --waiting-fg:#E8C23C; --waiting-bg:#2E2810; --waiting-border:#473C16;
    --donebadge-fg:#4ADE9C; --donebadge-bg:#0F281C; --donebadge-border:#1E4432;
    --priority:#F0D264; --priority-soft:#2E2810;
  }

  /* ---- Base reset ---- */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    transition:background .2s, color .2s;
  }

  .hidden{display:none !important;}

  /* ---- Login screen ---- */
  .login-screen{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .theme-toggle{
    position:absolute;
    top:20px;
    right:20px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:50%;
    font-size:16px;
    cursor:pointer;
  }
  .theme-toggle:hover{border-color:var(--ink-soft);}
  .login-box{
    width:100%;
    max-width:340px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 3px 10px var(--shadow-hover);
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .login-box h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    font-weight:700;
    margin:0;
    letter-spacing:-0.02em;
  }
  .login-sub{
    margin:0;
    color:var(--ink-soft);
    font-size:13px;
  }
  .login-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    font-weight:500;
    color:var(--ink-soft);
  }
  .login-field input{
    border:1px solid var(--border);
    background:var(--bg);
    border-radius:6px;
    padding:9px 10px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  .login-field input:focus{
    outline:none;
    border-color:var(--project);
  }
  .login-box button[type="submit"]{
    background:var(--project);
    border:none;
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    padding:10px;
    border-radius:6px;
    cursor:pointer;
  }
  .login-box button[type="submit"]:disabled{
    opacity:.6;
    cursor:default;
  }
  .login-error{
    margin:0;
    color:var(--urgent);
    font-size:12px;
    min-height:14px;
  }
  .login-hint{
    margin:0;
    color:var(--ink-soft);
    font-size:11px;
  }

  /* ---- Page layout ---- */
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:32px 24px 80px;
  }

  /* Top bar */
  header.top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:28px;
    flex-wrap:wrap;
    gap:16px;
  }

  .brand h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:28px;
    font-weight:700;
    margin:0 0 4px 0;
    letter-spacing:-0.02em;
  }
  .brand p{
    margin:0;
    color:var(--ink-soft);
    font-size:13px;
  }

  .top-actions{
    position:relative;
    display:flex;
    gap:8px;
    align-items:center;
  }
  .top-actions button{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:500;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
    transition:border-color .15s, color .15s;
  }
  .top-actions button:hover{
    border-color:var(--ink-soft);
    color:var(--ink);
  }
  #save-status{
    font-size:11px;
    color:var(--ink-soft);
    min-width:70px;
    text-align:right;
  }

  .logged-in-as{
    font-size:12px;
    color:var(--ink-soft);
    font-weight:850;
  }

  /* "Senast raderade" dropdown panel */
  .trash-panel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:320px;
    max-height:360px;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 6px 20px var(--shadow-hover);
    padding:14px;
    z-index:10;
  }
  .trash-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .trash-panel-head h3{
    margin:0;
    font-family:'Space Grotesk',sans-serif;
    font-size:14px;
    font-weight:600;
  }
  .trash-close{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    padding:2px 4px;
    border-radius:4px;
  }
  .trash-close:hover{color:var(--urgent); background:var(--urgent-soft);}
  .trash-hint{
    margin:6px 0 10px;
    font-size:11px;
    color:var(--ink-soft);
  }
  .trash-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;
  }
  .trash-empty{
    font-size:12.5px;
    color:var(--ink-soft);
    text-align:center;
    padding:12px 0;
  }
  .trash-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 10px;
  }
  .trash-item-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .trash-item-title{
    font-size:12.5px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .trash-item-time{
    font-size:10.5px;
    color:var(--ink-soft);
  }
  .trash-restore-btn{
    flex-shrink:0;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--ink-soft);
    font-size:11px;
    font-weight:500;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
  }
  .trash-restore-btn:hover{border-color:var(--project); color:var(--project);}

  #theme-select{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:500;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer;
  }

  /* Two-column board layout — stacks into one column on narrow screens */
  .board{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media (max-width:820px){
    .board{grid-template-columns:1fr;}
  }

  /* Column header: title + open-count badge */
  .column-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .column-title{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .dot{
    width:9px;height:9px;border-radius:50%;
    flex-shrink:0;
  }
  .dot.urgent{background:var(--urgent);}
  .dot.project{background:var(--project);}

  .column-title h2{
    font-family:'Space Grotesk',sans-serif;
    font-size:15px;
    font-weight:600;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .column-title span.sub{
    font-size:12px;
    color:var(--ink-soft);
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    margin-left:2px;
  }

  .count-badge{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:var(--ink-soft);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:2px 9px;
  }

  /* "+ New" button at the top of each column */
  .add-btn{
    width:100%;
    background:var(--surface);
    border:1.5px dashed var(--border);
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    padding:11px;
    border-radius:10px;
    cursor:pointer;
    margin-bottom:14px;
    transition:border-color .15s, color .15s, background .15s;
  }
  .add-btn:hover{
    color:var(--ink);
  }
  .col-short .add-btn:hover{border-color:var(--urgent); background:var(--urgent-soft);}
  .col-long .add-btn:hover{border-color:var(--project); background:var(--project-soft);}

  /* Ticket list inside each column (script.js fills this with .ticket cards) */
  .cards{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* ---- Ticket card ---- */
  .ticket{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 2px var(--shadow);
    transition:box-shadow .15s, background .2s, border-color .2s;
  }
  /* Thin colored strip on the left — hue is picked per ticket in script.js
     (hashHue) so cards are easy to tell apart at a glance */
  .ticket::before{
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
    background:hsl(var(--ticket-hue, 210), 50%, 55%);
    opacity:.85;
  }
  .ticket:hover{box-shadow:0 3px 10px var(--shadow-hover);}
  .ticket.done{opacity:.55;}

  /* Prioritized tickets: tinted background + gold left strip, toggled via
     the star button in the card header */
  .ticket.priority{
    background:var(--priority-soft);
    border-color:var(--priority);
  }
  .ticket.priority::before{
    background:var(--priority);
    opacity:1;
  }

  /* Drag & drop states, toggled from script.js while reordering tickets */
  .ticket.dragging{opacity:.4;}
  .ticket.drag-over-top{box-shadow:0 -3px 0 0 var(--ink), 0 1px 2px var(--shadow);}
  .ticket.drag-over-bottom{box-shadow:0 3px 0 0 var(--ink), 0 1px 2px var(--shadow);}

  /* Card header: drag handle, ticket id, status dropdown, delete button */
  .ticket-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px 8px 14px;
  }
  .ticket-head-left{
    display:flex;
    align-items:center;
    gap:6px;
  }
  /* Grip icon — dragging only starts from here, so clicking/selecting text
     inside the card's inputs still works normally */
  .drag-handle{
    cursor:grab;
    color:var(--ink-soft);
    font-size:13px;
    line-height:1;
    user-select:none;
  }
  .drag-handle:active{cursor:grabbing;}
  .ticket-id{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    color:var(--ink-soft);
    letter-spacing:.02em;
    border:1px solid transparent;
    background:transparent;
    border-radius:6px;
    padding:2px 6px;
    min-width:0;
    flex:1;
  }
  .ticket-id:focus{
    outline:none;
    border-color:var(--border);
    background:var(--bg);
  }
  .col-short .ticket-id{color:var(--urgent);}
  .col-long .ticket-id{color:var(--project);}

  .ticket-head-right{
    display:flex;
    align-items:center;
    gap:8px;
  }

  /* Status dropdown (Öppen / Väntar / Färdig) — color depends on the
     selected value via the data-val attribute set in script.js */
  select.status{
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:500;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--ink-soft);
    padding:3px 8px;
    cursor:pointer;
  }
  select.status[data-val="öppen"]{color:var(--ink);}
  select.status[data-val="väntar"]{color:var(--waiting-fg); background:var(--waiting-bg); border-color:var(--waiting-border);}
  select.status[data-val="färdig"]{color:var(--donebadge-fg); background:var(--donebadge-bg); border-color:var(--donebadge-border);}

  .del-btn{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    padding:2px 4px;
    border-radius:4px;
  }
  .del-btn:hover{color:var(--urgent); background:var(--urgent-soft);}

  .priority-btn{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    padding:2px 4px;
    border-radius:4px;
  }
  .priority-btn:hover{color:var(--priority); background:var(--priority-soft);}
  .priority-btn.active{color:var(--priority);}

  /* Decorative perforated line between the card header and body */
  .tear{
    height:7px;
    background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 13px);
    margin:0 14px;
  }

  /* Card body: link, contact and notes fields */
  .ticket-body{
    padding:12px 14px 14px 14px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  /* Labeled input rows (link, contact) */
  .field-row{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .field-label{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    color:var(--ink-soft);
    width:34px;
    flex-shrink:0;
    text-transform:uppercase;
  }
  .field-row input{
    flex:1;
    border:1px solid transparent;
    background:var(--bg);
    border-radius:6px;
    padding:6px 8px;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    color:var(--ink);
    min-width:0;
  }
  .field-row input:focus{
    outline:none;
    border-color:var(--ink-soft);
    background:var(--surface);
  }
  .field-row input.link-input{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
  }
  .open-link{
    font-size:11px;
    color:var(--ink-soft);
    text-decoration:none;
    border:1px solid var(--border);
    border-radius:6px;
    padding:6px 8px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .open-link:hover{border-color:var(--ink); color:var(--ink);}

  /* Notes textarea */
  textarea.notes{
    width:100%;
    border:1px solid transparent;
    background:var(--bg);
    border-radius:6px;
    padding:8px;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    color:var(--ink);
    resize:vertical;
    min-height:44px;
  }
  textarea.notes:focus{
    outline:none;
    border-color:var(--ink-soft);
    background:var(--surface);
  }

  /* "Tillagt <date>" timestamp at the bottom of the card */
  .ticket-footer{
    font-size:10.5px;
    color:var(--ink-soft);
    margin-top:2px;
  }

  /* Placeholder shown when a column has no tickets yet */
  .empty-state{
    border:1.5px dashed var(--border);
    border-radius:12px;
    padding:26px 14px;
    text-align:center;
    color:var(--ink-soft);
    font-size:12.5px;
  }