#main-container {
  background-color: var(--dmsp-bg-light);
  flex: 1;
}

:root {
    /* Brand identity — anchor #0f88cd. See BRAND_IDENTITY.md. */
    --dmsp-primary: #0f88cd;
    --dmsp-secondary: #4dabe0;
    --dmsp-primary-dark: #0a6aa0;
    --dmsp-panel-tint: #e6f3fb;
    --dmsp-panel-border: #b8dcf2;
    --dmsp-bg-light: #f8fafc;
    --dmsp-text-dark: #1e293b;
    --dmsp-text-muted: #64748b;
    --dmsp-icon-muted: #7aa9c9;
    --dmsp-success: #059669;
    --dmsp-warning: #d97706;
    --dmsp-danger: #dc2626;
    --dmsp-gradient-bold: linear-gradient(135deg, var(--dmsp-primary), var(--dmsp-secondary));
    --dmsp-panel-bg: linear-gradient(135deg, var(--dmsp-panel-tint), #fff);

    /* Badge tints (background) + on-tint text */
    --dmsp-success-tint: #dcfce7;
    --dmsp-success-text: #065f46;
    --dmsp-warning-tint: #fef3c7;
    --dmsp-warning-text: #92400e;
    --dmsp-danger-tint: #fee2e2;
    --dmsp-danger-text: #991b1b;
    --dmsp-muted-tint: #f1f5f9;
    --dmsp-muted-text: #475569;
    --dmsp-info-tint: #dbeafe;
    --dmsp-info-text: #1e40af;

    /* LEGACY — only --primary-color remains: it is grey (#333), genuinely distinct from
       the brand blue, and still consumed by .navbar-brand / .sidebar / chat .typing-*
       (those migrate with the per-app restyles). The other legacy aliases were exact
       duplicates of --dmsp-* tokens; they were removed and their references repointed. */
    --primary-color: #333333;
}

h1, h2, h3, h4, h5, h6, p {
  color: var(--bs-dark);
}

.highlighted {
  border: var(--bs-primary) solid 2px !important;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#navbar {
  transition: background-color 0.5s ease-out;
  border-bottom: 1px solid var(--dmsp-panel-border);
}
.navbar {
  font-size: 18px; /* Adjust the size as needed */
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-item {
  color: var(--dmsp-text-dark);
  transition: color 0.2s ease-in-out;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--dmsp-primary-dark);
  background: var(--dmsp-bg-light);
  border-radius: 8px;
}

.navbar-toggler {
  border-color: #ddd;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: var(--dmsp-primary);
}

/* Add animation for dropdown */
.dropdown-menu {
  display: none; /* Hide the menu initially */
  opacity: 0; /* Set initial opacity to 0 */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.dropdown-menu.show {
  display: block; /* Show the menu when the dropdown is active */
  opacity: 1; /* Set opacity to 1 for fade-in effect */
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075)!important;
}

#footer {
  background-color: #f8f9fa; /* Slightly off-white for a soft look */
  color: #212529; /* Bootstrap's default dark shade for text */
}

#footer a {
  color: var(--dmsp-text-muted);
}

#footer a:hover {
  color: var(--dmsp-primary-dark);
  text-decoration: underline; /* Adds a bit of interaction on hover */
}

/* Hide spinners in WebKit browsers */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinners in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dmsp-bg-light);
    color: var(--dmsp-text-dark);
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary-color) !important;
}

.sidebar {
    background: #fff;
    border-right: 1px solid var(--dmsp-panel-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
    padding: 0.5rem 0;
}

.export-notes-pre {
    white-space: pre-wrap;
    font-family: inherit;
    max-height: 150px;
    overflow-y: auto;
}

.col-checkbox {
    width: 40px;
}

.progress-xs {
    height: 5px;
}

.icon-bullet {
    font-size: .6rem;
    vertical-align: middle;
}

.history-label {
    min-width: 110px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-value {
    max-width: 160px;
}

/* ===== App sidebar — uniform across tech_notes / vehicle_orders / tire_storage / service.
   Subtle nav items (not solid-blue buttons); active = tinted pill + accent text. ===== */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    color: var(--dmsp-text-dark);
    padding: 0.6rem 0.9rem;
    margin: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link .mdi {
    color: var(--dmsp-icon-muted);
}

.sidebar .nav-link:hover {
    background-color: var(--dmsp-bg-light);
    color: var(--dmsp-primary-dark);
}

.sidebar .nav-link.active {
    background-color: var(--dmsp-panel-tint);
    color: var(--dmsp-primary-dark);
    font-weight: 600;
}

.sidebar .nav-link:hover .mdi,
.sidebar .nav-link.active .mdi {
    color: var(--dmsp-primary-dark);
}

/* Canonical group heading — replaces the per-app ad-hoc heading markup. */
.sidebar-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dmsp-text-muted);
    padding: 0.75rem 0.9rem 0.25rem;
}

.card {
    border: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.cost-display {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--dmsp-muted-tint);
    border-top: 3px solid var(--dmsp-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 56px;
        left: -100%;
        width: 280px;
        transition: left 0.3s;
        z-index: 1000;
    }
    .sidebar.show {
        left: 0;
    }
}

/* Mobile sidebar backdrop */
#sidebarBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    cursor: pointer;
}
#sidebarBackdrop.show { display: block; }

/* Mobile sidebar floating toggle button */
#sidebarToggleBtn {
    display: none;
    position: fixed;
    bottom: 3.5rem;
    left: 1.25rem;
    z-index: 1001;
    background: var(--dmsp-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    align-items: center;
    gap: 0.45rem;
}
#sidebarToggleBtn:hover { background: var(--dmsp-primary); color: #fff; transform: scale(1.05); }

@media (max-width: 767.98px) {
    #sidebarToggleBtn { display: flex; }
}

.speech-input.listening {
    border-color: #ff4444;
    box-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
}

.mic-btn {
    margin-left: 5px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 8px;
}

.mic-btn:hover {
    background-color: #f0f0f0;
}

.mic-btn:disabled {
    cursor: not-allowed;
}

/* Icon-only navbar links with hover label */
.nav-icon-link {
    display: flex !important;
    align-items: center;
    position: relative;
    white-space: nowrap;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Bigger icons */
.nav-icon-link .mdi {
    font-size: 1.25rem;
    color: var(--dmsp-icon-muted);
}

/* Label: hidden inline by default, expands on hover (shifts siblings) */
.nav-icon-link .nav-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 0;
    transition: max-width 0.45s ease, opacity 0.35s ease, margin-left 0.45s ease;
}

.nav-icon-link:hover .nav-label,
.nav-icon-link.nav-current .nav-label {
    max-width: 300px;
    opacity: 1;
    margin-left: 0.4rem;
    color: var(--dmsp-primary-dark);
}

