/* ============================
   0. CSS VARIABLES
  ============================ */
  :root {
  /* ——— Color Palette ——— */
  --bg-page: #eee;
  --bg-white: #fff;

/* "Customers" button color */
  --link-customers: #2C6EBA;
  --link-customers-hover: #235895;
  --link-customers-rgb: 44, 110, 186;
  
  /* "Vendors" button color */
  --link-vendors: #0D8B5F;
  --link-vendors-hover: #0A6F4C;
  --link-vendors-rgb: 13, 139, 95;
  
  /* "Jobs" button color */
  --link-jobs: #66327C;
  --link-jobs-hover: #492359;
  --link-jobs-rgb: 102, 50, 124;
  
  /* "Sales Orders" button color */
  --link-sales: #107A7A;
  --link-sales-hover: #0B5757;
  --link-sales-rgb: 16, 122, 122;
  
  /* "Purchase Orders" button color */
  --link-po: #9C2247;
  --link-po-hover: #6F1832;
  --link-po-rgb: 156, 34, 71;
  
  /* "Inventory" button color */
  --link-inventory: #635043;
  --link-inventory-hover: #4F4036;
  --link-inventory-rgb: 107, 93, 82;

    /* "Dress Maker" button color */
  --link-dress-maker: #d63384;
  --link-dress-maker-hover: #AB296A;
  --link-dress-maker-rgb: 214, 51, 132;
  
  /* "Admin" button color */
  --link-admin: #E67E22;
  --link-admin-hover: #B8651B;
  --link-admin-rgb: 230, 126, 34;
  
  /* "Equipment" button color */
  --link-equipment: #6B6B63;
  --link-equipment-hover: #55554F;
  --link-equipment-rgb: 107, 107, 99;
    
  --gray-light: #666;
  --gray-lighter: #eee;
  --shadow: rgba(0, 0, 0, 0.1);

  /* ——— Spacing & Sizing ——— */
  --space-xs: 1px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-base: 15px;
  --space-lg: 20px;
  --radius-base: 10px;
  --bar-height: 70px; /* height of #user-bar */
}

/* ============================
   1. Base & Typography
  ============================ */
  body {
    background: var(--bg-page);
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  table {
    font-family: inherit;
  }

/* ============================
   2. Links
  ============================ */
  a {
    color: var(--link-customers);
    text-decoration: none;
  }
  a:visited {
    color: inherit;
  }
  a:hover,
  a:focus {
    text-decoration: underline;
  }
  a:active {
    color: var(--link-customers-hover);
  }
  
  /* Page-scoped link overrides via body class */
  body.customers {
    --link-base: var(--link-customers);
    --link-active: var(--link-customers-hover);
    --link-base-rgb: var(--link-customers-rgb);
  }
  body.vendors {
    --link-base: var(--link-vendors);
    --link-active: var(--link-vendors-hover);
    --link-base-rgb: var(--link-vendors-rgb);
  }
  body.jobs {
    --link-base: var(--link-jobs);
    --link-active: var(--link-jobs-hover);
    --link-base-rgb: var(--link-jobs-rgb);
  }
  body.sales {
    --link-base: var(--link-sales);
    --link-active: var(--link-sales-hover);
    --link-base-rgb: var(--link-sales-rgb);
  }
  body.po {
    --link-base: var(--link-po);
    --link-active: var(--link-po-hover);
    --link-base-rgb: var(--link-po-rgb);
  }
  body.inventory {
    --link-base: var(--link-inventory);
    --link-active: var(--link-inventory-hover);
    --link-base-rgb: var(--link-inventory-rgb);
  }
  body.dress-maker {
    --link-base: var(--link-dress-maker);
    --link-active: var(--link-dress-maker-hover);
    --link-base-rgb: var(--link-dress-maker-rgb);
  }
  body.admin {
    --link-base: var(--link-admin);
    --link-active: var(--link-admin-hover);
    --link-base-rgb: var(--link-admin-rgb);
  }
  body.equipment {
    --link-base: var(--link-equipment);
    --link-active: var(--link-equipment-hover);
    --link-base-rgb: var(--link-equipment-rgb);
  }
  body.customers #content a,
  body.customers #content a:visited {
    color: var(--link-customers);
  }
  body.customers #content a:hover,
  body.customers #content a:focus,
  body.customers #content a:active {
    color: var(--link-customers-hover);
  }
  body.vendors #content a,
  body.vendors #content a:visited {
    color: var(--link-vendors);
  }
  body.vendors #content a:hover,
  body.vendors #content a:focus,
  body.vendors #content a:active {
    color: var(--link-vendors-hover);
  }
  body.jobs #content a,
  body.jobs #content a:visited {
    color: var(--link-jobs);
  }
  body.jobs #content a:hover,
  body.jobs #content a:focus,
  body.jobs #content a:active {
    color: var(--link-jobs-hover);
  }
  body.sales #content a,
  body.sales #content a:visited {
    color: var(--link-sales);
  }
  body.sales #content a:hover,
  body.sales #content a:focus,
  body.sales #content a:active {
    color: var(--link-sales-hover);
  }
  body.po #content a,
  body.po #content a:visited {
    color: var(--link-po);
  }
  body.po #content a:hover,
  body.po #content a:focus,
  body.po #content a:active {
    color: var(--link-po-hover);
  }
  body.inventory #content a,
  body.inventory #content a:visited {
    color: var(--link-inventory);
  }
  body.inventory #content a:hover,
  body.inventory #content a:focus,
  body.inventory #content a:active {
    color: var(--link-inventory-hover);
  }
  body.dress-maker #content a,
  body.dress-maker #content a:visited {
    color: var(--link-dress-maker);
  }
  body.dress-maker #content a:hover,
  body.dress-maker #content a:focus,
  body.dress-maker #content a:active {
    color: var(--link-dress-maker-hover);
  }
  body.admin #content a,
  body.admin #content a:visited {
    color: var(--link-admin);
  }
  body.admin #content a:hover,
  body.admin #content a:focus,
  body.admin #content a:active {
    color: var(--link-admin-hover);
  }
  body.equipment #content a,
  body.equipment #content a:visited {
    color: var(--link-equipment);
  }
  body.equipment #content a:hover,
  body.equipment #content a:focus,
  body.equipment #content a:active {
    color: var(--link-equipment-hover);
  }
  /* Global override for cancel-link to beat section-scoped rules */
  a.cancel-link,
  a.cancel-link:visited {
    color: #e20000 !important;
    text-decoration: none;
  }
  a.cancel-link:hover,
  a.cancel-link:focus {
    color: #9f0000 !important;
    text-decoration: underline;
  }
  .cancel-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    color: #e20000 !important;
  }
  .cancel-link:visited {
    color: #e20000 !important;
  }
  .cancel-link:hover,
  .cancel-link:focus {
    color: #9f0000 !important;
    text-decoration: underline;
  }
  /* Bold table links */
  body.customers .table-responsive a,
  body.vendors   .table-responsive a {
    font-weight: 600;
  }
  
