/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  background: rgb(245, 245, 245);
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

h1, h2 {
  font-family: arboria, sans-serif;
}

h1, h2, h3 {
  margin: 0;
}

.h3 {
  margin-top: 8px;
}

a {
  color: #007bff;
}

/* Unstyled link except underline on hover */
a.unstyled-link {
  text-decoration: none;
  color: inherit;
}

a.unstyled-link:hover {
  text-decoration: underline;
}

.btn-icon {
  appearance: none;
  background: none;
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #000;
  cursor: default;
  display: block;
  font-size: 13px;
  line-height: 16px;
  padding: 5px;
  text-decoration: none;
  transition: background 0.2s, border 0.2s;
  width: auto;

  img {
    display: block;
    height: 16px;
  }
}

.btn-with-text {
  background: #fafafa;
  border-color: #ddd;
  display: inline-flex;
  gap: 6px;
  padding: 6px 11px 6px 8px;
}

.btn-icon:hover:not(.btn-current) {
  background: #eee;
  border: 1px solid #ccc;
}

.btn-current {
  background: #fff;
  border: 1px solid #bbb;
}

.btn-cancel,
.btn-save {
  padding: 5px 6px;
}

.btn-timesheet {
  padding: 5px 7px;
}

.avatar {
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-family: monaco, monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 4px;
}

.assignment-card {
  align-items: center;
  background: #fff;
  border-radius: 3px;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  padding: 3px 6px;

  > div {
    padding: 3px;
  }
}

.assignment-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

.assignment-name {
  white-space: nowrap;
}

.billingTargets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.billingTarget-card {
  border-left: 3px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  max-width: 200px;

  h4 {
    margin: 0;
  }
}

.billingTarget-amount {
  font-size: 18px;
  font-weight: bold;
  margin: 6px 0;
  text-align: center;
}

.billingTarget-description {
  font-size: 12px;
}

.billingTarget-date {
  font-size: 12px;
}

.billingTarget-billed img {
  margin-right: 1px;
}

.holidays {
  margin-top: 12px;
}

.holiday-card {
  align-items: center;
  background: #fff;
  border-left: 3px solid #fff;
  display: flex;
  max-width: 400px;

  > div {
    padding: 10px;
  }
}

.holiday-chipNotApproved {
  border-left: 3px solid magenta;
}

.holiday-chipException {
  border-left: 3px solid cyan;
}

.holiday-chipBankHoliday {
  border-left: 3px solid lime;
}

.holiday-backgroundCurrent {
  background: yellow;
}

.holiday-backgroundUpcoming {
  background: lightyellow;
}

.holiday-avatar {
  align-items: center;
  display: flex;
  flex-basis: 15%;
}

.holiday-takeOn {
  flex-basis: 35%;
}

.holiday-exceptionReason {
  color: #666;
  font-size: 12px;
}

.holiday-amount {
  flex-basis: 25%;
  text-align: center;
}

.holiday-actions {
  align-items: center;
  flex-basis: 25%;
  justify-content: flex-end;
  display: flex;
  gap: 6px;
}

.holiday-form {
  flex-basis: 100%;

  form {
    display: flex;
    justify-content: space-between;
  }
}

.holiday-summary {
  background: #fff;

  td, th {
    padding: 8px;
  }
}

.home-sections {
  display: flex;
  gap: 1px;
  margin-bottom: 1px;

  > div {
    background: #fafafa;
    padding: 16px 24px;
  }
}

.billSummary {
  background: #fafafa;
  margin: 8px;
  padding: 8px 16px;
}


.form-field {
  label {
    color: #666;
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
  }
}

.pill-select {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin: 0 auto;
  width: 300px;
}

.pill-selectItem {
  align-items: center;
  background: #fff;
  border: 1px solid #fff;
  display: flex;
  flex: 1 1 0;
  font-weight: bold;
  justify-content: center;
  transition: all 0.2s;
}

