/* ==================================================
   MOTIVATION WORKSPACE TRIAL
   COMPACT FLOW MODEL
================================================== */


/* --------------------------------------------------
   RESET
-------------------------------------------------- */

* {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;
}


body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    #f3f6f9;

  color:
    #172033;
}


/* --------------------------------------------------
   TOP BAR
-------------------------------------------------- */

.topbar {
  width: 100%;

  padding:
    16px
    24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  background:
    #172033;

  color:
    #ffffff;
}


.topbar h1 {
  margin: 0;

  font-size:
    22px;

  line-height:
    1.15;
}


.topbar p {
  margin:
    3px
    0
    0;

  font-size:
    13px;

  color:
    #c9d4e4;
}


.trial-badge {
  padding:
    6px
    11px;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #172033;

  font-size:
    11px;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* --------------------------------------------------
   MAIN
-------------------------------------------------- */

main {
  width: 100%;

  padding:
    20px;
}


/* --------------------------------------------------
   INTRO
-------------------------------------------------- */

.intro {
  margin-bottom:
    14px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}


.intro h2 {
  margin:
    0
    0
    4px;

  font-size:
    26px;

  color:
    #172033;
}


.intro p {
  margin: 0;

  max-width:
    720px;

  font-size:
    14px;

  line-height:
    1.45;

  color:
    #5c6676;
}


/* --------------------------------------------------
   NEW ENQUIRY PANEL
-------------------------------------------------- */

.new-enquiry-panel {
  margin-bottom:
    14px;
}


.new-enquiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom:
    12px;
}


.new-enquiry-header h3 {
  margin: 0;

  font-size:
    15px;

  color:
    #172033;
}


.new-enquiry-form {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  align-items:
    end;
}


.new-enquiry-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}


.new-enquiry-form label span {
  font-size:
    11px;

  font-weight:
    700;

  color:
    #465263;
}


.new-enquiry-form input {
  width: 100%;

  min-width: 0;

  height:
    34px;

  padding:
    6px
    8px;

  border:
    1px
    solid
    #cbd4df;

  border-radius:
    7px;

  background:
    #ffffff;

  color:
    #263247;

  font: inherit;

  font-size:
    12px;
}


.new-enquiry-form input:focus {
  outline:
    2px
    solid
    rgba(
      23,
      32,
      51,
      0.10
    );

  border-color:
    #8793a2;
}


.new-enquiry-actions {
  grid-column:
    1 / -1;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap:
    7px;

  margin-top:
    2px;
}


/* --------------------------------------------------
   FLOW BOARD
-------------------------------------------------- */

.flow-board {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        240px,
        1fr
      )
    );

  gap:
    12px;

  align-items:
    start;
}


/* --------------------------------------------------
   COLUMN
-------------------------------------------------- */

.flow-column {
  min-width: 0;

  background:
    #e9eef4;

  border:
    1px
    solid
    #d5dde7;

  border-radius:
    12px;

  overflow:
    hidden;
}


.column-header {
  min-height:
    60px;

  padding:
    11px
    12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background:
    #ffffff;

  border-bottom:
    1px
    solid
    #d5dde7;
}


.column-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}


.column-header h3 {
  margin: 0;

  font-size:
    15px;

  line-height:
    1.2;

  color:
    #172033;
}


.column-number {
  width:
    25px;

  height:
    25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex:
    0
    0
    auto;

  border-radius:
    50%;

  background:
    #172033;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    700;
}


.flow-count {
  min-width:
    24px;

  height:
    24px;

  padding:
    0
    7px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius:
    999px;

  background:
    #edf2f7;

  color:
    #465263;

  font-size:
    11px;

  font-weight:
    700;
}


/* --------------------------------------------------
   CARD LIST
-------------------------------------------------- */

.flow-card-list {
  min-height:
    400px;

  padding:
    8px;
}


/* --------------------------------------------------
   CARD
-------------------------------------------------- */

.flow-card {
  width: 100%;

  margin-bottom:
    7px;

  background:
    #ffffff;

  border:
    1px
    solid
    #d7dee8;

  border-radius:
    9px;

  box-shadow:
    0
    1px
    3px
    rgba(
      23,
      32,
      51,
      0.05
    );

  overflow:
    hidden;
}


/* --------------------------------------------------
   CARD SUMMARY
-------------------------------------------------- */

.card-summary {
  width: 100%;

  padding:
    9px
    10px;

  border:
    none;

  background:
    #ffffff;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.card-summary:hover {
  background:
    #f8fafc;
}


.card-summary strong {
  display: block;

  margin-bottom:
    2px;

  font-size:
    14px;

  line-height:
    1.2;

  color:
    #172033;
}


.card-summary span {
  display: block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  line-height:
    1.25;

  color:
    #687486;
}


/* --------------------------------------------------
   CLOSED CARD
-------------------------------------------------- */

.card-work {
  display:
    none;
}