/* ============================
   3. Buttons
  ============================ */
  .button,
  .btn-add {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
  }
  .button {
    background-color: var(--link-customers);
    color: var(--bg-white) !important;
  }
  .button-cancel {
    background-color: #e20000;
  }
  .button-cancel:hover {
    background-color: #9f0000;
  }
  .button-customers {
    background-color: var(--link-customers);
  }
  .button-customers:hover {
    background-color: var(--link-customers-hover);
  }
  .button-vendors {
    background-color: var(--link-vendors);
  }
  .button-vendors:hover {
    background-color: var(--link-vendors-hover);
  }
  .button-jobs {
    background-color: var(--link-jobs);
  }
  .button-jobs:hover {
    background-color: var(--link-jobs-hover);
  }
  .button-sales {
    background-color: var(--link-sales);
  }
  .button-sales:hover {
    background-color: var(--link-sales-hover);
  }
  .button-po {
    background-color: var(--link-po);
  }
  .button-po:hover {
    background-color: var(--link-po-hover);
  }
  .button-inventory {
    background-color: var(--link-inventory);
  }
  .button-inventory:hover {
    background-color: var(--link-inventory-hover);
  }
  .button-dress-maker {
    background-color: var(--link-dress-maker);
  }
  .button-dress-maker:hover {
    background-color: var(--link-dress-maker-hover);
  }
  .button-admin {
    background-color: var(--link-admin);
  }
  .button-admin:hover {
    background-color: var(--link-admin-hover);
  }
  .button-equipment {
    background-color: var(--link-equipment);
  }
  .button-equipment:hover {
    background-color: var(--link-equipment-hover);
  }
  .btn-add {
    background-color: var(--link-customers);
    color: var(--bg-white) !important;
  }
  .btn-add:hover {
    background-color: var(--link-customers-hover);
  }
  
  /* Prevent underlining when hovering any ".button" link */
  .button:hover,
  .button:focus,
  .btn-add:hover,
  .btn-add:focus {
    text-decoration: none;
  }

/* ============================
   4. Layout Containers
  ============================ */
  #container {
    display: flex;
    min-height: 100vh;
  }
  #sidebar {
    background: var(--bg-white);
    color: #333;
    width: 220px;
    padding: 18px;
    box-sizing: border-box;
    /* `display` is set in the desktop media query below */
  }
  
  /*
    #content is now absolutely positioned between the 70px user-bar at top
    and the bottom of the viewport. This removes the need for margin-top + height,
    and prevents desktop scrollbars caused by slight miscalculations.
  */
  #content {
    position: absolute;
    top: var(--bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
  }

/* ============================
   5. User Bar
  ============================ */
  #user-bar {
    background-color: var(--bg-page);
    color: #333;
    height: var(--bar-height);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
  }
  
  .user-bar-inner {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-lg);
    box-sizing: border-box;
  }
  
  .left-side {
    display: flex;
    align-items: center;
  }
  
  #hamburger {
    font-size: 28px;
    cursor: pointer;
    display: none; /* shown only on mobile */
    line-height: var(--bar-height);
    color: #333;
  }
  
  /* Right-side shows avatar + a vertical "user-info" block */
  .right-side {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    margin-right: var(--space-sm);
  }
  
  /* Container for name + logout (stacked) */
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* Username & logout: default color, overridden below */
  .user-name,
  .user-logout {
    color: #333;
    margin: 0;
    padding: 0;
  }
  
  .user-name {
    font-weight: 600;
    line-height: 1.1;
  }
  
  .user-logout {
    font-size: 14px;
    text-decoration: none;
    margin-top: 2px;
  }
  .user-logout:hover,
  .user-logout:focus {
    text-decoration: underline;
  }
  
  /* Override username color based on active section */
  body.customers .user-name {
    color: var(--link-customers);
  }
  body.vendors .user-name {
    color: var(--link-vendors);
  }
  body.jobs .user-name {
    color: var(--link-jobs);
  }
  body.sales .user-name {
    color: var(--link-sales);
  }
  body.po .user-name {
    color: var(--link-po);
  }
  body.inventory .user-name {
    color: var(--link-inventory);
  }
  body.dress-maker .user-name {
    color: var(--link-dress-maker);
  }
  body.admin .user-name {
    color: var(--link-admin);
  }
  body.equipment .user-name {
    color: var(--link-equipment);
  }