.pill-selectItem a {
  box-sizing: border-box;
  color: #000;
  cursor: default;
  display: block;
  font-weight: normal;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.pill-selectItem:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pill-selectItem:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pill-selectItem:hover:has(a) {
  background: #eee;
  border: 1px solid #ccc;
}

.header {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 8px;

  h1 {
    font-size: 24px;
    margin: 0;
    text-align: center;
  }

  > div {
    flex-basis: 33.333%;
  }
}

.header-left {
  display: flex;
  gap: 8px;
}

.header-right {
  display: flex;
  justify-content: flex-end;
}

.main-menu {
  align-items: center;
  display: flex;
  height: 80vh;
  justify-content: center;
}

.newSessionForm {
  background: #fff;
  display: block;
  margin: 64px auto;
  max-width: 400px;
  padding: 16px;

  .form-field {
    margin-bottom: 16px;
  }

  input {
    box-sizing: border-box;
    max-width: 100%;
  }
}

.company-card {
  background: #fff;
  margin-top: 12px;

  > div {
    padding: 10px;
  }
}

.company-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

.project-card {
  background: #fff;
  margin-top: 12px;

  > div {
    padding: 10px;
  }
}

.project-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

.task-card {
  background: #fff;
  margin-top: 12px;

  > div {
    padding: 10px;
  }
}

.task-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

.task-timesheetEntry {
  display: flex;
  gap: 6px;
  margin: 3px 0;
}

.timesheet-week {
  display: flex;
  gap: 1px;
  margin-top: 12px;
  width: 100%;
}

.timesheet-calendar {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 12px;
  width: 100%;
}

.timesheet-day {
  background: #fff;
  flex-grow: 1;
  padding: 10px;
}

.timesheet-day:nth-child(7n+5),
.timesheet-day:nth-child(7n+6),
.timesheet-day:nth-child(7n+7) {
  background: #fbfbfb;
}

.timesheet-dayHeader {
  text-align: right;
}

.timesheet-dayName {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 3px;
}

.timesheet-dayTotal {
  border-top: 1px solid #f3f3f3;
  font-size: 13px;
  font-weight: bold;
  margin: 16px auto;
  padding-top: 8px;
  text-align: center;
  width: 96px;
}

.timesheet-date {
  border-bottom: 1px solid #ddd;
  color: #666;
  font-size: 12px;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.timesheet-card {
  border-left: 3px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 3px 0;
  padding: 6px;
}

.timesheet-header {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-bottom: 3px;
}

.timesheet-time {
  margin-top: -2px;
}

.timesheet-minutes {
  font-size: 12px;
  font-weight: bold;
}

.timesheet-timeRange {
  color: #666;
  font-size: 12px;
}

.timesheet-description {
  font-size: 12px;
  margin-bottom: 3px;
}

.timesheet-footer {
  display: flex;
  justify-content: space-between;
}

.timesheet-actions {
  align-items: center;
  flex-basis: 25%;
  justify-content: flex-end;
  display: flex;
  gap: 6px;
}

.user-card {
  background: #fff;
  margin-top: 12px;

  > div {
    padding: 10px;
  }
}

.user-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

@media (hover: hover) {
  .hideable-actions {
    visibility: hidden;
  }

  .reveal-actions:hover .hideable-actions {
    visibility: visible;
  }
}

.feature-card {
  background: #fff;
  margin-top: 12px;

  > div {
    padding: 10px;
  }
}

.feature-actions {
  align-items: center;
  display: flex;
  flex-basis: 25%;
  gap: 6px;
  justify-content: flex-end;
}

.target {
  font-weight: bold;
}

.targetSafe {
  color: green;
}

.targetWarning {
  color: orange;
}

.targetDanger {
  color: red;
}

.orderLayout {
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 297mm;
  justify-content: space-between;
  margin: 32px auto;
  padding: 25.4mm 31.7mm;
  width: 210mm;
}

.orderLayout h2 {
  border-bottom: 0.5pt solid #000;
  font-size: 14pt;
  padding-bottom: 4pt;
  margin-bottom: 6pt;
}

.orderLayout-logo {
  margin: 0 auto;
  width: 75mm;
}

.orderLayout-heading {
  font-size: 16pt;
  margin-bottom: 12pt;
  margin-top: 0;
  text-align: center;
}

.orderLayout-details {
  display: flex;
  gap: 24pt;
  justify-content: space-between;
  margin-bottom: 18pt;
}

.orderLayout table {
  border-collapse: collapse;
  width: 100%;
}

.orderLayout th,
.orderLayout td {
  padding: 6pt;
}

.orderLayout th:first-child {
  text-align: left;
}

.orderLayout th:first-child,
.orderLayout td:first-child {
  padding-left: 0;
}

.orderLayout th:last-child,
.orderLayout td:last-child {
  padding-right: 0;
}

.orderLayout thead th {
  border-bottom: 0.5pt solid #000;
}

.orderLayout td.qty {
  text-align: center;
}

.orderLayout td.cost,
.orderLayout th.cost {
  text-align: right;
}

.orderLayout-bottomDetails {
  display: flex;
  gap: 24pt;
  margin-bottom: 12pt;
}

.orderLayout-bottomDetails > div {
  flex-basis: 50%;
}

.orderLayout-footer {
  border-top: 0.5pt solid #000;
  text-align: center;
}

.orderLayout-paymentAmount {
  color: #54ae33;
  font-size: 18pt;
  margin: 12pt auto;
  text-align: left;
}

/* Flash messages */
.flash {
  padding: 12px 16px;
  margin: 8px;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
}

.flash-notice {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.flash-alert {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.flash-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.line-break {
  border-bottom: 1px solid #ddd;
  margin: 12px 0;
}

.userTimesheet-info .percentage {
  border-radius: 3px;
  padding: 2px 8px;
}

.userTimesheet-health-poor .percentage {
  border-left: 3px solid #dc2626;
  background-color: #fecaca;
}

.userTimesheet-health-average .percentage {
  border-left: 3px solid #ea580c;
  background-color: #fed7aa;
}

.userTimesheet-health-good .percentage {
  border-left: 3px solid #0891b2;
  background-color: #cffafe;
}

.userTimesheet-health-excellent .percentage {
  border-left: 3px solid #16a34a;
  background-color: #dcfce7;
}