/* ======================================
   Admin CSS – strukturert og ryddig
   Seksjoner:
   1) Oppgaveliste (rad, tabell, ikoner, knapper)
   2) Base UI (kort, rutenett, knapper, modal, skjema)
   ====================================== */

/* ikon + tittel på samme linje med “tab-avstand” */
.task-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Repeat chip (weekly / biweekly) – toned down */
.chip-repeat{
  background: rgba(245,158,11,.12); /* soft amber tint */
  color: #f59e0b;                  /* amber text */
  border: 1px solid #a16207;       /* dark amber border for contrast */
}
/* --- Oppgaveliste / celler og ikoner --- */
.small-icon{
  width:36px; height:36px; vertical-align:-6px; margin-right:4px;
  object-fit: contain;
}
@media(min-width:860px){
  .small-icon{ width:40px; height:40px; vertical-align:-7px; }
}

.task-title{
  vertical-align: middle;
  font-size: 16px; /* larger, mobile-first */
}
@media(min-width:860px){
  .task-title{ font-size: 18px; }
}

/* Late marker badge – outline icon after title (no background) */
.late-badge{
  display:inline-flex;
  align-items:center;
  margin-left:8px; /* space after title */
  font-size:1.2em; /* slightly larger than text */
  line-height:1;
  color:#f59e0b; /* amber-500 */
}
.late-badge svg{ display:block; }

/* (unused) .task-line styles removed */

/* Quick link card */
.card-link{
  display:block;
  background: rgba(17,24,39,.85);
  border:1px solid var(--b);
  border-radius:14px;
  padding:14px;
  color:#e5e7eb;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-link:hover{
  transform: translateY(-2px);
  border-color:#334155;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.card-link-title{ font-weight:800; font-size:18px; margin-bottom:4px; }
.card-link-desc{ color:#9ca3af; font-size:13px; }

/* Collapsible card */
.card.card-collapsible .card-header{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; padding:4px 0;
}
.card.card-collapsible .card-header::after{
  content:'▾'; opacity:.8; transition: transform .15s ease;
}
.card.card-collapsible.collapsed .card-header::after{ transform: rotate(-90deg); }
.card.card-collapsible.collapsed .card-body{ display:none; }

/* --- Oppgaveliste / Ferdig-knapp --- */
.btnAdminDone {
  padding: 3px 5px;      /* ~30% mindre enn standard 8x12 */
  font-size: 10px;       /* ca 30% mindre enn 16px-baseline */
  line-height: 1;
  border-radius: 10px;
  background: #16a34a;
  color: #052e16;
  border: 1px solid #14532d;
  cursor: pointer;
  white-space: nowrap;
}

/* --- Oppgaveliste / Tabelloppsett --- */
#tasksToday table { 
  border-collapse: collapse; 
}

#tasksToday table th,
#tasksToday table td { 
  padding: 8px 10px; 
  vertical-align: middle; 
}

.task-row td { 
  padding: 8px 10px; 
  vertical-align: middle; 
}

/* Add spacing above the task list */
#tasksToday{
  margin-top: 16px;
}

.task-action { 
  text-align: center; 
  width: 100px; 
}

.task-action .btnAdminDone { 
  display: inline-block; 
}

.task-name { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
}

/* Swipe-to-actions (admin tasks) */
.swipe-cell{ position: relative; padding:0; }
.swipe-wrap{ position: relative; overflow: hidden; }
.swipe-content{ position: relative; background: var(--card); will-change: transform; transition: transform .18s ease; padding: 8px 10px; z-index:2; }
.swipe-actions{ position:absolute; top:0; right:-160px; width:160px; height:100%; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; padding: 6px; background: transparent; z-index:1; }
.swipe-actions .btn{ height: 32px; padding: 0 10px; white-space: nowrap; }
.swipe-wrap.open .swipe-content{ transform: translateX(-160px); }
.swipe-wrap.open .swipe-actions{ right:0; }