/* ============================
   6-A. Header Container
  ============================ */
  .header-container {
    background-color: var(--bg-white);
    padding: var(--space-base);
    margin: 0 var(--space-base);
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    box-shadow: 0 2px 5px var(--shadow);
  }
  .add-new-link {
    color: var(--link-base);       /* purple on customers pages / green on vendors pages */
    font-size: 16px;
  }
  .add-new-link:hover,
  .add-new-link:focus {
    text-decoration: underline;    /* or whatever hover style you prefer */
  }

/* ============================
   6-B. Inner Table Container
   ============================ */
  .table-container {
    background-color: var(--bg-white);
    padding: var(--space-base);
    margin: var(--space-xs) var(--space-base) var(--space-base);
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    box-shadow: 0 2px 5px var(--shadow);
    overflow-y: auto; /* scroll only within the table container */
  }
  
/* ============================
   7. Sidebar Menu
  ============================ */
  #sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
  }
  #sidebar ul li {
    margin-bottom: 8px;
  }
  
  /* Make every <a> a centered button of uniform width */
  #sidebar ul li a {
    display: inline-block;
    width: 100%;               /* 100% of the sidebar width */
    margin: 0 auto;           /* center horizontally */
    text-align: center;       /* center the text */
    padding: 8px 0;           /* vertical padding */
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
    color: #333;              /* dark-gray text for non-active */
    background-color: #fff;   /* white background for non-active */
  }
  
  /* Active link: full-color button, no hover effect */
  body.customers #sidebar .sidebar-menu li.active.customers a,
  body.vendors   #sidebar .sidebar-menu li.active.vendors a,
  body.jobs      #sidebar .sidebar-menu li.active.jobs a,
  body.sales     #sidebar .sidebar-menu li.active.sales a,
  body.po        #sidebar .sidebar-menu li.active.po a,
  body.inventory #sidebar .sidebar-menu li.active.inventory a,
  body.dress-maker #sidebar .sidebar-menu li.active.dress-maker a,
  body.admin #sidebar .sidebar-menu li.active.admin a {
    background-color: var(--link-base);
    color: #fff;
  }
  body.customers #sidebar .sidebar-menu li.active.customers a:hover,
  body.customers #sidebar .sidebar-menu li.active.customers a:focus {
    background-color: var(--link-customers-hover);
  }
  body.vendors #sidebar .sidebar-menu li.active.vendors a:hover,
  body.vendors #sidebar .sidebar-menu li.active.vendors a:focus {
    background-color: var(--link-vendors-hover);
  }
  body.jobs #sidebar .sidebar-menu li.active.jobs a:hover,
  body.jobs #sidebar .sidebar-menu li.active.jobs a:focus {
    background-color: var(--link-jobs-hover);
  }
  body.sales #sidebar .sidebar-menu li.active.sales a:hover,
  body.sales #sidebar .sidebar-menu li.active.sales a:focus {
    background-color: var(--link-sales-hover);
  }
  body.po #sidebar .sidebar-menu li.active.po a:hover,
  body.po #sidebar .sidebar-menu li.active.po a:focus {
    background-color: var(--link-po-hover);
  }
  body.inventory #sidebar .sidebar-menu li.active.inventory a:hover,
  body.inventory #sidebar .sidebar-menu li.active.inventory a:focus {
    background-color: var(--link-inventory-hover);
  }
  body.dress-maker #sidebar .sidebar-menu li.active.dress-maker a:hover,
  body.dress-maker #sidebar .sidebar-menu li.active.dress-maker a:focus {
    background-color: var(--link-dress-maker-hover);
  }
  body.admin #sidebar .sidebar-menu li.active.admin a:hover,
  body.admin #sidebar .sidebar-menu li.active.admin a:focus {
    background-color: var(--link-admin-hover);
  }

  /* All non-active links on hover/ focus get a light gray background */
  #sidebar .sidebar-menu li:not(.active) a:hover,
  #sidebar .sidebar-menu li:not(.active) a:focus {
    background-color: #eee;
  }
  
  #sidebar ul ul {
    margin: 5px 0 0 15px;
  }
  #sidebar ul ul li {
    margin-bottom: 8px;
    font-size: 16px;
  }

