/* Live Tiles — whole-app review (release ui-5, owner 13 Oct 2026):
   "A data (headings and its value) can be displayed in a single line", "Remove the whitespace wherever possible",
   for desktop and phone. Rules that apply across modules; module files hold the page-specific ones. */

/* ---------- phone: count tiles three or four to a row, small ---------- */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip, .pm-grid-four:has(> .pm-stat-card), .crm-tiles .grid.cols-4, .sv-status-overview) {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; margin-bottom: 6px !important;
  }
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip, .crm-tiles .grid.cols-4):has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip, .pm-grid-four, .crm-tiles .grid.cols-4) > * {
    min-height: 0 !important; height: auto !important; padding: 6px 7px !important; margin: 0 !important; gap: 0 !important; min-width: 0 !important;
  }
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip, .pm-grid-four, .crm-tiles .grid.cols-4) > * :where(strong, b, h3, h4, .count, .value) {
    font-size: 20px !important; line-height: 1.1 !important;
  }
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip, .pm-grid-four, .crm-tiles .grid.cols-4) > * :where(span, small, p, label):not(:has(*)):not([class*="icon"]) {
    font-size: 11px !important; line-height: 1.2 !important; white-space: normal !important;
  }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content :is(.status-overview, .pl-status-grid, .utl-task-summary, .cl-task-summary, .orders-metrics, .drive-stats, .mu-stats, .activity-kpi-strip) > * :where([class*="icon"]) { display: none !important; }
}
/* Dashboard on a phone: quick actions three to a row, icon over the name */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-action-grid > .tl-action {
    flex: 1 1 30% !important; min-height: 58px !important; max-width: calc(33.333% - 4px); flex-direction: column !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 4px !important; padding: 8px !important;
  }
  html[data-look="tiles"] .tl-action-grid > .tl-action svg { width: 18px !important; height: 18px !important; }
  html[data-look="tiles"] .tl-action-grid > .tl-action strong { font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-look="tiles"] .tl-action-grid { gap: 4px !important; }
}
/* phone: a board column without cards shows only its heading and count (the "No … found" boxes took a screen of space) */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .board-column:not(:has(.task-card)) :is(.column-body, .empty-state) { display: none !important; }
  html[data-look="tiles"] .tl-content .board-column:not(:has(.task-card)) { min-height: 0 !important; height: auto !important; }
  html[data-look="tiles"] .tl-content .board-column:not(:has(.task-card)) .column-header { border-bottom: 0 !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page .board { grid-auto-rows: auto !important; grid-template-rows: none !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page .board-column { height: auto !important; min-height: 0 !important; }
  html[data-look="tiles"] .tl-content .pl-status-info > :first-child { font-size: 20px !important; line-height: 1.1 !important; }
  html[data-look="tiles"] .tl-content :is(.status-column, .ptl-column, .kanban-column, .board-col):not(:has(.task-card, .ptl-card, .kanban-card)) :is(.empty-state, .empty, .ptl-empty, .column-empty) { display: none !important; }
}

/* ---------- phone: wide list tables as cards, "Heading: value" per line (tiles/tablecards.ts marks them) ---------- */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content :is(.pl-table-wrapper, .pd-table-wrap, .table-wrap, .pm-table-wrap, .table-responsive):has(> table.tl-cardtable) { overflow: visible !important; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; background: none !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable thead { display: none !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable tbody { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable tr { display: flex !important; flex-flow: row wrap !important; column-gap: 8px !important; background: #fff !important; border: 1px solid var(--tl-line) !important; padding: 8px 10px !important; height: auto !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td {
    display: block !important; flex: 1 1 100% !important; border: 0 !important; padding: 1px 0 !important; margin: 0 !important; height: auto !important; min-width: 0 !important; width: auto !important; max-width: none !important;
    text-align: left !important; white-space: normal !important; font-size: 13px !important; line-height: 1.4 !important; background: none !important; overflow-wrap: anywhere;
  }
  html[data-look="tiles"] .tl-content table.tl-cardtable td[data-label]::before {
    content: attr(data-label) ": "; color: var(--tl-label); font-weight: 400; font-size: 12.5px; text-transform: none; letter-spacing: 0;
  }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:first-child { font-size: 14px !important; font-weight: 600 !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:first-child::before,
  html[data-look="tiles"] .tl-content table.tl-cardtable td.tl-cell-actions::before { content: none !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:empty { display: none !important; }
  /* a selection check box sits in the card's top-right corner; the next cell is the card title */
  html[data-look="tiles"] .tl-content table.tl-cardtable tr:has(> td:first-child > input[type=checkbox]) { position: relative !important; padding-right: 36px !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:first-child:has(> input[type=checkbox]) { position: absolute !important; top: 8px; right: 8px; padding: 0 !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:first-child:has(> input[type=checkbox]) + td { font-size: 14px !important; font-weight: 600 !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:first-child:has(> input[type=checkbox]) + td::before { content: none !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td.tl-cell-actions { display: flex !important; flex-wrap: wrap; gap: 6px !important; align-items: center; margin-top: 4px !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td.tl-cell-actions > * { margin: 0 !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td.tl-cell-actions :is(button, a, .btn, select) { min-height: 30px !important; height: auto !important; }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .pl-status-grid .pl-status-box .pl-status-info > span:first-child { font-size: 20px !important; line-height: 1.1 !important; display: block !important; }
  /* Project List: the list panel was capped at 480 px with the rest cut off */
  html[data-look="tiles"] .tl-content .pl-panel { max-height: none !important; height: auto !important; overflow: visible !important; }
  /* board cards (Project Task List): date and status side by side */
  html[data-look="tiles"] .tl-content .project-task-board-page .card-bottom { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page .card-bottom > * { width: auto !important; flex: 0 1 auto !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page .task-desc { -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- "Heading: value" on one line (all widths) ---------- */
html[data-look="tiles"] .tl-content :is(.cl-task-meta-item, .result-side > div:has(> .side-label), .sv-meta-item, .po-meta-item) {
  display: flex !important; flex-wrap: wrap; gap: 0 4px; align-items: baseline; padding: 1px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important; box-shadow: none !important;
}
html[data-look="tiles"] .tl-content :is(.cl-task-meta-item, .result-side > div:has(> .side-label), .sv-meta-item, .po-meta-item) > :first-child {
  display: inline !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--tl-label) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-look="tiles"] .tl-content :is(.cl-task-meta-item, .result-side > div:has(> .side-label), .sv-meta-item, .po-meta-item) > :first-child::after { content: ":"; }
html[data-look="tiles"] .tl-content :is(.cl-task-meta-item, .result-side > div:has(> .side-label), .sv-meta-item, .po-meta-item) > :last-child:not(:first-child) {
  display: inline !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--tl-ink) !important;
}
html[data-look="tiles"] .tl-content .cl-task-meta { gap: 0 14px !important; }

@media (max-width: 760px) {
  /* Conversation Workspace: each project on one row — code, client, status */
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong + small) {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 10px !important; min-height: 0 !important; margin: 0 0 4px !important;
  }
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong + small)::after { display: none !important; }
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong + small) > * { margin: 0 !important; min-width: 0; }
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong + small) > small:nth-of-type(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong + small) > strong:empty { display: none; }
  html[data-look="tiles"] .conversation-workspace-page .card:has(> strong:empty) > small:nth-of-type(1) { grid-column: 1 / 3; }
  /* Conversation List: the chat takes the height it needs (it was a fixed 620 px panel) */
  html[data-look="tiles"] .tl-content :is(.cl-chat-panel, .cl-task-panel) { height: auto !important; min-height: 0 !important; max-height: none !important; }
  html[data-look="tiles"] .tl-content .cl-chat-body { max-height: 60dvh !important; }
  /* User Task List: no fixed list height */
  html[data-look="tiles"] .tl-content .utl-task-list { height: auto !important; min-height: 0 !important; }
  html[data-look="tiles"] .tl-content .utl-panel { height: auto !important; }
  /* Search Conversations results: contact and last date on one line each, status and View on one row */
  html[data-look="tiles"] .tl-content .result-item .result-side { display: flex !important; flex-wrap: wrap; gap: 2px 12px !important; align-items: center; }
  html[data-look="tiles"] .tl-content .result-item .result-side > :is(.status-badge, .view-btn) { width: auto !important; flex: 0 0 auto; }
  html[data-look="tiles"] .tl-content .result-item .result-side > .view-btn { margin-left: auto !important; min-height: 30px !important; padding: 0 14px !important; }
  html[data-look="tiles"] .tl-content .result-item { gap: 4px !important; padding: 10px !important; }
}

/* ---------- Site Visit List ---------- */
html[data-look="tiles"] .tl-content .site-visit-row .save-pending-action { background: var(--tl-cobalt) !important; background-image: none !important; border-color: var(--tl-cobalt) !important; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row { padding: 8px 10px !important; gap: 0 !important; }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td:not(.action-box) {
    display: block !important; min-height: 0 !important; height: auto !important; padding: 1px 0 !important; border: 0 !important; text-align: left !important; font-size: 13px !important; font-weight: 500 !important;
  }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td:not(.action-box)::before {
    content: attr(data-label) ": " !important; position: static !important; display: inline !important; width: auto !important; float: none !important;
    font-size: 12.5px !important; font-weight: 400 !important; color: var(--tl-label) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important;
  }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td:first-child { font-size: 14px !important; font-weight: 600 !important; }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td:first-child::before { content: none !important; }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td.action-box { padding: 6px 0 0 !important; border: 0 !important; min-height: 0 !important; }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td.action-box::before { content: none !important; display: none !important; }
  html[data-look="tiles"] .tl-content .sv-table .pending-action-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; width: 100% !important; }
  html[data-look="tiles"] .tl-content .sv-table .pending-action-panel > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; height: 36px !important; min-height: 0 !important; font-size: 13px !important; }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .sv-status-overview > .sv-status-card { min-height: 0 !important; height: auto !important; padding: 6px 7px !important; }
  html[data-look="tiles"] .tl-content .sv-status-overview .sv-status-text :first-child { font-size: 20px !important; line-height: 1.1 !important; }
  html[data-look="tiles"] .tl-content .sv-status-overview .sv-status-text :last-child:not(:first-child) { font-size: 11px !important; line-height: 1.2 !important; }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .sv-table .pending-action-panel { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  html[data-look="tiles"] .tl-content .sv-table .pending-action-panel > .pending-observer { grid-column: 2 / -1; }
  html[data-look="tiles"] .tl-content .sv-table .pending-action-panel > button { padding: 0 10px !important; }
  html[data-look="tiles"] .tl-content .sv-table tr.site-visit-row > td:not(.action-box) * { display: inline !important; }
}
@media (max-width: 760px) {
  /* status / priority chips share one row */
  html[data-look="tiles"] .tl-content table.tl-cardtable td:has(> :is(.badge, .pill, .status-pill, .pm-badge, .status-badge, [class*="badge"]):only-child) { flex: 0 0 auto !important; margin-top: 3px !important; }
  html[data-look="tiles"] .tl-content table.tl-cardtable td:has(> :is(.badge, .pill, .status-pill, .pm-badge, .status-badge, [class*="badge"]):only-child)::before { content: none !important; }
}

/* ================= Activity Log ================= */
html[data-look="tiles"] .tl-content .activity-kpi-strip { gap: 6px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; margin-bottom: 8px !important; }
html[data-look="tiles"] .tl-content .activity-kpi-strip > * { background: #E1E6EC !important; border: 0 !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: none !important; min-height: 0 !important; }
html[data-look="tiles"] .tl-content .activity-kpi-strip > :first-child { background: var(--tl-cobalt) !important; color: #fff !important; }
html[data-look="tiles"] .tl-content .activity-kpi-strip > :first-child * { color: inherit !important; }
html[data-look="tiles"] .tl-content .activity-kpi-strip [class*="icon"] { display: none !important; }
html[data-look="tiles"] .tl-content .activity-kpi-strip strong { font-weight: 300 !important; font-size: 26px !important; }
html[data-look="tiles"] .tl-content .activity-board-card { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html[data-look="tiles"] .tl-content .activity-toolbar { margin: 0 0 6px !important; padding: 0 !important; gap: 6px !important; }
html[data-look="tiles"] .tl-content .activity-title { display: none !important; }
html[data-look="tiles"] .tl-content .activity-search-wrap { gap: 6px !important; margin-left: auto; }
html[data-look="tiles"] .tl-content .activity-search-wrap > * { height: 34px !important; min-height: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-look="tiles"] .tl-content :is(.activity-filter-btn, .activity-action-btn) { background: var(--tl-cobalt) !important; background-image: none !important; color: #fff !important; border: 0 !important; padding: 0 14px !important; }
html[data-look="tiles"] .tl-content .activity-action-btn { background: #fff !important; color: var(--tl-link) !important; border: 1px solid #C6D6E8 !important; }
html[data-look="tiles"] .tl-content .activity-column { border-radius: 0 !important; }
html[data-look="tiles"] .tl-content .activity-column-head { padding: 7px 10px !important; min-height: 0 !important; }
html[data-look="tiles"] .tl-content .activity-list { padding: 6px !important; }
/* a session on two short lines: name, role, status / "Login: …  Logout: …" */
html[data-look="tiles"] .tl-content .activity-card { padding: 7px 10px !important; margin: 0 0 6px !important; border-radius: 0 !important; box-shadow: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
html[data-look="tiles"] .tl-content .activity-card-top { display: contents !important; }
html[data-look="tiles"] .tl-content .activity-card .user-info { grid-column: 1; display: flex !important; gap: 8px; align-items: baseline; min-width: 0; }
html[data-look="tiles"] .tl-content .activity-card .user-name { margin: 0 !important; font-size: 13.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look="tiles"] .tl-content .activity-card .user-sub { font-size: 12px !important; white-space: nowrap; }
html[data-look="tiles"] .tl-content .activity-card .role-badge { grid-column: 2; grid-row: 1; border-radius: 0 !important; height: auto !important; padding: 2px 8px !important; font-size: 11.5px !important; }
html[data-look="tiles"] .tl-content .activity-card .activity-meta { grid-column: 1; display: flex !important; flex-wrap: wrap; gap: 0 14px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-look="tiles"] .tl-content .activity-card .meta-row { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 12.5px !important; }
html[data-look="tiles"] .tl-content .activity-card .meta-row > * { display: inline !important; font-size: 12.5px !important; }
html[data-look="tiles"] .tl-content .activity-card .meta-row > :first-child { color: var(--tl-label) !important; font-weight: 400 !important; }
html[data-look="tiles"] .tl-content .activity-card .meta-row > :first-child::after { content: ": "; }
html[data-look="tiles"] .tl-content .activity-card .meta-row > :last-child { font-weight: 500 !important; color: var(--tl-ink) !important; }
html[data-look="tiles"] .tl-content .activity-card .activity-card-footer { grid-column: 2; grid-row: 2; margin: 0 !important; padding: 0 !important; border: 0 !important; gap: 4px !important; }
html[data-look="tiles"] .tl-content .activity-card .activity-card-footer > * { border-radius: 0 !important; height: auto !important; min-height: 0 !important; padding: 2px 7px !important; font-size: 11.5px !important; }
html[data-look="tiles"] .tl-content .activity-card .session-chip { display: none !important; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .activity-search-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; width: 100% !important; margin: 0 !important; }
  html[data-look="tiles"] .tl-content .activity-search-wrap > * { width: auto !important; }
  html[data-look="tiles"] .tl-content .activity-toolbar { flex-direction: row !important; }
  html[data-look="tiles"] .tl-content .activity-list { max-height: 60dvh !important; }
}

/* ================= Performance Rating ================= */
html[data-look="tiles"] .tl-content:has(.rating-details) .hero-banner { display: none !important; }
@media (min-width: 761px) {
  /* one row per person (the page drew a tall card per person at every width) */
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap table { display: table !important; width: 100% !important; border-collapse: collapse !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap thead { display: table-header-group !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap tbody { display: table-row-group !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap tr { display: table-row !important; background: #fff !important; border: 0 !important; box-shadow: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap :is(td, th) {
    display: table-cell !important; padding: 6px 10px !important; border: 0 !important; border-bottom: 1px solid var(--tl-row) !important; text-align: left !important; background: none !important; font-size: 13px !important; vertical-align: middle !important;
  }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap th { background: var(--tl-head) !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--tl-label) !important; position: sticky; top: 0; z-index: 1; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td::before { content: none !important; display: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap tr::before, html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap tr::after { display: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .panel-card { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}
@media (max-width: 760px) {
  /* a person in three lines: name, role, department / rating / On time · Late · Overdue · Manual */
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap tr {
    display: flex !important; flex-wrap: wrap !important; gap: 2px 12px !important; padding: 8px 10px !important; margin: 0 0 6px !important; border-radius: 0 !important; box-shadow: none !important; align-items: center;
  }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td { display: block !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; font-size: 13px !important; text-align: left !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td::before { content: attr(data-label) ": " !important; display: inline !important; position: static !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--tl-label) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; width: auto !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:nth-child(-n+3)::before, html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:last-child::before { content: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:first-child { font-weight: 600 !important; font-size: 14px !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:nth-child(4) { flex-basis: 100%; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:last-child { margin-left: auto !important; }
}

/* ================= Manage Users ================= */
html[data-look="tiles"] .tl-content .mu-stats { gap: 6px !important; }
html[data-look="tiles"] .tl-content .mu-stat { border-radius: 0 !important; box-shadow: none !important; border: 0 !important; background: #E1E6EC !important; padding: 8px 12px !important; min-height: 0 !important; }
html[data-look="tiles"] .tl-content .mu-stat:first-child { background: var(--tl-cobalt) !important; color: #fff !important; }
html[data-look="tiles"] .tl-content .mu-stat:first-child * { color: inherit !important; }
html[data-look="tiles"] .tl-content .mu-stat-icon { display: none !important; }
html[data-look="tiles"] .tl-content .mu-stat-value { font-weight: 300 !important; font-size: 26px !important; }
/* Add New User folds under its heading (tap to open) */
html[data-look="tiles"] .tl-content #addUserSection.tl-foldable > .section-head { cursor: pointer; padding: 8px 12px !important; }
html[data-look="tiles"] .tl-content #addUserSection.tl-foldable > .section-head h3::before { content: "+ "; color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-content #addUserSection.tl-foldable.is-open > .section-head h3::before { content: "− "; }
html[data-look="tiles"] .tl-content #addUserSection.tl-foldable:not(.is-open) > .form-body { display: none !important; }
html[data-look="tiles"] .tl-content #addUserSection .section-tag { display: none !important; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .mu-stat-value { font-size: 20px !important; }
  html[data-look="tiles"] .tl-content #addUserSection .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px 8px !important; }
  html[data-look="tiles"] .tl-content #addUserSection .form-grid > :has(textarea, input[type=file]) { grid-column: 1 / -1; }
}
@media (min-width: 761px) {
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap table { table-layout: auto !important; min-width: 0 !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap :is(td, th) { width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; grid-template-columns: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:first-child { font-weight: 600 !important; width: 30% !important; }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td { width: auto !important; flex: 0 0 auto !important; grid-template-columns: none !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:first-child { flex-basis: auto !important; }
  html[data-look="tiles"] .tl-content:has(.rating-details) .table-wrap td:nth-child(4) { flex: 1 1 100% !important; }
  /* Manage Users list: "Heading: value" lines, empty ones left out */
  html[data-look="tiles"] .tl-content .mu-table tr { padding: 8px 10px !important; gap: 0 !important; }
  html[data-look="tiles"] .tl-content .mu-table td { display: block !important; min-height: 0 !important; padding: 1px 0 !important; border: 0 !important; text-align: left !important; font-size: 13px !important; }
  html[data-look="tiles"] .tl-content .mu-table td::before { content: attr(data-label) ": " !important; display: inline !important; position: static !important; width: auto !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--tl-label) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
  html[data-look="tiles"] .tl-content .mu-table td:first-child::before, html[data-look="tiles"] .tl-content .mu-table td:last-child::before { content: none !important; }
  html[data-look="tiles"] .tl-content .mu-table td:empty { display: none !important; }
  html[data-look="tiles"] .tl-content .mu-table td:last-child { margin-top: 4px !important; }
  html[data-look="tiles"] .tl-content .mu-table td > :is(.role-badge, .status-badge) { padding: 1px 7px !important; height: auto !important; }
}

/* ================= Train / Bus Ticket Booking (uses the courier board frame) ================= */
@media (min-width: 1101px) {
  html[data-look="tiles"] .courier-page .records-workspace:has(.booking-tabs) { grid-template-rows: auto auto minmax(0, 1fr) !important; }
}
html[data-look="tiles"] .courier-page .booking-tabs { height: auto !important; min-height: 0 !important; gap: 4px !important; margin: 0 0 6px !important; flex-wrap: wrap; }
html[data-look="tiles"] .courier-page .booking-tabs > .booking-tab-btn {
  height: 34px !important; min-height: 0 !important; flex: 0 0 auto !important; width: auto !important; padding: 0 16px !important; border-radius: 0 !important; box-shadow: none !important;
  background: #fff !important; color: var(--tl-link) !important; border: 1px solid #C6D6E8 !important; flex-direction: row !important; gap: 6px !important;
}
html[data-look="tiles"] .courier-page .booking-tabs > .booking-tab-btn.active { background: var(--tl-cobalt) !important; background-image: none !important; color: #fff !important; border-color: var(--tl-cobalt) !important; }
html[data-look="tiles"] .courier-page .booking-tabs > .booking-tab-btn * { color: inherit !important; }
html[data-look="tiles"] .courier-page .booking-tabs > .booking-tab-btn :is(img, span[class*="icon"], .tab-icon) { width: 16px !important; height: 16px !important; font-size: 14px !important; background: none !important; }

/* ================= Ticket Booking Form, Contact Form ================= */
/* the "Submission Guide" panels repeat what the form shows (same as the Project Dashboard's static panels, owner 13 Oct) */
html[data-look="tiles"] .tl-content :is(aside.side-card, aside.contact-side-card):not(:has(input, select, textarea)) { display: none !important; }
html[data-look="tiles"] .tl-content :has(> :is(aside.side-card, aside.contact-side-card)) { grid-template-columns: minmax(0, 1fr) !important; }
html[data-look="tiles"] .tl-content :is(.choice-card, .option-card) > input[type=radio] { width: 16px !important; height: 16px !important; flex: none !important; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .choice-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  html[data-look="tiles"] .tl-content .choice-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-look="tiles"] .tl-content :is(.choice-card, .option-card) { min-height: 0 !important; padding: 8px !important; gap: 6px !important; }
}

/* Ticket Booking Form: the title bar repeats the headline */
html[data-look="tiles"] .tl-content .ticket-page > .ticket-toolbar { display: none !important; }
/* My Drive on a phone: the files first, the folder tree and storage after them */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content .drive-wrap { display: flex !important; flex-direction: column !important; gap: 8px; }
  html[data-look="tiles"] .tl-content .drive-wrap > .drive-main { order: 1; }
  html[data-look="tiles"] .tl-content .drive-wrap > .drive-left { order: 2; }
  html[data-look="tiles"] .tl-content .drive-main .drive-title { min-height: 0 !important; padding: 0 !important; margin: 0 0 6px !important; }
  html[data-look="tiles"] .tl-content .drive-main .top-actions { gap: 6px !important; }
  html[data-look="tiles"] .tl-content .drive-main .top-actions > * { min-height: 34px !important; height: 34px !important; }
}

/* ---- ui-6 (owner 14 Oct 2026) ---- */
/* Manage Users: the table fits the width (Action column no longer cut off), headings over their values, the list uses the
   page height (no 430 px inner box), count tiles in one row on a tablet too */
@media (min-width: 761px) {
  html[data-look="tiles"] .tl-content .mu-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; }
  html[data-look="tiles"] .tl-content .mu-table-wrap { max-height: none !important; overflow: visible !important; border-radius: 0 !important; }
  html[data-look="tiles"] .tl-content .mu-table { table-layout: auto !important; min-width: 0 !important; }
  html[data-look="tiles"] .tl-content .mu-table :is(th, td) { width: auto !important; text-align: left !important; padding: 6px 8px !important; }
  html[data-look="tiles"] .tl-content .mu-table thead th { top: -10px !important; }
  html[data-look="tiles"] .tl-content .mu-table td:last-child { white-space: nowrap; }
  html[data-look="tiles"] .tl-content .mu-table td:last-child :is(button, a) { min-height: 28px !important; padding: 3px 9px !important; }
}
/* Site Visit List: headings over their values (left), as the cells */
html[data-look="tiles"] .tl-content :is(.sv-table, .site-visit-table, .visit-table) th { text-align: left !important; }
/* My Drive / EverGreen: buttons in the app palette (the orange EverGreen and purple Drive buttons were the old look);
   EverGreen fills the window, its file table fits the middle column */
html[data-look="tiles"] .tl-content .document-btn { background: #fff !important; border-color: #C6D6E8 !important; color: var(--tl-link) !important; }
html[data-look="tiles"] .tl-content .pd-btn.pd-drive-light { background: #fff !important; border-color: #C6D6E8 !important; color: var(--tl-link) !important; }
html[data-look="tiles"] .tl-content .pd-app { border-radius: 0 !important; }
@media (min-width: 1101px) and (min-height: 560px) {
  html[data-look="tiles"] .tl-content .pd-app { height: auto !important; max-height: none !important; flex: 1 1 auto !important; min-height: 420px !important; }
  html[data-look="tiles"] .tl-content .pd-grid { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(240px, 290px) !important; }
}
@media (min-width: 761px) {
  html[data-look="tiles"] .tl-content .pd-table { min-width: 0 !important; table-layout: auto !important; }
  html[data-look="tiles"] .tl-content .pd-table-wrap { border-radius: 0 !important; }
}
/* Train / Bus Ticket Booking: the All / Bus / Train icons sit in line with the words */
html[data-look="tiles"] .tl-content .via-icon .tl-emo { width: 16px; height: 16px; }
html[data-look="tiles"] .tl-content :is(.file-icon, .stat-card, .upload-cloud, .detail-icon, .pd-folder-icon, .pd-row-icon, .folder-tree-icon) .tl-emo { color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-content .sv-table thead .pending-action-panel > span { text-align: left !important; justify-self: start !important; }
html[data-look="tiles"] .tl-content .sv-table thead .pending-action-panel > span:last-child { justify-self: end !important; }

/* v1.0: Ticket Booking Form in the app palette (the purple of the old page was the last colour outside it) */
html[data-look="tiles"] .ticket-page .btn-submit { background: var(--tl-cobalt) !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-look="tiles"] .ticket-page .btn-submit:hover { background: #0B5596 !important; transform: none; }
html[data-look="tiles"] .ticket-page :is(.card-badge, .section-count, .progress-dot) { background: #E6EFF8 !important; color: var(--tl-cobalt) !important; }
html[data-look="tiles"] .ticket-page .user-avatar { background: var(--tl-cobalt) !important; }
html[data-look="tiles"] .ticket-page :is(input, select, textarea):focus { border-color: var(--tl-cobalt) !important; box-shadow: 0 0 0 3px rgba(9, 101, 181, .12) !important; }
html[data-look="tiles"] .ticket-page .priority-critical { background: #F8D7D7 !important; color: #A4262C !important; }
/* v1.0: Submitted tickets as cards on a phone */
@media (max-width: 700px) {
  html[data-look="tiles"] .tk-table thead { display: none; }
  html[data-look="tiles"] .tk-table, html[data-look="tiles"] .tk-table tbody, html[data-look="tiles"] .tk-table tr, html[data-look="tiles"] .tk-table td { display: block; width: 100%; }
  html[data-look="tiles"] .tk-table tr:not(.tk-desc) { padding-top: 8px; }
  html[data-look="tiles"] .tk-table td { padding: 2px 14px !important; }
  html[data-look="tiles"] .tk-table tr.tk-desc td { padding-bottom: 10px !important; }
  html[data-look="tiles"] .tk-table td[data-label]::before { content: attr(data-label) ": "; color: var(--tl-muted, #5b6b7b); }
}

/* v1.3 (owner prompt 1.3 A4): Manage Users — the employee's documents in one group */
html[data-look="tiles"] .tl-content .mu-docs { border-top: 1px solid var(--tl-line); padding-top: 10px; margin-top: 4px; }
html[data-look="tiles"] .tl-content .mu-docs-title { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tl-label-2); }
html[data-look="tiles"] .tl-content .mu-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 12px; }
html[data-look="tiles"] .tl-content .mu-doc .edit-file-note { font-size: 12px; color: var(--tl-muted); }
html[data-look="tiles"] .tl-content .mu-doc .edit-file-note a { color: var(--tl-link); }
/*
 * v1.29 (owner, 31 Oct 2026), Live Tiles only.
 * 2. "In new quotation or in other related pages, add item button is available. But delete button missing" — every item
 *    line of an editor that has "Add item / Add line / Add row" gets a clear Delete button (bin + the word), the same in
 *    every editor: quotation, Proforma / Invoice / Delivery Challan / Credit Note, New purchase, Purchase Management (PR,
 *    PO, received items), Create Purchase project rows, Import / Export lines, certificate rows, extra contacts.
 *    The page scripts keep their buttons (and the classic look keeps its ×); only the Live Tiles face changes.
 */
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  width: auto !important; min-width: 88px; height: 34px !important; min-height: 34px; padding: 0 12px !important;
  border: 1px solid #F1B8BE !important; border-radius: 6px !important; background: #FFF5F6 !important; color: #B42318 !important;
  font: 600 13px/1 var(--tl-font, inherit) !important; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  font-size: 0 !important; /* the × of the markup */
  color: transparent !important; text-indent: 0; overflow: hidden;
}
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#) > * { display: none !important; }
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#)::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 15px; background: #B42318;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#)::after {
  content: 'Delete'; font-size: 13px !important; font-weight: 600; line-height: 1; color: #B42318;
}
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#):is(:hover, :focus-visible) {
  background: #B42318 !important; border-color: #B42318 !important;
}
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#):is(:hover, :focus-visible)::before { background: #fff; }
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#):is(:hover, :focus-visible)::after { color: #fff; }
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#):focus-visible { outline: 2px solid #B42318; outline-offset: 2px; }
html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del):not(#\#):disabled { opacity: .45; cursor: not-allowed; }
/* the column that holds it is wide enough for the word */
html[data-look="tiles"] table:has(> tbody > tr > td:last-child > :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, [data-remove-contact], .xl-del)) > thead > tr > th:last-child { width: 112px !important; min-width: 112px !important; }
html[data-look="tiles"] td:has(> :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del)) { width: 112px; min-width: 112px; white-space: nowrap; }
/* on a phone (one card per line): the button is the card's last row, full width */
@media (max-width: 760px) {
  html[data-look="tiles"] tr:has(> td > :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del)) { display: flex !important; flex-direction: column; }
  html[data-look="tiles"] td:has(> :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del)) { order: 99; width: auto !important; display: block !important; padding-top: 6px !important; }
  html[data-look="tiles"] td:has(> :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del))::before { content: none !important; }
  html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del) { width: 100% !important; height: 38px !important; }
  html[data-look="tiles"] :is(.core-remove-quote-item, .bill-remove, [data-pm-remove-row], .project-row-remove-btn, .xl-del)::after { content: 'Delete this item'; font-size: 14px !important; }
}

/*
 * 3. "Check all pages mobile view and desktop for any field shifts or misalignment. … business unit drop down is
 *    misaligned a bit in most of the pages and overlapping or appearing with another field. Redesign all mobile view pages."
 */

/* 3a. The page title never shrinks under the page's buttons: when the row is full, the buttons move to the next line */
html[data-look="tiles"] .tl-headline > h1 { flex-shrink: 0; max-width: 100%; }
html[data-look="tiles"] .tl-headline :is(.heading-actions, .op-views) { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
html[data-look="tiles"] .tl-headline:not(.has-subnav) .heading-actions { margin-left: auto; }

/* 3b. The page's business unit field: the same height, border and type as the fields and buttons beside it */
html[data-look="tiles"] .unit-top {
  box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 4px 0 12px !important; gap: 8px;
  border: 1px solid #C9D3E0 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important;
  align-self: center; vertical-align: middle; white-space: nowrap;
}
html[data-look="tiles"] .unit-top .unit-top-lbl { font-size: 10.5px; line-height: 1; color: var(--tl-muted, #5B6B7F) !important; flex: none; }
html[data-look="tiles"] .unit-top select {
  height: 38px !important; min-height: 0 !important; border: 0 !important; background-color: transparent !important; box-shadow: none !important;
  padding: 0 26px 0 6px !important; font-size: 14px !important; font-weight: 600; color: var(--tl-ink, #14213D);
  min-width: 150px; max-width: 240px; text-overflow: ellipsis;
}
html[data-look="tiles"] .unit-top:focus-within { border-color: var(--tl-link, #1459A7) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-link, #1459A7) 20%, transparent) !important; }
html[data-look="tiles"] .unit-top b { padding-right: 8px; font-size: 14px; }
/* on a unit's pages: a thin line of the unit's colour on the left, nothing heavier */
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .unit-top { border-color: #C9D3E0 !important; border-left: 3px solid var(--tl-unit) !important; background: #fff !important; }
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .unit-top .unit-top-lbl { color: var(--tl-unit) !important; }
/* the Tiles app controls draw their own dropdown over a select: keep it inside the field */
html[data-look="tiles"] .unit-top :is(.tl-dd, .tl-select, [class*="dropdown"]) { border: 0 !important; background: transparent !important; min-height: 0 !important; }

/* 3c. Phone: one top bar layout on every page — back / XYNC / the page on one line, the business unit on a second full-width
       line, lined up with the page's own edges (it was on a short, offset line and some pages lost "XYNC") */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-topbar {
    display: grid !important; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; row-gap: 6px; padding: 6px 12px 8px !important; min-height: 0 !important; flex-wrap: nowrap;
  }
  html[data-look="tiles"] .tl-topbar > .tl-crumbs { min-width: 0; overflow: hidden; white-space: nowrap; flex-wrap: nowrap; }
  html[data-look="tiles"] .tl-topbar > .tl-crumbs > * { flex: none; }
  html[data-look="tiles"] .tl-topbar > .tl-crumbs .tl-crumb-page { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html[data-look="tiles"] .tl-topbar > .tl-ws { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; width: 100%; max-width: none !important;
    box-sizing: border-box; height: 36px; min-height: 36px; padding: 0 10px !important; border-radius: 6px; }
  html[data-look="tiles"] .tl-topbar > .tl-ws .tl-ws-text { flex: 1; min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  html[data-look="tiles"] .tl-topbar > .tl-ws .tl-ws-lbl { display: inline !important; flex: none; }
  html[data-look="tiles"] .tl-topbar > .tl-ws select { flex: 1; width: 100%; max-width: none !important; font-size: 14px !important; }
  html[data-look="tiles"] .tl-topbar > .tl-workspaces { display: none !important; }
  /* the page's own business unit field: a full-width row like the other fields */
  html[data-look="tiles"] .unit-top { display: flex !important; width: 100% !important; margin: 0 !important; height: 44px; }
  html[data-look="tiles"] .unit-top select { flex: 1; max-width: none; min-width: 0; height: 42px !important; }
  html[data-look="tiles"] .unit-top-row { justify-content: stretch; }
  /* page title: one line, smaller; actions full width under it */
  html[data-look="tiles"] .tl-headline > h1 { font-size: 26px !important; white-space: normal; overflow-wrap: anywhere; }
  html[data-look="tiles"] .tl-headline :is(.heading-actions, .op-views) { width: 100%; justify-content: flex-start; }
  /* every form field and button fits the screen */
  html[data-look="tiles"] .tl-content :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { max-width: 100%; }
}

/* 3d. Pages the layout check found */
/* Assigned Tasks / All Tasks / My Tasks (desktop): the toolbar sits on the title row, unless it would cover the menu there
   (the user filter was drawn over "Call Back" on a laptop): then it starts its own row (tiles/headfit.ts) */
@media (min-width: 1101px) {
  html[data-look="tiles"] body .tl-shell .task-toolbar.v129-toolbar-down:not(#\#) { margin: 0 0 8px auto !important; max-width: 100% !important; flex-wrap: wrap !important; }
}
/* CRM grids (dashboard, templates …): a column never grows wider than the screen (the CRM dashboard's "View all" was off
   the card on a tablet); on a phone every CRM split is one column (Template Studio was two thin columns) */
html[data-look="tiles"] .crm-tiles .grid > *, html[data-look="tiles"] .crm-tiles .split > * { min-width: 0; }
@media (max-width: 1100px) {
  html[data-look="tiles"] .crm-tiles .grid.cols-2, html[data-look="tiles"] .crm-tiles .grid.cols-3 { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-look="tiles"] .crm-tiles .card-header { flex-wrap: wrap; row-gap: 6px; }
  /* Manage Users and Rating (tablet): the tables stay inside their panels */
  html[data-look="tiles"] body .tl-content :is(.mu-table-wrap, .panel-card .table-wrap) { overflow-x: auto !important; max-width: 100%; }
  html[data-look="tiles"] .tl-content .panel-card .table-wrap > table { width: 100% !important; min-width: 0 !important; }
  html[data-look="tiles"] .tl-content .mu-table .row-actions { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  html[data-look="tiles"] .crm-tiles :is(.split, .grid)[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Products & Services Studio (phone): its preview toolbar wraps instead of making the page wider than the screen */
@media (max-width: 760px) {
  .preview-toolbar { flex-wrap: wrap !important; row-gap: 6px; }
  .preview-area { grid-template-columns: minmax(0, 1fr) !important; }
  .preview-toolbar .zoom-input { max-width: 120px; }
}
/* Suppliers (phone): the status chips wrap instead of running off the screen */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content :is(.bu-chips, .op-chips, .bu-tabs, .op-tabs, [role="tablist"]) { flex-wrap: wrap; }
}
/* the quotation and bill windows: the last fields scroll clear of the Save / Cancel bar */
html[data-look="tiles"] :is(#quoteDialog, #leadDialog) :is(.dialog-body, form) { scroll-padding-bottom: 96px; }
html[data-look="tiles"] :is(#quoteDialog, #leadDialog) form > :last-child:not(.dialog-actions):not(.dialog-foot) { margin-bottom: 84px; }

/* 3e. CRM pages (desktop): when the buttons would cover the title, they take their own row under it (tiles/headfit.ts) */
@media (min-width: 1101px) {
  html[data-look="tiles"] .crm-tiles.crm-head-wrap { margin-top: 0 !important; }
  html[data-look="tiles"] .crm-tiles.crm-head-wrap::before { display: none !important; }
  html[data-look="tiles"] .crm-tiles.crm-head-wrap .heading-actions { grid-column: 1 / 3 !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
  html[data-look="tiles"] .crm-tiles.crm-head-wrap .topbar { grid-column: 3 !important; }
}
/* Template Generators (phone): the "Proposal templates" heading and its button stack instead of squeezing the text */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content header.t-soft { flex-wrap: wrap; row-gap: 8px; }
  html[data-look="tiles"] .tl-content header.t-soft > h3 { flex: 1 1 100%; min-width: 0; }
  html[data-look="tiles"] .tl-content header.t-soft > :is(button, a) { margin-left: 0 !important; }
}