.nav-icon-link:hover .mdi,
.nav-icon-link.nav-current .mdi {
    color: var(--dmsp-primary-dark);
}

.nav-icon-link.nav-current {
    background: var(--dmsp-panel-tint);
    border-radius: 8px;
}

/* Used only during JS measurement — no flash, no transition */
.nav-icon-link.measuring .nav-label {
    max-width: none !important;
    opacity: 0 !important;
    margin-left: 0.4rem !important;
    transition: none !important;
}

/* On mobile (collapsed nav), always show labels */
@media (max-width: 991.98px) {
    .nav-icon-link .nav-label {
        max-width: 300px;
        opacity: 1;
        margin-left: 0.4rem;
    }
}

/* ===== DMS-Plus component library — see BRAND_IDENTITY.md ===== */

.dmsp-page-header{
  background:var(--dmsp-gradient-bold);color:#fff;
  margin:0 calc(-0.5 * var(--bs-gutter-x, 1.5rem));padding:2.5rem 0;
  position:relative;overflow:hidden;border-radius:0;
}

.dmsp-avatar{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;
}

.dmsp-card{
  background:#fff;border-radius:15px;padding:1.75rem;
  border-left:4px solid var(--dmsp-primary);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .3s ease,box-shadow .3s ease;height:100%;
}
.dmsp-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.dmsp-card-icon{
  width:42px;height:42px;border-radius:10px;background:var(--dmsp-panel-tint);
  color:var(--dmsp-primary-dark);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.dmsp-card-title{font-size:1.05rem;font-weight:700;color:var(--dmsp-text-dark)}

.dmsp-btn-primary{
  display:inline-block;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--dmsp-gradient-bold);color:#fff;border:none;border-radius:10px;
  padding:.6rem 1.1rem;font-weight:600;transition:transform .15s ease,box-shadow .15s ease;
}
.dmsp-btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,136,205,.3)}

.dmsp-setting-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--dmsp-muted-tint);
}
.dmsp-setting-item:last-child{border-bottom:none}
.dmsp-setting-item small{color:var(--dmsp-text-muted)}

.dmsp-quick-link{
  display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-radius:10px;
  color:var(--dmsp-text-dark);text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.dmsp-quick-link:hover{background:var(--dmsp-bg-light);color:var(--dmsp-primary-dark);transform:translateX(4px)}
.dmsp-quick-link .mdi:first-child{color:var(--dmsp-icon-muted)}
.dmsp-quick-link:hover .mdi:first-child{color:var(--dmsp-primary-dark)}

.dmsp-table{width:100%;border-collapse:collapse}
.dmsp-table thead th{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dmsp-text-muted);border-bottom:2px solid var(--dmsp-panel-border);padding:.6rem .75rem;text-align:left;
}
.dmsp-table tbody td{padding:.7rem .75rem;border-bottom:1px solid #f1f1f1;color:var(--dmsp-text-dark)}
.dmsp-table tbody tr:hover{background:var(--dmsp-bg-light)}

.dmsp-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600}
.dmsp-badge--success{background:var(--dmsp-success-tint);color:var(--dmsp-success-text)}
.dmsp-badge--warning{background:var(--dmsp-warning-tint);color:var(--dmsp-warning-text)}
.dmsp-badge--danger{background:var(--dmsp-danger-tint);color:var(--dmsp-danger-text)}
.dmsp-badge--info{background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark)}
.dmsp-badge--muted{background:var(--dmsp-muted-tint);color:var(--dmsp-muted-text)}

.dmsp-avatar--brand{background:var(--dmsp-gradient-bold)}
.dmsp-avatar--sm{width:34px;height:34px;font-size:.8rem}

.dmsp-lang-label{background:var(--dmsp-gradient-bold);color:#fff;border:none}

/* ===== Chat components (assistant + tech_notes) — see BRAND_IDENTITY.md ===== */

/* Page wrapper: fills the viewport below the navbar. padding-top gives breathing room
   under the navbar now that the assistant chat has no page header. */
.dmsp-chat-page{display:flex;flex-direction:column;height:calc(100vh - 140px);min-height:420px;
  gap:1rem;padding-top:1rem}
.dmsp-chat-shell{flex:1 1 auto;min-height:0;display:flex;gap:1rem}

/* Conversation rail (assistant). Desktop: permanent side column. */
.dmsp-chat-rail{flex:0 0 200px;display:flex;flex-direction:column;min-height:0;
  min-width:0;  /* honor the 200px basis; without this, flex min-width:auto expands the
                   rail to the widest nowrap conversation title instead of ellipsising it */
  border-right:1px solid var(--dmsp-muted-tint);padding-right:.75rem}
.dmsp-chat-rail-disclosure{min-height:0}
.dmsp-chat-rail-summary{display:none}
.dmsp-chat-rail-list{list-style:none;margin:.5rem 0 0;padding:0;overflow-y:auto}
.dmsp-chat-rail-list li{margin:0}
.dmsp-chat-rail-list a{display:block;padding:.45rem .6rem;border-radius:8px;
  color:var(--dmsp-text-dark);text-decoration:none;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:background .15s ease}
.dmsp-chat-rail-list a:hover{background:var(--dmsp-panel-tint)}
.dmsp-chat-rail-list a.is-active{background:var(--dmsp-panel-tint);
  color:var(--dmsp-primary-dark);font-weight:600;box-shadow:inset 3px 0 0 var(--dmsp-primary)}

/* Desktop: rail disclosure is a flex column with a scrolling list; summary hidden. */
@media (min-width:768px){
  .dmsp-chat-rail-disclosure{flex:1 1 auto;display:flex;flex-direction:column}
  .dmsp-chat-rail-list{flex:1 1 auto}
}

/* Main column (assistant). */
.dmsp-chat-main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}