/* ============================
    8. Forms & Inputs
  ============================ */
  .container {
    box-sizing: border-box;
    max-width: 800px;
    width: 100%;
    margin: 20px auto;
    background: var(--bg-white);
    padding: 20px;
    border-radius: var(--radius-base);
    box-shadow: 0 2px 5px var(--shadow);
  }
  .page_title,
  .container_title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
    font-family: 'DM Sans', sans-serif;
  }
  .alert {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 20px;
    padding: 14px;
    border-radius: var(--radius-base);
    text-align: center;
  }
  .alert.success {
    background-color: #d4edda;
    color: #155724;
  }
  .alert.error {
    background-color: #f8d7da;
    color: #721c24;
  }
  .alert.warning {
    background-color: #fff3cd;
    color: #856404;
  }
  form {
    display: flex;
    flex-direction: column;
  }
  
  /* Add consistent spacing below each form row */
  form .row {
    margin-bottom: 12px;
  }
  
  /* Remove extra bottom margin from individual form-group items */
  form .row .form-group {
    margin-bottom: 0;
  }
  
  /* Prevent margin stacking on the last child as well */
  form .row .form-group:last-of-type {
    margin-bottom: 0;
  }
  
  form .form-group {
    margin-bottom: 12px;
  }
  
  /* Side-by-side layout for fabric dropdowns */
  .fabric-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  
  .fabric-row .form-group {
    flex: 0 0 auto;
  }
  
  .form-row .form-group {
    margin-bottom: 12px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea {
    width: 100%;
    padding: 8px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
  }
  textarea {
    min-height: 100px;
    resize: vertical;
  }
  select {
    font-size: 15px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
    height: 37px;
    margin-top: 2px;
  }
  
  /* Row for grouped inputs */
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  .row input[name$="_state"] { max-width: 80px; }
  .row input[name$="_zip"]   { max-width: 140px; }
  .city-group {
    width: 220px;
  }
  body.vendors .row input[name="state"] {
    max-width: 80px;
  }
  body.vendors .row input[name="zip"] {
    max-width: 140px;
  }
  
  .payment-row .form-group {
    margin-bottom: 0;
  }
  /* Cancel .row .form-group:last-child rule inside .payment-row */
  .payment-row .form-group:last-child {
    margin-bottom: 0;
  }
  /* Apply consistent spacing under entire payment row */
  .payment-row {
    margin-bottom: 16px;
    gap: var(--space-lg);
  }
  
  .radio-group-inline {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px;
  }
  .radio-group-inline label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
  }
  .items-table input[type="number"],
  .items-table input[type="text"] {
    box-sizing: border-box;
    padding: 6px;
    font: inherit;
  }
/* ============================
   9. Page Header (Title + Button)
   ============================ */
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .page-header .button {
    margin: 0;
  }

