body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f9fc;
  color: #0f172a;
  margin: 0;
}

.dashboard {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 20em;
  background: #0f172a;
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.main {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.card {
  background: #fff;
  color: inherit;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.brand h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem
}

.time-small {
  font-size: 0.9rem;
  opacity: 0.9
}

.time-small .small {
  margin-top: 0.5rem
}

/* uniform time item styling */
.time-small .time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.time-small .label {
  color: rgba(255, 255, 255, 0.8);
  margin-right: 0.5rem;
}

.time-small #time,
.time-small #week {
  font-weight: 600
}

.controls {
  margin-top: 1rem
}

.controls .primary {
  background: #2563eb;
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px
}

.controls .card {
  margin-top: 0.75rem;
  padding: 0.75rem
}

.projects {
  margin-top: 1rem;
}

.projects ul {
  list-style: none;
  padding-left: 0;
  max-height: 40vh;
  overflow-y: auto
}

.projects li {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

/* Layout each project row with label and small edit button */
.projects li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-label {
  flex: 1;
}

/* Make the project edit button visually match entry edit buttons */
.project-edit-btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #cedfff;
  cursor: pointer;
  color: #000000;
}

.project-edit-btn:hover { filter: brightness(0.98); }

/* sidebar cards should blend with dark sidebar */
.sidebar .card {
  background: transparent;
  color: inherit;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0.75rem;
}

/* make form controls in sidebar have consistent height and styling */
.sidebar .card input,
.sidebar .card select {
  height: 35px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
  /* lighter input background */
  color: #fff;
  box-sizing: border-box;
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar .card input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

option {
  color: #000000;
}

.time-selects select {
  min-width: 48px;
  width: 48px;
  padding: 6px 4px;
  text-align: center;
}

/* project select should fill available width */
#project-select {
  width: 100%;
}

.time-selects {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem
}

.form-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem
}

/* spacing between vertical form rows inside sidebar card */
.sidebar .card label {
  display: block;
  margin: 0.25rem 0 0.25rem 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
}

.sidebar .card input,
.sidebar .card select {
  margin-bottom: 0.75rem;
}

.sidebar .card .or {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.25rem 0;
}

#project-form > #project-name,
#project-form > #project-select,
#project-form > #entry-date {
  width: 100%;
}

#dayoff-form > input,
#dayoff-form > select,
select#dayoff-hours,
select#dayoff-minutes {
  width: 100%;
}

.time-selects>div {
  flex: 1;
}

.time-selects select {
  width: auto;
  margin-bottom: 0;
}

.main .card h2 {
  margin-top: 0
}

/* tabs */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem
}

.tab-button {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #111827;
  cursor: pointer
}

.tab-button.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb
}

.tab-content {}

.week-header {
  font-weight: 700;
  margin-bottom: 0.4rem
}

.week-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.4rem
}

.week-table thead th {
  text-align: left;
  padding: 0.5rem 1.0rem;
  background: #f8fafc;
  border-bottom: 1px solid #e6eef8
}

.week-table td {
  padding: 0.5rem 1.0rem;
  border-bottom: 1px solid #eef2ff
}

.week-table tbody tr td:first-child {
  font-weight: 600;
  width: 240px
}

/* highlight bottom-right grand total cell */
.week-table tbody tr:last-child td:last-child {
  font-weight: 700;
  background: #f8fafc;
}

/* make entire last row use same background as header */
.week-table tbody tr:last-child td {
  background: #f8fafc;
  font-weight: 700;
}

/* Summary / date-group styling */
.date-group {
  margin-bottom: 1rem;
  border: 1px solid #e6eef8;
}

.date-summary {
  display: flex;
  justify-content: space-between;
  /* padding: 0.5rem 0.75rem; */
  cursor: pointer;
  font-weight: 600
}