/* Mobile stacked task cards */
@media (hover: none) and (pointer: coarse) {
  .task-list { display: grid; gap: 10px; }
  .task-card { background: var(--card); border: 1px solid #1f2937; border-radius: 10px; overflow: hidden; }
  .task-card .swipe-content { padding: 10px 12px; }
  .task-card .card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .task-card .card-title { display:flex; align-items:center; gap:10px; font-weight:600; }
  .task-card .card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .task-card .card-assignees { margin-top:8px; }
  .task-card .card-actions { display:flex; justify-content:flex-end; margin-top:10px; }
  /* Ensure full width inside cards and avoid horizontal scroll */
  .task-card .swipe-content{ width:100%; box-sizing:border-box; }
}

/* === Base UI (flyttet fra admin.html) === */
:root { 
  --card:#111827; 
  --muted:#9ca3af; 
  --b:#1f2937; 
}

.grid {
  display:grid;
  gap:16px
}

@media(min-width:860px){ .grid{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--card);padding:16px;border-radius:10px;color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:8px;cursor:pointer;border:none;font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: box-shadow .15s ease}
.btn:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.45) }
.btn:active{ box-shadow: 0 2px 6px rgba(0,0,0,.38) }
.btn-outline{background:transparent;border:1px solid #334155;color:#e5e7eb}
.btn-green{background:#10b981;color:#fff}
.btn-red{background:#ef4444;color:#fff}
.muted{color:var(--muted);font-size:13px}
/* (unused) .ansvarlig removed */
.chip{display:inline-block;padding:6px 10px;border:1px solid var(--b);border-radius:999px; font-weight: bold; color:#9ca3af;font-size:12px}
/* Ensure toned style wins over base .chip */
.chip.chip-repeat{ color:#f59e0b !important; background:rgba(245,158,11,.12) !important; border-color:#a16207 !important; }

/* Member chips: subtle colored variants with strong text contrast */
.chip-member{ font-weight:700 }
.chip-m0{ background:rgba(59,130,246,.12); color:#60a5fa; border-color:#1d4ed8; }   /* blue */
.chip-m1{ background:rgba(34,197,94,.12);  color:#4ade80; border-color:#166534; }   /* green */
.chip-m2{ background:rgba(236,72,153,.12); color:#f472b6; border-color:#9d174d; }   /* pink */
.chip-m3{ background:rgba(234,179,8,.12);  color:#f59e0b; border-color:#a16207; }   /* amber */
.chip-m4{ background:rgba(99,102,241,.12); color:#a5b4fc; border-color:#3730a3; }   /* indigo */
.chip-m5{ background:rgba(16,185,129,.12); color:#34d399; border-color:#065f46; }   /* emerald */
.chip-m6{ background:rgba(244,63,94,.12);  color:#fb7185; border-color:#991b1b; }   /* rose */
.chip-m7{ background:rgba(20,184,166,.12); color:#5eead4; border-color:#115e59; }   /* teal */

/* Unified title style for greeting and card titles: match h1 */
h1,
.section-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
  font-size: 26px;
}
@media(min-width:860px){
  h1,
  .section-title{ font-size: 30px; }
}


.chipMe{ /* Logged-in user chip */
  /* Customize freely: background, border, color, etc. */
  background: #0b2a3a;
  border-color: #14532d;
  color: #e5e7eb;
  font-size: larger;
}


.Ingen{display:inline-block;padding:6px 10px;border:1px solid var(--b);border-radius:999px;color:#9ca3af;font-size:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}
.sheet{background:#0b1020;border:1px solid var(--b);border-radius:16px;width:100%;max-width:560px;padding:16px;color:#fff}
.field{margin:10px 0}
.field label{display:block;margin-bottom:6px;color:#9ca3af;font-size:13px}
.field input,.field select,.field textarea{width:100%;background:#0b1220;border:1px solid var(--b);border-radius:10px;color:#e5e7eb;padding:10px 12px}
.small{font-size:12px;color:#9ca3af}
.item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:#0b1020}
@media(max-width:520px){ .sheet{max-width:460px} }

/* (unused) .btn-settings styles removed */
/* Ensure anchors styled as buttons have no underline */
a.btn, a.btn:hover, a.btn:active, a.btn:focus {
  text-decoration: none;
}