/* ============================
   10. Pagination
  ============================ */
  .pagination {
    text-align: center;
    margin-top: 16px;
  }
  .pagination a,
  .pagination span {
    display: inline-block;
    margin: 0 var(--space-xs);
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  .pagination a {
    color: var(--link-base);
  }
  .pagination a:hover {
    background: #f0f0f0;
  }
  .pagination span.current {
    background: var(--link-base);
    color: var(--bg-white);
    border-color: var(--link-base);
  }

/* ============================
     11. Table Display (shared between sections)
    ============================ */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }
  .table-responsive table {
    width: 100%;
    border-collapse: collapse;
  }
  
  /* Default header color — now NONE; each section defines its own */
  .table-responsive th {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    background: transparent; /* intentionally neutral */
  }
   
  /* Section-specific header backgrounds */
  body.customers .table-responsive th {
    background: var(--link-customers);
  }
  body.vendors .table-responsive th {
    background: var(--link-vendors);
  }
  body.jobs .table-responsive th {
    background: var(--link-jobs);
  }
  body.sales .table-responsive th {
    background: var(--link-sales);
  }
  body.po .table-responsive th {
    background: var(--link-po);
  }
  body.inventory .table-responsive th {
    background: var(--link-inventory);
  }
  body.dress-maker .table-responsive th {
    background: var(--link-dress-maker);
  }
  body.admin .table-responsive th {
    background: var(--link-admin);
  }
  body.equipment .table-responsive th {
    background: var(--link-equipment);
  }
  
  /* Header link styles */
  .table-responsive th a {
    color: white;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  .table-responsive th a .label {
    color: white;
  }
  .table-responsive th a .label:hover {
    text-decoration: underline;
  }
  
  /* Sort arrows */
  .table-responsive th a .sort-arrow {
    font-size: 11px;
    margin-left: 5px;
    position: relative;
    top: 0.5px;
    color: white;
    display: inline-block;
    line-height: 1;
  }
  
  /* Rounded corners for header cells */
  .table-responsive thead th:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .table-responsive thead th:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  
  /* Table body */
  .table-responsive td {
    font-size: 13px;
    padding: 10px;
    text-align: left;
  }
  
  /* Optional gap row (if ever used) */
  .table-gap-row td {
    height: 10px;
    padding: 0;
    background: var(--bg-white);
    border: none;
  }

/* ============================
   12. Customer Details Page
  ============================ */
  .customer-container {
    box-sizing: border-box;
    width: 100%;
    margin: 20px auto;
    padding: 22px;
    background: var(--bg-white);
    border-radius: 6px;
    box-shadow: 0 2px 5px var(--shadow);
  }
  .customer-section {
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
  }
  .customer-section.primary-section {
    padding-top: 0;
  }
  .customer-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .customer-section-title {
    display: block;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--link-customers);
  }
  body.vendors .customer-section-title {
    color: var(--link-vendors);
  }
  body.jobs .customer-section-title {
    color: var(--link-jobs);
  }
  body.sales .customer-section-title {
    color: var(--link-sales);
  }
  body.po .customer-section-title {
    color: var(--link-po);
  }
  .customer-section p {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
    margin: 6px 10px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .customer-section p strong {
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 12px;
    width: auto;
  }
  
  /* Where a single transaction split across several orders. One transaction is
     one dot — these hang under it rather than getting dots of their own,
     because a transaction is edited as one unit. */
  .payment-allocation-list {
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 12px;
    color: #666;
  }
  .payment-allocation-list li {
    padding: 1px 0;
  }
  .payment-allocation-list a {
    color: inherit;
    text-decoration: none;
  }
  .payment-allocation-list a:hover {
    text-decoration: underline;
  }
  
  /* Transaction references. Quiet by design — they're for tracing a thread
     when you need one, not for reading every time. */
  .txn-ref {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
  }
  
  /* Refund link on a payment history row. Understated — paying money back
     should be a deliberate act, not the thing your eye lands on. */
  /* Actions belong to the row, below everything it has to say — and indented to
     the same gutter as the txn reference and the sub-lines, so the sentence
     stays the only thing at the left edge. */
  .payment-actions {
    margin-top: 6px;
    padding-left: 12px;
  }
  .payment-action-link {
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    margin-right: 14px;
    white-space: nowrap;
  }
  .payment-action-link:hover {
    color: #c00;
  }
  
  /* Payment history reuses the timeline classes so the two sections are
     visually identical.
     
     A voided entry strikes through its SENTENCE only — not the whole body.
     Decorating the container hits every descendant, and CSS gives a child no
     way to opt out: text-decoration propagates and cannot be removed from
     below. The txn reference has to stay readable, because a voided row is
     exactly the one you're chasing when something else points at it.
     
     Explicit colours rather than opacity, for the same reason — opacity on a
     parent can't be undone by a child either. */
  .timeline-event-voided .txn-sentence {
    text-decoration: line-through;
    color: #999;
  }
  .timeline-event-voided .payment-allocation-list {
    color: #bbb;
  }
  .timeline-event-voided .timeline-event-time {
    color: #bbb;
  }
  .timeline-event-voided .timeline-dot {
    opacity: 0.4;
  }
  .timeline-event-edited {
    font-weight: 600;
    color: #c00;
    margin-left: 8px;
  }

/* ============================
   13. Dress Maker Styles
  ============================ */
  
  #dress-maker-bottom-bar {
    background-color: var(--bg-white);
    padding: var(--space-base);
    margin: 0 var(--space-base) var(--space-base);
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    box-shadow: 0 2px 5px var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 100;
  }
  
  /* Remove bottom radius from table-container on dress maker pages */
  body.dress-maker .table-container {
    border-radius: 0;
    margin-bottom: 1px;
  }
  
  #dress-maker-bottom-bar .left-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  #dress-maker-bottom-bar .right-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  #dress-maker-bottom-bar .button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  #dress-maker-bottom-bar .button:disabled:hover {
    background-color: #ccc;
  }
  
  /* Dress details sidebar */
  #dress-details-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: white;
    box-shadow: -3px 0 10px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    overflow-y: auto;
    visibility: hidden;
  }
  
  #dress-details-sidebar.show {
    transform: translateX(0);
    visibility: visible;
  }
  
  #dress-details-sidebar.closing {
    transform: translateX(100%);
    visibility: visible;
  }
  
  #dress-details-sidebar .sidebar-header {
    background: var(--link-dress-maker);
    color: white;
    padding: 20px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  #dress-details-sidebar .sidebar-content {
    padding: 20px;
  }
  
  #dress-details-sidebar .dress-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  #dress-details-sidebar .dress-item:last-child {
    border-bottom: none;
  }
  
  #dress-details-sidebar .dress-item-image {
    width: 60px;
    height: 60px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  #dress-details-sidebar .dress-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  #dress-details-sidebar .dress-item-info {
    flex: 1;
  }
  
  #dress-details-sidebar .dress-item-category {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  #dress-details-sidebar .dress-item-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
  }
  
  #dress-details-sidebar .dress-item-code {
    font-size: 12px;
    color: #888;
  }
  
  #dress-details-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1999;
  }
  
  #dress-details-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  
  #dress-details-overlay.closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  /* Mobile responsive */
  @media (max-width: 800px) {
    #dress-details-sidebar {
      width: 100vw;
    }
    
    #dress-maker-bottom-bar {
      flex-direction: column;
      gap: 10px;
    }
    
    #dress-maker-bottom-bar .left-buttons,
    #dress-maker-bottom-bar .right-buttons {
      width: 100%;
      justify-content: center;
    }
  }
  
/* ============================
   15. Optional Sections Flex
  ============================ */
  .optional-sections {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:20px;
    align-items:flex-start;
  }
  .optional-section {
    flex:1 0 250px;
  }
  
  /* single divider line under each two-column row */
  .optional-sections:not(:last-of-type) {
    border-bottom:1px solid #ddd;
    padding-bottom:14px;
    margin-bottom:14px;
  }
  .optional-section .customer-section { border-bottom:none; }
  
  .optional-section .customer-section:first-child {
    padding-top:0;
  }
  /* push the right-hand column to the far edge */
  body.po .optional-sections > .optional-section:last-child {
    margin-left:auto;        /* flex trick: takes up all remaining space */
  }
  /* remove the top margin from the very first two-column row */
  body.po .optional-sections:first-of-type {
    margin-top:0;
  }
  body.sales .optional-sections:first-of-type {
    margin-top:0;
  }
  
