/* SharePoint-Style Styles for SPICE.Web */

/* ===== Base Styles ===== */
body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    background-color: #f5f5f5;
}

a {
    color: #0072c6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== Workspace & Body Container ===== */
#s4-workspace {
    background-color: #f5f5f5;
    min-height: 100vh;
}

#s4-bodyContainer {
    max-width: 100%;
}

/* ===== Suite Bar (Top Blue Bar) ===== */
/* V7 7.5: background reads from --theme-suite-bg, which MasterPage.xslt
   emits per-site based on the manifest's Theme="..." attribute. Fallback
   keeps the pre-7.5 CorporateBlue look on unthemed pages (e.g. tests). */
.ms-core-suiteBar {
    background-color: var(--theme-suite-bg, #0078d4);
    height: 30px;
    line-height: 30px;
    color: white;
}

.ms-core-suiteBar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.ms-core-branding {
    font-weight: 600;
}

.ms-core-suiteLink {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.ms-core-suiteLink:hover {
    text-decoration: none;
}

.ms-core-suiteLink-a {
    display: inline-block;
}

.ms-core-suiteBar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ms-core-header {
    display: flex;
    gap: 15px;
}

.ms-core-menu-title {
    font-size: 12px;
    cursor: pointer;
    opacity: 0.9;
}

.ms-core-menu-title:hover {
    opacity: 1;
}

/* ===== Ribbon ===== */
.ms-ribbonrow {
    background-color: #f5f5f5;
    border-bottom: 1px solid #c0c0c0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ms-cui-ribbon {
    max-width: 100%;   /* full page width on desktop (was 1200px centered) */
    margin: 0 auto;
}

.ms-cui-tabContainer {
    display: flex;
    background-color: #f5f5f5;
    border-bottom: 1px solid #c0c0c0;
}

.ms-cui-tab {
    padding: 0;
}

.ms-cui-tab-a {
    display: block;
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}

.ms-cui-tab-active .ms-cui-tab-a {
    background-color: white;
    border-color: #c0c0c0;
    border-bottom: 1px solid white;
    font-weight: 600;
}

.ms-cui-tab-a:hover {
    background-color: #e5e5e5;
    text-decoration: none;
}

.ms-cui-tab-active .ms-cui-tab-a:hover {
    background-color: white;
}

.ms-cui-ribbon-topBars {
    background-color: white;
    padding: 10px 20px;
}

.ms-cui-topBar1 {
    display: flex;
}

.ms-cui-ribbon-toolbar {
    display: flex;
    gap: 20px;
}

.ms-cui-group {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    border-right: 1px solid #e5e5e5;
}

.ms-cui-group:last-child {
    border-right: none;
}

.ms-cui-group-title {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ms-cui-group-body {
    display: flex;
    gap: 10px;
}

.ms-cui-ctl {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #c0c0c0;
    background: linear-gradient(to bottom, #fff, #f5f5f5);
    color: #333;
    text-decoration: none;
    border-radius: 2px;
    font-size: 12px;
}

.ms-cui-ctl:hover {
    background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
    text-decoration: none;
}

.ms-cui-ctl-icon {
    font-size: 14px;
}

.ms-cui-ctl-label {
    white-space: nowrap;
}

/* ===== Content Row Layout ===== */
.ms-content-row {
    display: flex;
}

.ms-quicklaunch-container {
    width: 200px;
    flex-shrink: 0;
}

/* ===== Welcome Content ===== */
.welcome-content {
    margin-bottom: 20px;
}

.ms-webpart-titleText {
    font-size: 24px;
    font-weight: 300;
    color: #333;
    margin: 0 0 15px 0;
}

.ms-webpart-titleText span {
    border-bottom: 2px solid #0078d4;
    padding-bottom: 5px;
}

.site-theme {
    background: #f0f8ff;
    padding: 10px 15px;
    border-left: 4px solid #0078d4;
    border-radius: 0 2px 2px 0;
}

.ms-core-content {
    min-height: 400px;
}

.ms-quickLaunch-header {
    padding: 10px 15px;
    font-weight: 600;
    color: #333;
    background: #f5f5f5;
    border-bottom: 1px solid #eaeaea;
}

.ms-commandLink {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #eaeaea;
}

.ms-heroCommandLink {
    color: #0078d4;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.ms-heroCommandLink:hover {
    text-decoration: underline;
}

.ms-listLink {
    color: #0078d4;
    font-weight: 500;
}

.ms-core-listMenu-selected {
    font-weight: 600;
    color: #333;
}

/* ===== Title Row ===== */
/* V7 7.5: same per-site theming as the suite bar above. */
#s4-titlerow {
    background-color: var(--theme-title-bg, #0072c6);
    color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#titleAreaBox {
    max-width: 100%;   /* full page width on desktop (was 1200px centered) */
    margin: 0 auto;
}

#titleAreaRow {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ms-siteicon-a img {
    height: 40px;
}

.ms-core-pageTitle {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ms-core-pageTitle a {
    color: white;
}

/* ===== Navigation ===== */
.ms-core-navigation {
    flex: 1;
}

.ms-core-listMenu-horizontalBox {
    display: flex;
}

.ms-core-listMenu-root {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.ms-core-listMenu-item {
    color: white;
    padding: 8px 16px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.ms-core-listMenu-item:hover {
    background-color: rgba(255,255,255,0.1);
    text-decoration: none;
}

/* ===== Content Row ===== */
#contentRow {
    display: flex;
    max-width: 100%;   /* full page width on desktop (was 1200px centered) */
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}

#sideNavBox {
    width: 200px;
    flex-shrink: 0;
}

#contentBox {
    flex: 1;
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 20px;
}

/* ===== Quick Launch ===== */
.ms-quickLaunch {
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ms-core-listMenu-verticalBox {
    padding: 10px 0;
}

.ms-core-listMenu-verticalBox .menu-item {
    border-bottom: 1px solid #eaeaea;
}

.ms-core-listMenu-verticalBox .menu-item:last-child {
    border-bottom: none;
}

.ms-core-listMenu-verticalBox a {
    display: block;
    padding: 8px 16px;
    color: #333;
    font-weight: 600;
}

.ms-core-listMenu-verticalBox ul.static {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-core-listMenu-verticalBox ul.static a {
    font-weight: normal;
    padding-left: 30px;
}

/* ===== Breadcrumb ===== */
.ms-breadcrumb-top {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.ms-breadcrumb {
    font-size: 12px;
}

.ms-breadcrumbNode {
    color: #666;
}

.ms-breadcrumbSeparator {
    color: #999;
    margin: 0 5px;
}

/* The breadcrumb reuses the nav item class, whose white text is meant for the blue bars: on the white
   content area it was invisible. */
.ms-breadcrumbNode .ms-core-listMenu-item { color: #0072c6; padding: 0; }
.ms-breadcrumbNode .ms-core-listMenu-item:hover { background: none; text-decoration: underline; }
.ms-breadcrumbNode .ms-core-listMenu-selected { color: #333; }

/* ===== Web Part Zones ===== */
.ms-webpart-zone-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ms-webpart-page-content {
    display: flex;
    gap: 20px;
}

.ms-webpart-zone-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ms-webpart-zone {
    display: flex;
    gap: 10px;
}

.ms-webpart-zone-horizontal {
    flex-direction: row;
}

.ms-webpart-zone-vertical {
    flex-direction: column;
}

/* ===== Web Part Chrome ===== */
.ms-webpart-chrome {
    background: white;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
}

.ms-webpart-chrome-title-only {
    border-top: 3px solid #0072c6;
}

.ms-webpart-chrome-none {
    border: none;
    background: transparent;
}

.ms-webpart-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #c0c0c0;
    padding: 10px 15px;
    font-weight: 600;
    color: #333;
}

.ms-webpart-chrome-title-only .ms-webpart-header {
    background-color: transparent;
    border-bottom: none;
    padding: 10px 0;
    font-size: 16px;
    color: #0072c6;
}

.ms-webpart-content {
    padding: 15px;
}

/* ===== List View Styles ===== */
.ms-listview-host {
    padding: 0;
}

.ms-listview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 15px;
}

.ms-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-toolbar-right {
    display: flex;
    align-items: center;
}

.ms-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #c0c0c0;
    background: white;
    color: #333;
    cursor: pointer;
    border-radius: 2px;
    font-size: 13px;
}

.ms-button:hover {
    background: #f5f5f5;
}

.ms-button-primary {
    background: #0072c6;
    color: white;
    border-color: #0072c6;
}

.ms-button-primary:hover {
    background: #005a9e;
}

.ms-toolbar-separator {
    color: #999;
}

.ms-dropdown {
    padding: 6px 10px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    background: white;
    min-width: 150px;
}

.ms-listview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ms-listview-title {
    margin: 0;
    font-size: 24px;
    font-weight: 300;
    color: #333;
}

.ms-listview-count {
    color: #666;
    font-size: 12px;
}

.ms-listview-table-container {
    overflow-x: auto;
}

.ms-listviewtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ms-viewheadertr {
    background-color: #f5f5f5;
}

.ms-headerCell {
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #c0c0c0;
    white-space: nowrap;
}

.ms-headerCell a {
    color: #333;
}

.ms-vh-select {
    width: 30px;
}

.ms-vh-sortable {
    cursor: pointer;
}

.ms-vh-currentSort {
    background-color: #e5e5e5;
}

.ms-vh-currentSort:after {
    content: " ▲";
    font-size: 10px;
}

.ms-vh-currentSort.ms-vh-desc:after {
    content: " ▼";
}

.ms-cellstyle {
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top;
}

.ms-itmhover:hover {
    background-color: #f5f5f5;
}

/* V2 6.2 - inline cell edit affordance. Subtle pointer cursor + hover
   tint so users discover that cells are click-to-edit without cluttering
   the table UI. The td swaps in place via htmx, no full row rerender. */
.ms-cell-editable {
    cursor: pointer;
}
.ms-cell-editable:hover {
    background-color: #fafafa;
    box-shadow: inset 0 0 0 1px #cce4f7;
}
.ms-cell-edit input,
.ms-cell-edit select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #0072c6;
    border-radius: 2px;
    font: inherit;
    box-sizing: border-box;
}
/* V2 6.4 - validation surfacing on inline cell edit. Error message
   sits above the input; the input itself gets a red border so the
   correlation is clear at a glance. */
.ms-cell-error input,
.ms-cell-error select,
.ms-cell-error textarea {
    border-color: #a4262c;
    box-shadow: 0 0 0 1px #f8d7da inset;
}
.ms-cell-error-msg {
    color: #a4262c;
    font-size: 11px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ms-actions {
    white-space: nowrap;
}

.ms-action-link {
    margin-right: 8px;
    text-decoration: none;
}

.ms-noitems {
    text-align: center;
    color: #666;
    padding: 40px;
}

.ms-listview-pagination {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eaeaea;
    text-align: center;
}

.ms-paging {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.ms-paging a {
    color: #0072c6;
    padding: 5px 10px;
}

.ms-paging-current {
    color: #666;
}

/* ===== Dashboard & Quick Links ===== */
.sp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-dashboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eaeaea;
}

.sp-dashboard-item:last-child {
    border-bottom: none;
}

.sp-dashboard-label {
    color: #666;
}

.sp-dashboard-value {
    font-weight: 600;
    font-size: 18px;
    color: #0072c6;
}

.sp-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-quick-links li {
    padding: 6px 0;
    border-bottom: 1px solid #eaeaea;
}

.sp-quick-links li:last-child {
    border-bottom: none;
}

.sp-welcome-message h2 {
    margin-top: 0;
    color: #333;
}

.sp-welcome-message p {
    color: #666;
    line-height: 1.6;
}

.sp-recent-docs {
    width: 100%;
    border-collapse: collapse;
}

.sp-recent-docs th,
.sp-recent-docs td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #eaeaea;
}

.sp-recent-docs th {
    font-weight: 600;
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
}

.sp-calendar-events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-calendar-events li {
    padding: 8px 0;
    border-bottom: 1px solid #eaeaea;
}

.sp-event-date {
    font-weight: 600;
    color: #0072c6;
}

/* ===== Footer ===== */
.ms-core-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #eaeaea;
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

/* ===== Form Styles ===== */
.ms-form-container {
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ms-form-header {
    padding: 20px;
    border-bottom: 1px solid #eaeaea;
}

.ms-form-title {
    margin: 0;
    font-size: 24px;
    font-weight: 300;
    color: #333;
}

.ms-form-body {
    padding: 20px;
}

.ms-formtable {
    width: 100%;
    border-collapse: collapse;
}

.ms-formlabel {
    padding: 15px 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    vertical-align: top;
    width: 200px;
}

.ms-formbody {
    padding: 10px;
}

.ms-input,
.ms-textarea,
.ms-dropdown {
    width: 100%;
    max-width: 400px;
    padding: 8px 10px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    font-size: 13px;
    font-family: inherit;
}

.ms-input:focus,
.ms-textarea:focus,
.ms-dropdown:focus {
    border-color: #0072c6;
    outline: none;
}

.ms-textarea {
    resize: vertical;
}

.ms-required {
    color: #d32f2f;
    margin-left: 4px;
}

.ms-form-validation {
    display: block;
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
}

.ms-form-display-value {
    padding: 8px 0;
    color: #333;
}

.ms-form-footer {
    padding: 20px;
    border-top: 1px solid #eaeaea;
    text-align: right;
}

.ms-form-footer .ms-button {
    margin-left: 10px;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    #contentRow {
        flex-direction: column;
    }
    
    #sideNavBox {
        width: 100%;
    }
    
    .ms-webpart-page-content {
        flex-direction: column;
    }
    
    .ms-webpart-zone-column {
        width: 100% !important;
    }
    
    #titleAreaRow {
        flex-wrap: wrap;
    }

    .ms-core-listMenu-root {
        flex-wrap: wrap;
    }
}

/* ===== V2 5.2 - async-form layer support ===== */

/* Submit button while a data-spice-async fetch is in flight. The text
   is hidden via transparent color so the button doesn't change width;
   the rotating ring is positioned absolutely on top. */
.spice-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.spice-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spice-spin 0.6s linear infinite;
}

@keyframes spice-spin {
    to { transform: rotate(360deg); }
}

/* Error slot appended inline when an async submit fails. */
.spice-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fde7e9;
    border: 1px solid #d83b01;
    border-radius: 2px;
    color: #a4262c;
    font-size: 13px;
}