/* --------------------------------------------------
   OPEN CARD
-------------------------------------------------- */

.flow-card.open {
  border-color:
    #aebaca;

  box-shadow:
    0
    3px
    8px
    rgba(
      23,
      32,
      51,
      0.08
    );
}


.flow-card.open
.card-summary {
  background:
    #f7f9fc;

  border-bottom:
    1px
    solid
    #e0e6ed;
}


.flow-card.open
.card-work {
  display:
    block;

  padding:
    10px;
}


/* --------------------------------------------------
   GATE LIST
-------------------------------------------------- */

.gate-list {
  margin-bottom:
    10px;

  border-top:
    1px
    solid
    #e4e8ee;

  border-bottom:
    1px
    solid
    #e4e8ee;
}


.gate-row {
  min-height:
    39px;

  padding:
    7px
    1px;

  display: flex;
  align-items: center;
  gap: 8px;

  border-bottom:
    1px
    solid
    #eef1f4;

  font-size:
    12px;

  color:
    #263247;
}


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


.gate-row.complete {
  color:
    #334155;
}


.gate-status {
  width:
    19px;

  height:
    19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex:
    0
    0
    auto;

  border-radius:
    50%;

  background:
    #e7f3ea;

  color:
    #28683a;

  font-size:
    11px;

  font-weight:
    700;
}


/* --------------------------------------------------
   CHECKBOXES
-------------------------------------------------- */

.gate-row
input[type="checkbox"] {
  width:
    18px;

  height:
    18px;

  margin: 0;

  flex:
    0
    0
    auto;

  cursor:
    pointer;
}


/* --------------------------------------------------
   CHOICE ROWS
-------------------------------------------------- */

.choice-row {
  justify-content:
    space-between;

  gap:
    8px;
}


.production-choice {
  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    6px;
}


.step-name {
  font-weight:
    600;
}


.step-actions {
  display: flex;

  gap:
    5px;

  flex-wrap:
    wrap;
}


/* --------------------------------------------------
   STEP BUTTONS
-------------------------------------------------- */

.step-actions button {
  min-width:
    44px;

  padding:
    5px
    7px;

  border:
    1px
    solid
    #cbd4df;

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #334155;

  font: inherit;

  font-size:
    11px;

  font-weight:
    700;

  cursor:
    pointer;
}


.step-actions
button:hover {
  background:
    #f1f5f9;
}


.step-actions
button.active {
  border-color:
    #172033;

  background:
    #172033;

  color:
    #ffffff;
}


.step-actions
button.na-active {
  border-color:
    #8994a3;

  background:
    #eef1f5;

  color:
    #465263;
}


/* --------------------------------------------------
   CARD DETAIL
-------------------------------------------------- */

.card-detail {
  margin-top:
    6px;

  font-size:
    11px;

  line-height:
    1.4;

  color:
    #596577;
}


.card-detail b {
  color:
    #263247;
}


/* --------------------------------------------------
   DUE DATE
-------------------------------------------------- */

.due-row {
  margin-top:
    9px;

  padding:
    8px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:
    8px;

  background:
    #f7f9fb;

  border:
    1px
    solid
    #e1e6ed;

  border-radius:
    7px;
}


.due-row label {
  display: flex;
  align-items: center;
  gap:
    6px;

  min-width: 0;
}


.due-row b {
  white-space:
    nowrap;
}


.due-row
input[type="date"] {
  min-width:
    120px;

  max-width:
    135px;

  padding:
    5px
    6px;

  border:
    1px
    solid
    #cbd4df;

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #334155;

  font: inherit;

  font-size:
    11px;
}


.due-row
input[type="date"]:focus {
  outline:
    2px
    solid
    rgba(
      23,
      32,
      51,
      0.12
    );

  border-color:
    #7c8999;
}


/* --------------------------------------------------
   REMINDER STATE
-------------------------------------------------- */

.reminder-state {
  max-width:
    105px;

  font-size:
    9px;

  line-height:
    1.2;

  text-align:
    right;

  color:
    #7c8796;
}


.reminder-state.overdue {
  color:
    #a23c3c;

  font-weight:
    700;
}


.reminder-state.due-today {
  color:
    #9a651c;

  font-weight:
    700;
}


.reminder-state.clear {
  color:
    #2f6f45;
}


/* --------------------------------------------------
   CARD FOOTER
-------------------------------------------------- */

.card-footer {
  margin-top:
    10px;

  padding-top:
    9px;

  border-top:
    1px
    solid
    #e3e8ee;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    6px;
}


.gate-message {
  min-width: 0;

  flex:
    1;

  text-align:
    center;

  font-size:
    10px;

  line-height:
    1.25;

  color:
    #7a4650;
}


/* --------------------------------------------------
   MOVE / BACK / CANCEL BUTTONS
-------------------------------------------------- */