/* ============================
   16. Collapsible <details>
  ============================ */
  details {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
  }
  details summary {
    font-weight: bold;
    cursor: pointer;
  }

/* ============================
    17. Autocomplete Dropdowns
  ============================ */
  .autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 14px;
  }
  
  .autocomplete-items div {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  
  .autocomplete-items div:last-child {
    border-bottom: none;
  }
  
  .autocomplete-items div:hover,
  .autocomplete-items div.active,
  .autocomplete-active {
    background-color: #f3f3f3 !important;
  }


/* ============================================================
     LABOR SECTION — append these rules to the bottom of scd.css
     ============================================================ */
  
  /* ——— Labor color variables ——— */
  :root {
    --link-labor:       #A0522D;
    --link-labor-hover: #7A3D20;
    --link-labor-rgb:   160, 82, 45;
  }
  
  /* Body-scoped link overrides */
  body.labor {
    --link-base:   var(--link-labor);
    --link-active: var(--link-labor-hover);
    --link-base-rgb: var(--link-labor-rgb);
  }
  body.labor #content a,
  body.labor #content a:visited {
    color: var(--link-labor);
  }
  body.labor #content a:hover,
  body.labor #content a:focus,
  body.labor #content a:active {
    color: var(--link-labor-hover);
  }
  
  /* Sidebar active state */
  body.labor #sidebar .sidebar-menu li.active.labor a {
    background-color: var(--link-labor);
    color: #fff;
  }
  body.labor #sidebar .sidebar-menu li.active.labor a:hover,
  body.labor #sidebar .sidebar-menu li.active.labor a:focus {
    background-color: var(--link-labor-hover);
  }
  
  /* Username color */
  body.labor .user-name {
    color: var(--link-labor);
  }
  
  /* Table header */
  body.labor .table-responsive th {
    background: var(--link-labor);
  }
  
  /* Section title */
  body.labor .customer-section-title {
    color: var(--link-labor);
  }
  
  /* Button */
  .button-labor {
    background-color: var(--link-labor);
    color: #fff !important;
  }
  .button-labor:hover {
    background-color: var(--link-labor-hover);
  }
  
  /* ——— Tab Navigation ——— */
  .labor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--link-labor);
    margin-bottom: 20px;
  }
  .labor-tab-btn {
    padding: 8px 18px;
    border: none;
    background: #f0ebe6;
    color: #5a3a20;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  .labor-tab-btn:hover {
    background: #ddd0c5;
    text-decoration: none;
  }
  .labor-tab-btn.active {
    background: var(--link-labor);
    color: #fff;
  }
  .labor-tab-panel {
    display: none;
  }
  .labor-tab-panel.active {
    display: block;
  }
  
  /* ——— Overview stat cards ——— */
  .labor-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }
  .labor-stat-card {
    flex: 1 0 160px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
  }
  .labor-stat-card .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--link-labor);
    line-height: 1.1;
  }
  .labor-stat-card .stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  /* ——— Alert banner for hours conflicts ——— */
  .labor-alert {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #e67e00;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #5a3e00;
  }
  .labor-alert strong {
    display: block;
    margin-bottom: 2px;
  }
  
  /* ——— Drag-and-drop task assignment board ——— */
  .task-board {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .task-board-source {
    flex: 0 0 200px;
  }
  .task-board-tasks {
    flex: 1 1 400px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  
  /* Employee chip */
  .emp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 4px;
    background: #f0ebe6;
    border: 1px solid #c8a98a;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
  }
  .emp-chip:active {
    cursor: grabbing;
  }
  .emp-chip.inactive-emp {
    background: #eee;
    border-color: #ccc;
    color: #999;
  }
  .emp-chip .remove-chip-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #7a3d20;
    padding: 0;
    margin-left: 2px;
  }
  .emp-chip .remove-chip-btn:hover {
    color: #e20000;
  }
  
  /* Source bin (unassigned employees pool) */
  .source-bin {
    min-height: 60px;
    background: #faf7f4;
    border: 2px dashed #c8a98a;
    border-radius: 10px;
    padding: 8px;
  }
  .source-bin.drag-over {
    background: #f0ebe6;
    border-color: var(--link-labor);
  }
  
  /* Task drop zone card */
  .task-drop-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0;
    min-width: 180px;
    flex: 1 1 180px;
    overflow: hidden;
  }
  .task-drop-card .task-drop-header {
    background: var(--link-labor);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .task-dropzone {
    min-height: 64px;
    padding: 8px;
  }
  .task-dropzone.drag-over {
    background: #f0ebe6;
    outline: 2px dashed var(--link-labor);
    outline-offset: -2px;
    border-radius: 0 0 10px 10px;
  }
  
  /* ——— Period hours table ——— */
  .period-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
  }
  .period-selector label {
    font-weight: 600;
    margin: 0;
  }
  .hours-input {
    width: 80px;
    padding: 5px 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    text-align: right;
  }
  .hours-input:focus {
    outline: 2px solid var(--link-labor);
    border-color: var(--link-labor);
  }
  .hours-remaining {
    font-weight: 600;
  }
  .hours-remaining.over-committed {
    color: #e20000;
  }
  .hours-remaining.ok {
    color: #1a7a3c;
  }
  .save-hours-btn {
    font-size: 12px;
    padding: 4px 10px;
  }
  
  /* ——— Employees list ——— */
  .emp-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .emp-status-badge.active {
    background: #d4edda;
    color: #155724;
  }
  .emp-status-badge.inactive {
    background: #e9ecef;
    color: #555;
  }
  
  /* ——— Fix: active tab color overridden by body.labor #content a rule ——— */
  .labor-tab-btn.active,
  body.labor #content .labor-tab-btn.active,
  body.labor #content .labor-tab-btn.active:visited {
    background: var(--link-labor);
    color: #fff !important;
    text-decoration: none;
  }
  .labor-tab-btn.active:hover,
  body.labor #content .labor-tab-btn.active:hover {
    background: var(--link-labor-hover);
    color: #fff !important;
    text-decoration: none;
  }
  