/* ===== V2 5.3 - mobile responsive ===== */

/* Under 640px the desktop layout stops working: list tables overflow,
   forms feel cramped, the masthead breadcrumb truncates against the
   promoted search input. Reflow the surfaces without changing the
   SP-2010 aesthetic - tables become card-stacked rows, masthead
   stacks vertically, form inputs grow to touch-friendly sizes. */
/* SharePoint 2013/2016 list ribbon (ListView.xslt): BROWSE / ITEMS / LIST tabs as radio + label,
   switched by CSS alone - no JavaScript needed to change tab. */
.ms-ribbon { background: #fff; border-bottom: 1px solid #d4d4d4; padding: 0 20px; font-size: 13px; }
.ms-ribbon-radio { position: absolute; opacity: 0; pointer-events: none; }
.ms-ribbon-tabs { display: flex; gap: 2px; }
.ms-ribbon-tabs label { padding: 7px 14px 5px; cursor: pointer; color: #444; letter-spacing: .04em;
                        font-size: 12px; border: 1px solid transparent; border-bottom: none; }
.ms-ribbon-tabs label:hover { color: #0072c6; }
#ms-tab-browse:checked ~ .ms-ribbon-tabs label[for=ms-tab-browse],
#ms-tab-items:checked ~ .ms-ribbon-tabs label[for=ms-tab-items],
#ms-tab-list:checked ~ .ms-ribbon-tabs label[for=ms-tab-list] {
    color: #0072c6; border-color: #d4d4d4; background: #fff; margin-bottom: -1px; font-weight: 600; }
#ms-tab-browse:focus-visible ~ .ms-ribbon-tabs label[for=ms-tab-browse],
#ms-tab-items:focus-visible ~ .ms-ribbon-tabs label[for=ms-tab-items],
#ms-tab-list:focus-visible ~ .ms-ribbon-tabs label[for=ms-tab-list] { outline: 2px solid #0072c6; }
.ms-ribbon-panel { display: none; flex-wrap: wrap; align-items: stretch; gap: 0;
                   border-top: 1px solid #d4d4d4; padding: 6px 0; min-height: 44px; }
#ms-tab-browse:checked ~ .ms-ribbon-browse,
#ms-tab-items:checked ~ .ms-ribbon-items,
#ms-tab-list:checked ~ .ms-ribbon-list { display: flex; }
.ms-ribbon-browse { align-items: center; gap: 14px; }
.ms-ribbon-title { font-size: 15px; color: #333; }
.ms-ribbon-hint { color: #888; font-size: 12px; }
.ms-ribbon-group { display: flex; flex-direction: column; justify-content: space-between;
                   padding: 0 12px; border-right: 1px solid #e1e1e1; }
.ms-ribbon-group:last-child { border-right: none; }
.ms-ribbon-cmds { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ms-ribbon-group-label { color: #777; font-size: 11px; text-align: center; margin-top: 4px; }
.ms-cmd { display: inline-block; padding: 5px 10px; font: inherit; font-size: 13px; color: #333;
          background: #fff; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
          text-decoration: none; }
.ms-cmd:hover { background: #cde6f7; border-color: #92c0e0; }
.ms-cmd:disabled { color: #b1b1b1; cursor: default; background: #fff; border-color: transparent; }
.ms-cmd-danger { color: #a4262c; }

/* Item callout (ECB "...") and column header menus: <details> dropdowns, no JavaScript. */
.ms-ecb, .ms-colmenu { position: relative; display: inline-block; }
.ms-ecb > summary, .ms-colmenu > summary { list-style: none; cursor: pointer; }
.ms-ecb > summary::-webkit-details-marker, .ms-colmenu > summary::-webkit-details-marker { display: none; }
.ms-ecb > summary { padding: 0 6px; color: #666; border-radius: 2px; font-weight: 700; letter-spacing: 1px; }
.ms-ecb > summary:hover, .ms-ecb[open] > summary { background: #cde6f7; color: #333; }
.ms-colmenu > summary::after { content: " \25BE"; color: #999; font-size: 11px; }
.ms-menu { position: absolute; z-index: 50; top: 100%; left: 0; min-width: 170px; margin: 2px 0 0; padding: 4px 0;
           background: #fff; border: 1px solid #c6c6c6; box-shadow: 0 2px 8px rgba(0,0,0,.15);
           list-style: none; font-weight: 400; }
.ms-menu li > a, .ms-menu li > form > button { display: block; width: 100%; box-sizing: border-box; text-align: left;
           padding: 6px 14px; color: #333; text-decoration: none; background: none; border: none; font: inherit;
           font-size: 13px; cursor: pointer; white-space: nowrap; }
.ms-menu li > a:hover, .ms-menu li > form > button:hover { background: #cde6f7; }
.ms-menu li > form { margin: 0; }
.ms-menu .ms-menu-sep { border-top: 1px solid #e1e1e1; margin: 4px 0; }
.ms-menu .ms-menu-head { padding: 4px 14px; color: #777; font-size: 11px; text-transform: uppercase; }
.ms-menu a[aria-current] { font-weight: 600; color: #0072c6; }
.ms-colmenu > .ms-menu { max-height: 360px; overflow-y: auto; }
.ms-colmenu-filtered { color: #0072c6; font-weight: 400; font-size: 11px; }

@media (max-width: 640px) {
    .ms-content { padding: 0 12px !important; }
    .ms-card { padding: 14px !important; }

    /* Sticky masthead from V2 5.1: breadcrumb stacks above search
       input so neither truncates. */
    .ms-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .ms-header h1 {
        font-size: 15px !important;
        line-height: 1.4;
        word-break: break-word;
    }
    .ms-masthead-search { width: 100%; }
    .ms-masthead-search input { flex: 1; min-width: 0; }

    /* Stack the list-view table as cards. Each <tr> becomes a card;
       each <td> becomes a labeled key/value block. The thead is
       hidden offscreen; cells with a data-label attribute (set by
       ListView.xslt's per-cell template) render their label via
       ::before so the user keeps column context. Cells without
       data-label still render as plain rows - no breakage on legacy
       projections. */
    table.ms-listviewtable,
    table.ms-listviewtable thead,
    table.ms-listviewtable tbody,
    table.ms-listviewtable tr,
    table.ms-listviewtable th,
    table.ms-listviewtable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    table.ms-listviewtable thead {
        position: absolute;
        left: -9999px;
    }
    table.ms-listviewtable tr {
        margin-bottom: 12px;
        border: 1px solid #e3e3e3;
        border-radius: 3px;
        background: #fff;
        padding: 6px 0;
    }
    table.ms-listviewtable td {
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 14px;
    }
    table.ms-listviewtable tr td:last-child { border-bottom: none; }
    table.ms-listviewtable td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 3px;
        letter-spacing: 0.04em;
    }

    /* Form inputs: 16px font-size prevents iOS zoom-on-focus; touch
       targets reach the 44px iOS HIG minimum on action buttons. */
    .ms-form-row input[type=text],
    .ms-form-row input[type=number],
    .ms-form-row input[type=datetime-local],
    .ms-form-row input[type=date],
    .ms-form-row select,
    .ms-form-row textarea {
        font-size: 16px;
    }
    .ms-btn-primary,
    .ms-btn-secondary,
    .ms-btn-folder {
        min-height: 44px;
        line-height: 28px;
    }

    /* Refiners strip: facet pills wrap onto multiple rows. */
    .ms-refiners .row { flex-wrap: wrap; }
}