/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f5f5f5;
  --bg1:      #ffffff;
  --bg2:      #f0f0f0;
  --border:   #e0e0e0;
  --border2:  #c8c8c8;
  --text:     #1a1a1a;
  --text2:    #555;
  --text3:    #888;
  --radius:   8px;
  --radius-sm:4px;
  --shadow:   0 1px 4px rgba(0,0,0,0.08);

  /* Händelse-färger */
  --c-match:  #EBF4FF;
  --c-match-t:#0C447C;
  --c-match-b:#85B7EB;
  --c-herr:   #E1F5EE;
  --c-herr-t: #085041;
  --c-herr-b: #5DCAA5;
  --c-dam:    #FBEAF0;
  --c-dam-t:  #72243E;
  --c-dam-b:  #ED93B1;
  --c-yp:     #EEEDFE;
  --c-yp-t:   #3C3489;
  --c-yp-b:   #AFA9EC;
  --c-yf:     #FAECE7;
  --c-yf-t:   #712B13;
  --c-yf-b:   #F0997B;
  --c-book:   #FEF3C7;
  --c-book-t: #92400E;
  --c-book-b: #F59E0B;

  --c-conflict:#FEE2E2;
  --c-conflict-b:#EF4444;
  --c-warn:    #FEF9C3;
  --c-warn-b:  #EAB308;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 13px; color: var(--text); background: var(--bg); }

/* ── Layout ── */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { background: var(--bg1); border-bottom: 1px solid var(--border);
          padding: 10px 16px; display: flex; align-items: center; gap: 10px;
          flex-wrap: wrap; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); }
.topbar-logo { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }
.topbar-logo span { color: #1a56db; }

.main-tabs { display: flex; gap: 2px; background: var(--bg2);
             padding: 3px; border-radius: var(--radius); }
.mtab { padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
        border: none; background: transparent; color: var(--text3);
        font-family: inherit; white-space: nowrap; transition: all .15s; }
.mtab:hover { color: var(--text); }
.mtab.active { background: var(--bg1); color: var(--text); font-weight: 500;
               border: 1px solid var(--border); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Shared controls ── */
.controls { background: var(--bg1); border-bottom: 1px solid var(--border);
            padding: 8px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm);
       padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--text);
       font-family: inherit; transition: background .1s; }
