:root {
  
  --dp-danger: #b91c1c;
--dp-text: #111827;
  --dp-muted: #6b7280;
  --dp-border: #e5e7eb;
  --dp-surface: #ffffff;
  --dp-surface-2: #f9fafb;
  --dp-primary: #0A64A4;
  --dp-primary-700: #084E80;
}

.dp-wrap{max-width:1100px;margin:0 auto;padding:0 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--dp-text);
  --dp-primary:#0B7AB4; /* Drive blue */
  --dp-accent:#F59E2A;  /* Drive orange */
  --dp-text:#111827;
  --dp-muted:#6b7280;
  --dp-border:#e5e7eb;
  --dp-surface:#ffffff;
  --dp-surface-2:#f9fafb;
}

/* Use the full viewport width on mobile (reduce the big side gaps).
   We also override common theme containers on portal pages so the portal
   behaves like an app rather than a narrow blog post. */
@media (max-width: 860px){
  .dp-wrap{max-width:none;width:100%;margin:0 auto;padding:0 8px;}

  body.dp-portal .site-content,
  body.dp-portal .content-area,
  body.dp-portal .site-main,
  body.dp-portal .entry-content,
  body.dp-portal .wp-site-blocks,
  body.dp-portal .wp-site-blocks > main,
  body.dp-portal .ast-container,
  body.dp-portal .container,
  body.dp-portal .site,
  body.dp-portal .site-content > .container{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Slightly tighter card padding on mobile so forms use available space */
  .dp-card{padding:14px;}
}

/* Floating mobile controls (Menu / Home) */
.dp-fab{position:fixed;bottom:16px;left:16px;width:48px;height:48px;border-radius:999px;border:1px solid var(--dp-border);background:var(--dp-surface);color:var(--dp-text);box-shadow:0 8px 24px rgba(0,0,0,.12);display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;z-index:9999}
.dp-fab:active{transform:scale(.98)}
.dp-fab-home{left:72px}
@media (min-width:861px){.dp-fab{display:none}}
.dp-card{background:var(--dp-surface);border:1px solid var(--dp-border);border-radius:14px;padding:18px;box-shadow:0 2px 14px rgba(0,0,0,.04)}
.dp-card--narrow{max-width:460px;margin:0 auto}

/* Simple per-pane back/secondary navigation */
.dp-pane-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dp-head h2{margin:0 0 6px 0;font-size:22px}
.dp-head p{margin:0;color:var(--dp-muted)}
.dp-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.dp-form label{font-size:13px;color:#374151}
.dp-form input{border:1px solid #d1d5db;border-radius:10px;padding:10px;font-size:14px}
.dp-btn{border:1px solid var(--dp-primary);background:var(--dp-primary);color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}
.dp-btn:hover{background:var(--dp-primary-700)}
.dp-btn--primary{background:var(--dp-primary);color:#fff;border-color:var(--dp-primary)}
.dp-btn--primary:hover{filter:brightness(.95)}
.dp-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.dp-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.dp-topbar h2{margin:0;font-size:22px}
.dp-topbar p{margin:2px 0 0 0;color:var(--dp-muted)}
.dp-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}

/* Simple responsive 2-column helper */
.dp-grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 900px){.dp-grid-2{grid-template-columns:1fr 1fr}}
.dp-grid-3{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 900px){.dp-grid-3{grid-template-columns:1fr 1fr 1fr}}
.dp-muted{color:var(--dp-muted)}
.dp-brandbar{margin-bottom:10px}
.dp-brand{display:flex;align-items:center;gap:12px}
.dp-logo{height:34px;width:auto;display:block}
.dp-brand-text{font-weight:700;letter-spacing:.3px;color:var(--dp-text);font-size:14px}
.dp-row{display:flex;gap:12px;align-items:flex-end;margin:12px 0;flex-wrap:wrap}
.dp-field{display:flex;flex-direction:column;gap:6px;min-width:220px}
.dp-field input{border:1px solid #d1d5db;border-radius:10px;padding:10px;font-size:14px}
.dp-grow{flex:1;min-width:240px}
.dp-actions{display:flex;gap:10px;margin-top:12px}
.dp-msg{margin-top:10px;font-size:13px;color:var(--dp-text)}
.dp-timesheet{margin-top:10px;border-top:1px solid var(--dp-border);padding-top:10px}
.dp-ts-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.dp-ts-table th{font-size:12px;color:var(--dp-muted);text-align:left;padding:0 10px}
.dp-ts-table td{background:var(--dp-surface-2);border:1px solid var(--dp-border);padding:10px;border-left:none;border-right:none}
.dp-ts-table td:first-child{border-left:1px solid var(--dp-border);border-top-left-radius:10px;border-bottom-left-radius:10px}
.dp-ts-table td:last-child{border-right:1px solid var(--dp-border);border-top-right-radius:10px;border-bottom-right-radius:10px}
.dp-ts-hours{width:110px}

.dp-ts-table select,
.dp-ts-table input{
  width:100%;
  max-width:180px;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:10px;
  font-size:14px;
  background:#fff !important;
}

@media (max-width: 920px){
  .dp-grid{grid-template-columns:1fr}
  .dp-field{min-width:0}
}

@media (max-width: 640px){
  .dp-topbar{flex-direction:column;align-items:flex-start}
  .dp-actions{flex-direction:column}
  .dp-actions .dp-btn{width:100%}

  /* Responsive "card" view for timesheet tables */
  .dp-ts-table thead{display:none}
  .dp-ts-table,
  .dp-ts-table tbody,
  .dp-ts-table tr,
  .dp-ts-table td{display:block;width:100%}
  .dp-ts-table{border-spacing:0}
  .dp-ts-table tr{background:#fff !important;border:1px solid var(--dp-border);border-radius:14px;padding:10px;margin:0 0 12px 0}
  .dp-ts-table td{background:transparent;border:none;padding:8px 0;display:flex;justify-content:space-between;gap:12px}
  .dp-ts-table td::before{content:attr(data-label);font-weight:600;color:#111827}
  .dp-ts-table td:first-child,
  .dp-ts-table td:last-child{border-radius:0}
  .dp-ts-table select,
  .dp-ts-table input{max-width:60%;}
}


.dp-small{font-size:13px}
.dp-warn{color:#b45309;font-weight:600}
.dp-alert{border:1px solid var(--dp-border);border-radius:12px;padding:12px;margin:12px 0;font-size:14px}
.dp-alert--warn{border-color:#f59e0b;background:#fffbeb}

/* CRM candidate picker (staff invite) */
.dp-picker{margin-top:8px;border:1px solid var(--dp-border);border-radius:12px;overflow:hidden;background:#fff !important;max-height:260px;overflow-y:auto}
.dp-picker-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-bottom:1px solid var(--dp-border);background:#fff !important;cursor:pointer;color:var(--dp-text)}
.dp-picker-item:last-child{border-bottom:0}
.dp-picker-item:hover{background:var(--dp-surface-2)}
.dp-picker-item.is-active{background:var(--dp-surface-2);box-shadow:inset 0 0 0 2px rgba(11,122,180,0.18)}
.dp-picker-title{font-weight:700;color:var(--dp-text);font-size:13px}
.dp-picker-sub{color:var(--dp-muted);font-size:12px;margin-top:2px}

@media (max-width: 640px){
  .dp-topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .dp-actions{position:sticky;bottom:0;left:0;right:0;padding:12px;background:#fff !important;border-top:1px solid var(--dp-border);border-radius:0;margin:-12px -12px 0;z-index:10}
  .dp-actions .dp-btn{flex:1}
}


/* Tabs */
.dp-tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.dp-tab{background:var(--dp-surface);border:1px solid var(--dp-border);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--dp-primary)}
.dp-tab.is-active{background:var(--dp-primary);border-color:var(--dp-primary);color:#fff;box-shadow:0 0 0 2px rgba(11,122,180,.15)}
.dp-tabpane{display:none}
.dp-tabpane.is-active{display:block}

/* Tables */
.dp-table{width:100%;overflow:auto}
.dp-table table{width:100%;border-collapse:collapse;font-size:14px}
.dp-table th,.dp-table td{border-bottom:1px solid var(--dp-border);padding:10px 8px;text-align:left;white-space:nowrap}
.dp-table th{background:var(--dp-surface-2);font-weight:700}

/* Better mobile */
@media (max-width: 860px){
  .dp-grid{grid-template-columns:1fr}
  /* On mobile we use floating menu/home buttons, so the topbar just wastes space */
  .dp-topbar{display:none}

  /* But the Events page needs its "Create event" button on mobile. */
  .dp-card[data-pane="events"] .dp-topbar{display:flex !important;flex-direction:column;align-items:stretch;gap:10px}
  .dp-card[data-pane="events"] .dp-topbar-actions{width:100%;justify-content:stretch}
  .dp-card[data-pane="events"] .dp-topbar-actions .dp-btn{width:100%}

  .dp-row{flex-direction:column;align-items:stretch}
  .dp-btn{width:100%}
  .dp-field{width:100%}
  .dp-logo{height:32px}
  .dp-brand{gap:10px}
}

/* Mobile dashboard logo (shown above the dashboard cards) */
.dp-mobile-dashboard-logo{display:none;text-align:center;padding:18px 0 10px}
.dp-mobile-dashboard-logo__img{height:56px;width:auto;max-width:240px}
@media (max-width: 860px){
  .dp-mobile-dashboard-logo{display:block}
}


/* Ensure disabled buttons remain visible on mobile/theme overrides */
.dp-btn[disabled],
.dp-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dp-btn.dp-btn--primary[disabled],
.dp-btn.dp-btn--primary:disabled {
  background: var(--dp-primary);
  border-color: var(--dp-primary);
  color: #fff;
}


/* === Theme override fixes (Astra / WP button styles) === */
.dp-app .dp-tab,
.dp-app .dp-btn {
  color: var(--dp-text) !important;
}

.dp-app .dp-btn {
  background: #f9fafb !important;
}

.dp-app .dp-tab {
  background: #fff !important;
}

.dp-app .dp-tab:hover {
  background: #f3f4f6 !important;
}

.dp-app .dp-tab.is-active {
  background: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #fff !important;
}

.dp-app .dp-tab.is-active:hover {
  background: var(--dp-primary) !important;
}

.dp-app .dp-btn.dp-btn--primary {
  background: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #fff !important;
}

.dp-app .dp-btn.dp-btn--ghost {
  background: transparent !important;
  color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
}

/* Active state for segmented ghost buttons (e.g. events filters) */
.dp-app .dp-btn.is-active {
  box-shadow: inset 0 0 0 2px var(--dp-primary) !important;
  background: rgba(11, 116, 173, 0.08) !important;
}

.dp-app .dp-pick strong {
  color: var(--dp-text);
}

/* View switcher tabs (My Events / Team Events) — blue default, orange active */
.dp-tab--view {
  background: var(--dp-primary) !important;
  color: #fff !important;
  border-color: var(--dp-primary) !important;
}
.dp-tab--view:hover {
  background: #0a5fa8 !important;
  border-color: #0a5fa8 !important;
}
.dp-tab--view.is-active {
  background: #ea6c00 !important;
  border-color: #ea6c00 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(234,108,0,.22) !important;
}
.dp-tab--view.is-active:hover {
  background: #c85e00 !important;
  border-color: #c85e00 !important;
}

/* -------------------------------------------------------
   EVENTS PAGE: ID-level overrides to defeat the nth-child
   odd=blue / even=orange rules above.
   ID selectors win specificity ties even with !important.
   ------------------------------------------------------- */

/* View buttons: blue when inactive */
#dp-events-view-my,
#dp-events-view-team {
  background: #0B5ED7 !important;
  color: #fff !important;
  outline: none !important;
}
/* View buttons: ORANGE when active — the only orange on this page */
#dp-events-view-my.is-active,
#dp-events-view-team.is-active {
  background: #ea6c00 !important;
  color: #fff !important;
  outline: 2px solid rgba(255,255,255,0.65) !important;
  outline-offset: -2px !important;
}

/* Scope buttons: ALL blue (override the even=orange nth-child rule) */
#dp-events-scope-today,
#dp-events-scope-next7,
#dp-events-scope-all {
  background: #0B5ED7 !important;
  color: #fff !important;
  outline: none !important;
}
/* Scope buttons: darker blue when active so it's clearly selected */
#dp-events-scope-today.is-active,
#dp-events-scope-next7.is-active,
#dp-events-scope-all.is-active {
  background: #083fa8 !important;
  color: #fff !important;
  outline: 2px solid rgba(255,255,255,0.65) !important;
  outline-offset: -2px !important;
}

/* Hard overrides to beat theme/mobile styles (fixes 'white buttons') */
.dp-btn{
  background:#ffffff !important;
  color:var(--dp-primary) !important;
  border-color:var(--dp-primary) !important;
}
.dp-btn--primary{
  background:var(--dp-primary) !important;
  color:#ffffff !important;
  border-color:var(--dp-primary) !important;
}
.dp-tab{
  background:#ffffff !important;
  color:var(--dp-primary) !important;
}
.dp-tab.is-active{
  background:var(--dp-primary) !important;
  color:#ffffff !important;
}

/* ------------------------------
   Media preview modal (staff candidate lookup)
-------------------------------- */
.dp-media-thumb{
  cursor: zoom-in;
  display: inline-block;
}

.dp-media-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.dp-media-modal.is-open{ display: flex; }

.dp-media-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
}

.dp-media-modal__panel{
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.dp-media-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.dp-media-modal__title{
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dp-media-modal__close{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.dp-media-modal__body{
  padding: 12px;
  max-height: calc(90vh - 54px);
  overflow: auto;
}

.dp-media-modal__img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.dp-media-modal__actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* ------------------------------
   Accordion
-------------------------------- */
.dp-accordion{margin-top:12px;}
.dp-acc-item{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff !important;box-shadow:0 6px 18px rgba(17,24,39,0.06);}
.dp-acc-item + .dp-acc-item{margin-top:10px;}

.dp-acc-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:0;
  background:#0B5ED7; /* blue */
  cursor:pointer;
  text-align:left;
}

.dp-acc-title{font-weight:800;color:#fff !important;}
.dp-acc-icon{transition:transform .18s ease;opacity:0.9;color:#fff !important;}

.dp-acc-item.is-orange .dp-acc-btn{background:var(--dp-accent) !important;}
.dp-acc-item.is-orange .dp-acc-btn:hover{background:var(--dp-accent-700) !important;}

.dp-acc-item.is-open .dp-acc-icon{transform:rotate(180deg);}
.dp-acc-panel{display:none;padding:0 14px 14px 14px;border-top:1px solid #e5e7eb;}
.dp-acc-item.is-open .dp-acc-panel{display:block;}

/* Extra safety against theme overrides */
.dp-app .dp-accordion button{color:#fff !important;}



.dp-btn--orange{background:var(--dp-accent);border-color:var(--dp-accent);color:#fff}
.dp-btn--orange:hover{background:var(--dp-accent-700)}

/* Force button/tab text colors in case theme overrides button styles */
.dp-app .dp-btn,
.dp-app .dp-tab{
  color:#fff !important;
}
.dp-app .dp-btn--orange{
  color:#fff !important;
}


/* =====================================================
   Theme-proof button styles + alternating brand colors
   ===================================================== */
.dp-app .dp-btn{
  background: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color:#fff !important;
}
.dp-app .dp-btn:hover{filter:brightness(0.95);}

.dp-app .dp-btn--orange{
  background: var(--dp-accent) !important;
  border-color: var(--dp-accent) !important;
  color:#fff !important;
}

/* Top tabs: alternate blue/orange */
.dp-app .dp-tabs .dp-tab{
  color:#fff !important;
  border:0 !important;
}
.dp-app .dp-tabs .dp-tab:nth-child(odd){
  background: var(--dp-primary) !important;
}
.dp-app .dp-tabs .dp-tab:nth-child(even){
  background: var(--dp-accent) !important;
}
.dp-app .dp-tabs .dp-tab.is-active{
  outline:2px solid rgba(255,255,255,0.65) !important;
  outline-offset:-2px;
}

/* Accordion headers: alternate blue/orange */
.dp-app .dp-accordion .dp-acc-btn{
  color:#fff !important;
  border:0 !important;
}
.dp-app .dp-accordion .dp-acc-item:nth-child(odd) .dp-acc-btn{
  background: var(--dp-primary) !important;
}
.dp-app .dp-accordion .dp-acc-item:nth-child(even) .dp-acc-btn{
  background: var(--dp-accent) !important;
}


/* ===== Drive Portal: Force button/tab colors (theme-proof) ===== */
.dp-btn, .dp-tabs .dp-tab, button.dp-btn, a.dp-btn{
  color:#fff !important;
  border:0 !important;
}
.dp-btn{ background:#0B5ED7 !important; }
.dp-btn--orange{ background:#F59E0B !important; }
.dp-tabs .dp-tab:nth-child(odd){ background:#0B5ED7 !important; }
.dp-tabs .dp-tab:nth-child(even){ background:#F59E0B !important; }
.dp-tabs .dp-tab.is-active{ outline:2px solid rgba(255,255,255,.65) !important; outline-offset:-2px; }

/* Accordion headers */
.dp-accordion .dp-accordion__btn, .dp-accordion .dp-accordion__header button{
  color:#fff !important;
  border:0 !important;
}
.dp-accordion > *:nth-child(odd) .dp-accordion__btn,
.dp-accordion > *:nth-child(odd) .dp-accordion__header button{ background:#0B5ED7 !important; }
.dp-accordion > *:nth-child(even) .dp-accordion__btn,
.dp-accordion > *:nth-child(even) .dp-accordion__header button{ background:#F59E0B !important; }


/* ================================
   FORCE PORTAL BUTTON STYLES (theme-proof)
   ================================ */
.dp-btn, .dp-tab, button.dp-btn, button.dp-tab{
  color:#fff !important;
}
.dp-btn{
  background:#0B5ED7 !important;
  border:0 !important;
}
.dp-btn--orange{
  background:#F59E0B !important;
  border:0 !important;
}

/* Tabs alternate blue/orange */
.dp-tabs .dp-tab:nth-child(odd){ background:#0B5ED7 !important; }
.dp-tabs .dp-tab:nth-child(even){ background:#F59E0B !important; }

/* Accordion headers alternate blue/orange */
.dp-accordion > *:nth-child(odd) .dp-accordion__btn,
.dp-accordion > *:nth-child(odd) .dp-accordion__header button{ background:#0B5ED7 !important; color:#fff !important; }
.dp-accordion > *:nth-child(even) .dp-accordion__btn,
.dp-accordion > *:nth-child(even) .dp-accordion__header button{ background:#F59E0B !important; color:#fff !important; }

/* ==========================


/* ================================
   EVENTS CALENDAR VIEW
   ================================ */
.dp-cal { font-size:13px; }
.dp-cal-header { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--dp-text); }
.dp-cal-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.dp-cal-dayname {
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--dp-muted);
  padding:4px 0;
  background:var(--dp-surface-2);
  border-radius:6px;
}
.dp-cal-cell {
  min-height:80px;
  background:var(--dp-surface);
  border:1px solid var(--dp-border);
  border-radius:8px;
  padding:4px;
  vertical-align:top;
}
.dp-cal-empty { background:transparent; border-color:transparent; }
.dp-cal-today { border-color:var(--dp-primary) !important; background:rgba(11,94,215,.04) !important; }
.dp-cal-dayn {
  font-size:11px;
  font-weight:700;
  color:var(--dp-muted);
  text-align:right;
  margin-bottom:3px;
}
.dp-cal-today .dp-cal-dayn {
  color:var(--dp-primary);
}
.dp-cal-event {
  background:var(--dp-primary);
  color:#fff !important;
  border-radius:4px;
  padding:2px 5px;
  margin-bottom:2px;
  font-size:11px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  line-height:1.4;
}
.dp-cal-event:hover { background:#0a4eb8; }
.dp-cal-client { opacity:.8; font-size:10px; }

@media(max-width:640px){
  .dp-cal-grid { grid-template-columns:repeat(7,1fr); gap:1px; }
  .dp-cal-cell { min-height:44px; padding:2px; }
  .dp-cal-dayname { font-size:9px; }
  .dp-cal-event { font-size:9px; padding:1px 3px; }
  .dp-cal-client { display:none; }
}

/* ================================
   PORTAL PAGE CLEANUP (Astra theme)
   ================================ */
/* Hide the big page title like "Portal" above the dashboard content */
.entry-title { display: none !important; }

/* Hide site title/description text next to logo in the header on portal pages */
.site-title,
.site-description { display: none !important; }

/* The portal templates no longer render the internal brandbar, but keep this as a safeguard */
.dp-brandbar { display:none !important; }

/* ================================
   Alternating BLUE / ORANGE buttons
   Tabs + Accordion headers
   ================================ */
.dp-tab, button.dp-btn, button.dp-tab{
  color:#fff !important;
}
.dp-btn{
  background:#0B5ED7 !important;
  border:0 !important;
}
.dp-btn--orange{
  background:#F59E0B !important;
  border:0 !important;
}

/* Tabs alternate blue/orange */
.dp-tabs .dp-tab:nth-child(odd){ background:#0B5ED7 !important; }
.dp-tabs .dp-tab:nth-child(even){ background:#F59E0B !important; }

/* Accordion headers alternate blue/orange */
.dp-accordion > *:nth-child(odd) .dp-accordion__btn,
.dp-accordion > *:nth-child(odd) .dp-accordion__header button{ background:#0B5ED7 !important; color:#fff !important; }
.dp-accordion > *:nth-child(even) .dp-accordion__btn,
.dp-accordion > *:nth-child(even) .dp-accordion__header button{ background:#F59E0B !important; color:#fff !important; }

/* ================================
   MOBILE RESPONSIVE FIXES
   ================================ */
.dp-grid-2{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 900px){
  .dp-grid-2{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 860px){
  .dp-card{ overflow-x:visible; }
  .dp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .dp-table{ min-width:720px; }
  input, select, textarea{ max-width:100%; }
}


/* -------------------------------
   Chat / Support
-------------------------------- */
.dp-chat{border:1px solid var(--dp-border);border-radius:12px;padding:10px;background:#fff !important;max-height:260px;overflow:auto;margin:10px 0}

/*
 * Message transcript (no "chat bubbles")
 * Staff wanted simple readable lines like:
 *   Jamie: Hi ... (timestamp)
 */
.dp-msgline{padding:8px 4px;border-bottom:1px solid var(--dp-border)}
.dp-msgline:last-child{border-bottom:0}
.dp-msgline__head{display:flex;gap:10px;align-items:baseline}
.dp-msgline__name{font-weight:800;color:#111827}
.dp-msgline__time{margin-left:auto;font-size:12px;color:var(--dp-muted)}
.dp-msgline__text{margin-top:2px;white-space:pre-wrap;word-wrap:break-word}

/* Backwards compatibility (older renders used dp-chat-msg bubbles) */
.dp-chat-msg{padding:8px 4px;border-bottom:1px solid var(--dp-border);border-radius:0;margin:0;max-width:100%;word-wrap:break-word;white-space:pre-wrap;background:transparent;color:inherit}
.dp-chat-msg.is-me,.dp-chat-msg.is-them{background:transparent;color:inherit;margin-left:0}
.dp-chat-meta{font-size:12px;color:var(--dp-muted);margin-top:2px}
.dp-list{margin:8px 0 0 18px;padding:0}
.dp-list li{margin:4px 0}

.dp-pre{white-space:pre-wrap;word-break:break-word;line-height:1.45}

/* -------------------------------
   Badges (unread counts)
-------------------------------- */
.dp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:18px;
  background:rgba(255,255,255,0.25);
  color:#fff;
  margin-left:8px;
}

.dp-badge--pill{
  background:#0B5ED7;
  color:#fff;
  margin-left:0;
}

/* -------------------------------
   Toast (portal notifications)
-------------------------------- */
.dp-toast{
  position:fixed;
  z-index:99999;
  left:12px;
  right:12px;
  bottom:18px;
  display:flex;
  justify-content:center;
  pointer-events:auto;
}
.dp-toast__inner{
  max-width:720px;
  width:100%;
  background:#111827;
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.22);
  font-weight:700;
  cursor:pointer;
}

/* Events modal uses the same base modal styles */
.dp-events-body{min-height:120px;}
.dp-events-list .dp-card{border:1px solid var(--dp-border);}


/* ---------- Staff portal shell: sidebar + dashboard cards ---------- */

.dp-shell {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
}

.dp-main {
  flex: 1;
  min-width: 0;
}

.dp-sidebar {
  display: none; /* Hidden by default — shown on mobile via .is-open */
  flex-direction: column;
  flex: 0 0 260px;
  width: 260px;
  background: #fff;
  border: 1px solid var(--dp-border);
  border-radius: 18px;
  padding: 12px;
  margin-right: 12px;
}

.dp-sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--dp-border);
}

.dp-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 10px;
  border-bottom: 1px solid var(--dp-border);
  margin-bottom: 10px;
}

.dp-sidebar-logo {
  /* Smaller logo like CRM sidebar */
  max-height: 26px;
  width: auto;
}

@media (max-width: 768px) {
  /* Make the logo more prominent on mobile, sitting above the nav buttons */
  .dp-sidebar-header {
    justify-content: center;
  }
  .dp-sidebar-logo {
    max-height: 44px;
    margin: 4px auto;
  }
}

.dp-sidebar-close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.dp-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-nav-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dp-text);
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dp-nav-item:hover {
  /* Keep hover subtle + stable (no big color/white flashes). */
  background: rgba(17, 24, 39, 0.04) !important;
  border-color: rgba(17, 24, 39, 0.10);
  box-shadow: none;
  transform: none;
}

.dp-nav-item.is-active {
  background: rgba(11,122,180,.12);
  border-color: rgba(0, 92, 170, 0.25);
}

/* Danger actions (Logout) */
.dp-nav-item--danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.25);
  background: rgba(185, 28, 28, 0.06);
}

.dp-nav-item--danger:hover {
  background: rgba(185, 28, 28, 0.12) !important;
  border-color: rgba(185, 28, 28, 0.30);
}

/* Danger nav button (Logout) */
.dp-nav-item.dp-nav-item--danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.22);
  background: rgba(185, 28, 28, 0.08);
}
.dp-nav-item.dp-nav-item--danger:hover {
  background: rgba(185, 28, 28, 0.14) !important;
  border-color: rgba(185, 28, 28, 0.30);
}

/* Sidebar nav groups (accordion) */
.dp-nav-group {
  margin: 4px 0;
}
.dp-nav-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--dp-text);
  background: var(--dp-surface-2);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.dp-nav-group__toggle:hover {
  background: var(--dp-border);
}
.dp-nav-group__arrow {
  font-size: 12px;
  transition: transform 0.2s;
}
.dp-nav-group.is-open .dp-nav-group__arrow {
  transform: rotate(90deg);
}
.dp-nav-group__items {
  padding-left: 12px;
  margin-top: 2px;
}
.dp-nav-group__items .dp-nav-item {
  font-size: 0.88em;
  padding: 8px 14px;
}

.dp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: rgba(0,0,0,0.06);
  color: var(--dp-text);
  white-space: nowrap;
}

.dp-pill--muted {
  background: rgba(0,0,0,0.06);
  color: var(--dp-muted);
}

.dp-sidebar-overlay {
  display: none;
}

.dp-iconbtn {
  appearance: none;
  border: 1px solid var(--dp-border);
  background: #fff;
  color: var(--dp-text);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.dp-iconbtn:hover {
  background: #f6f8fb;
}

.dp-topbar--withmenu .dp-brandbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-topbar--withmenu .dp-brandbar > div {
  min-width: 0;
}

.dp-topbar--withmenu .dp-brandbar h2 {
  margin: 0;
}

.dp-topbar--withmenu .dp-brandbar p {
  margin: 4px 0 0;
}

.dp-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Desktop: keep tiles readable (3 across) */
@media (min-width: 1100px) {
  .dp-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Inbox 2×2 grid (TradeMe/Seek, SMS/Facebook) */
.dp-inbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.dp-inbox-grid .dp-card { margin-top: 0 !important; }
@media (max-width: 768px) {
  .dp-inbox-grid { grid-template-columns: 1fr; }
}

.dp-dashboard-card {
  appearance: none;
  width: 100%;
  border: 1px solid var(--dp-border);
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

/* --- Dashboard card text/icon visibility (override theme button styles) --- */
.dp-dashboard-card{color:var(--dp-text)!important;}
.dp-dashboard-card-title,.dp-dashboard-card__title{color:var(--dp-text)!important;font-size:18px;font-weight:500;margin:0;}
.dp-dashboard-card-sub,.dp-dashboard-card__sub{color:var(--dp-muted)!important;font-size:13px;margin-top:4px;}
.dp-dashboard-card-cta,.dp-dashboard-card__cta{color:var(--dp-primary)!important;font-weight:700;white-space:nowrap;}
.dp-dashboard-card-left{display:flex;align-items:center;gap:12px;min-width:0;}
.dp-dashboard-card-main{min-width:0;}
.dp-dashboard-card-title,.dp-dashboard-card-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dp-dashboard-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.dp-dashboard-icon svg{width:22px;height:22px;display:block;}
.dp-icon-blue{background:rgba(11,122,180,.14);color:var(--dp-primary);}
.dp-icon-orange{background:rgba(245,158,42,.20);color:var(--dp-accent);}
.dp-icon-green{background:rgba(16,185,129,.18);color:#10b981;}
.dp-icon-purple{background:rgba(139,92,246,.18);color:#8b5cf6;}
.dp-icon-slate{background:rgba(107,114,128,.18);color:#374151;}

/* Picker button text should always be readable */
.dp-picker-item{color:var(--dp-text)!important;}
.dp-picker-title{color:var(--dp-text)!important;}
.dp-picker-sub{color:var(--dp-muted)!important;}



.dp-dashboard-card:hover {
  background: #fff !important; /* prevent theme button hover fills */
  border-color: rgba(17, 24, 39, 0.10);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.10);
  transform: translateY(-1px);
}

.dp-dashboard-card__title {
  font-size: 18px;
  font-weight: 550;
  margin: 0;
}

.dp-dashboard-card__sub {
  margin-top: 4px;
  color: var(--dp-muted);
  font-size: 13px;
}

.dp-dashboard-card__cta {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--dp-border);
  background: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.dp-dashboard-card:hover .dp-dashboard-card__cta {
  border-color: rgba(0, 92, 170, 0.35);
}

/* Mobile: off-canvas sidebar */
@media (max-width: 991px) {
  .dp-shell {
    display: block;
  }

  .dp-sidebar {
    display: flex; /* flex for mobile off-canvas */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    transform: translateX(-102%);
    transition: transform 0.18s ease;
    z-index: 10001;
    overflow: auto;
  }

  .dp-sidebar.is-open {
    transform: translateX(0);
  }

  .dp-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 10000;
  }

  .dp-sidebar-overlay.is-open {
    display: block;
  }

  body.dp-noscroll {
    overflow: hidden;
  }

  .dp-sidebar-close {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------
   Hide the WordPress theme header on portal pages
   (user wants portal to look like an app, not a normal WP page)
-------------------------------------------------------------------*/
body.dp-portal > header,
body.dp-portal > .site-header,
body.dp-portal .site-header,
body.dp-portal .site-header-wrap,
body.dp-portal .header,
body.dp-portal .page-header,
body.dp-portal .elementor-location-header,
body.dp-portal .wp-site-blocks > header,
body.dp-portal #masthead,
body.dp-portal #site-header,
body.dp-portal .ast-header-stacked,
body.dp-portal .kadence-header,
body.dp-portal .site-branding,
body.dp-portal .main-navigation,
body.dp-portal .custom-header,
body.dp-portal .masthead,
body.dp-portal .nv-header,
body.dp-portal nav.navbar,
body.dp-portal .top-bar,
body.dp-portal .site-title-wrap,
body.dp-portal .genesis-nav-menu {
  display: none !important;
}
body.dp-portal .entry-header,
body.dp-portal .page-title,
body.dp-portal .entry-title {
  display: none !important;
}

/* Some themes add a top margin/padding after hiding headers */
body.dp-portal {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.dp-portal .site-content,
body.dp-portal .content-area,
body.dp-portal .entry-content,
body.dp-portal main,
body.dp-portal #content,
body.dp-portal #primary,
body.dp-portal .page-content,
body.dp-portal .ast-container,
body.dp-portal .site-main,
body.dp-portal article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Make the portal wrapper full-width and flush to top */
.dp-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dp-portal #page,
body.dp-portal .site,
body.dp-portal .hfeed,
body.dp-portal .wp-site-blocks,
body.dp-portal #wrapper,
body.dp-portal .page-wrap,
body.dp-portal .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Desktop: keep sidebar visible and hide close button */
@media (min-width: 901px) {
  .dp-sidebar-close {
    display: none;
  }

  #dp-sidebar-open {
    display: none;
  }
}

.dp-picker-title {
  font-weight: 650;
  color: var(--dp-text);
}

.dp-picker-sub {
  margin-top: 2px;
}

.dp-btn--sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 12px;
}

/* =====================================================
   Generic modal (used by Storage share)
   ===================================================== */
.dp-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Some WP themes inject transparent/blur overlays.
     Force a solid dark backdrop so the modal never looks see-through. */
  background: rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto;
}

.dp-modal.is-open {
  display: flex;
}


.dp-modal .dp-modal-panel {
  background: #fff !important;
  opacity: 1 !important;
  width: 100%;
  /* Wider by default so complex forms (Events edit/create, Pools) fit without
     horizontal scrolling. */
  max-width: 820px;
  max-height: 80vh;
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

/* Modals often contain multi-field rows (Title/Date/Start/End). Reduce the
   minimum field width slightly inside modals so inputs fit comfortably. */
.dp-modal .dp-field{min-width:180px}
.dp-modal .dp-grow{min-width:260px}

.dp-modal .dp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dp-modal .dp-modal-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.dp-modal .dp-modal-body {
  padding: 16px;
}

.dp-modal .dp-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

body.dp-modal-open {
  overflow: hidden;
}

/* Small screens: make modal full width */
@media (max-width: 640px) {
  .dp-modal {
    padding: 10px;
  }

  .dp-modal .dp-modal-panel {
    max-width: 100%;
    border-radius: 12px;
  }
}

/* =========================
   Mobile global header
   Burger left • logo center • home right
   ========================= */
/* ── Top Navigation Bar (Mailchimp-style) ─────────────────────── */
.dp-topnav{
  display:flex;
  position:sticky;
  top:0;
  z-index:9999;
  background:var(--dp-surface);
  border-bottom:1px solid var(--dp-border);
  padding:0 16px;
  align-items:center;
  height:56px;
  gap:4px;
  /* Break out of max-width container to span full viewport */
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  padding-left:24px;
  padding-right:24px;
  justify-content:flex-start;
}
.dp-topnav__logo{display:flex;align-items:center;flex-shrink:0;margin-right:12px;text-decoration:none}
.dp-topnav__logo img{height:34px;max-width:150px;object-fit:contain}

/* Horizontal menu (desktop only) */
.dp-topnav__menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.dp-topnav__item{
  appearance:none;border:none;background:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--dp-text);
  padding:8px 14px;border-radius:6px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .15s;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.dp-topnav__item:hover{background:var(--dp-surface-2);color:var(--dp-primary)}
.dp-topnav__item:active{color:var(--dp-text)}
.dp-topnav__item.is-active{background:#0b5ed7 !important;color:#fff !important;border-radius:6px}
.dp-topnav__item.is-active:hover{background:#0950b5 !important;color:#fff !important}
.dp-topnav__item.is-active svg{stroke:#fff !important}
.dp-topnav__item svg{flex-shrink:0;transition:transform .2s}

/* Nav trigger states */
.dp-topnav__trigger[aria-expanded="true"]{background:var(--dp-surface-2);color:var(--dp-text)}
.dp-topnav__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.dp-topnav__item:focus{outline:none;color:var(--dp-text)}
.dp-topnav__item:focus-visible{outline:2px solid var(--dp-primary);outline-offset:2px}

/* ── Mega Panels (fixed below sticky nav) ─────────────────────── */
.dp-megapanel{
  display:none;
  position:fixed;
  top:56px;
  left:0;
  right:0;
  background:var(--dp-surface);
  border-bottom:2px solid var(--dp-border);
  box-shadow:0 8px 30px rgba(0,0,0,.1);
  z-index:9998;
  overflow:hidden;
}
.dp-megapanel.is-open{display:block}
.dp-megapanel__backdrop{
  display:none;
  position:fixed;
  top:56px;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.15);
  z-index:9997;
}
.dp-megapanel__backdrop.is-open{display:block}
@media (max-width: 991px){
  .dp-megapanel{display:none !important}
  .dp-megapanel__backdrop{display:none !important}
}
.dp-megapanel__inner{
  max-width:1100px;
  padding:20px 24px 24px;
}
.dp-megapanel__title{
  font-size:18px;font-weight:700;color:var(--dp-text);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--dp-border);
  text-align:left;
}
.dp-megapanel__grid{
  display:flex;flex-wrap:wrap;gap:4px 0;
  justify-content:flex-start;
}
.dp-megapanel__link{
  appearance:none;border:none;background:none;cursor:pointer;
  font-size:14px;color:var(--dp-text);
  padding:10px 16px;border-radius:6px;
  font-family:inherit;transition:background .12s,color .12s;
  white-space:nowrap;
}
.dp-megapanel__link:hover{background:#0b5ed7;color:#fff}
.dp-megapanel__link--disabled{opacity:.4;cursor:default}
.dp-megapanel__link--disabled:hover{background:none;color:var(--dp-text)}

/* Header tools (right side) */
.dp-header-tools{display:flex !important;align-items:center !important;gap:8px !important;flex-shrink:0 !important;margin-left:auto !important;visibility:visible !important;opacity:1 !important}
.dp-header-email{font-size:13px;color:var(--dp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dp-header-tool{
  width:38px !important;height:38px !important;border-radius:999px !important;border:1px solid #d1d5db !important;
  background:#f3f4f6 !important;color:#111827 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;
  position:relative !important;transition:background .15s,border-color .15s;flex-shrink:0 !important;
  padding:0 !important;margin:0 !important;opacity:1 !important;visibility:visible !important;
  -webkit-appearance:none !important;appearance:none !important;
  font-size:0 !important;line-height:1 !important;outline:none !important;
  min-width:38px !important;min-height:38px !important;overflow:visible !important;
}
.dp-header-tool:hover{background:var(--dp-border) !important}
.dp-header-tool svg{stroke:#111827 !important;fill:none !important;width:20px !important;height:20px !important;display:block !important;visibility:visible !important;opacity:1 !important;color:#111827 !important;stroke-width:2 !important}
.dp-header-tool svg path,.dp-header-tool svg circle,.dp-header-tool svg line,.dp-header-tool svg polyline{stroke:#111827 !important;fill:none !important;visibility:visible !important}
.dp-header-tool--avatar{padding:0 !important;overflow:hidden !important;border:2px solid #0b5ed7 !important}
.dp-header-avatar{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:999px !important;display:block !important;visibility:visible !important;opacity:1 !important}
.dp-bell-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;background:#ef4444;border-radius:8px;border:2px solid var(--dp-surface);font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* Mobile burger */
.dp-topnav .dp-iconbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--dp-border);background:var(--dp-surface);display:inline-flex;align-items:center;justify-content:center}
.dp-topnav .dp-iconbtn--menu{background:#0b5ed7;border-color:#0b5ed7;color:#fff;margin-right:8px}

/* Desktop/mobile toggles */
.dp-desktop-only{display:none}
@media (min-width: 992px){
  .dp-desktop-only{display:flex}
  .dp-mobile-only{display:none !important}
  /* Hide sidebar on desktop — use topnav instead */
  .dp-sidebar{display:none !important}
  .dp-shell{display:block}
  .dp-shell .dp-main{margin:0 auto;max-width:1100px;padding:0 16px}
}
@media (max-width: 991px){
  .dp-topnav__menu{display:none !important}
  .dp-topnav{padding:0 12px;height:52px}
}
@media (max-width: 600px){
  .dp-header-email{display:none}
}

/* ── Dark Mode ────────────────────────────────────────────────── */
.dp-dark {
  --dp-text: #e5e7eb;
  --dp-muted: #9ca3af;
  --dp-border: #374151;
  --dp-surface: #111827;
  --dp-surface-2: #1f2937;
  --dp-primary: #3b82f6;
  --dp-primary-700: #2563eb;
  --dp-accent: #f59e0b;
  color-scheme: dark;
}
.dp-dark .dp-card { background: var(--dp-surface-2); border-color: var(--dp-border); }
.dp-dark .dp-sidebar { background: #0f172a; border-color: var(--dp-border); }
.dp-dark .dp-metric { color: #fff; }
.dp-dark .dp-table th { background: var(--dp-surface); color: var(--dp-text); }
.dp-dark .dp-table td { border-color: var(--dp-border); color: var(--dp-text); }
.dp-dark input, .dp-dark select, .dp-dark textarea {
  background: var(--dp-surface); color: var(--dp-text); border-color: var(--dp-border);
}
.dp-dark .dp-dashboard-card {
  background: var(--dp-surface-2); border-color: var(--dp-border); color: var(--dp-text);
}
.dp-dark .dp-dashboard-card:hover { background: #1e293b; }
.dp-dark .dp-dashboard-card-title { color: var(--dp-text); }
.dp-dark .dp-dashboard-card-sub { color: var(--dp-muted); }
.dp-dark .dp-dashboard-card-cta { color: var(--dp-primary); }
.dp-dark .dp-topnav__item { color: var(--dp-text); }
.dp-dark .dp-topnav__item:hover { background: var(--dp-surface-2); color: var(--dp-primary); }
.dp-dark .dp-megapanel { background: var(--dp-surface); border-color: var(--dp-border); }
.dp-dark .dp-megapanel__title { color: var(--dp-text); border-color: var(--dp-border); }
.dp-dark .dp-megapanel__link { color: var(--dp-text); }
.dp-dark .dp-megapanel__link:hover { background: #2563eb; color: #fff; }
.dp-dark .dp-header-tool svg,.dp-dark .dp-header-tool svg path,.dp-dark .dp-header-tool svg circle,.dp-dark .dp-header-tool svg line { stroke: #e5e7eb !important; }
.dp-dark .dp-header-tool { border-color: #374151 !important; background: #1f2937 !important; }
.dp-dark .dp-nav-item { color: var(--dp-text); }
.dp-dark .dp-nav-item:hover, .dp-dark .dp-nav-item.is-active { background: #1e293b; }
.dp-dark a { color: var(--dp-primary); }
.dp-dark img.dp-topnav__logo img { filter: brightness(0) invert(1); }

/* Center dashboard title on mobile + desktop */
.dp-dashboard-heading--center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* Desktop: remove the redundant heading so the card grid sits higher */
@media (min-width: 992px){
  .dp-dashboard-heading{display:none!important}
}

@media (max-width: 991px){
  /* reduce top padding on mobile now that header exists */
  .dp-shell .dp-main{padding-top:0}
}

/* ------------------------------------------------------------
   Candidates (CRM-style filters) – Card grid (business card style)
   ------------------------------------------------------------ */

/* Force a multi-column grid on desktop (themes sometimes override layout) */
/* ═══════════════════════════════════════════════════════════
   Candidate Table — matches Clients page style
═══════════════════════════════════════════════════════════ */
.dp-c2-table-wrap { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }

.dp-c2-table {
  width: 100%;
  min-width: 760px; /* fits all 5 columns: main(280) + role(110) + class(140) + industry(100) + rating(110) = 740 + padding */
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.dp-c2-th {
  padding: 8px 14px;
  font-weight: 700;
  color: #374151;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid #e5e7eb;
}
.dp-c2-th[data-sort] { cursor: pointer; user-select: none; transition: background .15s; }
.dp-c2-th[data-sort]:hover { background: #f3f4f6; }
.dp-c2-row {
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background .1s;
}
.dp-c2-row:hover { background: #fff7ed; }
.dp-c2-td {
  padding: 12px 14px;
  vertical-align: middle;
}

/* Role/Class/Industry inline badges */
.dp-c2-tr-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  border-radius: 6px; padding: 2px 6px; margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dp-c2-tr-badge--amber { background:#fef3c7; color:#92400e; }
.dp-c2-tr-badge--blue  { background:#e0f2fe; color:#0369a1; }
.dp-c2-tr-badge--green { background:#f0fdf4; color:#166534; }

/* Status column */
.dp-c2-status {
  font-size: 12px; font-weight: 600;
}
.dp-c2-status--active   { color: #16a34a; }
.dp-c2-status--inactive { color: #9ca3af; }

/* Star rating — compact for table rows */
.dp-c2-stars { display:inline-flex; gap:2px; align-items:center; }
.dp-c2-star  {
  background:none; border:none; padding:0; margin:0;
  cursor:pointer; font-size:18px; color:#d1d5db;
  line-height:1; transition:color .1s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.dp-c2-star:hover, .dp-c2-star--hover { color:#fbbf24; transform:scale(1.1); }
.dp-c2-star--on { color:#f59e0b; }

/* Hide old card/biz/grid styles */
.dp-c2-card  { display:none !important; }
.dp-c2-biz   { display:none !important; }
.dp-c2-grid  { display:block !important; }


/* Old biz layout — keep for backward compat but hide */
.dp-c2-biz{ display:none; }

/* Full-page overlay */
.dp-no-scroll{overflow:hidden!important}
.dp-c2-detail-overlay{
  display:block;
  background:transparent;
  padding:0;
}
.dp-c2-detail-shell{ width:100%; max-width:none; }
.dp-c2-detail-top{
  display:flex; align-items:center; gap:12px;
  padding:0 0 12px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  margin-bottom:14px;
}
.dp-c2-detail-title{
  font-size:18px; font-weight:600; color:var(--dp-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dp-c2-detail-body{ padding-top:0; }

/* Roster badge (kept but hidden in new layout — shown via active dot) */
.dp-c2-roster-badge{ display:none !important; }

@media (max-width:460px){
  .dp-c2-card-photo{ aspect-ratio:16/9; }
  .dp-c2-star{ font-size:18px; }
}





/* Candidate details summary (photo on the left inside the Candidate accordion) */
.dp-cand-summary{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top: 6px;
}
.dp-cand-summary__photo{
  flex:0 0 96px;
  width:96px;
  height:96px;
  border-radius:14px;
  overflow:hidden;
  background:#f1f5f9;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.dp-cand-summary__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dp-cand-summary__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#111827;
  background:#e5e7eb;
}
.dp-cand-summary__info{ min-width:0; }
.dp-cand-summary__name{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.dp-cand-summary__name::selection{background:transparent;color:inherit}
.dp-cand-summary__name::-moz-selection{background:transparent;color:inherit}

@media (max-width: 520px){
  .dp-cand-summary{ gap:12px; }
  .dp-cand-summary__photo{ flex-basis:86px; width:86px; height:86px; }
  .dp-cand-summary__name{ font-size:18px; }
}
/* ---------------- Dashboard enhancements (metrics / bulk actions / notes) ---------------- */

.dp-metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
@media (max-width: 1100px){
  .dp-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  /* Mobile: show KPI tiles 2x2 instead of a single column */
  .dp-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px){
  /* Very small phones: fall back to one per row */
  .dp-metrics{ grid-template-columns: 1fr; }
}

.dp-metric{
  border-radius: 16px;
  padding: 14px 16px;
  color: #fff;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height: 90px;
}
.dp-metric__label{ font-size: 13px; opacity: .92; }
.dp-metric__value{ font-size: 34px; font-weight: 800; line-height: 1; }

/* Bulk SMS / Bulk Email (CRM-style) */
.dp-bulk-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 980px){
  .dp-bulk-layout{ grid-template-columns: 1fr; }
}

.dp-bulk-box{
  border: 1px solid var(--dp-border);
  box-shadow: none;
}

.dp-bulk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.dp-qr-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  background: #fff;
  color: #1f2937 !important;
  margin: 8px 0;
  cursor: pointer;
}
.dp-qr-item__title{ font-weight:600; font-size:14px; color:#1f2937 !important; }
.dp-qr-item__preview{ font-size:12px; color:#6b7280 !important; margin-top:2px; }
.dp-qr-item:hover{ background: var(--dp-surface-2); }
.dp-metric__sub{ font-size: 12px; opacity: .88; margin-top:2px; }

/* Clickable metric tiles */
.dp-metric--clickable{
  cursor: pointer;
  border: none;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.dp-metric--clickable:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.dp-metric--clickable:active{
  transform: translateY(0);
}
.dp-metric--clickable::after{
  content: '→';
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 16px;
  opacity: 0.6;
}

/* Approx CRM-ish palette */
.dp-metric--blue{ background: #0b74b8; }
.dp-metric--orange{ background: #f59e0b; }
.dp-metric--purple{ background: #7c3aed; }
.dp-metric--green{ background: #16a34a; }
.dp-metric--red{ background: #dc2626; }
.dp-metric--teal{ background: #0d9488; }
.dp-metric--amber{ background: #d97706; }
.dp-metric--indigo{ background: #4f46e5; }

.dp-bulk-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 760px){
  .dp-bulk-actions{ grid-template-columns: 1fr; }
}

.dp-bulk-card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  background:#ffffff;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  text-align:left;
}
.dp-bulk-card__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 42px;
  font-size: 18px;
}
.dp-bulk-card--sms .dp-bulk-card__icon{ background: #e6f1fb; color: #0b74b8; }
.dp-bulk-card--email .dp-bulk-card__icon{ background: #fff2e0; color: #b45309; }

.dp-bulk-card__title{ font-weight: 650; margin: 0 0 4px 0; }
.dp-bulk-card__desc{ margin: 0; color: var(--dp-muted); font-size: 13px; }

.dp-dashboard-notes{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.dp-dashboard-notes__row{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dp-dashboard-notes__row .dp-input{ flex: 1 1 260px; }
.dp-dashboard-notes__results{
  position: relative;
}
.dp-dashboard-notes__dropdown{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  max-height: 280px;
  overflow:auto;
  z-index: 20;
}
.dp-dashboard-notes__item{
  width: 100%;
  text-align:left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  cursor:pointer;
}
.dp-dashboard-notes__item:hover{ background: rgba(11,116,184,0.08); }

.dp-dashboard-notes__selected{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}




/* Dashboard Notes picker readability */
.dp-dashboard-notes__item { color: var(--dp-text); background: #fff; }
.dp-dashboard-notes__itemName { color: var(--dp-text); }
.dp-dashboard-notes__itemSub { color: var(--dp-muted); }
.dp-dashboard-notes__item:hover { background: #f3f4f6; }
.dp-dashboard-notes__item:focus { background: #e5e7eb; outline: none; }

/* CRM Notes list (candidate/client) */
.dp-crm-notes { max-height: 260px; overflow: auto; }
.dp-crm-note { padding: 10px 0; border-bottom: 1px solid var(--dp-border); }
.dp-crm-note:last-child { border-bottom: 0; }
.dp-crm-note__meta { font-size: 12px; color: var(--dp-muted); margin-bottom: 4px; }
.dp-crm-note__text { white-space: pre-wrap; }

/* ================================
   CATEGORY MANAGEMENT
   ================================ */
.dp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.dp-cat-card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--dp-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--dp-surface);
}
.dp-cat-card__color {
  width: 8px;
  flex-shrink: 0;
}
.dp-cat-card__body {
  flex: 1;
  padding: 10px 12px;
}
.dp-cat-card__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--dp-text);
}
.dp-cat-card__desc {
  margin-top: 2px;
}
.dp-cat-card__meta {
  margin-top: 4px;
  font-size: 11px;
  font-family: monospace;
}
.dp-cat-card__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-left: 1px solid var(--dp-border);
}
.dp-cat-card__actions .dp-btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* Category colour dot in event list cards */
.dp-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  margin-top: -1px;
}

/* ================================
   ROSTER
   ================================ */
#dp-roster-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
#dp-roster-list th {
  font-size: 12px;
  color: var(--dp-muted);
  text-align: left;
  padding: 0 10px;
}
#dp-roster-list td {
  padding: 10px;
  background: var(--dp-surface-2);
  border-top: 1px solid var(--dp-border);
  border-bottom: 1px solid var(--dp-border);
}
#dp-roster-list td:first-child {
  border-left: 1px solid var(--dp-border);
  border-radius: 8px 0 0 8px;
}
#dp-roster-list td:last-child {
  border-right: 1px solid var(--dp-border);
  border-radius: 0 8px 8px 0;
}

/* ================================
   PAYROLL PHASE 1 — SUBTABS, RATE CARD, ONCOST SETTINGS
   ================================ */

/* Sub-tab navigation */
.dp-subtab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--dp-border);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.dp-subtab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--dp-muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .dp-subtab-nav { gap: 0; }
  .dp-subtab { flex: 1 1 45%; text-align: center; padding: 10px 8px; font-size: 0.82em; }
}
.dp-subtab:hover { color: var(--dp-text); background: var(--dp-surface-2); }
.dp-subtab.is-active {
  color: var(--dp-accent);
  border-bottom-color: var(--dp-accent);
  font-weight: 600;
}

/* Rate card display in assignment form */
.dp-rate-card {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 14px;
  background: var(--dp-surface-2);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  font-size: 0.88em;
}
.dp-rate-card__label {
  color: var(--dp-muted);
  width: 80px;
  font-size: 0.9em;
}
.dp-rate-card__value {
  font-weight: 600;
  color: var(--dp-text);
  flex: 1;
}

/* On-cost row editor */
.dp-oc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dp-oc-row input[type="text"] { flex: 1; }
.dp-oc-row input[type="number"] { width: 90px; }
.dp-oc-row-del {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
}
.dp-oc-row-del:hover { background: #fdecea; }

/* Rate card table */
#dp-rc-table table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
#dp-rc-table th { background: var(--dp-surface-2); padding: 8px 10px; text-align: left; font-size: 0.82em; color: var(--dp-muted); border-bottom: 2px solid var(--dp-border); }
#dp-rc-table td { padding: 9px 10px; border-bottom: 1px solid var(--dp-border); vertical-align: middle; }
#dp-rc-table tr:hover td { background: var(--dp-surface-2); }
#dp-rc-table .dp-rc-inactive td { opacity: 0.45; }
#dp-rc-table .dp-margin-pct { font-weight: 600; color: var(--dp-accent); }
#dp-rc-table .dp-margin-low { color: #e67e22; }
#dp-rc-table .dp-margin-bad { color: #c0392b; }

.dp-btn--sm {
  padding: 5px 12px;
  font-size: 0.82em;
}

/* Clients section */
.dp-cl-info-row { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid #f9fafb; font-size:14px; align-items:flex-start; }
.dp-cl-info-row:last-child { border-bottom:none; }
.dp-cl-label { font-weight:600; color:#6b7280; min-width:110px; flex-shrink:0; font-size:13px; }
.dp-cl-m-label { font-size:12px; font-weight:600; display:block; margin-bottom:4px; color:#374151; }
.dp-cl-m-input { width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; box-sizing:border-box; background:#fff; }
.dp-cl-m-input:focus { outline:none; border-color:#f97316; box-shadow:0 0 0 2px rgba(249,115,22,.15); }
.dp-cl-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f3f4f6; }
.dp-cl-row:last-child { border-bottom:none; }

/* ═══════════════════════════════════════════════════════════════════════
   Candidate Detail — Hero + Section Boxes Layout
═══════════════════════════════════════════════════════════════════════ */

/* Outer layout wrapper */
.dp-detail-layout {
  width: 100%;
  max-width: none;
}

/* ── Hero card ─────────────────────────────────────────────────────── */
.dp-detail-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 20px;
  margin-bottom: 20px;
}
.dp-detail-hero__photo {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dp-primary, #f97316);
}
.dp-detail-hero__photo img,
.dp-detail-hero__photo .dp-cand-summary__img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px;
}
.dp-detail-hero__photo .dp-cand-summary__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: rgba(255,255,255,.9);
  background: var(--dp-primary, #f97316); border-radius: 12px;
}
.dp-detail-hero__body { flex: 1; min-width: 0; }
.dp-detail-hero__name {
  font-size: 22px; font-weight: 800; color: #111827; margin-bottom: 8px; line-height: 1.2;
}
.dp-detail-hero__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 13px; color: #6b7280; margin-bottom: 10px;
}
.dp-detail-hero__pills {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}
.dp-detail-pill {
  font-size: 11px; font-weight: 700; border-radius: 99px;
  padding: 3px 10px; white-space: nowrap;
}
.dp-detail-hero__chips {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}
.dp-detail-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; border-radius: 8px;
  padding: 4px 10px; border: 1.5px solid transparent;
}
.dp-detail-chip--on  { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.dp-detail-chip--off { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; }

/* Badge (portal user, etc) */
.dp-detail-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 2px 9px;
}
.dp-detail-badge--green { background: #dcfce7; color: #166534; }
.dp-detail-badge--grey  { background: #f3f4f6; color: #6b7280; }

/* Stars */
.dp-detail-stars {
  display: flex; align-items: center; gap: 4px; margin-bottom: 10px;
}
.dp-detail-star {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; font-size: 24px; color: #d1d5db;
  line-height: 1; transition: color .1s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.dp-detail-star:hover, .dp-detail-star--hover { color: #fbbf24; transform: scale(1.15); }
.dp-detail-star--on { color: #f59e0b; }
.dp-detail-stars-label { font-size: 11px; color: #9ca3af; margin-left: 4px; }

/* Compliance */
.dp-detail-hero__compliance {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  font-size: 13px;
}
.dp-detail-hero__comp-head { margin-bottom: 6px; }
.dp-detail-hero__comp-flags {
  display: flex; flex-wrap: wrap; gap: 4px;
}

/* ── Section boxes ─────────────────────────────────────────────────── */
.dp-detail-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .dp-detail-boxes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
  .dp-detail-boxes { grid-template-columns: 1fr; }
}

.dp-detail-box {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px; font-weight: 600; color: #374151;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dp-detail-box:hover {
  background: #fff7ed; border-color: #f97316; color: #c2410c;
  transform: translateY(-1px);
}
.dp-detail-box--active {
  background: #0e86c8; border-color: #0e86c8; color: #fff;
}
.dp-detail-box--active:hover {
  background: #0a6fa8; border-color: #0a6fa8; color: #fff;
}
.dp-detail-box__icon { font-size: 18px; flex-shrink: 0; }
.dp-detail-box__title { flex: 1; }
.dp-detail-box__arrow { color: inherit; opacity: 0.6; font-size: 16px; }

/* ── Section panel ─────────────────────────────────────────────────── */
.dp-detail-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 12px;
  animation: dp-panel-in .15s ease;
}
@keyframes dp-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dp-detail-panel__back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #6b7280;
  padding: 14px 16px 0;
  transition: color .1s;
}
.dp-detail-panel__back:hover { color: #f97316; }
.dp-detail-panel__title {
  font-size: 16px; font-weight: 700; color: #111827;
  padding: 8px 16px 10px; margin: 0;
  border-bottom: 1px solid #f3f4f6;
}
.dp-detail-panel__body { padding: 16px; }

/* Hide old accordion styling in detail overlay */
.dp-c2-detail-content .dp-accordion { display: none; }
.dp-c2-detail-content .dp-acc-item  { display: none; }

@media (max-width: 600px) {
  .dp-detail-hero { flex-direction: column; align-items: center; text-align: center; }
  .dp-detail-hero__meta { justify-content: center; }
  .dp-detail-hero__pills,
  .dp-detail-hero__chips { justify-content: center; }
  .dp-detail-stars { justify-content: center; }
  .dp-detail-hero__comp-flags { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   Profile Details — Grouped Grid
═══════════════════════════════════════════════════════════ */
.dp-pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 4px 0;
}
@media (max-width: 1100px) {
  .dp-pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dp-pf-grid { grid-template-columns: 1fr; }
}
.dp-pf-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.dp-pf-card-head {
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
}
.dp-pf-card-body { padding: 8px 0; }
.dp-pf-row {
  display: flex;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px solid #f9fafb;
  font-size: 13px;
  align-items: flex-start;
}
.dp-pf-row:last-child { border-bottom: none; }
.dp-pf-label {
  flex: 0 0 44%;
  color: #6b7280;
  font-weight: 500;
  min-width: 0;
}
.dp-pf-val {
  flex: 1;
  color: #111827;
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   SMS Box
═══════════════════════════════════════════════════════════ */
.dp-c2-sms-box {
  background: #fff;
  border: 1.5px solid #3b82f6;
  border-radius: 12px;
  margin: 8px 0 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(59,130,246,0.15);
}
.dp-c2-sms-inner { padding: 14px; }
.dp-c2-sms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #1e3a8a;
}
.dp-c2-sms-close {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #6b7280; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.dp-c2-sms-close:hover { background: #f3f4f6; }
.dp-c2-sms-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 80px;
}
.dp-c2-sms-textarea:focus { outline: 2px solid #3b82f6; border-color: #3b82f6; }
.dp-c2-sms-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.dp-c2-sms-char { font-size: 12px; color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════
   Profile Details — extra elements
═══════════════════════════════════════════════════════════ */
.dp-pf-divider {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280;
  padding: 8px 14px 4px; background: #f8fafc;
  border-top: 1px solid #e5e7eb; border-bottom: 1px solid #f0f0f0;
  margin-top: 4px;
}
.dp-pf-card--full {
  grid-column: 1 / -1;
}
.dp-pf-statement {
  padding: 12px 14px; font-size: 14px; line-height: 1.6;
  color: #374151; white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════
   SMS Log in Messages tab
═══════════════════════════════════════════════════════════ */
.dp-sms-log-section {
  background: #f8fafc; border: 1px solid #e5e7eb;
  border-radius: 10px; margin-bottom: 16px; overflow: hidden;
}
.dp-sms-log-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #374151;
  padding: 8px 14px; background: #f1f5f9;
  border-bottom: 1px solid #e5e7eb;
}
.dp-sms-log-list { padding: 4px 0; }
.dp-sms-log-item {
  padding: 8px 14px; border-bottom: 1px solid #f0f4f8;
}
.dp-sms-log-item:last-child { border-bottom: none; }
.dp-sms-log-meta { font-size: 11px; color: #9ca3af; margin-bottom: 2px; }
.dp-sms-log-text { font-size: 13px; color: #1f2937; }
.dp-sms-divider {
  font-size: 12px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px 0 6px; border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════
   Notes CRUD
═══════════════════════════════════════════════════════════ */
.dp-notes-wrap { padding: 4px 0; }
.dp-notes-toolbar { margin-bottom: 12px; }
.dp-notes-add-form {
  background: #f8fafc; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 12px; margin-bottom: 14px;
}
.dp-notes-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 80px;
}
.dp-notes-textarea:focus { outline: 2px solid #3b82f6; border-color: #3b82f6; }
.dp-notes-form-btns { display: flex; gap: 8px; margin-top: 8px; }
.dp-notes-list { margin-bottom: 12px; }
.dp-note-item {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.dp-note-meta {
  font-size: 11px; color: #9ca3af; margin-bottom: 4px;
}
.dp-note-text {
  font-size: 14px; color: #1f2937; white-space: pre-wrap;
  line-height: 1.5; margin-bottom: 8px;
}
.dp-note-actions { display: flex; gap: 8px; }
.dp-note-edit-btn, .dp-note-del-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 2px 8px; border-radius: 4px;
  font-weight: 600;
}
.dp-note-edit-btn { color: #3b82f6; }
.dp-note-edit-btn:hover { background: #eff6ff; }
.dp-note-del-btn { color: #b91c1c; }
.dp-note-del-btn:hover { background: #fef2f2; }
.dp-notes-crm-head {
  font-size: 12px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px 0 6px; border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   Compliance panel (section box content)
═══════════════════════════════════════════════════════════ */
.dp-comp-panel {
  padding: 4px 0;
}
.dp-comp-panel__overall {
  font-size: 15px; font-weight: 700; color: #111827;
  margin-bottom: 14px;
}
.dp-comp-panel__flags {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.dp-comp-panel__flags span[data-flag-key] {
  font-size: 17px;
}

/* Compact compliance badge in hero */
.dp-detail-comp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #374151;
  background: #f8fafc; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 4px 10px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   Detail overlay top bar — mobile friendly
═══════════════════════════════════════════════════════════ */
.dp-c2-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: nowrap;
}
.dp-c2-detail-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.dp-btn--danger {
  color: #b91c1c !important;
  border-color: rgba(185,28,28,.3) !important;
}
/* On small screens: icon only, hide label text */
@media (max-width: 520px) {
  .dp-btn-label { display: none; }
  .dp-btn--icon-label { padding: 6px 10px; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   Hero card — photo wrap + roster badge + clickable links
═══════════════════════════════════════════════════════════ */
.dp-detail-hero__photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 160px;
}
.dp-detail-hero__photo-wrap .dp-cand-summary__img,
.dp-detail-hero__photo-wrap .dp-cand-summary__placeholder {
  width: 160px;
  height: 160px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}
.dp-detail-hero__photo-wrap .dp-cand-summary__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
}
.dp-detail-roster {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
  text-align: center;
}
.dp-detail-roster--in  { background: #dcfce7; color: #166534; }
.dp-detail-roster--out { background: #f3f4f6; color: #6b7280; }

.dp-detail-meta-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 1px 3px;
  transition: background 0.15s;
}
.dp-detail-meta-link:hover {
  background: #f0f9ff;
  color: #0369a1;
  text-decoration: underline;
}

/* Mobile hero layout */
@media (max-width: 600px) {
  .dp-detail-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dp-detail-hero__photo-wrap {
    width: 120px;
  }
  .dp-detail-hero__photo-wrap .dp-cand-summary__img,
  .dp-detail-hero__photo-wrap .dp-cand-summary__placeholder {
    width: 120px;
    height: 120px;
  }
  .dp-detail-hero__meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  .dp-detail-hero__pills,
  .dp-detail-hero__chips {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   Roster row — SMS / roster badge / Edit under photo
═══════════════════════════════════════════════════════════ */
.dp-detail-hero__roster-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.dp-detail-quick-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.dp-detail-quick-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.dp-detail-quick-btn--sms  { border-color: rgba(59,130,246,.3); }
.dp-detail-quick-btn--edit { border-color: rgba(249,115,22,.4); background: #fff7ed; }

/* ═══════════════════════════════════════════════════════════
   Edit Candidate modal — responsive form grids
═══════════════════════════════════════════════════════════ */
.dp-cand-modal-panel {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 940px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.dp-form-grid {
  padding: 16px;
  display: grid;
  gap: 14px;
}
.dp-form-grid-2 { grid-template-columns: 1fr 1fr; }
.dp-form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

@media (max-width: 640px) {
  .dp-cand-modal-panel {
    border-radius: 8px 8px 0 0;
    max-height: 92vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
  }
  .dp-form-grid-2 { grid-template-columns: 1fr; }
  .dp-form-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Make modal overlay align to bottom on mobile */
  #dp-cand-modal-ov {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Responsive tables — assignments + roster
═══════════════════════════════════════════════════════════ */
.dp-resp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.dp-resp-table th {
  font-size: 12px;
  color: #6b7280;
  text-align: left;
  padding: 4px 10px;
  white-space: nowrap;
}
.dp-resp-table td {
  padding: 10px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}
.dp-resp-table td:first-child {
  border-left: 1px solid #e5e7eb;
  border-radius: 8px 0 0 8px;
}
.dp-resp-table td:last-child {
  border-right: 1px solid #e5e7eb;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 680px) {
  .dp-resp-table thead { display: none; }
  .dp-resp-table, .dp-resp-table tbody,
  .dp-resp-table tr, .dp-resp-table td { display: block; width: 100%; }
  .dp-resp-table tr {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 4px 0;
    overflow: hidden;
  }
  .dp-resp-table td {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
  }
  .dp-resp-table td:last-child { border-bottom: none !important; }
  .dp-resp-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    min-width: 100px;
    flex-shrink: 0;
  }
  .dp-resp-table td:empty { display: none; }
  /* Actions row: stack label above, buttons in a left-aligned row below */
  .dp-resp-table td[data-label="Actions"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 14px 12px;
  }
  .dp-resp-table td[data-label="Actions"]::before {
    min-width: unset;
    margin-bottom: 6px;
  }
  .dp-resp-table td[data-label="Actions"] .dp-btn,
  .dp-resp-table td[data-label="Actions"] button {
    font-size: 13px !important;
    padding: 9px 0 !important;
    border-radius: 8px !important;
    min-height: 38px;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 6px;
  }
  .dp-resp-table td[data-label="Actions"] .dp-btn:last-child,
  .dp-resp-table td[data-label="Actions"] button:last-child {
    margin-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   Candidates table — redesigned 2-column mobile layout
═══════════════════════════════════════════════════════════ */

/* Column widths */
.dp-c2-th--main    { width: 280px; }
.dp-c2-th--role    { width: 110px; border-left: 1px solid #e5e7eb; padding-left: 10px; }
.dp-c2-th--class   { width: 140px; border-left: 1px solid #e5e7eb; padding-left: 10px; }
.dp-c2-th--industry{ width: 100px; border-left: 1px solid #e5e7eb; padding-left: 10px; }
.dp-c2-th--docs    { width: 100px; border-left: 1px solid #e5e7eb; padding-left: 10px; }
.dp-c2-th--rating  { width: 110px; border-left: 1px solid #e5e7eb; padding-left: 10px; white-space: nowrap; }
.dp-c2-td--main    { width: 280px; overflow: hidden; }
.dp-c2-td--role    { width: 110px; vertical-align: middle; border-left: 1px solid #f3f4f6; padding-left: 10px; overflow: hidden; }
.dp-c2-td--class   { width: 140px; vertical-align: middle; border-left: 1px solid #f3f4f6; padding-left: 10px; overflow: hidden; }
.dp-c2-td--industry{ width: 100px; vertical-align: middle; border-left: 1px solid #f3f4f6; padding-left: 10px; overflow: hidden; }
.dp-c2-td--docs    { width: 100px; vertical-align: middle; border-left: 1px solid #f3f4f6; padding-left: 10px; }
.dp-c2-td--rating  { width: 110px; vertical-align: middle; border-left: 1px solid #f3f4f6; padding-left: 10px; }

/* Badges wrap in a 2-column grid within each cell */
.dp-c2-td--role .dp-c2-tr-badge,
.dp-c2-td--class .dp-c2-tr-badge,
.dp-c2-td--industry .dp-c2-tr-badge {
  display: block;
  white-space: normal;
  word-break: break-word;
  margin: 2px 0;
}
.dp-c2-td--class {
  display: table-cell; /* ensure it stays as td */
}
.dp-c2-badge-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.dp-c2-badge-wrap .dp-c2-tr-badge {
  display: block;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  margin: 0;
}

/* Row main cell: photo on left, info on right */
.dp-c2-row-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Photo column: stars above, photo below */
.dp-c2-row-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Make stars smaller when stacked above photo */
.dp-c2-row-photo .dp-c2-stars { gap: 1px; }
.dp-c2-row-photo .dp-c2-star  { font-size: 13px; }

/* Info column */
.dp-c2-row-info { flex: 1; min-width: 0; }
.dp-c2-row-name {
  font-weight: 700;
  font-size: 16px;
  color: #111827;
  line-height: 1.3;
}
.dp-c2-row-city {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.dp-c2-row-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.dp-c2-contact-link {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}
.dp-c2-contact-link:hover { text-decoration: underline; }
.dp-c2-row-status {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
}

/* On very narrow screens, stack contact vertically */
@media (max-width: 480px) {
  .dp-c2-row-main  { gap: 7px; }
  .dp-c2-contact-link { font-size: 12px; }
  .dp-c2-row-name { font-size: 14px; }
  .dp-c2-tr-badge { font-size: 10px; padding: 2px 6px; }
}

/* ── Doc presence checks ── */
.dp-c2-doc-checks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dp-c2-doc-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dp-c2-doc-check--yes {
  color: #16a34a;
}
.dp-c2-doc-check--no {
  color: #dc2626;
}
.dp-c2-doc-check--loading {
  color: #9ca3af;
}
.dp-c2-doc-check span { font-weight: 400; color: #6b7280; font-size: 11px; }

/* ── Stars in own column ── */
.dp-c2-td--rating .dp-c2-stars {
  display: flex;
  gap: 1px;
}
.dp-c2-td--rating .dp-c2-star {
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════
   Payroll page — mobile-friendly controls
═══════════════════════════════════════════════════════════ */

.dp-payroll-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.dp-payroll-controls .dp-field {
  margin: 0;
  min-width: 160px;
  flex: 1 1 160px;
}
.dp-payroll-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 680px) {
  .dp-payroll-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .dp-payroll-controls .dp-field {
    min-width: 0;
    flex: none;
    width: 100%;
  }
  .dp-payroll-btns {
    flex-direction: column;
  }
  .dp-payroll-btns .dp-btn {
    width: 100%;
    justify-content: center;
  }
  /* Payroll subtab nav — wrap on small screens */
  #dp-payroll-subtabs {
    flex-wrap: wrap;
  }
  /* Rate card filter bar */
  #dp-pane-payroll .dp-subpane [style*="display:flex"] {
    flex-direction: column;
  }
  /* Modals — full screen on mobile */
  #dp-rc-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100dvh;
    border-radius: 0 !important;
  }
}

/* dp-btn colour variants used by payroll */
.dp-btn--green {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.dp-btn--green:hover { background: #15803d; }
.dp-btn--danger-ghost {
  color: #dc2626;
  border-color: #dc2626;
  background: transparent;
}
.dp-btn--danger-ghost:hover { background: #fef2f2; }

/* ================================
   STORAGE – Google Drive style
   ================================ */
/* Header row hides on mobile (JS also hides it) */
@media(max-width:699px){
  #dp-sto-list-header { display:none !important; }
  /* Stack toolbar buttons */
  #dp-sto-toolbar { padding:8px 10px; gap:6px; }
  #dp-sto-toolbar .dp-btn { font-size:12px !important; padding:6px 8px; }
  /* Grid cards smaller */
  #dp-sto-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important; gap:8px !important; }
  /* Modal full-width on mobile */
  #dp-sto-share-modal > div,
  #dp-sto-folder-modal > div,
  #dp-sto-rename-modal > div,
  #dp-sto-move-modal > div { max-width:100% !important; width:100% !important; margin:8px; border-radius:12px; }
  #dp-sto-preview-modal > div { max-width:100% !important; width:100% !important; margin:4px; max-height:95vh !important; }
  /* Upload progress smaller */
  #dp-sto-upload-progress { font-size:12px; }
  /* Top actions wrap */
  [data-pane="storage"] .dp-pane-nav { flex-direction:column; align-items:stretch; gap:8px; }
  [data-pane="storage"] .dp-pane-nav > div { justify-content:stretch; }
  [data-pane="storage"] .dp-pane-nav .dp-btn { flex:1; text-align:center; }
}

/* Storage row hover on desktop */
@media(min-width:700px){
  .dp-sto-row:hover { background:#f8fafc; }
}

/* Breadcrumb wrap */
#dp-sto-breadcrumbs { flex-wrap:wrap; }
#dp-sto-breadcrumbs button { font-size:13px; }
@media(max-width:699px){
  #dp-sto-breadcrumbs button { font-size:12px; padding:4px 2px; }
}

/* Storage tab active state */
.dp-sto-tab { transition:color 0.2s, border-color 0.2s; }
@media(max-width:699px){
  .dp-sto-tab { font-size:13px !important; padding:8px 12px !important; }
}

/* ── Candidates pane – mobile/landscape responsive fixes ── */

/* Allow horizontal scroll within the candidates pane on mobile */
@media (max-width: 860px) {
  #dp-pane-candidates {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack pane-nav buttons on narrow screens */
  [data-pane="candidates"] .dp-pane-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
  [data-pane="candidates"] .dp-pane-nav .dp-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Hide the card-head description on mobile to save vertical space */
  [data-pane="candidates"] .dp-card-head {
    display: none;
  }

  /* Make the filter dropdowns stack 2-up on landscape */
  [data-pane="candidates"] .dp-form-row.dp-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Checkbox row: wrap nicely */
  [data-pane="candidates"] .dp-form-row[style*="display:flex"],
  [data-pane="candidates"] .dp-form-row[style*="display: flex"] {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* Pools panel: collapse to a toggle on mobile */
  #dp-c2-pools-panel > div:not(:first-child) {
    display: none;
  }
  #dp-c2-pools-panel > div:first-child {
    cursor: pointer;
  }
}

/* On very small phones (portrait), single column dropdowns */
@media (max-width: 480px) {
  [data-pane="candidates"] .dp-form-row.dp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* KPI tables: allow text wrapping on mobile */
@media (max-width: 768px) {
  .dp-table th, .dp-table td { white-space: normal; padding: 8px 6px; font-size: 13px; }
  .dp-table table { table-layout: auto; }
}