.projects-for-date {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.project-card {
  background: #f8fafc;
  padding: 0.5rem;
  border-radius: 6px
}

.project-title {
  font-weight: 700;
  margin-bottom: 0.25rem
}

.project-card ul {
  margin: 0;
  padding-left: 1rem
}

/* when date-group is inside sidebar or dark bg (not the case here), adjust card */
.date-group.card {
  background: #fff
}

/* week-group styles */
.week-group {
  margin-bottom: 0.5rem;
  border: 1px solid #e6eef8;
  border-radius: 8px;
  overflow: hidden
}

.week-summary {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #e7f3ff;
  font-weight: 700;
  cursor: pointer
}

.week-group details>.date-group {
  margin: 0;
  border: 0
}

/* group control buttons */
.group-btn {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  font-size: 0.85rem
}

.week-summary .week-title {
  display: inline-block
}

.week-summary .week-controls {
  display: inline-flex;
  align-items: center
}

.date-summary .date-controls {
  display: inline-flex;
  align-items: center
}

button {
  /* margin-top: 1rem; */
  padding: 0.5rem 1rem;
  border: none;
  background: #cedfff;
  color: #000000;
  border-radius: 6px;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

.hidden {
  display: none;
}

#project-form {
  margin-top: 1rem;
}

#project-form input {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #e6eef8;
  width: 100%;
}

/* make inputs/selects inside the edit modal match the project form styling */
#edit-modal input,
#edit-modal select {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #e6eef8;
  box-sizing: border-box;
  margin-bottom: 0.75em;
}

#project-cancel,
#edit-cancel {
  color: #000000
}

#projects-list {
  text-align: left;
  margin-top: 1rem;
}

#projects {
  padding-left: 1rem;
}

/* Removed Entry List (#summary) styling since Entry List tab is removed */


/* Modal styles */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.45);
  z-index: 40
}

.modal .modal-content {
  width: 420px;
  max-width: calc(100% - 40px);
}

.modal.hidden {
  display: none
}

.form-actions .danger {
  background: #dc2626
}

.form-actions .primary {
  background: #2563eb
}

.form-actions button {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: none;
  color: #ffffff;
}

.form-actions button#project-rename-cancel {
  color: #000000;
}

div#dayoff-form button#dayoff-cancel {
  color: #000000;
}

/* small inline edit/delete buttons for each entry */
.entry-controls {
  display: inline-flex;
  gap: 0.35rem;
  margin-left: 0.5rem
}

.entry-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  color: #000000;
}

.entry-btn.edit {
  background: #cedfff
}

.entry-btn.delete {
  background: #fccece;
  border-color: #fca5a5
}

/* Daily Summary List Styles */
.daily-entries-list {
  padding: 0.5rem;
}

.daily-entry-header,
.daily-entry-row {
  display: grid;
   /* columns: Project | Comment | Time | Duration | Update(actions) */
   grid-template-columns: 1fr 2fr 0.5fr 0.5fr 0.5fr;
  gap: 1rem;
  padding: 0.5rem;
  border-bottom: 1px solid #eef2ff;
  align-items: center;
}

 /* Ensure the Update column aligns its contents to the right */
 .daily-entry-row .entry-update,
 .daily-entry-header .entry-update {
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
 }
 
 /* Header: align last header cell to the right */
 .daily-entry-header span:last-child {
   justify-self: end;
   text-align: right;
 }
 
 /* Rows: make sure update cell hugs the right edge */
 .daily-entry-row .entry-update {
   justify-self: end;
 }

.daily-entry-header {
  font-weight: 600;
  /* color: #64748b; */
  font-size: 0.9rem;
  border-bottom: 2px solid #e2e8f0;
}

.daily-entry-row:last-child {
  border-bottom: none;
}

.entry-project {
  font-weight: 600;
}

.entry-time {
  /* color: #64748b;  */
  font-variant-numeric: tabular-nums;
}

.entry-duration {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entry-comment {
  /* color: #64748b; */
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}