/* Scrollable message log (both pages). */
.dmsp-chat-log{flex:1 1 auto;overflow-y:auto;padding:.75rem;display:flex;
  flex-direction:column;gap:.6rem;background:#fff}
/* Bounded height for a log whose container is NOT a height-constrained flex column
   (Tech Notes' .dmsp-section-card is a plain block). Restores the internal scroll +
   auto-scroll-to-latest that the removed .chat-container{height:60vh} used to provide;
   the assistant log omits this and fills its flex column instead. */
.dmsp-chat-log--bounded{flex:none;height:60vh}

/* Message bubbles (both). */
.dmsp-chat-msg{max-width:80%;padding:.6rem .85rem;border-radius:12px;
  overflow-wrap:break-word;white-space:normal}
.dmsp-chat-msg--user{align-self:flex-end;background:var(--dmsp-primary);color:#fff}
.dmsp-chat-msg--assistant{align-self:flex-start;background:var(--dmsp-muted-tint);
  color:var(--dmsp-text-dark)}
.dmsp-chat-msg--user :is(a,strong,em,code){color:#fff}
.dmsp-chat-msg-meta{font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dmsp-text-muted);margin-bottom:.25rem}
.dmsp-chat-msg--user .dmsp-chat-msg-meta{color:rgba(255,255,255,.85)}

/* Preserve the assistant's user-bubble literal-newline behaviour. */
.dmsp-chat-msg--user.dmsp-chat-msg--pre{white-space:pre-wrap;overflow-wrap:break-word}

/* Markdown body — add ALONGSIDE .markdown-body / .markdown-content (JS hooks untouched). */
.dmsp-chat-md p{margin:0 0 .5rem}
.dmsp-chat-md p:last-child{margin-bottom:0}
.dmsp-chat-md table{border-collapse:collapse;margin:.4rem 0}
.dmsp-chat-md th,.dmsp-chat-md td{border:1px solid var(--dmsp-panel-border);
  padding:.25rem .5rem;text-align:left}
.dmsp-chat-md code{background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark);
  padding:.05rem .3rem;border-radius:4px;font-family:monospace}
.dmsp-chat-md pre{background:var(--dmsp-bg-light);padding:.5rem;border-radius:6px;overflow-x:auto}
.dmsp-chat-msg--user .dmsp-chat-md code{background:rgba(255,255,255,.2);color:#fff}
.dmsp-chat-msg--user .dmsp-chat-md pre{background:rgba(0,0,0,.2);color:#fff}
/* Assistant chat inline links (tool-minted in-app URLs only). */
.dmsp-chat-md a.dmsp-chat-link{text-decoration:underline}

/* Assistant chat date separators (timestamps feature). */
.dmsp-chat-daysep{text-align:center;font-size:.78rem;color:var(--dmsp-text-muted);
  margin:.75rem 0 .35rem;user-select:none}

/* Composer (both). */
.dmsp-chat-composer{display:flex;gap:.5rem;align-items:flex-end;padding-top:.6rem;
  border-top:1px solid var(--dmsp-muted-tint)}
.dmsp-chat-input{flex:1 1 auto;resize:none;padding:.55rem .7rem;border-radius:10px;
  border:1px solid var(--dmsp-panel-border);font:inherit;color:var(--dmsp-text-dark);background:#fff}
.dmsp-chat-input:focus{outline:none;border-color:var(--dmsp-primary);
  box-shadow:0 0 0 3px var(--dmsp-panel-tint)}

/* "Thinking…" dots (both). */
.dmsp-chat-typing{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  color:var(--dmsp-text-muted);font-style:italic}
.dmsp-chat-typing-dots{display:flex;gap:.25rem}
.dmsp-chat-typing-dots span{width:8px;height:8px;border-radius:50%;
  background:var(--dmsp-primary);animation:dmspChatTyping 1.4s infinite ease-in-out}
.dmsp-chat-typing-dots span:nth-child(1){animation-delay:-.32s}
.dmsp-chat-typing-dots span:nth-child(2){animation-delay:-.16s}
@keyframes dmspChatTyping{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.dmsp-chat-typing-dots span{animation:none}}

/* Assistant tool-activity lines. */
.dmsp-chat-activity{padding:0 .5rem}
.dmsp-chat-activity-line{font-size:.85rem;color:var(--dmsp-text-muted);padding:.15rem 0;
  display:flex;align-items:center;gap:.4rem}
.dmsp-chat-activity-spin{display:inline-block;animation:spin 1s linear infinite}

/* Assistant full-width agent status banner (data-online is authoritative; keep it). */
.dmsp-chat-banner{margin-bottom:.5rem;padding:.55rem .9rem;border-radius:10px;font-size:.9rem}
.dmsp-chat-banner[data-online="1"]{background:var(--dmsp-success-tint);color:var(--dmsp-success-text)}
.dmsp-chat-banner[data-online="0"]{background:var(--dmsp-warning-tint);color:var(--dmsp-warning-text)}
/* Shared-capacity info tone (sharing spec §8.4). Compound selector so it beats the
   [data-online="0"] rule on specificity regardless of source order. */
.dmsp-chat-banner[data-online="0"][data-shared="1"]{background:var(--dmsp-info-tint);color:var(--dmsp-info-text)}

/* Toast. */
.dmsp-chat-toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);
  background:var(--dmsp-text-dark);color:#fff;padding:.6rem 1rem;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:1080}
.dmsp-chat-toast.show{opacity:1}

/* Connect panel (agent_bridge partial made self-styling; warning-tinted). */
.dmsp-connect{margin-bottom:.5rem;padding:.9rem 1rem;border-radius:12px;
  background:var(--dmsp-warning-tint);color:var(--dmsp-warning-text)}
.dmsp-connect .connect-title{margin:0 0 .35rem;font-size:1rem}
.dmsp-connect .connect-lede{margin:0 0 .6rem}
.dmsp-connect .connect-steps{margin:.4rem 0;padding-left:1.2rem}
.dmsp-connect .connect-steps code,.dmsp-connect .connect-help code{
  background:#fff;color:var(--dmsp-warning-text);padding:.05rem .3rem;
  border-radius:4px;font-family:monospace}
.dmsp-connect .connect-note{font-size:.85rem;opacity:.85;margin:.3rem 0 .5rem}
.dmsp-connect .connect-help{margin:.5rem 0}
.dmsp-connect .connect-help summary{cursor:pointer}
.dmsp-connect .connect-toggle-link{background:none;border:none;padding:0;margin-top:.5rem;
  color:var(--dmsp-warning-text);text-decoration:underline;cursor:pointer;font:inherit;display:block}
.dmsp-connect .connect-status{margin-top:.5rem;font-size:.9rem}

/* Mobile: rail collapses to a <details> disclosure and stacks ABOVE the chat.
   Keep the bounded .dmsp-chat-page height (from the base rule) so the log still
   scrolls INTERNALLY and the composer stays pinned — do NOT switch to height:auto,
   which unbinds the log and pushes the composer off-screen as messages accumulate. */
@media (max-width:767.98px){
  .dmsp-chat-shell{flex-direction:column}
  .dmsp-chat-rail{flex:0 0 auto;border-right:none;padding-right:0}
  .dmsp-chat-rail-summary{display:flex;align-items:center;gap:.4rem;cursor:pointer;
    padding:.5rem .7rem;border-radius:10px;background:var(--dmsp-panel-tint);
    color:var(--dmsp-primary-dark);font-weight:600;list-style:none}
  .dmsp-chat-rail-summary::-webkit-details-marker{display:none}
  .dmsp-chat-rail-list{max-height:45vh}
}

/* Messages float over the page (fixed) instead of pushing content down.
   Container ignores pointer events so the empty padding doesn't block clicks;
   the alerts themselves re-enable them so the close button still works. */
.alert-container{position:fixed;top:calc(56px + .75rem);left:50%;transform:translateX(-50%);z-index:998;width:100%;max-width:900px;padding:0 1rem;pointer-events:none}
.alert-container .alert{border:none;border-left:4px solid var(--dmsp-primary);pointer-events:auto;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);animation:dmspAlertIn .25s ease-out}
@keyframes dmspAlertIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.alert-container .alert{animation:none}}
.alert-container .alert.alert-success{border-left-color:var(--dmsp-success)}
.alert-container .alert.alert-danger{border-left-color:var(--dmsp-danger)}
.alert-container .alert.alert-warning{border-left-color:var(--dmsp-warning)}

/* ===== Gradient page header wave + page section (header base is in the component library above) ===== */
.dmsp-page-header::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.58,5.33,1100,1.36V0Z"/></svg>') repeat-x;
  background-size:1000px 100px;animation:dmspWave 20s linear infinite;
}
@media (prefers-reduced-motion: reduce){.dmsp-page-header::before{animation:none}}
@keyframes dmspWave{0%{background-position-x:0}100%{background-position-x:1000px}}
.dmsp-page-header-content{position:relative;z-index:1;display:flex;align-items:center;gap:1.5rem}
.dmsp-page-header-avatar{
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);
  border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;color:#fff;font-size:1.6rem;font-weight:700;letter-spacing:1px;
}
.dmsp-page-header-avatar .mdi{font-size:2rem}
.dmsp-page-header-avatar img{width:52px;height:52px;object-fit:contain}
.dmsp-page-header-info h1{color:#fff;font-size:1.75rem;font-weight:700;margin-bottom:.25rem}
.dmsp-page-header-info p{color:#fff;opacity:.85;margin-bottom:0;font-size:.95rem}
.dmsp-page-section{padding:2.5rem 0 3rem}
/* Inset variant for app pages that live inside the sidebar layout (no full-bleed). */
.dmsp-page-header--inset{margin:0;border-radius:12px;padding:1.5rem}
.dmsp-page-header--inset .dmsp-page-header-avatar{width:52px;height:52px}
.dmsp-page-header--inset .dmsp-page-header-info h1{font-size:1.4rem}
@media (max-width:768px){
  .dmsp-page-header-content{flex-direction:column;text-align:center}
  .dmsp-page-header-info h1{font-size:1.4rem}
  .dmsp-page-section{padding:1.5rem 0 2rem}
}

/* ===== Save button (larger primary action) ===== */
.dmsp-save-btn{
  display:inline-block;cursor:pointer;background:var(--dmsp-gradient-bold);color:#fff;border:none;
  padding:.7rem 2.5rem;border-radius:10px;font-weight:600;font-size:1rem;
  transition:transform .3s ease,box-shadow .3s ease;
}
.dmsp-save-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(15,136,205,.3)}

/* ===== Profile: phone verification badge ===== */
.dmsp-phone-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;padding:.2rem .6rem;border-radius:20px}
.dmsp-phone-status.verified{background:#dcfce7;color:#065f46}
.dmsp-phone-status.unverified{background:#fee2e2;color:#991b1b}

/* ===== Dealer: header badge + team member list + invite ===== */
.dmsp-sub-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;padding:.25rem .7rem;border-radius:20px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)}
.dmsp-member-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;border-radius:10px;transition:background-color .2s ease;margin-bottom:.25rem}
.dmsp-member-item:hover{background:var(--dmsp-bg-light)}
.dmsp-member-avatar{width:34px;height:34px;border-radius:50%;background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.dmsp-member-info{flex:1;min-width:0}
.dmsp-member-name{font-weight:600;font-size:.9rem;color:var(--dmsp-text-dark);line-height:1.3}
.dmsp-member-email{font-size:.78rem;color:var(--dmsp-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmsp-member-remove{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;background:none;color:#cbd5e1;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:all .2s ease}
.dmsp-member-remove:hover{background:#fee2e2;color:var(--dmsp-danger)}
.dmsp-invite-form{display:flex;gap:.5rem;margin-bottom:1.25rem}
@media (max-width:768px){.dmsp-invite-form{flex-direction:column}}

/* ===== Navbar account avatar dropdown (right side) ===== */
.dmsp-nav-avatar-trigger{padding:0 !important;background:none !important}
.dmsp-nav-avatar-trigger:hover,.dmsp-nav-avatar-trigger:focus{background:none !important}
.dmsp-nav-avatar-trigger .dmsp-avatar{transition:transform .15s ease,box-shadow .15s ease}
.dmsp-nav-avatar-trigger:hover .dmsp-avatar{transform:scale(1.08);box-shadow:0 2px 10px rgba(15,136,205,.3)}
.dmsp-dropdown{border:none !important;border-radius:.5rem !important;box-shadow:0 8px 30px rgba(0,0,0,.15) !important;padding:.35rem !important;min-width:12rem}
.dmsp-dropdown .dropdown-item{border-radius:.35rem;padding:.5rem .75rem;font-weight:500;color:var(--dmsp-text-dark);transition:color .15s ease,background-color .15s ease}
.dmsp-dropdown .dropdown-item:hover,.dmsp-dropdown .dropdown-item:focus{background-color:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark)}
.dmsp-dropdown .dropdown-item .mdi{font-size:1.1em;vertical-align:-2px;color:var(--dmsp-icon-muted);transition:color .15s ease}
.dmsp-dropdown .dropdown-item:hover .mdi,.dmsp-dropdown .dropdown-item:focus .mdi{color:var(--dmsp-primary-dark)}
.dmsp-dropdown-dealer-logo{width:20px;height:20px;object-fit:contain;border-radius:4px;vertical-align:-3px}
.dmsp-dropdown-logout{color:var(--dmsp-danger) !important;border:none;background:none;width:100%;text-align:left;cursor:pointer}
.dmsp-dropdown-logout:hover,.dmsp-dropdown-logout:focus{background-color:#fff1f0 !important;color:var(--dmsp-danger) !important}
.dmsp-dropdown-logout .mdi{color:var(--dmsp-danger) !important}

/* ===== Account-management sub-nav (allauth manage pages) ===== */
.account-subnav{background:#fff;border-left:4px solid var(--dmsp-primary);border-radius:15px;padding:1rem;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.account-subnav .nav-link{display:flex;align-items:center;color:var(--dmsp-text-dark);border-radius:8px;padding:.5rem .75rem;margin:.1rem 0;font-weight:500;transition:background-color .15s ease,color .15s ease}
.account-subnav .nav-link:hover{background:var(--dmsp-bg-light);color:var(--dmsp-primary-dark)}
.account-subnav .nav-link.active{background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark);font-weight:600}

/* ===== Brand Bootstrap primary buttons + form focus to the dmsp palette =====
   Re-themes Bootstrap's CSS vars so allauth element buttons (manage pages) and any
   remaining .btn-primary pick up the brand blue without per-template edits. */
.btn-primary{--bs-btn-bg:var(--dmsp-primary);--bs-btn-border-color:var(--dmsp-primary);--bs-btn-hover-bg:var(--dmsp-primary-dark);--bs-btn-hover-border-color:var(--dmsp-primary-dark);--bs-btn-active-bg:var(--dmsp-primary-dark);--bs-btn-active-border-color:var(--dmsp-primary-dark)}
.btn-outline-primary{--bs-btn-color:var(--dmsp-primary-dark);--bs-btn-border-color:var(--dmsp-primary);--bs-btn-hover-bg:var(--dmsp-primary);--bs-btn-hover-border-color:var(--dmsp-primary);--bs-btn-active-bg:var(--dmsp-primary-dark);--bs-btn-active-border-color:var(--dmsp-primary-dark)}
.form-control:focus,.form-select:focus{border-color:var(--dmsp-panel-border);box-shadow:0 0 0 .2rem rgba(15,136,205,.2)}

/* ===== Loaners redesign primitives (Task 3) — see BRAND_IDENTITY.md §6 ===== */

/* 1. Section card — replaces <hr>-separated sections on detail pages. */
.dmsp-section-card{
  background:#fff;border-radius:15px;border-left:4px solid var(--dmsp-primary);
  box-shadow:0 2px 10px rgba(0,0,0,.06);padding:1.5rem 1.65rem;margin-bottom:1.5rem;
}
.dmsp-section-card-header{
  display:flex;align-items:center;gap:.75rem;
  padding-bottom:.85rem;margin-bottom:1.15rem;border-bottom:1px solid var(--dmsp-muted-tint);
}
.dmsp-section-card-header .dmsp-card-icon{flex-shrink:0;width:36px;height:36px;font-size:1.05rem}
.dmsp-section-card-title{
  font-size:1.05rem;font-weight:700;color:var(--dmsp-text-dark);margin:0;line-height:1.2;
}
.dmsp-section-card-header .dmsp-section-card-action{margin-left:auto;display:flex;align-items:center;gap:.5rem}

/* 2. Stat tile — compact summary metric, tiles in a flex/grid strip. */
.dmsp-stat{
  display:flex;flex-direction:column;gap:.2rem;min-width:0;
  padding:.85rem 1.1rem;background:var(--dmsp-bg-light);border-radius:12px;
  border:1px solid var(--dmsp-muted-tint);
}
.dmsp-stat-label{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dmsp-text-muted);line-height:1.2;
}
.dmsp-stat-value{
  font-size:1.35rem;font-weight:700;color:var(--dmsp-text-dark);line-height:1.2;
}

/* 3. Meter — horizontal progress bar; width set inline on the fill. */
.dmsp-meter{
  width:100%;height:8px;border-radius:999px;background:var(--dmsp-muted-tint);overflow:hidden;
}
.dmsp-meter-fill{
  display:block;height:100%;max-width:100%;
  background:var(--dmsp-gradient-bold);transition:width .4s ease;
}
.dmsp-meter-fill.over{background:var(--dmsp-danger)}

/* 4. Photo grid — responsive thumbnail grid of tap/click targets. */
.dmsp-photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;
}
.dmsp-photo-grid--lg{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.dmsp-photo-grid a,.dmsp-photo-grid .dmsp-photo-grid-item{
  display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:var(--dmsp-muted-tint);cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.dmsp-photo-grid a:hover,.dmsp-photo-grid .dmsp-photo-grid-item:hover{
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.dmsp-photo-grid img{width:100%;height:100%;object-fit:cover;display:block}

/* 5. Form card — centered max-width wrapper for form pages. */
.dmsp-form-card{
  background:#fff;border-radius:15px;border-left:4px solid var(--dmsp-primary);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  max-width:640px;margin:0 auto;padding:2rem 2.25rem;
}
@media (max-width:576px){.dmsp-form-card{padding:1.5rem 1.25rem}}
/* Wide modifier — for forms that need room (e.g. a rich-text body editor). */
.dmsp-form-card--wide{max-width:920px}

/* 5b. Token panel — copyable merge-field / anchor chips inside the form card. */
.dmsp-token-panel{
  background:var(--dmsp-bg-light);border:1px solid var(--dmsp-muted-tint);
  border-radius:12px;padding:1rem 1.15rem;
}
.dmsp-token-panel-title{font-size:.9rem;font-weight:700;color:var(--dmsp-text-dark)}
.dmsp-token-group{margin-top:.65rem}
.dmsp-token-group-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dmsp-text-muted);margin-bottom:.4rem;
}
.dmsp-token-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dmsp-token{
  cursor:pointer;display:inline-block;padding:.25rem .55rem;border-radius:8px;
  background:#fff;border:1px solid var(--dmsp-muted-tint);
  font-size:.78rem;color:var(--dmsp-primary-dark);
  transition:border-color .15s ease,background-color .15s ease,transform .1s ease;
}
.dmsp-token:hover{border-color:var(--dmsp-panel-border);background:var(--dmsp-panel-tint)}
.dmsp-token:active{transform:translateY(1px)}

/* 5c. Doc paper — a "printed page" frame for previewing rendered document HTML. */
.dmsp-doc-paper{
  background:var(--dmsp-bg-light);border-radius:12px;
  padding:1.25rem;display:flex;justify-content:center;
}
.dmsp-doc-paper-frame{
  width:100%;max-width:816px;height:75vh;border:none;border-radius:6px;background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}

/* 7. Filter pills — segmented links that drive a GET param (e.g. ?status=). */
.dmsp-filter-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.dmsp-filter-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .85rem;border-radius:999px;font-size:.82rem;font-weight:600;
  text-decoration:none;color:var(--dmsp-text-muted);
  background:#fff;border:1px solid var(--dmsp-muted-tint);
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
.dmsp-filter-pill:hover{color:var(--dmsp-primary-dark);border-color:var(--dmsp-panel-border);background:var(--dmsp-bg-light)}
.dmsp-filter-pill.is-active{
  color:#fff;background:var(--dmsp-gradient-bold);border-color:transparent;
  box-shadow:0 2px 8px rgba(15,136,205,.25);
}
.dmsp-filter-pill.is-active:hover{color:#fff}

/* 8. Overdue table row — danger left-accent to flag past-due active loans. */
.dmsp-table tbody tr.dmsp-row--overdue td:first-child{
  box-shadow:inset 3px 0 0 0 var(--dmsp-danger);
}
.dmsp-row-flag--overdue{
  display:inline-flex;align-items:center;gap:.2rem;margin-left:.4rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dmsp-danger-text);
}

/* Whole-row link: a real anchor in the first cell keeps the row keyboard-
   reachable; the row's onclick is a mouse-only convenience on top of it. */
.dmsp-table tbody tr.dmsp-row-link td:first-child .dmsp-row-link-target{
  color:inherit;text-decoration:none;font-weight:600;
}
.dmsp-table tbody tr.dmsp-row-link:hover td:first-child .dmsp-row-link-target,
.dmsp-table tbody tr.dmsp-row-link td:first-child .dmsp-row-link-target:focus{
  color:var(--dmsp-primary-dark);text-decoration:underline;
}

/* 6. Empty state — friendly centered placeholder with optional CTA. */
.dmsp-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:3.5rem 1.5rem;color:var(--dmsp-text-muted);
}
.dmsp-empty-icon{
  font-size:3rem;line-height:1;color:var(--dmsp-icon-muted);margin-bottom:.85rem;
}
.dmsp-empty-message{
  font-size:1rem;color:var(--dmsp-text-dark);font-weight:600;margin-bottom:.35rem;
}
.dmsp-empty-detail{font-size:.875rem;color:var(--dmsp-text-muted);margin-bottom:1.25rem;max-width:28rem}
.dmsp-empty-detail:last-child{margin-bottom:0}

/* 7. Responsive card grid — auto-fill grid of equal-height cards (~260px min). */
.dmsp-card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;
}
/* A .dmsp-card that is itself a link (whole-card click target, keyboard-focusable). */
a.dmsp-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.dmsp-card:hover{text-decoration:none;color:inherit}
a.dmsp-card:focus-visible{outline:2px solid var(--dmsp-primary);outline-offset:2px}
/* A .dmsp-card that is a <div onclick> with a real inner link (row-link pattern,
   used when a second interactive element must live inside the card). */
.dmsp-card--clickable{display:flex;flex-direction:column;cursor:pointer}
.dmsp-card--clickable .dmsp-row-link-target{color:inherit;text-decoration:none}
.dmsp-card--clickable:focus-within{outline:2px solid var(--dmsp-primary);outline-offset:2px}
.dmsp-card-grid-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem;
}
.dmsp-card-grid-name{font-size:1.05rem;font-weight:700;color:var(--dmsp-text-dark);line-height:1.3}
.dmsp-card-grid-meta{display:flex;flex-direction:column;gap:.5rem;margin-top:auto}
.dmsp-card-grid-meta-row{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--dmsp-text-muted)}
.dmsp-card-grid-meta-row .mdi{color:var(--dmsp-icon-muted);font-size:1.05rem;flex-shrink:0}
.dmsp-card-grid-meta-row strong{color:var(--dmsp-text-dark);font-weight:600}