.btn:hover { background: var(--bg2); }
.btn-primary { background: #1a56db; color: #fff; border-color: #1a56db; }
.btn-primary:hover { background: #1648c0; }
.tog-group { display: flex; gap: 2px; background: var(--bg2); padding: 2px; border-radius: var(--radius); }
.tog { padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
       border: none; background: transparent; color: var(--text3); font-family: inherit; }
.tog.active { background: var(--bg1); color: var(--text); font-weight: 500;
              border: 1px solid var(--border); }
.tog.active.mm { color: #0C447C; background: #EBF4FF; }
.tog.active.tm { color: #085041; background: #E1F5EE; }
.lbl { font-size: 11px; color: var(--text3); white-space: nowrap; }
.week-label { font-size: 13px; font-weight: 500; flex: 1; text-align: center; }

/* ── Chips / filters ── */
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px;
        border-radius: 20px; font-size: 11px; border: 1px solid var(--border);
        background: var(--bg2); color: var(--text3); cursor: pointer; white-space: nowrap; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip.on.c-match { background: var(--c-match); color: var(--c-match-t); border-color: var(--c-match-b); }
.chip.on.c-herr  { background: var(--c-herr);  color: var(--c-herr-t);  border-color: var(--c-herr-b); }
.chip.on.c-dam   { background: var(--c-dam);   color: var(--c-dam-t);   border-color: var(--c-dam-b); }
.chip.on.c-yp    { background: var(--c-yp);    color: var(--c-yp-t);    border-color: var(--c-yp-b); }
.chip.on.c-yf    { background: var(--c-yf);    color: var(--c-yf-t);    border-color: var(--c-yf-b); }
.chip.on.c-book  { background: var(--c-book);  color: var(--c-book-t);  border-color: var(--c-book-b); }
.filter-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.filter-row:last-child { margin-bottom: 0; min-height: 18px; }

/* ── Calendar week ── */
.cal-wrap { overflow-x: auto; }
.week-grid { display: grid; grid-template-columns: 50px repeat(7, minmax(0,1fr));
             font-size: 10px; min-width: 500px; }
.col-head { background: var(--bg2); padding: 5px 3px; text-align: center;
            border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.col-head:last-child { border-right: none; }
.col-head.today { background: #EBF4FF; }
.col-head .dn { font-weight: 500; font-size: 11px; color: var(--text); }
.col-head .dd { font-size: 9px; color: var(--text2); }
.col-head.today .dn, .col-head.today .dd { color: #0C447C; }
.time-cell { background: var(--bg2); padding: 2px 4px; text-align: right;
             color: var(--text3); font-size: 9px; border-bottom: 1px solid var(--border);
             border-right: 1px solid var(--border); display: flex; align-items: flex-start;
             justify-content: flex-end; padding-top: 4px; }
.day-cell { background: var(--bg1); padding: 2px; border-bottom: 1px solid var(--border);
            border-right: 1px solid var(--border); min-height: 44px; cursor: pointer; }
.day-cell:last-child { border-right: none; }
.day-cell.today { background: #F7FBFF; }
.day-cell:hover { background: var(--bg2); }
.ev { border-radius: var(--radius-sm); padding: 2px 4px; margin-bottom: 2px;
      font-size: 9px; line-height: 1.35; }
.ev-time { font-size: 8px; opacity: .7; display: block; }
.ev.t-match { background: var(--c-match); color: var(--c-match-t); }
.ev.t-herr  { background: var(--c-herr);  color: var(--c-herr-t); }
.ev.t-dam   { background: var(--c-dam);   color: var(--c-dam-t); }
.ev.t-yp    { background: var(--c-yp);    color: var(--c-yp-t); }
.ev.t-yf    { background: var(--c-yf);    color: var(--c-yf-t); }
.ev.t-book  { background: var(--c-book);  color: var(--c-book-t); }

/* ── Calendar month ── */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); min-width: 380px; }
.mh { background: var(--bg2); padding: 5px 4px; text-align: center; font-size: 10px;
      font-weight: 500; color: var(--text2); border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border); }
.mh:last-child { border-right: none; }
.mday { background: var(--bg1); padding: 4px; border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border); min-height: 64px; cursor: pointer; }
.mday:nth-child(7n) { border-right: none; }
.mday:hover { background: var(--bg2); }
.mday.other { background: var(--bg); }
.mday.other .mdn { color: var(--text3); }
.mday.today { background: #F0F7FF; }
.mdn { font-size: 10px; font-weight: 500; color: var(--text2); width: 18px; height: 18px;
       display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 2px; }
.mday.today .mdn { background: #B5D4F4; color: #0C447C; }
.mev { border-radius: 2px; padding: 1px 3px; margin-bottom: 1px; font-size: 8px;
       line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmore { font-size: 8px; color: var(--text3); padding: 1px 3px; }

/* ── Detail panel ── */
.detail { background: var(--bg1); border-top: 1px solid var(--border); padding: 10px 16px; display: none; }
.detail.open { display: block; }
.detail-hdr { font-size: 13px; font-weight: 500; margin-bottom: 8px;
              display: flex; justify-content: space-between; align-items: center; }
.detail-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 18px; }
.dev-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
            border-radius: var(--radius-sm); font-size: 11px; margin-bottom: 3px; }
.dev-time { font-size: 10px; opacity: .75; min-width: 90px; }
.dev-surf { font-size: 10px; opacity: .65; margin-left: auto; }

/* ── Legend ── */
.legend { display: flex; gap: 10px; flex-wrap: wrap; padding: 7px 16px;
          background: var(--bg1); border-top: 1px solid var(--border); }
.li { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text3); }
.ld { width: 7px; height: 7px; border-radius: 50%; }
.lbx { width: 13px; height: 7px; border-radius: 2px; border: 1.5px solid; }

/* ── Planöversikt SVG map ── */
.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden;
            border: 1px solid var(--border); background: #1a3a1a; }
.map-wrap svg { width: 100%; display: block; }
.map-tt { position: absolute; background: var(--bg1); border: 1px solid var(--border2);
          border-radius: var(--radius); padding: 9px 11px; font-size: 11px;
          min-width: 200px; max-width: 260px; pointer-events: none; display: none;
          z-index: 30; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.map-tt.open { display: block; }
.map-tt.cr { border-color: var(--c-conflict-b); }
.map-tt.yw { border-color: var(--c-warn-b); }
.tt-ttl { font-weight: 500; font-size: 12px; margin-bottom: 5px; padding-bottom: 4px;
          border-bottom: 1px solid var(--border); display: flex; align-items: center;
          gap: 5px; flex-wrap: wrap; }
.tt-bdg { font-size: 9px; padding: 1px 6px; border-radius: 20px; font-weight: 600; }
.tt-bdg.cr { background: var(--c-conflict); color: #b91c1c; }
.tt-bdg.yw { background: var(--c-warn); color: #a16207; }
.tt-sec { font-size: 9px; font-weight: 600; text-transform: uppercase;
          letter-spacing: .05em; color: var(--text3); margin: 4px 0 2px; }
.tt-row { display: flex; gap: 5px; padding: 2px 0; border-bottom: 1px solid var(--border);
          font-size: 10px; align-items: center; }
.tt-row:last-child { border-bottom: none; }
.tt-tm { color: var(--text2); min-width: 85px; flex-shrink: 0; }
.tt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tt-surf { font-size: 9px; opacity: .6; margin-left: auto; }
.cbar { background: var(--c-conflict); border: 1px solid var(--c-conflict-b); border-radius: 4px;
        padding: 3px 7px; margin-bottom: 4px; font-size: 9px; color: #b91c1c; font-weight: 500; }
.wbar { background: var(--c-warn); border: 1px solid var(--c-warn-b); border-radius: 4px;
        padding: 3px 7px; margin-bottom: 4px; font-size: 9px; color: #a16207; font-weight: 500; }
.plan-srow { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; min-height: 20px; align-items: center; }
.schip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px;
         border-radius: 20px; font-size: 10px; border: 1px solid; }
.cchip { background: var(--c-conflict); color: #b91c1c; border-color: var(--c-conflict-b); font-weight: 600; }
.ychip { background: var(--c-warn); color: #a16207; border-color: var(--c-warn-b); }

/* ── Omklädningsrum ── */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; padding: 14px 16px; }
.cr-card { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cr-hdr { padding: 7px 10px; background: var(--bg2); border-bottom: 1px solid var(--border);
          font-size: 11px; font-weight: 500; }
.cr-body { padding: 8px 10px; }
.cr-slot { padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 10px; }
.cr-slot:last-child { border-bottom: none; }
.cr-slot-time { color: var(--text3); margin-bottom: 1px; }
.cr-slot-team { font-weight: 500; }
.cr-empty { font-size: 10px; color: var(--text3); font-style: italic; }

/* ── Boka Resurs ── */
.boka-wrap { display: grid; grid-template-columns: 1fr 300px; min-height: 500px; }
@media (max-width: 700px) { .boka-wrap { grid-template-columns: 1fr; } }
.boka-left { border-right: 1px solid var(--border); overflow: hidden; }
.boka-right { padding: 14px 16px; background: var(--bg1); overflow-y: auto; }
.avail-grid { overflow-x: auto; }
.ag { display: grid; grid-template-columns: 80px repeat(7,minmax(0,1fr)); font-size: 11px; min-width: 480px; }
.ag-head { background: var(--bg2); padding: 5px 3px; text-align: center;
           border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 10px; }
.ag-head:last-child { border-right: none; }
.ag-head.today { background: #EBF4FF; color: #0C447C; }
.res-label { background: var(--bg2); padding: 7px 8px; border-bottom: 1px solid var(--border);
             border-right: 1px solid var(--border); font-size: 11px; font-weight: 500;
             display: flex; align-items: center; gap: 4px; }
.res-cell { padding: 3px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
            min-height: 48px; cursor: pointer; }
.res-cell:last-child { border-right: none; }
.res-cell:hover { background: var(--bg2); }
.res-cell.today { background: #F7FBFF; }
.bk-block { border-radius: 3px; padding: 2px 4px; margin-bottom: 2px; font-size: 9px; line-height: 1.3; }
.bk-Klubbis   { background: #FEF3C7; color: #92400E; border-left: 2px solid #F59E0B; }
.bk-Minibuss1 { background: #DBEAFE; color: #1E40AF; border-left: 2px solid #3B82F6; }
.bk-Minibuss2 { background: #D1FAE5; color: #065F46; border-left: 2px solid #10B981; }
.free-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(34,197,94,.35); margin: 6px auto; }
.bk-list-section { padding: 12px 16px; border-top: 1px solid var(--border); }
.bk-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0;
           border-bottom: 1px solid var(--border); }
.bk-item:last-child { border-bottom: none; }
.bk-date { font-size: 11px; font-weight: 500; min-width: 52px; }
.bk-info { flex: 1; }
.bk-res { font-size: 10px; font-weight: 500; }
.bk-team { font-size: 11px; }
.bk-time { font-size: 10px; color: var(--text3); }
.del-btn { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 14px; padding: 0 3px; }
.del-btn:hover { color: #ef4444; }
.form-title { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.fg { margin-bottom: 9px; }
.fg label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 3px; }
.fg input, .fg select, .fg textarea { width: 100%; font-size: 12px; font-family: inherit;
  padding: 5px 8px; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--bg1); }
.fg textarea { height: 52px; resize: vertical; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-select { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 10px; }
.res-opt { padding: 7px 5px; border-radius: var(--radius-sm); border: 1.5px solid var(--border2);
           cursor: pointer; text-align: center; font-size: 11px; color: var(--text3);
           background: var(--bg2); transition: all .1s; }
.res-opt:hover { border-color: var(--border2); background: var(--bg); }
.res-opt-icon { font-size: 16px; display: block; margin-bottom: 3px; }
.res-opt.sel.klubbis { border-color: #F59E0B; background: #FEF3C7; color: #92400E; }
.res-opt.sel.buss1   { border-color: #3B82F6; background: #DBEAFE; color: #1E40AF; }
.res-opt.sel.buss2   { border-color: #10B981; background: #D1FAE5; color: #065F46; }
.avail-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 500; }
.avail-ok   { background: #D1FAE5; color: #065F46; }
.avail-busy { background: #FEE2E2; color: #991B1B; }
.conflict-note { background: #FEF3C7; border: 1px solid #F59E0B; border-radius: var(--radius-sm);
                 padding: 6px 9px; font-size: 10px; color: #92400E; margin-bottom: 8px; display: none; }
.conflict-note.show { display: block; }
.empty-note { font-size: 11px; color: var(--text3); font-style: italic; padding: 6px 0; }
.res-filter { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rf { padding: 3px 8px; border-radius: 20px; font-size: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text3); cursor: pointer; }
.rf.on.rk  { background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
.rf.on.rb1 { background: #DBEAFE; color: #1E40AF; border-color: #3B82F6; }
.rf.on.rb2 { background: #D1FAE5; color: #065F46; border-color: #10B981; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .topbar { padding: 8px 10px; }
  .mtab { padding: 5px 8px; font-size: 11px; }
  .cr-grid { grid-template-columns: repeat(2,1fr); }
}