/* ============================
    18. Mobile Dropdown with Slide-Up/Down Animation
   ============================ */
  #mobile-nav {
    position: fixed;
    top: var(--bar-height);
    left: 0;
    right: 0;
    background-color: #ddd;
    z-index: 900;
    max-height: calc(100vh - var(--bar-height));
    overflow-y: auto;
  
    transform: translateY(calc(-1 * var(--bar-height)));
    opacity: 0;
    pointer-events: none;
  
    transition: transform 0.12s ease-out, opacity 0.12s ease-out;
  
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    box-shadow: 0 2px 5px var(--shadow); 
  }
  
  #mobile-nav.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  #mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
  }
  
  #mobile-nav li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
  }
  
  #mobile-nav li:last-child {
    border-bottom: none;
  }
  
  #mobile-nav li a {
    display: block;
    padding: 18px;
    color: #333;
    text-decoration: none;
    text-align: center;
  }
  
  /* Active link colors */
  #mobile-nav li.active.admin a,
  #mobile-nav li.active.admin a:visited {
    color: var(--link-admin);
  }
  #mobile-nav li.active.customers a,
  #mobile-nav li.active.customers a:visited {
    color: var(--link-customers);
  }
  #mobile-nav li.active.vendors a,
  #mobile-nav li.active.vendors a:visited {
    color: var(--link-vendors);
  }
  #mobile-nav li.active.jobs a,
  #mobile-nav li.active.jobs a:visited {
    color: var(--link-jobs);
  }
  #mobile-nav li.active.sales a,
  #mobile-nav li.active.sales a:visited {
    color: var(--link-sales);
  }
  #mobile-nav li.active.po a,
  #mobile-nav li.active.po a:visited {
    color: var(--link-po);
  }
  #mobile-nav li.active.inventory a,
  #mobile-nav li.active.inventory a:visited {
    color: var(--link-inventory);
  }

  /* Hover */
  #mobile-nav li a:hover,
  #mobile-nav li a:focus {
    background: none;
    text-decoration: underline;
  }
  
