.underline-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    font-size: 16px;
    background: transparent;
    outline: none;
  }

  .underline-input:focus {
    border-bottom-color: #000;
    /* or your theme color */
  }

  .underline-input::placeholder {
    color: #999;
  }


  .commission-wrap-div {
    background: var(--grey-100);
    min-height: calc(60vh - var(--header-height)) !important;
    padding: var(--minim) !important;
  }

  .commission-heading {
    color: var(--mb);
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 540;
    line-height: 24px;
    /* 150% */
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 0;

  }

  /* commission page (show) */
  .commission-card .notification-content {
    display: flex;
    align-items: center;
    /* keeps avatar + text vertically aligned */
    gap: 10px;
    /* spacing between avatar and text */
  }

  .commission-section turbo-frame {
    display: contents;
    /* lets inner elements participate in the grid directly */
  }

  .notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* prevents avatar from squishing */
  }

  .notification-message {
    color: inherit;
    text-decoration: none;
    flex: 1;
    /* let text take remaining space */
  }

  .notification-time {
    color: inherit;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 540;
  }

  .commission-display {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .commission-display-actor {
    margin-bottom: 4px;
    color: var(--dc-greys-900);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 540;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: 1.4px;
    text-transform: uppercase;

  }

  .commission-display-title {
    flex-shrink: 1;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
  }

  .commission-display-title-profile-image {
    --size: 80px;
    height: var(--size);
    width: var(--size);
    object-fit: cover;
    border-radius: 50%;
  }

  .commission-section {
    padding: var(--minim);
    /*border: 1px solid var(--grey-200);*/
    border-radius: var(--quaver);
    margin-bottom: var(--minim);
    scroll-margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--minim);

    &[hidden=""] {
      display: none;
    }
  }

  /* Override for overview section to take full available width within dashboard */
  .commission-section.commissions-section-overview {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .new-commission-section.tab-section.default {
    display: grid;
  }

  .new-commission-section.default:has(~ .tab-section:target) {
    display: none;
  }



  .commission-section.tab-section.default {
    display: grid;
  }

  .commission-section.default:has(~ .tab-section:target) {
    display: none;
  }

  @media (min-width: 900px) {
    .commission-section {
      grid-template-columns: repeat(5, 1fr);
      column-gap: var(--minim);
    }

    /* Row 1: Commission Details (40%) | Commission Progress (60%) */
    .commission-section .commission-overview {
      grid-column: span 2;
    }

    .commission-section .commission-actions-steps-container {
      grid-column: span 3;
    }

    /* Row 2: Timeline (60%) | Check-in Video Call (40%) */
    .commission-section .commission-details-timeline {
      grid-column: span 3;
    }

    .commission-section .commission-details-video {
      grid-column: span 2;
    }
  }

  .commission-status-ul {
    margin: var(--crotchet) 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: var(--crotchet);
  }

  .commission-step {
    display: flex;
    align-items: center;
    gap: var(--quaver);

    .step-pip {
      display: inline-block;
      position: relative;
      height: 0.8em;
      width: 0.8em;
      border-radius: var(--quaver);
      border: 1px solid var(--fg);
    }

    &.complete>.step-pip::after {
      content: "";
      display: inline-block;
      width: 0.4em;
      height: 0.2em;
      border-bottom: 2px solid var(--fg);
      border-left: 2px solid var(--fg);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateY(-0.07em) rotate(-60deg);
    }
  }

  .commission-block p {
    margin-bottom: 1rem;
    /* or 10px, 12px, whatever you want */
  }

  /* Optional: remove margin from the last one */
  .commission-block p:last-child {
    margin-bottom: 40px;
  }

  .commission-brief-label,
  .commission-label {
    font-family: var(--font-sans);
    color: var(--dc-greys-900);
    font-size: 14px;
    font-style: normal;
    font-weight: 540;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .commission-image-preview {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
  }

  .commission-user-details-container {
    margin: var(--minim) 0;
  }

  .commission-detail {
    margin: var(--minim) 0;

    &>p {
      margin: 0;
    }
  }

  .commission-detail-question {
    font-style: italic;
    font-weight: 540;
  }

  /* correspondence stuff */
  .commission-correspondence {
    flex: 400px 1 1;
    display: flex;
    flex-direction: column;
    scroll-margin-top: 100px;
    overflow-y: scroll;
    margin-left: -16px;
    margin-right: -16px;

    &[hidden=""] {
      display: none;
    }
  }

  @media only screen and (min-width: 640px) {
    .commission-correspondence-container {
      margin: 0;
    }
  }

  /*
@media (min-width: 900px) {
  .commission-section {
    grid-template-columns: 40% 60%;
  }
}*/


  /* Layout wrapper */
  .commission-actions-layout {
    display: flex;
    flex-direction: column;
    gap: var(--semibreve);
  }

  /* First row: side-by-side sections */
  .commission-actions-row {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
  }

  /* Left & right sections in the first row */
  .commission-actions-right {
    flex: 0 0 28.7%;
    box-sizing: border-box;
  }

  .commission-actions-left {
    flex: 0 0 69%;
    box-sizing: border-box;
  }

  .commission-actions-summary-right {
    flex: 0 0 62.7%;
    box-sizing: border-box;
  }

  .commission-actions-summary-left {
    flex: 0 0 35%;
    box-sizing: border-box;
  }


  /* Full-width section below */
  .commission-actions-full {
    flex: 0 0 100%;
    box-sizing: border-box;
  }

  /* Responsive behavior for mobile */
  @media (max-width: 900px) {
    .commission-actions-row {
      flex-direction: column;
    }

    .commission-actions-summary-left,
    .commission-actions-summary-right,
    .commission-actions-left,
    .commission-actions-right {
      flex: 0 0 100%;
    }
  }






  @media (min-width: 900px) {
    .commissions-section-overview {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Equal columns 1:1 ratio */
      grid-template-rows: 1fr 1fr;
      gap: var(--minim);
      align-items: stretch;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
      /* Include padding/border in width calculation */
    }

    /* Left side — Active Commissions */
    .commissions-section-overview .commission-active {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      border-radius: var(--quaver, 8px);
      padding: 16px 24px;
      overflow-y: auto;
      min-height: 0;
      /* allow flexing */
      box-sizing: border-box;
      max-height: 655px;
    }

    /* Right top — Quick Actions */
    .commissions-section-overview .commission-quick {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      border-radius: var(--quaver, 8px);
      padding: 16px 24px;
      overflow-y: auto;
      min-height: 0;
      /* allow flexing */
      box-sizing: border-box;
    }

    /* Right bottom — Insights */
    .commissions-section-overview .commission-insights {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      border-radius: var(--crotchet);
      background-color: var(--grey-100);
      padding: 16px 24px;
      overflow-y: auto;
      margin-top: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      /* Stretch to match left column height */
    }

    .commissions-section-overview .commission-insights .responsive-heading {
      color: var(--mb);
      /* Uppercase/Semibold/1 */
      font-family: Montserrat;
      font-size: 14px;
      font-style: normal;
      font-weight: 540;
      line-height: 24px;
      /* 150% */
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin: 0 0 14px 0;
      /* top right bottom left - no top margin */
    }

    .commissions-section-overview .commission-insights .commission-summary th {
      font-weight: 400;
      color: var(--dc-greys-900);
      font-size: 14px;
    }

    .commissions-section-overview .commission-insights .commission-summary td {
      text-align: right;
      font-weight: 400;
      color: var(--dc-greys-900);
      font-size: 14px;
    }

    .commissions-section-overview .commission-insights .commission-summary {
      font-family: var(--font-sans, "Montserrat", sans-serif);
      color: var(--dc-greys-900);
      width: 100%;
      border-collapse: collapse;
    }

    .commissions-section-overview .commission-insights .commission-summary tr {
      border-bottom: 1px solid var(--mb-70);
    }

    .commissions-section-overview .commission-insights .commission-summary tr:first-child {
      border-top: 1px solid var(--mb-70);
    }

    .commissions-section-overview .commission-insights .commission-summary tr:last-child {
      border-bottom: 1px solid var(--mb-70);
    }

    .commissions-section-overview .commission-insights .commission-summary th,
    .commissions-section-overview .commission-insights .commission-summary td {
      padding: 12px 0;
    }
  }



  .commission-summary {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
  }

  .commission-summary th,
  .commission-summary td {
    padding: 6px 10px;
    text-align: left;
  }

  .commission-summary th {
    width: 70%;
  }

  .commission-insights-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
  }

  /* Commission Details Tab Grid Layout */
  .commission-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }

  @media (min-width: 900px) {
    .commission-details-grid {
      grid-template-columns: 1fr 1fr;
      /* Two equal columns */
      align-items: start;
    }
  }

  .commission-details-left-col,
  .commission-details-right-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Card Styling */
  .commission-details-card {
    background-color: #F0F0EB;
    /* Light beige background from image */
    padding: 24px;
    border-radius: 4px;
  }

  .commission-details-card-title {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4A4A4A;
    /* Dark grey text */
    margin-top: 0;
    margin-bottom: 20px;
  }

  .mt-large {
    margin-top: 32px;
  }

  /* Details Info Grid */
  .commission-details-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 16px;
  }

  .commission-details-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .commission-details-label {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #757575;
    /* Lighter grey for labels */
  }

  .commission-details-value {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.4;
  }

  /* Media Section */
  .media-placeholder {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    margin-bottom: 16px;
  }

  .media-subsection-title {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #757575;
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .media-thumbnails {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }

  .media-thumbnail {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #e0e0e0;
  }

  .media-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .btn-view-all {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #4A4A4A;
    background-color: transparent;
    color: #4A4A4A;
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-view-all:hover {
    background-color: #4A4A4A;
    color: #fff;
  }

  /* Brief & Request Form */
  .commission-brief-text {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .commission-brief-description {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: #757575;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .commission-request-qa {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .qa-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .qa-question {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    margin: 0;
    line-height: 1.4;
  }

  .qa-answer {
    font-family: var(--font-sans, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: #4A4A4A;
    margin: 0;
    line-height: 1.5;
  }





  /* =========================
   MOBILE VIEW OVERRIDES
   ========================= */
  @media (max-width: 768px) {

    /* ---------- Global Fixes ---------- */
    html,
    body {
      overflow-x: hidden;
    }

    .commission-display {
      padding: 0;
    }

    /* ---------- Header / Profile ---------- */
    .commission-display-title-profile-image {
      --size: 56px;
    }

    .commission-display-title {
      font-size: 18px;
      line-height: 1.2;
    }

    .commission-display-actor {
      font-size: 11px;
      letter-spacing: 1px;
    }

    /* ---------- Tabs ---------- */
    .tab-bar {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding: 8px 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .tab-bar::-webkit-scrollbar {
      display: none;
    }

    .tab-bar li {
      flex: 0 0 auto;
    }

    .tab-link {
      font-size: 12px;
      padding: 6px 10px;
    }

    /* ---------- Tab Sections ---------- */
    .tab-section {
      padding: 12px 0;
    }

    .new-commission-section.tab-section.default,
    .commission-section.tab-section.default {
      display: block;
    }

    /* ---------- Actions Layout ---------- */
    .commission-actions-layout {
      gap: 24px;
    }

    .commission-actions-row {
      flex-direction: column;
      gap: 16px;
    }

    .commission-actions-summary-left,
    .commission-actions-summary-right,
    .commission-actions-left,
    .commission-actions-right {
      flex: 0 0 100%;
      width: 100%;
    }

    /* ---------- Cards / Containers ---------- */
    .commission-actions-steps-container {
      padding: 16px;
    }

    .commission-overview {
      padding: 12px;
    }

    /* ---------- Timeline ---------- */
    .commission-details-timeline {
      padding: 16px;
    }

    .timeline-mini-labels {
      font-size: 11px;
    }

    .timeline-mini-bar {
      height: 6px;
    }

    .timeline-mini-indicator {
      width: 12px;
      height: 12px;
    }

    /* ---------- Video Call Section ---------- */
    .commission-details-video {
      padding: 16px;
    }

    .scheduled-call-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .scheduled-call-actions .button,
    .scheduled-call-actions .button.outline {
      width: 100%;
      text-align: center;
    }

    /* ---------- Buttons ---------- */
    .button,
    .button.outline,
    .button-right {
      width: 100%;
      justify-content: center;
    }

    /* ---------- Correspondence ---------- */
    .commission-correspondence {
      margin-left: 0;
      margin-right: 0;
      padding: 0;
      overflow-y: auto;
    }

    .messaging-widget {
      height: calc(100vh - 220px);
    }

    /* ---------- Details Tab Grid ---------- */
    .commission-details-grid {
      grid-template-columns: 1fr;
    }

    .commission-details-info-grid {
      grid-template-columns: 1fr;
      row-gap: 16px;
    }

    /* ---------- Media Thumbnails ---------- */
    .media-thumbnails {
      flex-wrap: wrap;
    }

    .media-thumbnail {
      width: 80px;
      height: 80px;
    }

    /* ---------- Forms / Inputs ---------- */
    .commission-box-selects {
      grid-template-columns: 1fr;
    }

    .commission-box-size-select {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .commission-box-radio-group {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    /* ---------- Tables ---------- */
    .commission-summary th,
    .commission-summary td {
      font-size: 12px;
      padding: 6px;
    }

    /* ---------- Safety: Prevent Overflow ---------- */
    img,
    video,
    iframe {
      max-width: 100%;
      height: auto;
    }
  }


  /* Mobile optimization for screens smaller than 878px */
  @media only screen and (max-width: 877px) {

    .sidebar-layout {
      display: block;
      padding: 0;
      margin-left: 0;
      /* remove the unwanted left margin */
    }

    .dashboard-main {
      margin: 0;
      padding: var(--minim) var(--body-padding);
    }


  }