/* ===== Loaners detail page (Task 8) — see BRAND_IDENTITY.md §6 ===== */

/* Stat strip — responsive grid of .dmsp-stat tiles for a summary header. */
.dmsp-stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.85rem;margin-bottom:1.5rem;
}
/* A stat tile that needs to span more room (e.g. the km-allowance meter). */
.dmsp-stat--wide{grid-column:span 2}
@media (max-width:576px){.dmsp-stat--wide{grid-column:auto}}
.dmsp-stat-value--sm{font-size:1rem;font-weight:600;line-height:1.35}
.dmsp-stat-sub{font-size:.8rem;color:var(--dmsp-text-muted);line-height:1.35}

/* Section-card icon colour variants (header glyph tint by section). */
.dmsp-card-icon--success{background:var(--dmsp-success-tint);color:var(--dmsp-success-text)}
.dmsp-card-icon--warning{background:var(--dmsp-warning-tint);color:var(--dmsp-warning-text)}

/* Reveal — a tucked <details> disclosure for secondary "add" forms inside a
   section card. The summary is a quiet pill-style toggle; the body holds the form. */
.dmsp-reveal{
  margin-top:1.1rem;border-top:1px dashed var(--dmsp-muted-tint);padding-top:1rem;
}
.dmsp-reveal>summary{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  font-size:.85rem;font-weight:600;color:var(--dmsp-primary-dark);
  padding:.4rem .8rem;border-radius:999px;background:var(--dmsp-panel-tint);
  width:fit-content;transition:background .15s ease,transform .15s ease;
}
.dmsp-reveal>summary::-webkit-details-marker{display:none}
.dmsp-reveal>summary:hover{transform:translateY(-1px)}
.dmsp-reveal>summary .mdi{transition:transform .2s ease}
.dmsp-reveal[open]>summary .mdi{transform:rotate(45deg)}
.dmsp-reveal-body{padding-top:1rem}