/* ============================
   19. Mobile / Desktop Queries
  ============================ */
  @media (max-width: 799px) {
    /* Hide desktop-only elements */
    #sidebar { display: none; }
  
    /* Show only the hamburger inside the user-bar */
    #hamburger { display: block; }
  
    /* Prevent page-level scrolling */
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
  
    /* Push content below just the 70px user-bar (not 110px) */
    #content {
      top: var(--bar-height); /* position:absolute, so use top instead of margin */
    }
    
    /* — Hide the "Location" column (2nd column) on mobile — */
    .table-responsive th:nth-child(2),
    .table-responsive td:nth-child(2) {
      display: none;
    }
    
    /* Hide the "Email" column (3rd column) on mobile */
    .table-responsive th:nth-child(3),
    .table-responsive td:nth-child(3) {
      display: none;
    }
  }
  
  /* — Hide "Email" (3rd column) on medium/narrow screens up to 1000px — */
  @media (max-width: 1000px) {
    .table-responsive th:nth-child(3),
    .table-responsive td:nth-child(3) {
      display: none;
    }
    body.admin .table-responsive th:nth-child(2),
    body.admin .table-responsive td:nth-child(2),
    body.admin .table-responsive th:nth-child(3),
    body.admin .table-responsive td:nth-child(3) {
      display: table-cell !important;
    }
  }
  
  @media (max-width: 800px) {
    /* — Hide the "Location" column (2nd column) on super narrow screens — */
    .table-responsive th:nth-child(2),
    .table-responsive td:nth-child(2) {
      display: none;
    }
    body.admin .table-responsive th:nth-child(2),
    body.admin .table-responsive td:nth-child(2),
    body.admin .table-responsive th:nth-child(3),
    body.admin .table-responsive td:nth-child(3) {
      display: table-cell !important;
    }
  }
  
  @media (min-width: 800px) {
    /* Show sidebar on desktop, hide mobile nav */
    #sidebar {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: var(--bar-height);
      left: 0;
      height: calc(100vh - var(--bar-height));
      border-top-right-radius: var(--radius-base);
      box-shadow: 0 2px 5px var(--shadow);
    }
    #mobile-nav { display: none; }
  
    /* On desktop, shift #content right to sit next to the sidebar */
    #content {
      left: 220px;
      right: 0;
    }
    /* Prevent phone numbers (4th column) from wrapping on desktop */
    .table-responsive th:nth-child(4),
    .table-responsive td:nth-child(4) {
      white-space: nowrap;
    }
  }
  
  @media (max-width: 600px) {
    body.admin .table-responsive th:nth-child(2),
    body.admin .table-responsive td:nth-child(2),
    body.admin .table-responsive th:nth-child(3),
    body.admin .table-responsive td:nth-child(3) {
      display: table-cell !important;
    }
  }
  
  /* Hide MEASUREMENT UNIT column (last column) on screens < 800px */
  @media (max-width: 800px) {
    body.admin .table-responsive th:last-child,
    body.admin .table-responsive td:last-child {
      display: none;
    }
  }
  
  /* ============================
   20. Sales Order Timeline
   ============================ */
  
  /* ── Comment form (top of timeline) ── */
  .timeline-comment-form {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0 18px;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
  }
  
  .timeline-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .timeline-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .timeline-comment-input-wrap {
    flex: 1;
  }
  
  .timeline-comment-textarea {
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    color: #333;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  
  .timeline-comment-textarea:focus {
    outline: none;
    border-color: var(--link-base);
    box-shadow: 0 0 0 2px var(--link-base);
  }
  
  .timeline-comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }
  
  .timeline-comment-note {
    font-size: 12px;
    color: #aaa;
  }
  
  /* Post button — inherits the active section color automatically */
  .timeline-post-btn {
    background-color: var(--link-base);
    color: var(--bg-white) !important;
  }
  .timeline-post-btn:hover,
  .timeline-post-btn:focus {
    background-color: var(--link-active);
    text-decoration: none;
  }
  .timeline-post-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  /* ── Connecting track ── */
  .timeline-track {
    position: relative;
  }
  
  /* Vertical line running through all events.
     left = (34px event-left-width / 2) - (2px line-width / 2) = 16px */
  .timeline-track::before {
    content: '';
    position: absolute;
    left: 16px;
    top: var(--tl-line-top, 4px);
    bottom: var(--tl-line-bottom, 4px);
    width: 2px;
    background: #e0e0e0;
    border-radius: 1px;
  }
  
  /* ── Date group ── */
  .timeline-date-group {
    margin-bottom: 16px;
  }
  
  /* Indent date labels to align with event body text, not the dot column */
  .timeline-date-header {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin: 0 0 8px 0;
    padding: 0 0 3px 44px; /* 34px event-left + 10px gap */
  }
  
  /* ── Individual event row ── */
  .timeline-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
  }
  
  .timeline-event-left {
    flex-shrink: 0;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    position: relative; /* needed for z-index to work */
    z-index: 1;         /* sit above the ::before line */
  }
  
  /* Bullet dot for system events */
  .timeline-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #555;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .timeline-event-body {
    flex: 1;
    line-height: 1.5;
    color: #333;
  }
  
  .timeline-event-time {
    flex-shrink: 0;
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
    padding-top: 2px;
  }
  
  /* ── Comment event style ── */
  .timeline-event-comment .timeline-event-body {
    background: #f8f9fa;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 10px 14px;
  }
  
  .timeline-comment-author {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
    color: #333;
  }
  
  .timeline-comment-text {
    display: block;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* Small "— username" attribution on system events */
  .timeline-by-user {
    font-size: 11px;
    color: #bbb;
    margin-left: 4px;
  }
  
  /* ── Mobile ── */
  @media (max-width: 600px) {
    .timeline-comment-footer {
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
    .timeline-comment-note {
      align-self: flex-start;
    }
  }
  
  /* ============================
   21. Type Selection Cards
   ============================ */
  
  /* Two-up radio card selector shown at the top of creation forms — job source
     on add_job.php, order type on add_order.php. Accent colors follow the
     section via --link-base, so no per-page overrides are needed. */
  .source-selection {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
  }
  
  .source-option {
    flex: 1;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: var(--bg-white);
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .source-option:hover {
    border-color: var(--link-base);
  }
  
  .source-option.selected {
    border-color: var(--link-base);
    background: rgba(var(--link-base-rgb), 0.05);
  }
  
  .source-option input[type="radio"] {
    margin-right: 10px;
  }
  
  .source-option label {
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .source-option p {
    margin: 10px 0 0 28px;
    font-size: 14px;
    color: #666;
  }
  
  /* ============================
   22. Equipment Section
  ============================ */
  
  /* The global nth-child rules in section 19 were written for the customers
     table and hide whatever sits in columns 2 and 3. On the equipment list
     that would hide Building, which is the column most worth keeping on a
     phone. These rules opt equipment out and hide Vendor, then Purchased,
     instead. Class-based on purpose: reordering a column later cannot
     silently change which one disappears. */
  body.equipment .table-responsive th,
  body.equipment .table-responsive td {
    display: table-cell;
  }
  
  @media (max-width: 1000px) {
    body.equipment .table-responsive th.col-vendor,
    body.equipment .table-responsive td.col-vendor {
      display: none;
    }
  }
  
  @media (max-width: 800px) {
    body.equipment .table-responsive th.col-vendor,
    body.equipment .table-responsive td.col-vendor,
    body.equipment .table-responsive th.col-purchased,
    body.equipment .table-responsive td.col-purchased {
      display: none;
    }
  }