.move-button,
.back-button {
  padding:
    6px
    8px;

  border:
    none;

  border-radius:
    6px;

  font: inherit;

  font-size:
    11px;

  font-weight:
    700;

  cursor:
    pointer;

  white-space:
    nowrap;
}


.move-button {
  background:
    #172033;

  color:
    #ffffff;
}


.back-button {
  background:
    #edf1f5;

  color:
    #384457;

  border:
    1px
    solid
    #d4dce6;
}


.cancel-button {
  background:
    #ffffff;

  color:
    #8b3f46;

  border:
    1px
    solid
    #d8b9bc;
}


.cancel-button:hover {
  background:
    #f8eeee;
}


.move-button:hover:not(:disabled),
.back-button:hover {
  opacity:
    0.86;
}


.move-button:disabled {
  background:
    #c5cdd7;

  color:
    #f4f6f8;

  cursor:
    not-allowed;
}


.complete-button {
  background:
    #2f6f45;
}


/* --------------------------------------------------
   FINAL GATE
-------------------------------------------------- */

.final-gate {
  font-weight:
    700;
}


/* --------------------------------------------------
   READY STATE
-------------------------------------------------- */

.flow-card.ready-to-move {
  border-color:
    #86a991;
}


.flow-card.ready-to-move
.gate-message {
  color:
    #2f6f45;

  font-weight:
    700;
}


/* --------------------------------------------------
   OVERDUE CARD
-------------------------------------------------- */

.flow-card.overdue-card {
  border-color:
    #d4a4a7;
}


.flow-card.overdue-card
.card-summary {
  background:
    #fffafa;
}


/* --------------------------------------------------
   STATUS AREAS
-------------------------------------------------- */

.completed-area {
  margin-top:
    12px;

  padding:
    11px
    13px;

  background:
    #ffffff;

  border:
    1px
    solid
    #d7dee7;

  border-radius:
    9px;
}


.completed-area h3 {
  margin:
    0
    0
    3px;

  font-size:
    13px;

  color:
    #172033;
}


.completed-area p {
  margin: 0;

  font-size:
    11px;

  color:
    #697586;
}


/* --------------------------------------------------
   REMINDERS AREA
-------------------------------------------------- */

#reminders-area {
  margin-top:
    18px;
}


#trial-reminders {
  margin-top:
    8px;
}


.trial-reminder {
  padding:
    8px
    9px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:
    10px;

  background:
    #fff8f8;

  border:
    1px
    solid
    #e4c7ca;

  border-radius:
    7px;

  font-size:
    11px;

  color:
    #713b41;
}


.trial-reminder
+ .trial-reminder {
  margin-top:
    6px;
}


.trial-reminder strong {
  color:
    #532f34;
}


.trial-reminder span {
  color:
    #8a4c54;
}


/* --------------------------------------------------
   COMPLETED AREA
-------------------------------------------------- */

#completed-area {
  opacity:
    0.85;
}


/* --------------------------------------------------
   CANCELLED AREA
-------------------------------------------------- */

#cancelled-area {
  opacity:
    0.85;
}


#cancelled-area h3 {
  color:
    #71434a;
}


/* --------------------------------------------------
   HIDDEN
-------------------------------------------------- */

.is-hidden {
  display:
    none
    !important;
}


/* --------------------------------------------------
   SMALLER SCREEN
-------------------------------------------------- */

@media (
  max-width: 1050px
) {

  main {
    overflow-x:
      auto;
  }


  .flow-board {
    min-width:
      980px;

    grid-template-columns:
      repeat(
        4,
        235px
      );
  }


  .new-enquiry-form {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (
  max-width: 700px
) {

  .topbar {
    padding:
      13px
      15px;
  }


  .topbar h1 {
    font-size:
      19px;
  }


  main {
    padding:
      15px
      11px;
  }


  .intro {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .intro h2 {
    font-size:
      23px;
  }


  .new-enquiry-form {
    grid-template-columns:
      1fr;
  }


  .new-enquiry-actions {
    grid-column:
      1;
  }


  .flow-board {
    min-width:
      900px;

    grid-template-columns:
      repeat(
        4,
        215px
      );

    gap:
      9px;
  }


  .flow-card-list {
    padding:
      6px;
  }


  .card-summary {
    padding:
      8px
      9px;
  }


  .flow-card.open
  .card-work {
    padding:
      9px;
  }


  .choice-row {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .due-row {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .due-row label {
    justify-content:
      space-between;
  }


  .due-row
  input[type="date"] {
    min-width:
      0;

    max-width:
      none;

    width:
      100%;
  }


  .reminder-state {
    max-width:
      none;

    text-align:
      left;
  }


  .card-footer {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:
      6px;
  }


  .gate-message {
    grid-column:
      1 / -1;

    grid-row:
      1;

    text-align:
      left;
  }


  .back-button,
  .cancel-button,
  .move-button {
    width:
      100%;
  }


  .trial-reminder {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

}