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

:root {
  --clr-bg: #f8f9fa;
  --clr-surface: #ffffff;
  --clr-primary: #1e88e5;
  --clr-primary-light: #e3f2fd;
  --clr-secondary: #546e7a;
  --clr-text: #212529;
  --clr-text-muted: #6c757d;
  --clr-border: #dee2e6;
  --clr-danger: #dc3545;
  --clr-success: #28a745;
  --radius: 16px;
  --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --prio-1: #28a745; /* Normal */
  --prio-2: #ffc107; /* Høj */
  --prio-3: #dc3545; /* Kritisk */
  --gap: 1.25rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--clr-bg); font-family: 'Inter', sans-serif; color: var(--clr-text); padding: 2rem; }
.layout-container { display: grid; grid-template-columns: 1fr; max-width: 1400px; margin: 0 auto; gap: var(--gap); }
@media (min-width: 1024px) { .layout-container { grid-template-columns: 400px 1fr; } }
.card { background: var(--clr-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); padding: var(--gap); }
h1, h2 { color: var(--clr-text); margin-bottom: var(--gap); text-align: center; font-weight: 700; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.75rem; font-weight: 600; }
#newForm { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; display: block; }
input, select, textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--clr-border); border-radius: 10px; font-size: 1rem; background: var(--clr-bg); font-family: 'Inter', sans-serif; transition: all 0.2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--clr-primary); }
textarea { resize: vertical; }
textarea#subject { min-height: 58px; resize: none; overflow-y: hidden; }
button { background-image: linear-gradient(to right, #2979ff 0%, #1e88e5 51%, #2979ff 100%); background-size: 200% auto; color: #fff; border: none; border-radius: 10px; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
button:hover { background-position: right center; }
.form-error-message { font-size: 0.85rem; color: var(--clr-danger); padding-left: 0.5rem; display: block; height: 1rem; margin-top: 0.25rem; }
.search-wrapper { position: relative; }
.search-results-container { display: none; position: absolute; width: 100%; background-color: white; border: 1px solid var(--clr-border); border-top: none; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-sm); max-height: 300px; overflow-y: auto; z-index: 1000; }
.search-results-container.visible { display: block; }
.search-result-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--clr-border); font-size: 0.9rem; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.highlighted { background-color: var(--clr-primary-light); }
.search-result-item small { display: block; color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.sidebar-list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--clr-border); font-size: 0.95rem; }
.sidebar-list-item:last-child { border-bottom: none; }
.sidebar-list-item a { color: var(--clr-text); text-decoration: none; font-weight: 500; }
.sidebar-list-item a:hover { color: var(--clr-primary); }
.sidebar-list-date { font-size: 0.9rem; color: var(--clr-text-muted); font-weight: 500; background-color: var(--clr-bg); padding: 0.2rem 0.5rem; border-radius: 6px; }
.empty-sidebar-item, .empty-list { font-style: italic; color: var(--clr-text-muted); text-align: center; padding: 1rem; }
.main-controls { display: flex; gap: 1rem; padding-bottom: 1rem; }
.main-controls .button { background: var(--clr-secondary); }

/* === NYT OPGAVEKORT-DESIGN === */
#todoList { list-style: none; margin:0; padding:0; display: flex; flex-direction: column; gap: var(--gap); }
.task-card { background: var(--clr-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border); padding: var(--gap); display: flex; flex-direction: column; gap: 1rem; }
.task-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.task-subject { font-size: 1.2rem; font-weight: 600; line-height: 1.4; word-break: break-word; flex-grow: 1; }
.task-tags { display: flex; gap: 0.5rem; flex-shrink: 0; }
.badge { padding: 0.25rem 0.75rem; border-radius: 100px; color: white; font-size: 0.8rem; font-weight: 500; }
.priority-1 { background-color: var(--prio-1); }
.priority-2 { background-color: var(--prio-2); }
.priority-3 { background-color: var(--prio-3); }
.source-badge { background-color: var(--clr-secondary); }
.task-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; font-size: 0.9rem; color: var(--clr-text-muted); padding-bottom: 1rem; border-bottom: 1px solid var(--clr-border); }
.meta-item a { color: var(--clr-primary); text-decoration: none; font-weight: 600; }
.meta-item a:hover { text-decoration: underline; }
.task-notes textarea { width: 100%; border: 1px solid var(--clr-border); border-radius: 8px; padding: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; resize: vertical; min-height: 80px; }
.task-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--clr-bg); padding: 0.30rem 1rem; border-radius: 10px; }
.timer-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem; /* Reduceret fra 1.75rem */
  font-weight: 700;
  color: var(--clr-primary);
}
.task-actions { display: flex; gap: 0.5rem; }

.task-actions .button, .task-actions button {
  width: 2.0rem;  /* Reduceret fra 3.25rem */
  height: 2.0rem; /* Reduceret fra 3.25rem */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.20rem; /* Reduceret fra 1.5rem */
  padding: 0;
  border-radius: 2px;
  background-image: none;
  background-color: var(--clr-surface);
  color: var(--clr-text-muted);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
  cursor:pointer;
  transition: all 0.3s;
}
.task-actions button:hover { background-color: var(--clr-primary-light); color: var(--clr-primary); }
.task-actions button:disabled { background-color: var(--clr-bg); color: var(--clr-border); cursor: not-allowed; }
.task-actions button.stop-btn { color: var(--clr-danger); }
.task-actions button.archive-btn { color: var(--clr-success); }
/* Tilføj disse klasser til din styles.css fil */

.task-actions button.edit-btn {
    color: var(--clr-secondary);
}

/* Styling for når et kort er i redigeringstilstand */
.task-card.is-editing {
    background-color: var(--clr-primary-light);
    box-shadow: 0 0 0 2px var(--clr-primary);
}

.task-card.is-editing .task-notes textarea {
    background-color: var(--clr-surface);
}

.edit-controls {
    display: flex;
    gap: 0.5rem;
}
/* Tilføj denne klasse til din styles.css fil */

.edit-timer-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-primary);
    border: none;
    background-color: var(--clr-primary-light);
    width: 100%;
    padding: 0;
    text-align: center;
    border-radius: 4px;
}

.edit-timer-input:focus {
    outline: 2px solid var(--clr-primary);
}

/* Tilføj disse klasser i bunden af din styles.css fil */

.deadline-progress {
    background-color: #e9ecef; /* Baggrundsfarven for den tomme del af baren */
    border-radius: 100px;
    height: 8px;
    width: 100%;
    margin-top: 0.5rem;
    overflow: hidden;
}

.deadline-progress-bar {
    height: 100%;
    border-radius: 100px;
    background-color: var(--clr-success); /* Grøn som standard (ikke presserende) */
    transition: width 0.4s ease-in-out;
}

.deadline-progress-bar.warning {
    background-color: #ffc107; /* Gul (advarsel) */
}

.deadline-progress-bar.urgent {
    background-color: var(--clr-danger); /* Rød (presserende) */
}
/* Tilføj i toppen af din .task-card klasse */
.task-card {
    transition: background-color 0.3s ease;
    /* ... dine andre styles ... */
}

/* Tilføj denne nye klasse i bunden af filen */
.task-card.is-timing {
    background-color: var(--clr-primary-light); /* Den lyseblå farve fra paletten */
}
/* Tilføj denne regel til din styles.css fil */

.dashboard-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #007BFF;
    text-decoration: none;
    border: 2px solid #007BFF;
    border-radius: 5px;
    background-color: transparent;
    transition: all 0.3s ease;
  }

  .dashboard-button:hover {
    color: white;
    background-color: #007BFF;
  }
</style>