/* Inline mini-list rows inside section cards (charges, deposits, documents). */
.dmsp-line-list{display:flex;flex-direction:column;gap:.1rem}
.dmsp-line{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem .25rem;border-bottom:1px solid var(--dmsp-muted-tint);
}
.dmsp-line:last-child{border-bottom:none}
.dmsp-line-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.dmsp-line-title{color:var(--dmsp-text-dark);font-weight:600;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.dmsp-line-sub{font-size:.78rem;color:var(--dmsp-text-muted)}
.dmsp-line-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.dmsp-line-amount{font-weight:700;color:var(--dmsp-text-dark);white-space:nowrap}
.dmsp-line-empty{padding:.9rem .25rem;color:var(--dmsp-text-muted);font-size:.9rem}

/* Inline-form helpers used by the reveal forms (keeps native widgets aligned). */
.dmsp-inline-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.dmsp-inline-form .form-control,.dmsp-inline-form .form-select{width:auto;flex:1 1 9rem;min-width:7rem}
.dmsp-inline-form .dmsp-inline-grow{flex:2 1 12rem}

/* ===== Loaners loan calendar (Task 11) — see BRAND_IDENTITY.md §6 (Calendar) ===== */

/* Header nav — Prev / Today / Next button group, tokenized. */
.cal-nav{display:inline-flex;gap:.4rem;align-items:center}
.cal-nav-btn{
  display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;cursor:pointer;
  padding:.4rem .8rem;border-radius:8px;font-size:.85rem;font-weight:600;line-height:1;
  color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  transition:background .15s ease,transform .15s ease;
}
.cal-nav-btn:hover{color:#fff;background:rgba(255,255,255,.3);transform:translateY(-1px)}
.cal-nav-btn--today{background:#fff;color:var(--dmsp-primary-dark);border-color:#fff}
.cal-nav-btn--today:hover{color:var(--dmsp-primary-dark);background:#fff}

/* Grid scaffolding — head, day numbers and bars all share the 7-column track. */
.cal-head,.cal-days,.cal-bars{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-head{margin-bottom:.25rem}
.cal-head div{
  text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dmsp-text-muted);padding:.25rem 0;
}
.cal-week{margin-bottom:.35rem}
.cal-day{
  border:1px solid var(--dmsp-panel-border);min-height:1.7rem;padding:.1rem .35rem;
  font-size:.8rem;color:var(--dmsp-text-dark);
}
.cal-day.cal-out{background:var(--dmsp-bg-light);color:var(--dmsp-icon-muted)}
.cal-day.cal-today{color:var(--dmsp-primary);font-weight:700;box-shadow:inset 0 -2px 0 0 var(--dmsp-primary)}

/* Loan bars — continuous lanes; grid position is set inline (data-driven). */
.cal-bars{gap:2px;padding:2px 0 6px}
.cal-bar{
  display:flex;align-items:center;gap:.35rem;min-width:0;
  background:var(--dmsp-primary);color:#fff;border-radius:6px;padding:.1rem .5rem;
  font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;transition:filter .15s ease,transform .15s ease;
}
.cal-bar:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.cal-bar--active{background:var(--dmsp-primary)}
.cal-bar--returned{background:var(--dmsp-success)}
.cal-bar--overdue{background:var(--dmsp-danger)}
/* Plate chip inside a bar — translucent on the bar fill, replaces badge bg-dark. */
.cal-bar-plate{
  flex-shrink:0;font-size:.68rem;font-weight:700;line-height:1;letter-spacing:.02em;
  padding:.12rem .35rem;border-radius:4px;background:rgba(255,255,255,.25);color:#fff;
}
.cal-bar-name{overflow:hidden;text-overflow:ellipsis}
.dmsp-inline-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--dmsp-text-dark)}

/* ============================================================
   Customer-facing public pages (return capture + remote signing)
   Mobile-first, centered, welcoming. Seen by customers on phones.
   ============================================================ */
.dmsp-public-shell{
  max-width:560px;margin:0 auto;padding:1.25rem 1rem 3rem;
}
.dmsp-public-card{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 30px rgba(15,23,42,.10);border:1px solid var(--dmsp-muted-tint);
}
/* Branded gradient welcome banner */
.dmsp-public-header{
  position:relative;overflow:hidden;background:var(--dmsp-gradient-bold);color:#fff;
  padding:1.75rem 1.5rem;text-align:center;
}
.dmsp-public-header::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.58,5.33,1100,1.36V0Z"/></svg>') repeat-x bottom;
  background-size:1000px 100px;animation:dmspWave 20s linear infinite;pointer-events:none;
}
@media (prefers-reduced-motion: reduce){.dmsp-public-header::before{animation:none}}
.dmsp-public-header-content{position:relative;z-index:1}
.dmsp-public-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.3rem .8rem;margin-bottom:.85rem;
}
.dmsp-public-dealer{color:#fff;font-size:1.5rem;font-weight:700;margin:0 0 .15rem;line-height:1.15}
.dmsp-public-title{color:#fff;opacity:.92;font-size:.98rem;font-weight:500;margin:0}
.dmsp-public-body{padding:1.6rem 1.5rem 1.75rem}
@media (max-width:400px){.dmsp-public-body{padding:1.3rem 1.1rem 1.5rem}}
.dmsp-public-subject{
  display:flex;align-items:center;gap:.6rem;
  background:var(--dmsp-panel-tint);border-radius:12px;padding:.75rem .95rem;margin-bottom:1.4rem;
  color:var(--dmsp-primary-dark);font-weight:600;font-size:.95rem;
}
.dmsp-public-subject .mdi{font-size:1.3rem;flex-shrink:0}

/* Form field group */
.dmsp-field{margin-bottom:1.25rem}
.dmsp-field > .form-label{
  display:block;font-weight:600;color:var(--dmsp-text-dark);margin-bottom:.4rem;font-size:.95rem;
}
.dmsp-field .form-label small{font-weight:400;color:var(--dmsp-text-muted)}
/* Big, comfortable native controls on public pages */
.dmsp-public-body .form-control{
  border-radius:12px;border:1.5px solid var(--dmsp-panel-border);
  padding:.7rem .9rem;font-size:1rem;background:#fff;transition:border-color .15s ease,box-shadow .15s ease;
}
.dmsp-public-body .form-control:focus{
  border-color:var(--dmsp-primary);box-shadow:0 0 0 3px rgba(15,136,205,.15);outline:none;
}

/* Tap-friendly file dropzone wrapping a real <input type=file> */
.dmsp-filedrop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  position:relative;border:2px dashed var(--dmsp-panel-border);border-radius:14px;
  background:var(--dmsp-bg-light);padding:1.4rem 1rem;text-align:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.dmsp-filedrop:hover,.dmsp-filedrop:focus-within{
  border-color:var(--dmsp-primary);background:var(--dmsp-panel-tint);
}
.dmsp-filedrop.has-files{border-style:solid;border-color:var(--dmsp-primary)}
.dmsp-filedrop .mdi{font-size:2rem;color:var(--dmsp-primary)}
.dmsp-filedrop-text{font-weight:600;color:var(--dmsp-text-dark);font-size:.92rem}
.dmsp-filedrop-hint{font-size:.78rem;color:var(--dmsp-text-muted)}
/* The real input covers the whole zone but stays invisible (keyboard-focusable). */
.dmsp-filedrop input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
/* Thumbnail previews */
.dmsp-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.dmsp-thumb{
  width:64px;height:64px;border-radius:10px;object-fit:cover;
  border:1.5px solid var(--dmsp-panel-border);background:#fff;
}

/* Large checkbox card */
.dmsp-check-card{
  display:flex;align-items:center;gap:.7rem;
  border:1.5px solid var(--dmsp-panel-border);border-radius:12px;padding:.85rem 1rem;
  background:#fff;cursor:pointer;transition:border-color .15s ease,background-color .15s ease;
  margin-bottom:1.25rem;
}
.dmsp-check-card:hover{border-color:var(--dmsp-primary);background:var(--dmsp-panel-tint)}
.dmsp-check-card .form-check-input{width:1.35rem;height:1.35rem;margin:0;flex-shrink:0;cursor:pointer}
.dmsp-check-card-label{font-weight:600;color:var(--dmsp-text-dark);font-size:.95rem}

/* Full-width primary action with busy state */
.dmsp-btn-block{display:block;width:100%;padding:.85rem 1.1rem;font-size:1.05rem}
.dmsp-btn-primary[aria-busy=true]{opacity:.75;pointer-events:none}
.dmsp-btn-busy{display:none}
.dmsp-btn-primary[aria-busy=true] .dmsp-btn-busy{display:inline}
.dmsp-btn-primary[aria-busy=true] .dmsp-btn-idle{display:none}

/* Error rendering inside public fields */
.dmsp-public-body .errorlist,.dmsp-public-body ul.errorlist{
  list-style:none;margin:.4rem 0 0;padding:0;color:var(--dmsp-danger-text);font-size:.85rem;
}
.dmsp-public-alert{
  background:var(--dmsp-danger-tint);color:var(--dmsp-danger-text);
  border-radius:12px;padding:.75rem .95rem;font-size:.88rem;margin-bottom:1.25rem;
}
.dmsp-public-alert ul{margin:0;padding-left:1.1rem}

/* Signature pad on public/staff signing pages */
.dmsp-sigpad{
  width:100%;height:160px;border:1.5px solid var(--dmsp-panel-border);border-radius:12px;
  background:#fff;touch-action:none;display:block;
}
.dmsp-sig-block{margin-bottom:1.5rem}
.dmsp-sig-actions{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.dmsp-doc-frame{
  width:100%;height:48vh;border:1px solid var(--dmsp-panel-border);border-radius:12px;
  background:#fff;margin-bottom:1.4rem;
}
.dmsp-btn-ghost{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  background:#fff;color:var(--dmsp-primary-dark);border:1.5px solid var(--dmsp-panel-border);
  border-radius:10px;padding:.55rem 1rem;font-weight:600;text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease;
}
.dmsp-btn-ghost:hover{border-color:var(--dmsp-primary);background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark)}
.dmsp-btn-ghost:focus-visible{outline:2px solid var(--dmsp-primary);outline-offset:2px}

/* Inline "all signatures captured" note on the staff signing page. */
.dmsp-all-signed-note{color:var(--dmsp-success-text);font-weight:600}

/* Friendly success confirmation state */
.dmsp-public-success{text-align:center;padding:2.5rem 1.5rem}
.dmsp-success-icon{font-size:4.5rem;line-height:1;color:var(--dmsp-success);margin-bottom:.5rem}
.dmsp-public-success h1{font-size:1.5rem;font-weight:700;color:var(--dmsp-text-dark);margin-bottom:.5rem}

/* ── PDF placement editor (template_form) ───────────────────────────────── */

/* Outer wrapper — contains the palette and the pages strip */
.dmsp-editor{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}

/* Palette bar: chips labelled by type */
.dmsp-editor-palette{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  background:var(--dmsp-panel-tint);border:1px solid var(--dmsp-panel-border);
  border-radius:10px;padding:.6rem .85rem;
}
.dmsp-editor-palette-label{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dmsp-text-muted);margin-right:.25rem;
}

/* Palette chips — clickable; press once to arm, click page to drop */
.dmsp-chip{
  display:inline-flex;align-items:center;
  background:#fff;color:var(--dmsp-text-dark);
  border:1.5px solid var(--dmsp-panel-border);border-radius:999px;
  padding:.25rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.dmsp-chip:hover{border-color:var(--dmsp-primary);background:var(--dmsp-panel-tint);color:var(--dmsp-primary-dark)}
.dmsp-chip.is-active{
  background:var(--dmsp-gradient-bold);color:#fff;border-color:var(--dmsp-primary-dark);
}

/* Pages strip: vertically stacked page images */
.dmsp-editor-pages{display:flex;flex-direction:column;gap:1.25rem}

/* Single page container: the image defines the intrinsic dimensions;
   boxes are positioned absolutely as percentages of this element */
.dmsp-editor-page{
  position:relative;display:inline-block;
  border:1px solid var(--dmsp-panel-border);border-radius:8px;overflow:hidden;
  cursor:crosshair;
  box-shadow:0 2px 8px color-mix(in srgb, var(--dmsp-text-dark) 10%, transparent);
}
.dmsp-editor-page-img{max-width:100%;display:block}

/* Placement box */
.dmsp-box{
  position:absolute;box-sizing:border-box;
  border-radius:4px;cursor:move;user-select:none;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:2px 4px;font-size:.65rem;font-weight:600;line-height:1.2;
}
/* Field box: primary-tinted */
.dmsp-box--field{
  background:color-mix(in srgb, var(--dmsp-primary) 15%, transparent);
  border:1.5px solid var(--dmsp-primary);
  color:var(--dmsp-primary-dark);
}
/* Signature box: warning-tinted */
.dmsp-box--signature{
  background:color-mix(in srgb, var(--dmsp-warning) 15%, transparent);
  border:1.5px solid var(--dmsp-warning);
  color:var(--dmsp-warning-text);
}

.dmsp-box-label{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.dmsp-box-remove{
  flex-shrink:0;background:none;border:none;padding:0 0 0 3px;
  font-size:.8rem;line-height:1;cursor:pointer;opacity:.6;
}
.dmsp-box-remove:hover{opacity:1}

/* Resize handle: bottom-right corner, 10×10 px */
.dmsp-box-handle{
  position:absolute;right:0;bottom:0;
  width:10px;height:10px;cursor:nwse-resize;
  background:color-mix(in srgb, var(--dmsp-text-dark) 30%, transparent);
  border-radius:2px 0 4px 0;
}

/* ── end PDF placement editor ───────────────────────────────────────────── */
.dmsp-public-success p{color:var(--dmsp-text-muted);font-size:.98rem;margin:0 auto;max-width:30rem}

/* ===== Loaner checkout — vehicle card picker (radio cards) ===== */
.dmsp-vehicle-picker .dmsp-vehicle-pick{position:relative;cursor:pointer;border:2px solid transparent;margin-bottom:0;display:flex;flex-direction:column}
.dmsp-vehicle-pick input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.dmsp-vehicle-pick .dmsp-vehicle-pick-check{color:var(--dmsp-primary);font-size:1.35rem;opacity:0;transition:opacity .15s}
.dmsp-vehicle-pick.is-selected,
.dmsp-vehicle-pick:has(input:checked){border-color:var(--dmsp-primary);background:var(--dmsp-panel-tint)}
.dmsp-vehicle-pick.is-selected .dmsp-vehicle-pick-check,
.dmsp-vehicle-pick:has(input:checked) .dmsp-vehicle-pick-check{opacity:1}
.dmsp-vehicle-pick:focus-within{outline:2px solid var(--dmsp-primary);outline-offset:2px}