@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap');

:where(.ca-theme-shell, .casting-agenda-app) :where(h1,h2,h3,h4,h5,h6){
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

:where(.ca-theme-shell, .casting-agenda-app) :where(p),
.elementor-widget-text-editor,
.elementor-widget-text-editor :where(p,li,a,span){
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

@layer ca.reset, ca.tokens, ca.base, ca.layout, ca.components, ca.utilities;


@layer ca.reset {
  :where(.ca-theme-shell, .casting-agenda-app),
  :where(.ca-theme-shell, .casting-agenda-app) * {
    box-sizing: border-box;
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(img, svg, video, canvas) {
    max-width: 100%;
    height: auto;
    display: block;
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(button, input, select, textarea) {
    font: inherit;
  }
}

@layer ca.base {
  :where(.ca-theme-shell, .casting-agenda-app) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(h1, h2, h3) {
    color: var(--ca-text);
    letter-spacing: -0.02em;
    font-weight: 720;
    margin: 0;
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(p) {
    margin: 0;
    color: var(--ca-text);
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(a) {
    color: var(--ca-primary);
    text-decoration: none;
    font-weight: 650;
  }
  :where(.ca-theme-shell, .casting-agenda-app) :where(a:hover) {
    text-decoration: underline;
  }
}

@layer ca.layout {

  :where(.ca-theme-shell, .casting-agenda-app) :where(main, .container, .content, .ca-content) {
    max-width: 1100px;
    margin-inline: auto;
  }

  /* Override theme's ca-content padding and max-width inside the app shell */
  body.ca-app-page > .ca-content,
  body.ca-app-page .ca-theme-shell,
  body.ca-app-page .ca-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    /* overflow-x: clip does NOT break position:sticky (unlike hidden) */
    overflow-x: clip;
  }
}

@layer ca.components {

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(.card, .panel, .box, .ca-card, .ca-panel, .sidebar, .rightbar, .done, .options) {
    background: var(--ca-panel-bg, var(--ca-surface));
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-soft);
  }


  :where(.ca-theme-shell, .casting-agenda-app) :where(label) {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--ca-muted);
    margin: 0 0 6px 0;
  }


  :where(.ca-theme-shell, .casting-agenda-app)
  :where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
         input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
         select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--ca-radius-sm);
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    color: var(--ca-text);
    font-size: 15px;
    line-height: 1.2;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  }

  :where(.ca-theme-shell, .casting-agenda-app) :where(textarea) {
    padding: 12px 14px;
    min-height: 120px;
    height: auto;
    resize: vertical;
  }

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--ca-primary);
    box-shadow: var(--ca-ring);
  }


  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button, input[type="submit"], input[type="button"], input[type="reset"], .button, .btn, a.button):not(.ca-tbl-icon-btn):not(.ca-date-remove) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-2));
    color: #fff;
    font-weight: 750;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(124,92,255,.28);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    text-decoration: none;
  }

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .button:hover, .btn:hover, a.button:hover):not(.ca-tbl-icon-btn):not(.ca-date-remove) {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 14px 30px rgba(124,92,255,.32);
  }

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, .button:active, .btn:active, a.button:active) {
    transform: translateY(0) scale(.99);
  }

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button[disabled], input[type="submit"][disabled], input[type="button"][disabled], input[type="reset"][disabled], .button.disabled, .btn.disabled) {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
  }


  :where(.ca-theme-shell, .casting-agenda-app) input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--ca-primary);
  }


  :where(.ca-theme-shell, .casting-agenda-app) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    overflow: hidden;
    box-shadow: var(--ca-shadow-soft);
  }
  :where(.ca-theme-shell, .casting-agenda-app) :where(th, td) {
    padding: 14px 12px;
    border-bottom: 1px solid var(--ca-border);
    vertical-align: middle;
    color: var(--ca-text);
  }
  :where(.ca-theme-shell, .casting-agenda-app) th {
    background: color-mix(in srgb, var(--ca-surface) 85%, #000 15%);
    color: var(--ca-muted);
    font-size: 12.5px;
    font-weight: 650;
  }


.ca-status-row--item 

  :where(.ca-theme-shell, .casting-agenda-app) input[type="checkbox"]:not(.ca-checkbox) {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }



  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button, input[type="submit"], input[type="button"], input[type="reset"], .button, .btn, a.button) {
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-2)) !important;
    color: #fff !important;
  }

  :where(.ca-theme-shell, .casting-agenda-app)
  :where(button.ca-tbl-icon-btn.ca-tbl-del) {
    background: transparent !important;
  }

}


@layer ca.utilities {
  :where(.ca-theme-shell, .casting-agenda-app) .ca-center { text-align: center; }
  :where(.ca-theme-shell, .casting-agenda-app) .ca-muted { color: var(--ca-muted); }
}

@layer ca.components {
  :where(.ca-theme-shell, .casting-agenda-app) .ca-agency-row{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-agency-row > input[type="text"]{
    width: 100%;
    min-width: 0;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
    cursor: pointer;
    user-select: none;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle > input.ca-checkbox{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle > .ca-checkbox-ui{
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--ca-border);
    background: var(--ca-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle > input.ca-checkbox:checked + .ca-checkbox-ui{
    border-color: var(--ca-primary);
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-2));
    box-shadow: 0 10px 22px rgba(124,92,255,.25);
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle > input.ca-checkbox:checked + .ca-checkbox-ui::after{
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: -1px;
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle:has(> input.ca-checkbox:focus-visible){
    box-shadow: var(--ca-ring);
    border-color: var(--ca-primary);
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-inline-toggle:hover .ca-checkbox-ui{
    border-color: color-mix(in srgb, var(--ca-primary) 35%, var(--ca-border));
    transform: translateY(-1px);
  }


  :where(.ca-theme-shell, .casting-agenda-app) .ca-statuses-list{
    display: grid;
    gap: 14px;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row{
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    padding: 14px;
    box-shadow: var(--ca-shadow-soft);
  }
}

@layer ca.components {

  :where(.ca-theme-shell, .casting-agenda-app) .ca-form.ca-form--wide{
    width: 100%;
  }

  /* Inline form wrapper (add/edit rendered via JS template) */
  :where(.ca-theme-shell, .casting-agenda-app) .ca-inlineform {
    width: 100%;
    box-sizing: border-box;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row {
    display: grid;
    grid-template-columns: 160px 1fr 200px 80px 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ca-border);
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--head {
    border-bottom: 2px solid var(--ca-border);
    padding-bottom: 8px;
    margin-bottom: 2px;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--head .ca-status-col {
    font-size: 12px;
    font-weight: 650;
    color: var(--ca-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-col {
    min-width: 0;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-col--check {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-mobile-label {
    display: none;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    color: var(--ca-text);
    padding: 6px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ca-surface) 85%, #000 15%);
    border: 1px solid var(--ca-border);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item input[type="text"] {
    width: 100%;
    min-width: 0;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-color-field {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    align-items: center;
  }

  :where(.ca-theme-shell, .casting-agenda-app) input.ca-color[type="color"] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border-radius: 10px;
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    cursor: pointer;
  }

  :where(.ca-theme-shell, .casting-agenda-app) input.ca-color-text {
    min-height: 40px;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item .ca-checkbox[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--ca-border);
    background: var(--ca-surface);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item .ca-checkbox[type="checkbox"]:checked {
    border-color: var(--ca-primary);
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-2));
    box-shadow: 0 4px 12px rgba(124,92,255,.3);
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item .ca-checkbox[type="checkbox"]:checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg);
    margin-top: -2px;
  }

  :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item .ca-checkbox[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--ca-ring);
  }

  @media (max-width: 680px) {
    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--head {
      display: none;
    }

    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-row--item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 12px;
      background: var(--ca-surface);
      border: 1px solid var(--ca-border);
      border-radius: 14px;
      margin-bottom: 10px;
    }

    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-col {
      width: 100%;
    }

    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-col--check {
      justify-content: flex-start;
      gap: 10px;
    }

    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-mobile-label {
      display: block;
      font-size: 11px;
      font-weight: 650;
      color: var(--ca-muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 5px;
    }

    :where(.ca-theme-shell, .casting-agenda-app) .ca-status-col--check .ca-status-mobile-label {
      margin-bottom: 0;
    }
  }
}

@layer ca.layout {

  :where(.casting-agenda-app, .ca-theme-shell) .ca-layout.page-layout{
    display: grid;
    grid-template-columns: clamp(260px, 18vw, 340px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
  }

  /* Form pages (add/edit): full width, no sidebar column */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-layout.page-layout.ca-layout--form {
    grid-template-columns: 1fr;
    gap: 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar,
  :where(.casting-agenda-app, .ca-theme-shell) #caMain{
    min-width: 0;
  }


  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar :where(ul.ca-list){
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar :where(ul.ca-list > li){
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar :where(ul.ca-list > li) .ca-chip{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 12px;
    border-radius: 16px;
    border: 2px solid color-mix(in srgb, var(--ca-border) 70%, #000 30%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
    text-decoration: none;
    color: inherit;
    font-weight: 750;
  }

  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar :where(ul.ca-list > li) .ca-muted{
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 980px){
    :where(.casting-agenda-app, .ca-theme-shell) .ca-layout.page-layout{
      grid-template-columns: 1fr;
    }
    :where(.casting-agenda-app, .ca-theme-shell) #caSidebar{ order: 1; }
    :where(.casting-agenda-app, .ca-theme-shell) #caMain{ order: 2; }  }


  :where(.casting-agenda-app) .ca-content{
    width: auto;
    max-width: none;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-container{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }


  :where(.casting-agenda-app) :where(main, #main-content, .container, .content, .ca-content){
    max-width: none !important;
    width: 100%;
    margin-inline: 0 !important;
  }


  :where(.casting-agenda-app, .ca-theme-shell){
    width: 100%;
    max-width: none;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-page{
    width: 100%;
  }


  :where(.casting-agenda-app, .ca-theme-shell) #caSidebar{
    position: sticky;
    top: 92px;
    align-self: start;
    max-height: calc(100vh - 110px);

    overflow: hidden;
    overscroll-behavior: contain;
    padding-right: 6px;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-virt{
    height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-virt-spacer{
    position: relative;
    width: 100%;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-virt-inner{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
  }

  @media (max-width: 700px){
    :where(.casting-agenda-app, .ca-theme-shell) #caSidebar{
      overflow: visible;
      padding-right: 0;
    }
    :where(.casting-agenda-app, .ca-theme-shell) .ca-virt{
      height: auto;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
    :where(.casting-agenda-app, .ca-theme-shell) .ca-virt-inner{
      position: static;
      transform: none !important;
    }
  }


  :where(.casting-agenda-app, .ca-theme-shell) #caMain{
    min-width: 0;
    width: 100%;
  }


  :where(.casting-agenda-app, .ca-theme-shell) #caMain > *{
    min-width: 0;
    max-width: 100%;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid,
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock,
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock *{
    min-width: 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(a.ca-chip){
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  @media (max-width: 1200px){
    :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px){
    :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
      grid-template-columns: 1fr;
    }
    :where(.casting-agenda-app, .ca-theme-shell) #caSidebar{
      position: relative;
      top: auto;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
  }

}

@layer ca.base {
  :where(.casting-agenda-app, .ca-theme-shell) :where(h1, .ca-page-title){
    text-align: center;
  }
}

@layer ca.components {
  :where(.casting-agenda-app) :where(header, .ca-header, .ca-topbar, .topbar, nav) :where(.brand, .logo, .site-title, .app-title, .navbar-brand){
    display: none;
  }
  :where(.casting-agenda-app) :where(header, .ca-header, .ca-topbar, .topbar) nav a:first-child{
    display: none;
  }
}

@layer ca.components {

  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn){
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: var(--ca-shadow-soft);
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) h2,
  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) h3,
  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) .ca-panel-title{
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.02em;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(.count, .badge, .pill, .ca-badge){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ca-primary) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--ca-primary) 22%, var(--ca-border));
    color: var(--ca-text);
    font-size: 12px;
    font-weight: 700;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(p, div){
    line-height: 1.35;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) ul{
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) li{
    margin: 0;
    padding: 12px 12px;
    border: 1px solid var(--ca-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ca-surface) 88%, #000 12%);
    box-shadow: var(--ca-shadow-soft);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) li a{
    display: block;
    text-decoration: none;
    color: var(--ca-text);
    font-weight: 650;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) li a:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(.empty, .ca-empty, .empty-state){
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--ca-border) 75%, #000 25%);
    background: color-mix(in srgb, var(--ca-surface) 92%, var(--ca-primary) 8%);
    color: var(--ca-muted);
    font-weight: 600;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) li:has(> :where(.ca-muted, .muted, em, i)){
    background: transparent;
    border-style: dashed;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul, ol){
    list-style-position: inside;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(.ca-muted, .muted, small){
    color: var(--ca-muted);
    font-weight: 550;
  }
}

@layer ca.components {


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-agenda, .ca-calendar, .ca-calendar-wrap, .agenda){
    background: transparent;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-month-header, .month-header, .calendar-header){
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-month-title, .month-title){
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(18px, 2.1vw, 26px);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-month-nav, .month-nav, .calendar-nav) button,
  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-month-header) :where(.prev, .next, .ca-prev, .ca-next, button){
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-calendar-grid, .calendar-grid, .ca-grid){
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-weekday, .weekday, .dayname){
    font-size: 12px;
    font-weight: 700;
    color: var(--ca-muted);
    text-align: center;
    padding: 6px 0;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-day, .day, .calendar-day){
    min-height: 110px;
    border-radius: 18px;
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
    padding: 10px;
    position: relative;
    overflow: hidden;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-day.is-today, .day.is-today, .calendar-day.is-today){
    border-color: color-mix(in srgb, var(--ca-primary) 35%, var(--ca-border));
    box-shadow: 0 14px 30px rgba(124,92,255,.10);
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-day-number, .day-number, .date-number){
    font-weight: 750;
    font-size: 13px;
    color: var(--ca-muted);
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-pill, .pill, .badge-pill, .event-pill){
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 80%, #000 20%);
    background: color-mix(in srgb, var(--ca-surface) 92%, var(--ca-primary) 8%);
    font-weight: 650;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-pill a, .pill a, .event-pill a){
    color: inherit;
    text-decoration: none;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-pill a:hover, .pill a:hover, .event-pill a:hover){
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

@layer ca.components {
  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar, .topbar, .ca-header, header.ca-header) {
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    border-radius: 18px;
    box-shadow: var(--ca-shadow-soft);
    padding: 12px 14px;
    margin: 0 0 18px 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar nav, .topbar nav, header nav){
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar nav a, .topbar nav a, header nav a){
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ca-text);
    font-weight: 650;
    border: 1px solid transparent;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar nav a:hover, .topbar nav a:hover, header nav a:hover){
    background: color-mix(in srgb, var(--ca-primary) 10%, var(--ca-surface));
    border-color: color-mix(in srgb, var(--ca-primary) 18%, var(--ca-border));
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar nav a[aria-current="page"], .topbar nav a[aria-current="page"], header nav a[aria-current="page"], .active > a){
    background: color-mix(in srgb, var(--ca-primary) 14%, var(--ca-surface));
    border-color: color-mix(in srgb, var(--ca-primary) 28%, var(--ca-border));
  }
}

@layer ca.layout {
  @media (max-width: 980px){
    :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn){
      padding: 14px 12px;
      border-radius: 16px;
    }

    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-status-row){
      padding: 12px;
    }
  }

  @media (max-width: 560px){
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-calendar-grid, .calendar-grid, .ca-grid){
      gap: 8px;
    }

    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-day, .day, .calendar-day){
      min-height: 96px;
      padding: 8px;
      border-radius: 16px;
    }

    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-topbar, .topbar, .ca-header){
      padding: 10px 10px;
      border-radius: 16px;
    }
  }
}

@layer ca.theme {
  :where(.site-footer, footer) :where(.footer-widgets, .footer-widgets-area, .footer-widget-area, .widget-area, .widgets, .footer-inner){
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  @media (max-width: 900px){
    :where(.site-footer, footer) :where(.footer-widgets, .footer-widgets-area, .footer-widgets-area, .footer-widget-area, .widget-area, .widgets, .footer-inner){
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}

@layer ca.components {

  :where(.casting-agenda-app, .ca-theme-shell) :where(#calendarHeader.ca-calhead){
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px 0;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-calbtn){
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ca-primary) 18%, var(--ca-border));
    background: color-mix(in srgb, var(--ca-primary) 10%, var(--ca-surface));
    color: var(--ca-text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 14px 30px rgba(124,92,255,.12);
    cursor: pointer;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-calbtn:hover){
    background: color-mix(in srgb, var(--ca-primary) 14%, var(--ca-surface));
    transform: translateY(-1px);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-caltitle){
    text-align: center;
    font-weight: 850;
    letter-spacing: -0.02em;
    font-size: clamp(18px, 2.1vw, 28px);
    text-transform: lowercase;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(#calendarWrapper){
    display: grid;
    gap: 10px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-weekdays){
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 0 2px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-weekdays > div){
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    color: var(--ca-muted);
    padding: 8px 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-grid){
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell){
    min-height: 116px;
    border-radius: 18px;
    border: 1px solid var(--ca-border);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
    padding: 10px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell--othermonth){
    background: color-mix(in srgb, var(--ca-surface) 85%, #000 15%);
    color: color-mix(in srgb, var(--ca-muted) 70%, #000 30%);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell-date){
    font-weight: 800;
    font-size: 13px;
    color: var(--ca-muted);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell-items){
    display: grid;
    gap: 8px;
    align-content: start;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-chip--cal){
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 78%, #000 22%);
    background: color-mix(in srgb, var(--ca-surface) 92%, var(--ca-primary) 8%);
    color: var(--ca-text);
    font-weight: 680;
    font-size: 12.5px;
    text-decoration: none;
    box-shadow: var(--ca-shadow-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-chip--cal:hover){
    transform: translateY(-1px);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-status-pill){
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 75%, #000 25%);
    background: color-mix(in srgb, var(--ca-primary) 12%, var(--ca-surface));
    font-size: 11px;
    font-weight: 750;
    color: var(--ca-text);
    flex: 0 0 auto;
  }
}

@layer ca.layout {
  @media (max-width: 980px){
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-grid, .ca-weekdays){
      gap: 8px;
    }
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell){
      min-height: 104px;
      padding: 9px;
      border-radius: 16px;
    }
  }

  @media (max-width: 560px){
    :where(.casting-agenda-app, .ca-theme-shell) :where(#calendarHeader.ca-calhead){
      grid-template-columns: 46px 1fr 46px;
      padding: 12px 12px;
      border-radius: 16px;
    }
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-calbtn){
      width: 46px;
      height: 46px;
      border-radius: 16px;
    }
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-weekdays > div){
      font-size: 11px;
      padding: 6px 0;
    }
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-cell){
      min-height: 92px;
      padding: 8px;
    }
    :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-chip--cal){
      padding: 8px 9px;
      border-radius: 12px;
      font-size: 12px;
    }
  }
}

@layer ca.components {


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li){
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a){
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border: 1px solid var(--ca-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
    box-shadow: var(--ca-shadow-soft);
    text-decoration: none;
    color: var(--ca-text);
    font-weight: 650;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.left, .main, .info, .meta-left){
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(strong, b, .title, .name){
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.ca-status-pill, .status, .state, .label){
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 75%, #000 25%);
    background: color-mix(in srgb, var(--ca-primary) 12%, var(--ca-surface));
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin-right: 2px;
    flex: 0 0 auto;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.date, .ca-date, time, .right, .meta-right, .count){
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--ca-muted);
    font-weight: 750;
    font-size: 13px;
    white-space: nowrap;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) br{
    display: none;
  }
  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(p, div, small){
    margin: 0;
    display: inline;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.count, .ca-count, .badge, .pill){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ca-primary) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--ca-primary) 22%, var(--ca-border));
    color: var(--ca-text);
    font-size: 12px;
    font-weight: 800;
    margin-left: auto;
  }
}

@layer ca.components {
  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-agency-row){
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-statuses-list .ca-status-row {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ca-border);
    background: var(--ca-surface);
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-statuses-list .ca-status-row__main {
    width: 100%;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-agency-row) :where(.ca-inline-toggle){
    justify-self: end;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-inline-toggle .ca-checkbox-ui){
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 70%, #000 30%);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-inline-toggle input.ca-checkbox:checked + .ca-checkbox-ui){
    background: var(--ca-primary);
    border-color: color-mix(in srgb, var(--ca-primary) 65%, #000 35%);
  }

  :where(.casting-agenda-app, .ca-theme-shell) :where(.ca-inline-toggle input.ca-checkbox:focus-visible + .ca-checkbox-ui){
    outline: 3px solid color-mix(in srgb, var(--ca-primary) 35%, transparent);
    outline-offset: 3px;
  }
}

@layer ca.theme {
  :where(.site-footer, footer) :where(.widget, .widget-area, .footer-widgets, .footer-inner) :where(ul){
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  :where(.site-footer, footer) :where(.widget, .widget-area, .footer-widgets, .footer-inner) :where(ul li){
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 70%, #000 30%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
  }

  :where(.site-footer, footer) :where(.widget, .widget-area, .footer-widgets, .footer-inner) :where(ul li) :where(a){
    color: inherit;
    text-decoration: none;
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(.site-footer, footer) :where(.widget, .widget-area, .footer-widgets, .footer-inner) :where(ul li) :where(.count, .badge, .ca-badge, .number, time, .date){
    margin-left: auto;
    white-space: nowrap;
    font-weight: 800;
    color: var(--ca-muted);
  }
}

@layer ca.components {


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(h1,h2,h3,.title,.heading){
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -0.015em;
    margin: 0 0 10px 0;
    color: var(--ca-text);
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a){
    padding: 9px 10px;
    border-radius: 12px;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a){
    white-space: nowrap;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.left, .main, .info, .meta-left, strong, b, .title, .name){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn) :where(ul li > a) :where(.date, .ca-date, time, .right, .meta-right){
    font-size: 12.5px;
  }


  :where(.casting-agenda-app, .ca-theme-shell) :where(#caSidebar, #caDoneColumn){
    gap: 10px;
  }
}

@layer ca.theme {


  html, body{
    height: 100%;
  }
  body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  :where(.site, #page, .wp-site-blocks){
    flex: 1 0 auto;
  }
  :where(.site-footer, footer){
    margin-top: auto;
  }


  :where(.site-footer, footer) :where(.footer-widgets, .footer-inner, .widget-area, .widgets, .wp-block-columns){
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  @media (max-width: 860px){
    :where(.site-footer, footer) :where(.footer-widgets, .footer-inner, .widget-area, .widgets, .wp-block-columns){
      grid-template-columns: 1fr;
      gap: 14px;
    }
  }


  :where(.site-footer, footer) :where(ul){
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  :where(.site-footer, footer) :where(ul li){
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 72%, #000 28%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
  }


  :where(.site-footer, footer) :where(ul li) :where(a, span:first-child, strong, b){
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    text-decoration: none;
    color: inherit;
  }


  :where(.site-footer, footer) :where(ul li) :where(.count, .badge, .number, time, .date, span:last-child){
    margin-left: auto;
    white-space: nowrap;
    font-weight: 850;
    color: var(--ca-muted);
  }


  :where(.site-footer, footer) :where(.widget-title, h2, h3){
    font-size: 14px;
    font-weight: 850;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
  }
}

@layer ca.components {


  /* Agency rows: hide raw checkbox, use the same ca-checkbox-ui toggle as statuses */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-agency-row input.ca-checkbox[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
}

@layer ca.theme {

  :where(.site-footer, footer) .ca-footblocks,
  :where(.site-footer, footer) .ca-footer-inner{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    align-items: start;
  }

  :where(.site-footer, footer) .ca-footblock{
    display: block;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock,
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock *{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(a.ca-chip){
    max-width: 100%;
    white-space: normal;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-row{
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-row > *{
    min-width: 0;
  }


  @media (max-width: 860px){
    :where(.site-footer, footer) .ca-footblocks,
    :where(.site-footer, footer) .ca-footer-inner{
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}

@layer ca.theme {


  :where(.site-footer, footer) .ca-footblock :where(.ca-footitems, .ca-total-list, .ca-totals, .totals, .content){
    display: grid;
    gap: 10px;
  }


  :where(.site-footer, footer) .ca-footblock :where(h1,h2,h3,h4,.widget-title){
    margin: 0 0 10px 0;
  }


  :where(.site-footer, footer) .ca-footblock :where(ul,ol){
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }
  :where(.site-footer, footer) .ca-footblock :where(ul,ol) > li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 72%, #000 28%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
  }


  :where(.site-footer, footer) .ca-footblock :where(.ca-footitems, .ca-total-list, .ca-totals, .totals, .content) > :where(p,div){
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 72%, #000 28%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
  }


  :where(.site-footer, footer) .ca-footblock :where(ul,ol) > li :where(a, span:first-child, strong, b),
  :where(.site-footer, footer) .ca-footblock :where(.ca-footitems, .ca-total-list, .ca-totals, .totals, .content) > :where(p,div) :where(a, span:first-child, strong, b){
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    text-decoration: none;
    color: inherit;
  }


  :where(.site-footer, footer) .ca-footblock :where(ul,ol) > li :where(.count, .badge, .number, time, .date, span:last-child),
  :where(.site-footer, footer) .ca-footblock :where(.ca-footitems, .ca-total-list, .ca-totals, .totals, .content) > :where(p,div) :where(.count, .badge, .number, time, .date, span:last-child){
    margin-left: auto;
    white-space: nowrap;
    font-weight: 850;
    color: var(--ca-muted);
  }


  :where(.site-footer, footer) .ca-footblock :where(ul,ol) > li,
  :where(.site-footer, footer) .ca-footblock :where(.ca-footitems, .ca-total-list, .ca-totals, .totals, .content) > :where(p,div){
    column-gap: 12px;
  }
}

@layer ca.components {

  :where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer{
    width: 100%;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  @media (max-width: 860px){
    :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
      grid-template-columns: 1fr;
      gap: 14px;
    }
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock{
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 18px;
    padding: 14px 14px;
    box-shadow: var(--ca-shadow-soft);
    min-width: 0;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-foothead{
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 10px 0;
    color: var(--ca-text);
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(ul.ca-list){
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(ul.ca-list > li){
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ca-border) 72%, #000 28%);
    background: color-mix(in srgb, var(--ca-surface) 92%, #000 8%);
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(ul.ca-list > li) > :where(span, a):first-child{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    color: inherit;
    text-decoration: none;
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(ul.ca-list > li) > :where(strong, .ca-num, time):last-child{
    margin-left: auto;
    white-space: nowrap;
    font-weight: 900;
    color: var(--ca-muted);
  }


  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock .ca-footer-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock .ca-footer-row > span:first-child{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock .ca-footer-row .ca-num{
    margin-left: auto;
    white-space: nowrap;
    font-weight: 900;
    color: var(--ca-muted);
  }
}

@layer ca.layout {
  @media (max-width: 980px){
    :where(.casting-agenda-app, .ca-theme-shell) #caMain{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }


    :where(.casting-agenda-app, .ca-theme-shell) :where(#calendarWrapper){
      order: 1;
    }


    :where(.casting-agenda-app, .ca-theme-shell) :where(footer.ca-footer){
      order: 2;
    }
  }
}

@layer ca.layout {

  :where(body) .ca-layout.page-layout{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    grid-template-areas:
      "sidebar main done"
      "footer  footer footer";
    gap: 22px;
    align-items: start;
    width: 100%;
  }

  :where(body) #caSidebar{ grid-area: sidebar; }
  :where(body) #caMain{ grid-area: main; }
  :where(body) #caDoneColumn{ grid-area: done; }
  :where(body) footer.ca-footer{ grid-area: footer; }

  :where(body) footer.ca-footer{
    width: 100%;
  }

  @media (max-width: 980px){
    :where(body) .ca-layout.page-layout{
      grid-template-columns: 1fr;
      grid-template-areas:
        "main"
        "footer"
        "sidebar"
        "done";
    }
  }
}

@layer ca.components {

  :where(body) footer.ca-footer.ca-footer--full .ca-footer-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  @media (max-width: 980px){
    :where(body) footer.ca-footer.ca-footer--full .ca-footer-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px){
    :where(body) footer.ca-footer.ca-footer--full .ca-footer-grid{
      grid-template-columns: 1fr;
    }
  }

  :where(body) .ca-footblock{
    background: var(--ca-panel);
    border: 1px solid var(--ca-border);
    border-radius: 18px;
    padding: 14px 14px 12px;
    box-shadow: var(--ca-shadow);
    min-width: 0;
  }

  :where(body) .ca-foothead{
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ca-muted);
    margin: 2px 0 10px;
  }


  :where(body) .ca-footblock .ca-list,
  :where(body) .ca-footblock ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :where(body) .ca-footblock .ca-list li{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--ca-border-soft);
  }
  :where(body) .ca-footblock .ca-list li:first-child{
    border-top: 0;
  }


  :where(body) .ca-footer-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--ca-border-soft);
  }
  :where(body) .ca-footblock .ca-footer-row:first-child{
    border-top: 0;
  }

  :where(body) .ca-footblock .ca-footer-row > span:first-child,
  :where(body) .ca-footblock .ca-list li > span:first-child{
    color: var(--ca-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  :where(body) .ca-footblock .ca-list li > strong,
  :where(body) .ca-footblock .ca-footer-row .ca-num,
  :where(body) .ca-footblock .ca-footer-row > span:last-child{
    color: var(--ca-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }


  :where(body) .ca-footblock .ca-list li{
    flex-wrap: nowrap;
  }
  :where(body) .ca-footblock .ca-list li .ca-chip{
    flex: 1 1 auto;
    min-width: 0;
  }
  :where(body) .ca-footblock .ca-list li .ca-muted{
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
}

.ca-header{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ca-nav-wrap{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
    padding-left: 0;
    padding-right: 0;
}

.ca-header .ca-content,
.ca-header .container{
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.ca-modal{
  display:none !important;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
}
.ca-modal.is-open{ display:flex !important; }
.ca-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.ca-modal__panel{
  position:relative;
  width:min(520px, calc(100% - 32px));
  background:var(--ca-bg, #fff);
  border-radius:16px;
  padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.ca-modal__actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-btn,
:where(.casting-agenda-app, .ca-theme-shell) button.ca-btn{
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-2));
  border-color: transparent;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:hover{
  filter: brightness(1.03);
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-footer--full{
  background: linear-gradient(180deg, rgba(110,46,139,0.06), rgba(165,84,205,0.04));
  border-top: 1px solid var(--ca-border);
}

:where(.casting-agenda-app, .ca-theme-shell) #caSidebar{
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

:where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

:where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid{
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

:where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid,
:where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid *{
  min-width: 0;
}

:where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid a.ca-chip{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px){
  :where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 700px){
  :where(.casting-agenda-app, .ca-theme-shell) footer.ca-footer.ca-footer--full .ca-footer-grid{
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
  }
}

:where(.casting-agenda-app, .ca-theme-shell) :where(#main, #main-content, .site-content, .content-area, .content, .entry-content, .wrap, .container, .container-fluid){
  max-width: none !important;
  width: 100% !important;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-container{

  width: min(2400px, 96vw);
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 2vw, 40px);
  padding-right: clamp(16px, 2vw, 40px);
  box-sizing: border-box;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-layout{
  width: 100%;
  max-width: none !important;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-main,
:where(.casting-agenda-app, .ca-theme-shell) #caMain{
  width: 100%;
  max-width: none !important;
  min-width: 0;
}

:where(.casting-agenda-app, .ca-theme-shell) :where(.ca-content, .ca-calendarwrap, .ca-calendar, .ca-grid, .ca-form, form){
  max-width: none !important;
}

@media (min-width: 1800px){
  :where(.casting-agenda-app, .ca-theme-shell) .ca-container{
    width: min(2800px, 98vw);
  }
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-container{
  width: 96vw;
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-auth-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-auth input,
:where(.casting-agenda-app, .ca-theme-shell) .ca-auth button,
:where(.casting-agenda-app, .ca-theme-shell) .ca-auth select{
  font-size: 16px;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-sidebar,
:where(.casting-agenda-app, .ca-theme-shell) #caSidebar{
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-layout.page-layout{
  grid-template-columns: clamp(280px, 22vw, 380px) minmax(0, 1fr);
  width: 100%;
}
:where(.casting-agenda-app, .ca-theme-shell) #caMain,
:where(.casting-agenda-app, .ca-theme-shell) .ca-main,
:where(.casting-agenda-app, .ca-theme-shell) #main-content{
  min-width: 0;
  width: 100%;
  max-width: none !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid > *{
  min-width: 0;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid .ca-chip,
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid a{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1100px){
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px){
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid{
    grid-template-columns: 1fr;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-layout.page-layout{
    grid-template-columns: 1fr;
  }
}

.ca-cell--today{box-shadow:inset 0 0 0 2px var(--ca-today);}
.ca-layout--overview{display:block;}
.ca-overview-wrap{width:100%;}
.ca-done-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ca-paid-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;}
:where(.ca-theme-shell, .casting-agenda-app) .ca-paid-field{margin-top:4px;}
:where(.ca-theme-shell, .casting-agenda-app) .ca-paid-field .ca-checkbox-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;color:var(--ca-text);}
:where(.ca-theme-shell, .casting-agenda-app) .ca-paid-field .ca-checkbox-label input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--ca-primary);}
@media (max-width:900px){.ca-layout--agenda{display:grid;grid-template-columns:1fr;}#caMain{order:1;}#caSidebar,.ca-options{order:2;}}

:where(.casting-agenda-app, .ca-theme-shell) .ca-chip.ca-chip--full{
  width: 100%;
  justify-content: space-between;
  gap: 14px;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-chip .ca-chip-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-chip .ca-chip-date{
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  color: var(--ca-muted);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

:where(.casting-agenda-app, .ca-theme-shell) #caSidebar :where(ul.ca-list > li){
  display: block;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-footblock :where(ul.ca-list > li){
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-count-meta,
:where(.casting-agenda-app, .ca-theme-shell) .ca-footstats .ca-count-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--ca-muted);
  font-size: 13px;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-count-label{
  font-weight: 700;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-count-value{
  color: var(--ca-text);
  font-weight: 800;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-footstats{
  margin: 0 0 12px 0;
}

:where(.casting-agenda-app,.ca-theme-shell) .ca-chip,
:where(.casting-agenda-app,.ca-theme-shell) .ca-chip.ca-chip--full{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  max-width:100%;
  gap:10px;
  overflow:hidden;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-chip-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-chip-date{
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
:where(.casting-agenda-app,.ca-theme-shell) #caSidebar .ca-chip-title{
  min-width:0;
}
:where(.casting-agenda-app,.ca-theme-shell) #caSidebar ul.ca-list>li,
:where(.casting-agenda-app,.ca-theme-shell) .ca-footblock ul.ca-list>li{
  min-width:0;
  overflow:hidden;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-footer-grid--top{
  margin-bottom:18px;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-footsub{
  margin:12px 0 8px;
  font-size:13px;
  font-weight:800;
  color:var(--ca-muted);
  text-transform:uppercase;
  letter-spacing:.03em;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-next-item{
  padding:10px 12px;
  border:1px solid var(--ca-border);
  border-radius:12px;
  background:var(--ca-surface);
  margin-bottom:10px;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-count-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-count-label{font-weight:700;color:var(--ca-muted);}
:where(.casting-agenda-app,.ca-theme-shell) .ca-count-value{font-weight:800;}
:where(.casting-agenda-app,.ca-theme-shell) .ca-backtop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:46px;
  height:46px;
  border-radius:999px;
  border:0;
  background:var(--ca-primary);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  cursor:pointer;
}
@media (max-width:900px){
  :where(.casting-agenda-app,.ca-theme-shell) .ca-footer-grid{
    grid-template-columns:1fr;
  }
}

:where(.casting-agenda-app,.ca-theme-shell) .ca-production .ca-footer-row:first-child{
  border-top:none;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-production .ca-footer-row{
  padding-top:12px;
  padding-bottom:12px;
}

/* Ensure amounts/counts never wrap or get squeezed out by long names */
:where(.casting-agenda-app,.ca-theme-shell) .ca-footblock .ca-footer-row{
  flex-wrap:nowrap;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-footblock .ca-footer-row > span:first-child{
  flex:1 1 0%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:where(.casting-agenda-app,.ca-theme-shell) .ca-footblock .ca-footer-row .ca-num{
  flex:0 0 auto;
  white-space:nowrap;
}

.ca-btn--ghost{background:var(--ca-surface, #fff);border:1px solid var(--ca-border, #d0d5dd);color:var(--ca-text, #111827);padding:8px 12px;border-radius:12px;margin-left:8px;box-shadow:none}.ca-btn--ghost:hover{background:var(--ca-bg, #f8fafc)}
.ca-btn--danger{background:var(--ca-danger) !important;border-color:var(--ca-danger) !important;color:#fff !important;box-shadow:none}.ca-btn--danger:hover{background:var(--ca-danger-hover) !important}
.ca-alert--warning{background:var(--ca-alert-warning-bg);border:1px solid var(--ca-alert-warning-border);color:var(--ca-alert-warning-text);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.875rem;line-height:1.5}
.ca-delete-account{margin-top:8px}
.ca-delete-account h2{font-size:1rem;font-weight:700;margin:0 0 6px;color:var(--ca-danger)}
.ca-delete-account > .ca-muted{font-size:.875rem;margin:0 0 16px;line-height:1.5}
.ca-delete-account .ca-modal__panel h3{color:var(--ca-danger);margin:0 0 8px;font-size:1.1rem}
.ca-delete-account .ca-modal__panel p{font-size:.875rem;color:var(--ca-text);line-height:1.6;margin:0 0 16px}

.ca-alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14px;background:var(--ca-alert-error-bg);border:1px solid var(--ca-alert-error-border);color:var(--ca-alert-error-text)}
.ca-alert--ok{background:var(--ca-alert-ok-bg);border:1px solid var(--ca-alert-ok-border);color:var(--ca-alert-ok-text)}
.ca-alert--prominent{background:var(--ca-alert-prominent-bg);border:1px solid var(--ca-alert-prominent-border);color:var(--ca-alert-prominent-text);border-radius:12px}
.ca-alert--error{background:var(--ca-alert-error-bg);border:1px solid var(--ca-alert-error-border);color:var(--ca-alert-error-text)}.ca-alert-error{background:var(--ca-alert-error-bg);border:1px solid var(--ca-alert-error-border);color:var(--ca-alert-error-text)}

.ca-readonly-input{background:var(--ca-readonly-bg);color:var(--ca-readonly-text);border:1px solid var(--ca-readonly-border)}

.ca-alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14px}.ca-alert-error{background:var(--ca-alert-error-bg);border:1px solid var(--ca-alert-error-border);color:var(--ca-alert-error-text)}.ca-alert-success{background:var(--ca-alert-ok-bg);border:1px solid var(--ca-alert-ok-border);color:var(--ca-alert-ok-text)}

.ca-dashboard-card .ca-stat-pill,
.ca-dashboard-card .ca-stat-row,
.ca-dashboard-card .ca-metric-row {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
}

.ca-dashboard-card .ca-stat-row,
.ca-dashboard-card .ca-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--ca-border);
}

.ca-dashboard-card .ca-stat-row:last-child,
.ca-dashboard-card .ca-metric-row:last-child {
    border-bottom: none;
}

.ca-dashboard-card .ca-stat-row span:last-child,
.ca-dashboard-card .ca-metric-row span:last-child {
    font-weight: 600;
}

.ca-dashboard-card .ca-stat-pill,
.ca-dashboard-card .ca-overview-pill,
.ca-dashboard-card .ca-overview-row,
.ca-dashboard-card .ca-metric-pill,
.ca-dashboard-card .ca-metric-row,
.ca-dashboard-card .ca-card-list > *,
.ca-dashboard-card .ca-list > * {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}

.ca-dashboard-card .ca-card-list > *,
.ca-dashboard-card .ca-list > *,
.ca-dashboard-card .ca-stat-row,
.ca-dashboard-card .ca-metric-row,
.ca-dashboard-card .ca-overview-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid var(--ca-border) !important;
}

.ca-dashboard-card .ca-card-list > *:last-child,
.ca-dashboard-card .ca-list > *:last-child,
.ca-dashboard-card .ca-stat-row:last-child,
.ca-dashboard-card .ca-metric-row:last-child,
.ca-dashboard-card .ca-overview-row:last-child {
  border-bottom: 0 !important;
}

.ca-dashboard-card .ca-card-list > *::before,
.ca-dashboard-card .ca-list > *::before,
.ca-dashboard-card .ca-stat-row::before,
.ca-dashboard-card .ca-metric-row::before,
.ca-dashboard-card .ca-overview-row::before {
  display: none !important;
  content: none !important;
}

.ca-dashboard-card .ca-card-list > * > :last-child,
.ca-dashboard-card .ca-list > * > :last-child,
.ca-dashboard-card .ca-stat-row > :last-child,
.ca-dashboard-card .ca-metric-row > :last-child,
.ca-dashboard-card .ca-overview-row > :last-child {
  font-weight: 700 !important;
  margin-left: 16px !important;
}

.ca-dashboard-card .ca-card-list,
.ca-dashboard-card .ca-list {
  gap: 0 !important;
}

/* ── Referral ─────────────────────────────────────────────── */
/* Account tabs */
.ca-account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ca-border);
  margin: 16px 0 24px;
  padding: 8px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ca-account-tab {
  padding: 12px 20px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ca-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ca-account-tab:hover { color: var(--ca-text); }
.ca-account-tab.active {
  color: var(--ca-primary);
  border-bottom-color: var(--ca-primary);
}
.ca-account-panel { animation: ca-fade-in .2s ease; }
@keyframes ca-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Theme toggle */
.ca-theme-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--ca-surface, #f1f3f5);
  border: 1px solid var(--ca-border, #e5e7eb);
  border-radius: 10px;
  padding: 3px;
  overflow: hidden;
}
.ca-theme-btn {
  padding: 8px 16px;
  font-size: .8125rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ca-muted, #9ca3af);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ca-theme-btn:hover {
  color: var(--ca-text, #111827);
}
.ca-theme-btn.active {
  background: var(--ca-bg, #fff);
  color: var(--ca-text, #111827);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Push notifications */
.ca-push-section {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}
.ca-push-section h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.ca-push-section > .ca-muted { font-size: .9rem; margin: 0 0 10px; line-height: 1.5; }
.ca-push-types {
  list-style: none;
  padding: 0;
  margin: 4px 0 14px;
  font-size: .9rem;
  line-height: 1.7;
}
.ca-push-types li { padding: 2px 0; }
.ca-push-tiny {
  font-size: .8rem;
  margin: 0 0 16px !important;
  opacity: 0.8;
}
.ca-push-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ca-push-status {
  font-size: .9rem;
  color: var(--ca-muted);
}
.ca-push-status--ok      { color: #059669; font-weight: 600; }
.ca-push-status--error   { color: #dc2626; font-weight: 600; }
.ca-push-status--loading { color: var(--ca-muted); font-style: italic; }
.ca-push-status--muted   { color: var(--ca-muted); }
.ca-push-unsupported {
  font-size: .85rem;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--ca-card);
  border-left: 3px solid var(--ca-muted);
  border-radius: 4px;
}

/* iCal */
.ca-ical h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.ca-ical > .ca-muted { font-size: .9rem; margin: 0 0 16px; line-height: 1.5; }
.ca-ical-instructions { margin-top: 20px; }
.ca-ical-instructions h4 { font-size: .9rem; font-weight: 700; margin: 0 0 10px; color: var(--ca-text); }
.ca-ical-detail {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.ca-ical-detail summary {
  padding: 12px 16px;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  color: var(--ca-text);
  list-style: none;
}
.ca-ical-detail summary::-webkit-details-marker { display: none; }
.ca-ical-detail summary::before { content: '▸ '; color: var(--ca-muted); }
.ca-ical-detail[open] summary::before { content: '▾ '; }
.ca-ical-detail ol {
  padding: 0 16px 14px 36px;
  margin: 0;
  font-size: .8125rem;
  color: var(--ca-text);
  line-height: 1.7;
}
.ca-ical-note { font-size: .8rem !important; margin-top: 16px !important; }

.ca-referral { margin-top: 8px; }
.ca-referral h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.ca-referral > .ca-muted { font-size: .9rem; margin: 0 0 16px; line-height: 1.5; }

/* Help text under form fields */
.ca-help {
  font-size: .85rem;
  color: var(--ca-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}

.ca-referral-link-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ca-referral-link {
  flex: 1;
  font-size: .8125rem;
  padding: 10px 14px;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  background: var(--ca-bg);
  color: var(--ca-text);
  font-family: inherit;
  cursor: text;
}
.ca-referral-copy {
  white-space: nowrap;
  min-width: 70px;
}
.ca-referral-count {
  margin: 14px 0 0;
  font-size: .875rem;
  font-weight: 600;
}
.ca-referral-share {
  margin-top: 12px;
  width: 100%;
}

.ca-import-export {
  margin-top: 40px;
}

.ca-import-export > h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ca-muted, #6b7280);
  margin: 0 0 4px;
}

.ca-import-export > p.ca-muted {
  font-size: .875rem;
  margin: 0 0 20px;
}

.ca-ie-section {
  background: var(--ca-surface, #fff);
  border: 1px solid var(--ca-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 12px;
}

.ca-ie-section h3 {
  font-size: .9375rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ca-text, #111827);
}

.ca-ie-section > p.ca-muted {
  font-size: .8125rem;
  margin: 0 0 16px;
  color: var(--ca-muted, #6b7280);
}

.ca-ie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ca-ie-buttons .ca-btn--ghost {
  font-size: .8125rem;
  padding: 7px 14px;
  border-radius: 8px;
}

.ca-form--import {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}

.ca-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ca-file-label span {
  font-size: .8125rem;
  color: var(--ca-muted, #6b7280);
  white-space: nowrap;
}

.ca-file-label input[type="file"] {
  font-size: .8125rem;
  flex: 1;
  min-width: 0;
}

.ca-form--import .ca-btn {
  align-self: flex-start;
  font-size: .8125rem;
  padding: 7px 16px;
  border-radius: 8px;
}

.ca-ie-section .ca-alert {
  font-size: .8125rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.ca-import-export .ca-divider {
  display: none;
}

.ca-location-field { position: relative; }
.ca-location-wrap { position: relative; }
.ca-location-input { width: 100%; }

.ca-location-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  list-style: none;
  margin: 0; padding: 4px 0;
  z-index: 999;
  max-height: 240px;
  overflow-y: auto;
}
.ca-location-suggestions.is-open { display: block; }

.ca-location-suggestion {
  padding: 10px 14px;
  font-size: .875rem;
  cursor: pointer;
  color: var(--ca-text);
  border-radius: 6px;
  margin: 2px 4px;
  transition: background .1s;
}
.ca-location-suggestion:hover,
.ca-location-suggestion.is-active {
  background: color-mix(in srgb, var(--ca-primary) 10%, transparent);
  color: var(--ca-primary);
}

.ca-location-map {
  display: none;
  width: 100%;
  height: 240px;
  border-radius: var(--ca-radius);
  border: 1px solid var(--ca-border);
  margin-top: 12px;
  overflow: hidden;
  box-shadow: var(--ca-shadow);
}
.ca-location-map.is-visible { display: block; }

/* Override Leaflet container background to match app surface */
.ca-location-map .leaflet-container,
.ca-full-map .leaflet-container {
  background: var(--ca-surface);
  font-family: inherit;
}

/* Attribution strip */
.ca-location-map .leaflet-control-attribution,
.ca-full-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--ca-surface) 80%, transparent);
  color: var(--ca-muted);
  font-size: 10px;
  border-radius: 8px 0 0 0;
  padding: 2px 6px;
  backdrop-filter: blur(4px);
}
.ca-location-map .leaflet-control-attribution a,
.ca-full-map .leaflet-control-attribution a {
  color: var(--ca-primary);
}

/* Zoom controls */
.ca-location-map .leaflet-control-zoom,
.ca-full-map .leaflet-control-zoom {
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--ca-shadow-soft) !important;
}
.ca-location-map .leaflet-control-zoom a,
.ca-full-map .leaflet-control-zoom a {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border-bottom: 1px solid var(--ca-border) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  transition: background .12s;
}
.ca-location-map .leaflet-control-zoom a:hover,
.ca-full-map .leaflet-control-zoom a:hover {
  background: var(--ca-bg) !important;
  color: var(--ca-primary) !important;
}
.ca-location-map .leaflet-control-zoom a:last-child,
.ca-full-map .leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

/* Popup */
.ca-location-map .leaflet-popup-content-wrapper,
.ca-full-map .leaflet-popup-content-wrapper {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm) !important;
  box-shadow: var(--ca-shadow) !important;
  padding: 0;
}
.ca-location-map .leaflet-popup-content,
.ca-full-map .leaflet-popup-content {
  margin: 0;
  padding: 12px 14px;
}
.ca-location-map .leaflet-popup-tip-container,
.ca-full-map .leaflet-popup-tip-container {
  display: none;
}
.ca-location-map .leaflet-popup-close-button,
.ca-full-map .leaflet-popup-close-button {
  color: var(--ca-muted) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}
.ca-location-map .leaflet-popup-close-button:hover,
.ca-full-map .leaflet-popup-close-button:hover {
  color: var(--ca-text) !important;
}

.ca-full-map {
  width: 100%;
  height: 520px;
  border-radius: var(--ca-radius);
  border: 1px solid var(--ca-border);
  margin-top: 16px;
  overflow: hidden;
  box-shadow: var(--ca-shadow);
}

/* Custom pin marker */
.ca-map-marker {
  background: transparent !important;
  border: none !important;
}
.ca-map-pin {
  width: 16px;
  height: 16px;
  background: var(--ca-primary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(110,46,139,.5);
  transition: transform .15s;
}
.ca-map-marker:hover .ca-map-pin {
  transform: rotate(-45deg) scale(1.2);
}

/* Popup content — shared between map popup and calendar tooltip */
.ca-map-popup {
  font-size: .8125rem;
  line-height: 1.55;
  min-width: 180px;
  max-width: 300px;
  color: var(--ca-text, #111827);
}
.ca-popup-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.ca-popup-header strong {
  font-weight: 700;
  color: var(--ca-text, #111827);
  font-size: .875rem;
  line-height: 1.3;
  flex: 1;
}
.ca-popup-status {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}
.ca-popup-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .8rem;
  color: var(--ca-text, #111827);
  padding: 2px 0;
  line-height: 1.5;
}
.ca-popup-icon {
  flex-shrink: 0;
  font-size: .75rem;
  width: 18px;
  text-align: center;
}
.ca-map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ca-btn-grad-2), var(--ca-primary));
  transition: opacity .12s;
  margin-top: 10px;
}
.ca-map-link:hover {
  opacity: .85;
  color: #fff;
}

/* Calendar tooltip popover */
.ca-cal-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: auto;
  animation: ca-tooltip-in .15s ease;
}
@keyframes ca-tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ca-cal-tooltip__inner {
  background: var(--ca-surface, #fff);
  border: 1px solid var(--ca-border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
  min-width: 200px;
  max-width: 320px;
  position: relative;
  color: var(--ca-text, #111827);
  font-size: .8125rem;
  line-height: 1.55;
}
.ca-cal-tooltip__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--ca-muted, #9ca3af);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 6px;
}
.ca-cal-tooltip__close:hover {
  background: var(--ca-border, #eee);
  color: var(--ca-text, #111827);
}
.ca-cal-tooltip .ca-popup-header {
  padding-right: 24px;
}
.ca-cal-tooltip .ca-map-link {
  display: inline-flex;
}
@media (max-width: 480px) {
  .ca-cal-tooltip {
    left: 8px !important;
    right: 8px;
    width: auto !important;
  }
  .ca-cal-tooltip__inner {
    max-width: 100%;
  }
}

.ca-documents {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ca-border);
}
.ca-documents h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.ca-documents > .ca-muted { font-size: .875rem; margin: 0 0 18px; }

.ca-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ca-doc-slot {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 16px 18px;
}

.ca-doc-label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ca-muted);
  margin-bottom: 10px;
}

.ca-doc-existing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-doc-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--ca-primary);
  font-weight: 600;
  word-break: break-all;
  text-decoration: none;
}
.ca-doc-name:hover { text-decoration: underline; }

.ca-doc-size {
  font-size: .75rem;
  color: var(--ca-muted);
  font-weight: 400;
  white-space: nowrap;
}

.ca-doc-replace { font-size: .8125rem; color: var(--ca-muted); cursor: pointer; margin-top: 4px; }
.ca-doc-replace input[type="file"] { display: block; margin-top: 4px; font-size: .8125rem; }

.ca-doc-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--ca-border);
  border-radius: 10px;
  padding: 24px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}
.ca-doc-upload:hover {
  border-color: var(--ca-primary);
  background: color-mix(in srgb, var(--ca-primary) 5%, transparent);
}
.ca-doc-upload input[type="file"] { display: none; }

.ca-doc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--ca-muted);
  pointer-events: none;
}
.ca-doc-placeholder svg { opacity: .5; }

.ca-doc-upload:has(input:valid) .ca-doc-placeholder,
.ca-doc-upload input[type="file"]:focus-visible ~ .ca-doc-placeholder {
  color: var(--ca-primary);
}

.ca-btn--sm { padding: 5px 10px; font-size: .8rem; border-radius: 6px; }

.ca-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--ca-muted);
  font-size: .9375rem;
}
.ca-empty-state .ca-btn{
  margin-top: 16px;
  margin-bottom: 8px;
}

/* Form submit buttons: breathing room */
:where(.casting-agenda-app, .ca-theme-shell) .ca-form > .ca-btn[type="submit"],
:where(.casting-agenda-app, .ca-theme-shell) .ca-form > button.ca-btn{
  margin-top: 18px;
  margin-bottom: 8px;
}


/* Table page layout */
.ca-table-page .ca-container--wide {
  max-width: 100%;
  padding: 0;
}
.ca-table-page .ca-layout {
  display: block;
}
/* ═══════════════════════════════════════════════════════════════════
   TABLE VIEW — ca-tbl-*
   ═══════════════════════════════════════════════════════════════════ */

/* Wrap */
.ca-table-wrap {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 0;
}


/* ── User bar (avatar + name in header) ──────────────────────────────────── */
.ca-shell-userbar {
  display: flex;
  align-items: center;
  padding: 6px 16px 2px;
  border-bottom: 1px solid var(--ca-border);
}
.ca-shell-userbar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ca-text);
}
.ca-shell-userbar__link:hover .ca-shell-username {
  text-decoration: underline;
}
.ca-shell-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--ca-primary);
}
.ca-shell-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ca-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ca-shell-username {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ca-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ── Profile card (account page) ─────────────────────────────────────────── */
/* ── Profile hero (account page) ─────────────────────────────────────────── */
.ca-profile-hero {
  position: relative;
  margin: -0px 0 28px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ca-primary) 0%, var(--ca-primary-2) 100%);
}
.ca-profile-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(0,0,0,0.15) 0%, transparent 40%);
  pointer-events: none;
}
.ca-profile-hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px 28px;
  gap: 14px;
  text-align: center;
}
.ca-profile-photo-wrap {
  position: relative;
  display: inline-block;
}
.ca-profile-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: block;
}
.ca-profile-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
}
.ca-profile-photo-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ca-surface, #fff);
  color: var(--ca-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
}
.ca-profile-photo-edit:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ca-profile-hero__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ca-profile-hero__email {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.ca-profile-hero__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ca-profile-hero__del {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ca-profile-hero__del:hover {
  background: rgba(255,255,255,0.25);
}
.ca-btn--sm {
  padding: 4px 10px;
  font-size: 0.8rem;
}


/* ── Toolbar ───────────────────────────────────────────────────────── */
.ca-tbl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px 12px;
  background: var(--ca-surface);
  border-bottom: 1px solid var(--ca-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.ca-tbl-filters {
  display: flex;
  gap: 4px;
}
.ca-tbl-filter-btn {
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 100px;
  border: 1.5px solid var(--ca-border);
  background: transparent;
  color: var(--ca-muted);
  cursor: pointer;
  transition: all .13s;
  font-family: inherit;
}
.ca-tbl-filter-btn:hover {
  border-color: var(--ca-primary);
  color: var(--ca-primary);
  background: rgba(110,46,139,.07);
}
.ca-tbl-filter-btn.active {
  background: var(--ca-primary);
  border-color: var(--ca-primary);
  color: #fff;
}
.ca-tbl-search-wrap { flex: 1; min-width: 160px; max-width: 320px; }
.ca-tbl-search {
  width: 100%;
  padding: 6px 11px 6px 30px;
  border-radius: var(--ca-radius-sm);
  border: 1.5px solid var(--ca-border);
  background: var(--ca-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;
  color: var(--ca-text);
  font-size: .875rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.ca-tbl-search:focus {
  border-color: var(--ca-primary);
  box-shadow: 0 0 0 3px rgba(110,46,139,.12);
}
.ca-tbl-count {
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Scroll container ─────────────────────────────────────────────── */
.ca-tbl-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* ── Grid table ───────────────────────────────────────────────────── */
.ca-tbl {
  display: grid;
  grid-template-columns: var(--ca-tbl-cols);
  grid-template-rows: auto;
  min-width: 900px;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ca-tbl-head,
.ca-tbl-body {
  display: contents;
}

/* Header cells */
.ca-tbl-th {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ca-muted);
  background: var(--ca-surface);
  border-bottom: 2px solid var(--ca-border);
  white-space: nowrap;
  position: sticky;
  top: 56px; /* toolbar height */
  z-index: 5;
  user-select: none;
}
.ca-tbl-th.sortable { cursor: pointer; }
.ca-tbl-th.sortable:hover { color: var(--ca-primary); }
.ca-tbl-arrow { font-size: .75rem; opacity: .35; transition: opacity .1s; }
.ca-tbl-th.sortable:hover .ca-tbl-arrow { opacity: .7; }
.ca-tbl-arrow--asc,
.ca-tbl-arrow--desc { opacity: 1; color: var(--ca-primary); }

/* Body rows — alternating zebra */
.ca-tbl-td {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  font-size: .84rem;
  color: var(--ca-text);
  border-bottom: 1px solid var(--ca-border);
  background: var(--ca-surface);
  min-height: 44px;
  word-break: break-word;
  transition: background .1s;
  position: relative;
}

/* Zebra stripes via row grouping — every pair of COLS cells forms a row */
.ca-tbl-td:nth-child(even of .ca-tbl-td) {
  /* CSS :nth-child with 'of' not yet widely supported — use JS class instead */
}

/* We add ca-tbl-row--odd via the row builder — target with sibling trick */
.ca-tbl-td--odd { background: var(--ca-bg); }

/* Hover highlight across entire row using CSS custom property trick */
.ca-tbl-td[data-row-id]:hover,
.ca-tbl-td[data-row-id]:focus-within {
  background: rgba(110,46,139,.04);
  z-index: 1;
}

/* Done row — slightly muted */
/* Applied via JS adding class to each cell */
.ca-tbl-td--done:not([data-col="_actions"]) {
  opacity: .65;
}

/* Editable cells */
.ca-tbl-td--editable { cursor: pointer; }
.ca-tbl-td--editable:hover::after {
  content: '✏';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  opacity: .35;
  pointer-events: none;
}
.ca-tbl-td--editing {
  padding: 4px 6px;
  background: rgba(110,46,139,.06) !important;
  z-index: 2;
}

/* Align variants */
.ca-tbl-td--right  { justify-content: flex-end;  text-align: right; }
.ca-tbl-td--center { justify-content: center; }

/* Save states */
.ca-tbl-saving { opacity: .5; pointer-events: none; }
.ca-tbl-saved::after {
  content: '✓';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  color: var(--ca-alert-ok-text, #16a34a);
  animation: ca-tbl-fade 1s forwards;
}
.ca-tbl-error {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.25) !important;
}
@keyframes ca-tbl-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Status pill in table */
.ca-tbl-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Empty state */
.ca-tbl-empty {
  padding: 52px 24px;
  text-align: center;
  color: var(--ca-muted);
  font-size: .9rem;
  background: var(--ca-surface);
  border-bottom: 1px solid var(--ca-border);
}

/* Inline inputs */
.ca-tbl-inp,
.ca-tbl-sel {
  width: 100%;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1.5px solid var(--ca-primary);
  background: var(--ca-surface);
  color: var(--ca-text);
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 3px rgba(110,46,139,.12);
}
.ca-tbl-inp--num { text-align: right; }
.ca-tbl-sel { cursor: pointer; }

/* Paid checkbox */
.ca-tbl-paid-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ca-primary);
}

/* Action buttons */
.ca-tbl-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important; height: 28px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: opacity .12s, background .12s !important;
  text-decoration: none !important;
  color: inherit !important;
  vertical-align: middle !important;
}
.ca-tbl-icon-btn:hover { background: color-mix(in srgb, var(--ca-primary) 8%, transparent) !important; }
.ca-tbl-del:hover { background: rgba(239,68,68,.12) !important; }
.ca-tbl-td--done .ca-tbl-icon-btn { opacity: 1 !important; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ca-tbl-toolbar { padding: 10px 14px; }
  .ca-tbl-search-wrap { min-width: 120px; max-width: 200px; }
  .ca-tbl-th { top: 50px; }
}
@media (max-width: 600px) {
  .ca-tbl-toolbar { gap: 8px; }
  .ca-tbl-count { display: none; }
}

/* Table location autocomplete */
.ca-tbl-loc-wrap { position: relative; width: 100%; }
.ca-tbl-loc-inp  { width: 100%; }
.ca-tbl-loc-sug  {
  display: none;
  position: absolute;
  top: calc(100% + 2px); left: 0;
  min-width: 280px; max-width: 420px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  list-style: none; padding: 4px 0; margin: 0;
  z-index: 999;
  max-height: 220px; overflow-y: auto;
}
.ca-tbl-loc-sug.is-open { display: block; }
.ca-tbl-loc-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ca-text);
  white-space: normal;
}
.ca-tbl-loc-item:hover { background: color-mix(in srgb, var(--ca-primary) 8%, transparent); }

/* Actions column header: suppress any theme-injected content */
.ca-tbl-th--actions { font-size: 0; line-height: 0; }
.ca-tbl-th--actions::before,
.ca-tbl-th--actions::after { display: none !important; content: none !important; }

/* ── Shell header & nav ─────────────────────────────────────────────────── */

/* Prevent horizontal scrollbar caused by theme padding/margin leaking */
.ca-theme-shell {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Neutralize any theme padding/margin on the body/article inside app shell */
.ca-theme-shell article,
.ca-theme-shell > .ca-content,
.ca-theme-shell > main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Page title above nav */
.ca-shell-center {
  text-align: center;
  padding: 18px 16px 4px;
}
.ca-shell-center .ca-page-title {
  font-size: 1.6rem;
  font-weight: 720;
  color: var(--ca-text);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Header bar */
.ca-shell-header {
  width: 100%;
  background: var(--ca-header-bg, var(--ca-bg));
  border-bottom: 1px solid var(--ca-header-border, var(--ca-border));
  position: static;
  z-index: 1;
}
.ca-shell-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Nav */
.ca-shell-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 4px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Nav links */
.ca-shell-nav a.caHeaderLink {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ca-text);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  line-height: 1.3;
  background: transparent;
}
.ca-shell-nav a.caHeaderLink:hover {
  background: color-mix(in srgb, var(--ca-primary) 10%, transparent);
  color: var(--ca-primary);
}
.ca-shell-nav a.caHeaderLink.caHeaderLink--active:not(.caHeaderLink--primary) {
  background: var(--ca-primary);
  color: #fff !important;
  font-weight: 700;
}
.ca-shell-nav a.caHeaderLink.caHeaderLink--active:not(.caHeaderLink--primary):hover {
  filter: brightness(1.08);
  color: #fff !important;
}

/* Primary "+" button */
.ca-shell-nav a.caHeaderLink.caHeaderLink--primary {
  background: var(--ca-primary);
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 20px;
}
.ca-shell-nav a.caHeaderLink.caHeaderLink--primary:hover {
  filter: brightness(1.08);
  color: #fff !important;
}

/* Mobile: tighter, smaller font */
@media (max-width: 600px) {
  .ca-shell-center { padding: 12px 12px 2px; }
  .ca-shell-center .ca-page-title { font-size: 1.3rem; }
  .ca-shell-nav { gap: 2px 3px; padding: 5px 6px; }
  .ca-shell-nav a.caHeaderLink { font-size: 0.77rem; padding: 4px 8px; }
  .ca-shell-nav a.caHeaderLink.caHeaderLink--primary { padding: 4px 10px; }
}

/* ── Mobile app nav in theme hamburger panel ────────────────────────────── */

/* On mobile: show shell-header but more compact */
@media (max-width: 768px) {
  .ca-shell-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 1100;
  }
  .ca-shell-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 3px;
    padding: 4px 6px;
  }
  .ca-shell-nav a.caHeaderLink {
    font-size: 0.72rem;
    padding: 4px 7px;
  }
}
/* Always show shell-header on desktop */
@media (min-width: 769px) {
  .ca-shell-header {
    display: block;
  }
}

/* App nav block inside the theme's .ca-nav-panel — only on mobile */
@media (min-width: 769px) {
  .ca-app-mobile-nav { display: none; }
}

.ca-app-mobile-nav {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 10px;
  padding-top: 10px;
}

.ca-app-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ca-mobile-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ca-text, #1a1a2e);
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}

.ca-nav-panel .ca-mobile-nav-link {
  color: var(--ca-text);
}

.ca-mobile-nav-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}

.ca-mobile-nav-link--primary {
  background: var(--ca-primary, #4C2D82);
  color: #fff !important;
  border-radius: 20px;
  padding: 10px 16px;
  margin-top: 4px;
}
.ca-mobile-nav-link--primary:hover {
  filter: brightness(1.1);
}

.ca-mobile-nav-link--active:not(.ca-mobile-nav-link--primary) {
  background: rgba(255,255,255,.14);
  color: #fff !important;
  font-weight: 700;
}

/* ── Mobile hamburger overlay: start below theme header + plugin nav ───── */
@media (max-width: 768px) {
  body.ca-app-page .ca-nav-wrap {
    /* --ca-header-h is set by JS to theme+plugin nav combined height */
    top: var(--ca-header-h, 130px) !important;
  }
}
/* ── Auth pages (login / register / reset-password) ─────────────────────── */
.ca-auth {
  display: flex;
  justify-content: center;
  padding: 40px 16px 60px;
}

/* Card */
.ca-auth .ca-form {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(110,46,139,.10);
  padding: 36px 32px;
}
@media (max-width: 480px) {
  .ca-auth .ca-form { padding: 28px 20px; border-radius: 12px; }
}

/* Title */
.ca-auth .ca-form h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: var(--ca-text);
}

/* Subtitle / muted */
.ca-auth .ca-muted {
  color: var(--ca-muted);
  font-size: .9rem;
  margin: 0 0 24px;
}

/* Labels stacked above inputs */
.ca-auth .ca-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ca-text);
}

/* Inputs */
.ca-auth .ca-form input[type="text"],
.ca-auth .ca-form input[type="email"],
.ca-auth .ca-form input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ca-border);
  border-radius: 10px;
  font-size: 1rem;
  color: var(--ca-text);
  background: var(--ca-surface);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.ca-auth .ca-form input:focus {
  outline: none;
  border-color: var(--ca-primary);
  box-shadow: 0 0 0 3px rgba(110,46,139,.12);
  background: #fff;
}

/* Submit button — full width */
.ca-auth .ca-form .ca-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font-size: 1rem;
  border-radius: 12px;
}

/* Links below form */
.ca-auth .ca-auth-links {
  margin-top: 20px;
  font-size: .875rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ca-auth .ca-auth-links a {
  color: var(--ca-primary);
  text-decoration: none;
}
.ca-auth .ca-auth-links a:hover { text-decoration: underline; }

/* Remove theme content padding on auth/app pages */
.ca-theme-shell .ca-main,
.ca-theme-shell .entry-content,
.ca-theme-shell .wp-block-group,
.ca-theme-shell .site-content,
.ca-theme-shell #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =================================================================
   DEFINITIEVE FIXES
   ================================================================= */

/* 1. CONTAINER */
:where(.casting-agenda-app, .ca-theme-shell) .ca-container,
.casting-agenda-app .ca-container,
.ca-theme-shell .ca-container {
  width: 100% !important;
  max-width: min(var(--ca-container-max, 1120px), 1120px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 2vw, 40px) !important;
  padding-right: clamp(16px, 2vw, 40px) !important;
  box-sizing: border-box !important;
}

/* 2. FORM-LAYOUT: geen sidebar */
.casting-agenda-app .ca-layout.page-layout.ca-layout--form,
.ca-theme-shell .ca-layout.page-layout.ca-layout--form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.casting-agenda-app .ca-layout.page-layout.ca-layout--form #caMain,
.ca-theme-shell .ca-layout.page-layout.ca-layout--form #caMain {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
.casting-agenda-app .ca-layout.page-layout.ca-layout--form #caSidebar,
.ca-theme-shell .ca-layout.page-layout.ca-layout--form #caSidebar {
  display: none !important;
}

/* 3. TABEL OVERFLOW */
.ca-theme-shell, .casting-agenda-app,
.ca-theme-shell .ca-main, .ca-theme-shell .ca-container,
.ca-theme-shell .ca-table-wrap, .ca-theme-shell #caApp,
body.ca-app-page .ca-theme-shell, body.ca-app-page .ca-main {
  overflow-x: visible !important;
}
.ca-tbl-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.ca-tbl { min-width: 860px; width: 100%; }

/* 4. SIDEBAR CHIP — 2-regelige layout
   Rij 1: [badge flex-links]  [datum flex-rechts]
   Rij 2: [titel volle breedte]
   ============================================================ */

#caSidebar .ca-chip.ca-chip--full,
.ca-options .ca-chip.ca-chip--full {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "badge date"
    "title title" !important;
  gap: 2px 6px !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: unset !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

/* Badge: links bovenaan */
#caSidebar .ca-chip .ca-status-pill,
.ca-options .ca-chip .ca-status-pill {
  grid-area: badge !important;
  flex: unset !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-self: center !important;
}

/* Datum: rechts bovenaan, klein en grijs */
#caSidebar .ca-chip .ca-chip-date,
.ca-options .ca-chip .ca-chip-date {
  grid-area: date !important;
  flex: unset !important;
  white-space: nowrap !important;
  font-size: .75rem !important;
  color: var(--ca-muted) !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Titel: volle breedte onderaan, vetgedrukt */
#caSidebar .ca-chip .ca-chip-title,
.ca-options .ca-chip .ca-chip-title {
  grid-area: title !important;
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: block !important;
}

/* Optioneel label in formulieren */
.ca-label-optional {
  font-size: .78rem;
  font-weight: 400;
  color: var(--ca-muted);
  margin-left: 4px;
}

/* =================================================================
   MOBIELE OPTIMALISATIES
   ================================================================= */

/* ── 1. NAV: hamburger-stijl op klein scherm ─────────────────────── */

/* Op mobiel: nav scrollbaar horizontaal i.p.v. wrappen */
@media (max-width: 640px) {
  .ca-shell-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    background: var(--ca-bg) !important;
    border-bottom: 1px solid var(--ca-border) !important;
  }

  .ca-shell-userbar {
    padding: 6px 12px 4px;
    border-bottom: none;
  }

  .ca-shell-header__inner {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ca-shell-header__inner::-webkit-scrollbar { display: none; }

  .ca-shell-nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    width: max-content !important;
    min-width: 100%;
  }

  .ca-shell-nav a.caHeaderLink {
    font-size: .82rem !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .ca-shell-nav a.caHeaderLink.caHeaderLink--primary {
    padding: 6px 14px !important;
  }
}

/* ── 2. FORMULIER: betere touch targets ──────────────────────────── */

/* Multi-date picker */
/* Form header with save button at top-right */
.ca-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ca-form-header h2 { margin: 0; flex: 1; }
.ca-btn--save-top {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
}

.ca-dates-field { grid-column: 1 / -1; }
.ca-dates-field > label { font-weight: 600; font-size: .875rem; margin-bottom: 6px; display: block; }
.ca-dates-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ca-dates-col { flex: 0 1 auto; min-width: 160px; }
.ca-dates-range-col { flex: 1 1 auto; min-width: 220px; display: flex; flex-direction: column; }
.ca-dates-range-col .ca-date-range-label { font-size: .8rem; font-weight: 600; color: var(--ca-muted); margin-bottom: 4px; }
.ca-date-range-inputs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ca-date-range-inputs input[type="date"] { flex: 1; min-width: 0; }
.ca-date-range-sep { color: var(--ca-muted); font-size: .9rem; flex: 0 0 auto; }
.ca-dates-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ca-date-row { display: flex; align-items: center; gap: 4px; }
.ca-date-row input[type="date"] {
  font-size: .875rem; padding: 6px 10px;
  border: 1px solid var(--ca-border, #e5e7eb); border-radius: 8px;
  background: var(--ca-surface, #fff); color: var(--ca-text, #111827);
  cursor: pointer;
}
.ca-date-remove {
  background: none; border: none; color: var(--ca-muted, #9ca3af);
  font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1;
}
.ca-date-remove:hover { color: var(--ca-danger); background: rgba(239,68,68,.08); }
.ca-date-add { font-size: .8125rem !important; padding: 4px 12px !important; }

/* Field grid: 1 kolom op mobiel */
.ca-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
.ca-field-grid .ca-field-full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .ca-field-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Grotere touch targets voor inputs */
  .ca-field-grid input,
  .ca-field-grid select,
  .ca-field-grid textarea {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 12px 14px !important;
  }

  .ca-field-grid label {
    font-size: .9rem !important;
  }

  /* Opslaan knop: volle breedte + groot */
  .ca-inlineform .ca-btn,
  .ca-form.ca-form--wide .ca-btn[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
  }

  /* Document grid: 1 kolom */
  .ca-doc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. KALENDER CHIPS: grotere tap-targets ───────────────────────── */

@media (max-width: 640px) {
  /* Dag-cel compacter maar chips groter */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-grid {
    gap: 4px !important;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-day {
    min-height: 52px !important;
    padding: 4px !important;
    border-radius: 10px !important;
  }

  /* Weekdag headers kleiner */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-weekdays > div {
    font-size: .65rem !important;
  }

  /* Dagnummer kleiner */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-day-num {
    font-size: .7rem !important;
  }

  /* Chips in kalender: volledige breedte, grotere tap-target */
  :where(.casting-agenda-app, .ca-theme-shell) .ca-chip--cal {
    min-height: 22px !important;
    font-size: .65rem !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 4. SIDEBAR CHIPS: compacter op mobiel ───────────────────────── */

@media (max-width: 640px) {
  /* Sidebar staat bovenaan op mobiel (order:1) */
  #caSidebar .ca-chip.ca-chip--full,
  .ca-options .ca-chip.ca-chip--full {
    padding: 6px 10px !important;
  }

  #caSidebar .ca-chip .ca-chip-title,
  .ca-options .ca-chip .ca-chip-title {
    font-size: .85rem !important;
  }

  #caSidebar .ca-chip .ca-chip-date,
  .ca-options .ca-chip .ca-chip-date {
    font-size: .72rem !important;
  }

  /* Lijst: grotere tap-targets */
  #caSidebar ul.ca-list > li,
  .ca-options ul.ca-list > li {
    min-height: 52px !important;
  }
}

/* ── 5. TABEL TOOLBAR: netjes op klein scherm ────────────────────── */

@media (max-width: 480px) {
  .ca-tbl-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .ca-tbl-filters {
    order: 1;
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }

  .ca-tbl-filters .ca-btn {
    flex: 1 !important;
    min-height: 36px !important;
    font-size: .8rem !important;
    padding: 4px 8px !important;
  }

  .ca-tbl-search-wrap {
    order: 2;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .ca-tbl-search {
    width: 100% !important;
    min-height: 36px !important;
  }
}

/* ── 6. FLOATING "+ OPTIE TOEVOEGEN" KNOP ────────────────────────── */

@media (max-width: 640px) {
  /* Vaste knop rechtsonder op mobiel */
  .ca-shell-nav a.caHeaderLink.caHeaderLink--primary {
    /* Verberg uit nav op mobiel — vervangen door floating button */
    display: none !important;
  }

  /* Floating action button */
  .ca-fab {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 1200 !important;
    background: var(--ca-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(110,46,139,.4) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform .12s, box-shadow .12s !important;
  }
  .ca-fab:hover, .ca-fab:active {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(110,46,139,.5) !important;
  }

  /* Verberg FAB op form-pagina's (je bent al aan het toevoegen) */
  .ca-layout--form .ca-fab {
    display: none !important;
  }
}

/* ── 7. DASHBOARD BLOKKEN: 1 kolom op mobiel ─────────────────────── */

@media (max-width: 600px) {
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid,
  :where(body) footer.ca-footer.ca-footer--full .ca-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :where(.casting-agenda-app, .ca-theme-shell) .ca-footblock,
  :where(body) .ca-footblock {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

/* ── 8. ACCOUNT/PROFIEL PAGINA ───────────────────────────────────── */

@media (max-width: 600px) {
  .ca-profile-hero {
    border-radius: 12px !important;
  }

  .ca-ie-buttons {
    flex-direction: column !important;
  }

  .ca-ie-buttons .ca-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 9. AUTH FORMULIEREN ─────────────────────────────────────────── */

@media (max-width: 480px) {
  .ca-auth {
    padding: 12px !important;
  }

  .ca-auth .ca-form {
    padding: 24px 16px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .ca-auth .ca-form input[type="email"],
  .ca-auth .ca-form input[type="password"],
  .ca-auth .ca-form input[type="text"] {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  .ca-auth .ca-form .ca-btn {
    min-height: 52px !important;
  }
}

/* ── Geblokkeerde datums ──────────────────────────────────────────── */

:where(.casting-agenda-app, .ca-theme-shell) .ca-cell--blocked {
  background: repeating-linear-gradient(
    -45deg,
    rgba(239, 68, 68, 0.06),
    rgba(239, 68, 68, 0.06) 4px,
    transparent 4px,
    transparent 10px
  ) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  cursor: pointer;
}

:where(.casting-agenda-app, .ca-theme-shell) .ca-cell--blocked:hover {
  background: rgba(239, 68, 68, 0.12) !important;
}

/* X-icoon naast dagnummer */
:where(.casting-agenda-app, .ca-theme-shell) .ca-blocked-icon {
  display: inline-block;
  margin-left: 3px;
  font-size: .6rem;
  color: rgba(239, 68, 68, 0.8);
  font-weight: 700;
  vertical-align: middle;
}

/* Lege dag: cursor pointer tonen als hint */
:where(.casting-agenda-app, .ca-theme-shell) .ca-cell:not(.ca-dim):not(.ca-cell--blocked):hover {
  cursor: pointer;
  background: color-mix(in srgb, var(--ca-primary) 5%, transparent);
}

/* =================================================================
   DARK MODE FIXES
   Alle hardcoded kleuren vervangen door CSS variabelen.
   ================================================================= */


:where(.ca-theme-shell, .casting-agenda-app) {
  --ca-panel:       var(--ca-surface);
  --ca-surface-2:   color-mix(in srgb, var(--ca-surface) 60%, var(--ca-bg) 40%);
  --ca-input-bg:    var(--ca-surface);
  --ca-input-border: var(--ca-border);
  --ca-input-text:  var(--ca-text);
  --ca-label-color: var(--ca-text);
  --ca-muted-text:  var(--ca-muted, #6b7280);
}


/* 2. Auth formulier ──────────────────────────────────────────────── */
.ca-auth .ca-form {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
}

.ca-auth .ca-form h2 {
  color: var(--ca-text) !important;
}

.ca-auth .ca-muted {
  color: var(--ca-muted-text) !important;
}

.ca-auth .ca-form label {
  color: var(--ca-label-color) !important;
}

.ca-auth .ca-form input[type="text"],
.ca-auth .ca-form input[type="email"],
.ca-auth .ca-form input[type="password"] {
  background: var(--ca-input-bg) !important;
  color: var(--ca-input-text) !important;
  border-color: var(--ca-input-border) !important;
}

.ca-auth .ca-form input:focus {
  background: var(--ca-surface) !important;
}

/* 3. Alert meldingen ─────────────────────────────────────────────── */


/* 4. Doc-slots en upload-velden ──────────────────────────────────── */


/* 5. Tabel surface-2 ─────────────────────────────────────────────── */

/* 6. Shell header nav background ────────────────────────────────── */

/* 7. Profiel hero ────────────────────────────────────────────────── */


/* 9. Waarschuwingsbox in inactief-account mail (inline style override) */
/* Enkel CSS voor in-app meldingen */

/* =================================================================
   MOBIELE SINGLE HEADER
   Op app-pagina's: thema-header verbergen op mobiel,
   plugin-header toont logo + avatar + nav in één balk.
   ================================================================= */

/* Logo in plugin nav: desktop verborgen (thema-header is er al) */
/* Plugin-nav logo: standaard verborgen op desktop (thema-header toont het al) */
.ca-pnav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}
.ca-pnav-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.ca-pnav-logo--dark { display: none; }

/* Verberg thema-header op app-pagina's — maar NIET op auth-pagina's */
/* body.ca-app-page wordt door PHP gezet, body.ca-auth-page op login/register etc. */
/* Verberg website header op app-pagina's via expliciete class */
body.ca-hide-theme-header header.ca-header {
  display: none !important;
}

@media (max-width: 768px) {
  /* Extra fallback via JS-klasse */
  body.ca-app-mobile.ca-hide-theme-header header.ca-header {
    display: none !important;
  }

  /* Plugin header: sticky bovenaan */
  .ca-shell-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
  }

  /* Userbar: logo links, avatar rechts */
  .ca-shell-userbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid var(--ca-border) !important;
  }

  /* Toon logo in plugin nav op mobiel */
  .ca-pnav-brand {
    display: flex !important;
  }

  /* Naam verbergen op mobiel — avatar volstaat */
  .ca-shell-username {
    display: none !important;
  }

  /* Body padding zodat content niet achter fixed header verdwijnt */
  .ca-theme-shell .ca-main {
    padding-top: calc(var(--ca-shell-header-h, 90px)) !important;
  }
}

/* JS-klasse fallback: voeg 'ca-app-mobile' toe aan body op mobiel */

/* =================================================================
   MOBIELE NAV — 2 RIJEN
   ================================================================= */
@media (max-width: 768px) {
  .ca-shell-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px 3px !important;
    padding: 5px 8px 6px !important;
    overflow-x: visible !important;
  }

  .ca-shell-nav a.caHeaderLink {
    font-size: 0.73rem !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    line-height: 1.3 !important;
  }

  /* "+ Optie toevoegen" iets smaller */
  .ca-shell-nav a.caHeaderLink.caHeaderLink--primary {
    padding: 4px 10px !important;
    font-size: 0.73rem !important;
  }

  /* Userbar compacter zodat nav meer ruimte heeft */
  .ca-shell-userbar {
    padding: 6px 12px !important;
  }

  /* Body-padding aanpassen aan hogere header */
  .ca-theme-shell .ca-main,
  body.ca-app-page .ca-main,
  body.ca-app-page > .ca-theme-shell .ca-main {
    padding-top: calc(var(--ca-shell-header-h, 110px)) !important;
  }
}

/* =================================================================
   AUTH PAGINA LOGO
   ================================================================= */
.ca-auth-logo-wrap {
  text-align: center;
  padding: 32px 0 8px;
}
.ca-auth-logo-wrap a {
  display: inline-block;
  line-height: 0;
}
.ca-auth-logo {
  max-height: 64px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Dark logo standaard verborgen */
.ca-auth-logo--dark { display: none; }

/* Dark mode */

/* =================================================================
   LOGO IN PLUGIN-HEADER — zichtbaar op desktop + mobiel
   ================================================================= */

/* Userbar altijd flex zodat logo links en avatar rechts staat */
.ca-shell-userbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo max-hoogte desktop iets groter */
@media (min-width: 769px) {
  .ca-pnav-logo {
    max-height: 32px !important;
    height: 32px !important;
  }
  .ca-shell-userbar {
    padding: 6px 16px !important;
    border-bottom: 1px solid var(--ca-border) !important;
  }
}

/* =================================================================
   MOBIEL HEADER — geen avatar, logo groter
   ================================================================= */
@media (max-width: 768px) {
  /* Avatar verbergen */
  .ca-shell-userbar__link {
    display: none !important;
  }

  /* Userbar: alleen logo, geen justify-content space-between meer */
  .ca-shell-userbar {
    justify-content: flex-start !important;
    padding: 6px 12px !important;
  }

  /* Logo groter op mobiel */
  .ca-pnav-logo {
    max-height: 44px !important;
    height: 44px !important;
  }
}

/* =================================================================
   MOBIEL HEADER — compacter, totaal ~68px
   ================================================================= */
@media (max-width: 768px) {
  /* Userbar zo compact mogelijk */
  .ca-shell-userbar {
    padding: 4px 10px !important;
    min-height: 0 !important;
  }

  /* Logo kleiner zodat header niet te hoog wordt */
  .ca-pnav-logo {
    max-height: 32px !important;
    height: 32px !important;
  }

  /* Nav ook compacter */
  .ca-shell-nav {
    padding: 3px 8px 4px !important;
    gap: 2px 2px !important;
  }

  .ca-shell-nav a.caHeaderLink {
    font-size: 0.71rem !important;
    padding: 3px 7px !important;
    line-height: 1.25 !important;
  }

  .ca-shell-nav a.caHeaderLink.caHeaderLink--primary {
    padding: 3px 9px !important;
  }
}

/* Logo groter op mobiel */
@media (max-width: 768px) {
  .ca-pnav-logo {
    max-height: 40px !important;
    height: 40px !important;
  }
}

/* Auth-pagina's: plugin-header verbergen, thema-header zichtbaar */
body.ca-auth-page .ca-shell-header {
  display: none !important;
}

/* Auth-pagina's: alle plugin-logo's verbergen */
body.ca-auth-page .ca-pnav-brand,
body.ca-auth-page .ca-auth-logo-wrap,
body.ca-auth-page .ca-auth-logo {
  display: none !important;
}

/* =================================================================
   USERBAR — rechts: website + avatar + uitloggen (desktop)
   ================================================================= */
.ca-shell-userbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.ca-shell-userbar__website,
.ca-shell-userbar__logout {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ca-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s;
}

.ca-shell-userbar__website:hover,
.ca-shell-userbar__logout:hover {
  color: var(--ca-primary);
}

.ca-shell-userbar__logout {
  color: var(--ca-muted);
}

/* Op mobiel: website + uitloggen verbergen (staan al in account-pagina) */
@media (max-width: 768px) {
  .ca-shell-userbar__website,
  .ca-shell-userbar__logout {
    display: none !important;
  }
  .ca-shell-userbar__right {
    margin-left: auto;
  }
}

/* =================================================================
   USERBAR LAYOUT — logo midden, links rechts, 1 regel
   ================================================================= */
.ca-shell-userbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 6px 16px !important;
}

.ca-shell-userbar__right {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 16px !important;
  margin-left: auto !important;
  flex-wrap: nowrap !important;
}

/* Logo gecentreerd */
.ca-pnav-brand {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Userbar relatief zodat absolute werkt */
.ca-shell-userbar {
  position: relative !important;
}

@media (max-width: 768px) {
  .ca-pnav-brand {
    position: static !important;
    transform: none !important;
  }
}

/* =================================================================
   USERBAR — logo altijd tonen, breedte beperken tot nav-breedte
   ================================================================= */

/* Userbar en nav dezelfde max-breedte als de rest van de app */
.ca-shell-userbar,
.ca-shell-header__inner {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Logo altijd tonen op desktop (ook zonder mobiel-logo instelling) */
.ca-pnav-brand {
  display: flex !important;
}

/* Zorg dat userbar de volle breedte van de header gebruikt als wrapper */
.ca-shell-header {
  width: 100% !important;
}

/* Logo varianten — desktop/mobiel en licht/donker */
.ca-pnav-logo--mobile  { display: none !important; }
.ca-pnav-logo--desktop { display: block !important; }
.ca-pnav-logo--dark    { display: none !important; }


@media (max-width: 768px) {
  .ca-pnav-logo--desktop { display: none !important; }
  .ca-pnav-logo--mobile  { display: block !important; }
}

/* =================================================================
   MOBIEL: logo kleiner + FAB niet over nav-knop
   ================================================================= */
@media (max-width: 768px) {
  /* Logo 1/3 van de breedte, max 40px hoog */
  .ca-pnav-brand {
    max-width: 33% !important;
  }
  img.ca-pnav-logo,
  .ca-pnav-logo--mobile {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* FAB hoger zodat hij niet over de + optie knop valt */
  .ca-fab {
    bottom: 80px !important;
  }
}

/* Minder padding in userbar op mobiel */
@media (max-width: 768px) {
  .ca-shell-userbar {
    padding: 2px 10px !important;
  }
  .ca-shell-nav {
    padding: 2px 8px 3px !important;
  }
}

/* =================================================================
   MOBIEL: logo links, menu vult rest van breedte
   ================================================================= */
@media (max-width: 768px) {
  /* Header als geheel: flex kolom */
  .ca-shell-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 4px 8px !important;
  }

  /* Logo links, vaste breedte */
  .ca-shell-userbar {
    flex-shrink: 0 !important;
    width: auto !important;
    padding: 4px 0 !important;
    border-bottom: none !important;
    align-items: flex-start !important;
  }

  /* Nav neemt de rest van de breedte */
  .ca-shell-header__inner {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .ca-shell-nav {
    justify-content: flex-start !important;
    padding: 2px 4px !important;
    width: 100% !important;
  }
}

/* =================================================================
   DESKTOP: userbar boven nav, logo 80px
   ================================================================= */
@media (min-width: 769px) {
  .ca-shell-header {
    flex-direction: column !important;
  }

  .ca-shell-userbar {
    width: 100% !important;
    padding: 6px 16px !important;
    border-bottom: 1px solid var(--ca-border) !important;
  }

  img.ca-pnav-logo,
  .ca-pnav-logo--desktop {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
  }

  .ca-shell-header__inner {
    width: 100% !important;
  }
}

/* Uitloggen alleen op mobiel in nav tonen */
.ca-nav-logout-mobile {
  display: none !important;
}
@media (max-width: 768px) {
  .ca-nav-logout-mobile {
    display: inline-flex !important;
  }
}

/* =================================================================
   DESKTOP: FAB verbergen, uitloggen in nav, header layout fix
   ================================================================= */

/* FAB alleen op mobiel */
@media (min-width: 769px) {
  .ca-fab {
    display: none !important;
  }
}

/* Uitloggen in nav: alleen desktop tonen */
.ca-nav-logout-desktop {
  display: none;
}
@media (min-width: 769px) {
  .ca-nav-logout-desktop {
    display: inline-flex !important;
  }
  /* Mobiel nav uitloggen verbergen op desktop */
  .ca-nav-logout-mobile {
    display: none !important;
  }
}

/* Desktop header: ← website links, avatar+naam rechts */
@media (min-width: 769px) {
  .ca-shell-userbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .ca-shell-userbar__website {
    order: -1 !important;
    margin-right: auto !important;
  }
  .ca-shell-userbar__right {
    margin-left: 0 !important;
    gap: 12px !important;
  }
  /* Uitloggen uit header verbergen op desktop */
  .ca-shell-userbar__logout {
    display: none !important;
  }
  /* Logo gecentreerd */
  .ca-pnav-brand {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* =================================================================
   DARK MODE TOGGLE
   ================================================================= */
.ca-theme-toggle {
  background: none;
  border: 1.5px solid var(--ca-border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
}
.ca-theme-toggle:hover {
  background: var(--ca-surface);
  border-color: var(--ca-primary);
}

.ca-theme-toggle__moon { display: inline; }
.ca-theme-toggle__sun  { display: none; }

/* Mobiel: toggle in nav als link-stijl */
.ca-theme-toggle--nav {
  background: none !important;
  border: none !important;
  font-size: .9rem !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  color: var(--ca-text) !important;
}

/* Statussen: witte achtergronden via variabelen */
:where(.casting-agenda-app, .ca-theme-shell) input[type="text"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="email"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="number"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="date"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="password"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="search"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="url"],
:where(.casting-agenda-app, .ca-theme-shell) select,
:where(.casting-agenda-app, .ca-theme-shell) textarea {
  background: var(--ca-input-bg, var(--ca-surface)) !important;
}

/* Status rij achtergrond */
/* Status card layout (matches agency row style) */
:where(.casting-agenda-app, .ca-theme-shell) .ca-status-card{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:center;
  gap:12px;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-status-card .ca-toggle-label{
  font-size:12px;
  font-weight:600;
  color:var(--ca-muted);
  white-space:nowrap;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-status-card .ca-inline-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}
@media(max-width:680px){
  :where(.casting-agenda-app, .ca-theme-shell) .ca-status-card{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-status-card .ca-status-key{
    grid-column:1/-1;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-status-card > input[type="text"]{
    grid-column:1/-1;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-status-card .ca-color-field{
    grid-column:1/-1;
  }
}

/* Tooltip on hover for toggle labels */
:where(.casting-agenda-app, .ca-theme-shell) .ca-tooltip-wrap{
  position:relative;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-tooltip-wrap::after{
  content:attr(title);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--ca-text, #1a1a2e);
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  padding:8px 12px;
  border-radius:10px;
  white-space:normal;
  width:max-content;
  max-width:240px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  z-index:50;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-tooltip-wrap:hover::after{
  opacity:1;
}

/* App header: userbar border via variabele */
.ca-shell-userbar {
  border-bottom: var(--ca-userbar-border, 1px solid var(--ca-border));
}

/* Dark mode app header via CSS variabele (instelbaar via Stijl & Kleuren) */

/* =================================================================
   AUTH PAGINA — volledige reset, altijd licht, altijd gecentreerd
   ================================================================= */
body.ca-auth-page {
  background: var(--ca-bg) !important;
  min-height: 100vh !important;
}
body.ca-auth-page .ca-page.ca-auth {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ca-auth-min-height, calc(100vh - 140px)) !important;
  padding: 40px 16px !important;
  background: transparent !important;
}
body.ca-auth-page .ca-auth-card-wrap {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}
body.ca-auth-page .ca-auth-card {
  background: #ffffff !important;
  color: var(--ca-text) !important;
}
body.ca-auth-page .ca-auth-label,
body.ca-auth-page .ca-auth-title,
body.ca-auth-page .ca-auth-switch {
  color: var(--ca-text) !important;
}
body.ca-auth-page .ca-auth-input {
  background: var(--ca-surface, #ffffff) !important;
  color: var(--ca-text, #1a1a2e) !important;
  border-color: var(--ca-border, #e2e8f0) !important;
}

body.ca-auth-page,
body.ca-auth-page *,
body.ca-auth-page .ca-auth-card,
body.ca-auth-page .ca-auth-input,
body.ca-auth-page .ca-auth-btn,
body.ca-auth-page .ca-auth-label,
body.ca-auth-page .ca-page {
  color-scheme: light only !important;
}


/* AUTH inputs: altijd wit, browser dark mode geblokkeerd */
.ca-auth-input,
.ca-auth-card input,
.ca-auth-card select,
.ca-auth-card textarea {
  background-color: var(--ca-surface, #ffffff) !important;
  color: var(--ca-text, #1a1a2e) !important;
  border-color: var(--ca-border, #e2e8f0) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important;
}

/* AUTH inputs: expliciete border zodat ze zichtbaar zijn */
.ca-auth-input {
  border: 1.5px solid var(--ca-border) !important;
  background: #ffffff !important;
  color: var(--ca-text) !important;
}


/* Auth inputs: --ca-surface achtergrond */
.ca-auth-input {
  background: var(--ca-surface, #ffffff) !important;
  color: var(--ca-text, #1a1a2e) !important;
  border: 1.5px solid var(--ca-border, #e2e8f0) !important;
}

/* =================================================================
   TABEL: compacter + actions altijd zichtbaar
   ================================================================= */

/* Kleinere font-size en padding */
.ca-tbl-td,
.ca-tbl-th {
  font-size: 0.8rem !important;
  padding: 6px 8px !important;
}

/* Actions kolom sticky rechts */
.ca-tbl-th--actions,
.ca-tbl-td:last-child {
  position: sticky !important;
  right: 0 !important;
  background: var(--ca-surface, #fff) !important;
  z-index: 2 !important;
  box-shadow: -2px 0 6px rgba(0,0,0,.06) !important;
}
.ca-tbl-th--actions {
  background: var(--ca-bg, #f8f7fb) !important;
  z-index: 3 !important;
}

/* Tabel scroll container geen min-width forceren */
.ca-tbl-scroll {
  overflow-x: auto;
}
.ca-tbl {
  min-width: unset !important;
}

/* Uitloggen in userbar verbergen — staat al in de nav */
.ca-shell-userbar__logout {
  display: none !important;
}

/* =================================================================
   FIXES: tabel header, zoekbalk, uitloggen, lege staat
   ================================================================= */

/* 1. Tabel header: geen overflow, tekst afkappen */
.ca-tbl-th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* 2. Zoekbalk: zichtbare rand */
.ca-tbl-search {
  border: 1.5px solid var(--ca-border, #e2e8f0) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  background: var(--ca-surface, #fff) !important;
  color: var(--ca-text) !important;
}
.ca-tbl-search:focus {
  outline: none !important;
  border-color: var(--ca-primary) !important;
  box-shadow: 0 0 0 3px rgba(110,46,139,.1) !important;
}

/* 3. Uitloggen: één link, altijd zichtbaar */
.ca-nav-logout {
  display: inline-flex !important;
}
/* Verberg de oude dubbele klassen als ze nog ergens voorkomen */
.ca-nav-logout-desktop,
.ca-nav-logout-mobile {
  display: none !important;
}

/* 4. Lege staat: nettere padding */
.ca-tbl-empty {
  padding: 40px 24px !important;
  text-align: center !important;
  font-size: 1rem !important;
  color: var(--ca-muted) !important;
  border-radius: var(--ca-radius, 14px) !important;
  background: var(--ca-surface, #fff) !important;
  border: 1px solid var(--ca-border) !important;
  margin: 16px 0 !important;
}

/* =================================================================
   AUTH INPUTS — definitieve stijl (overschrijft alles hierboven)
   ================================================================= */
.ca-auth-input {
  display: block !important;
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--ca-surface, #f8f9fc) !important;
  border: 1.5px solid var(--ca-border, #d0d7e3) !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  color: var(--ca-text, #1a1a2e) !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important;
  transition: border-color .15s !important;
}
.ca-auth-input:focus {
  outline: none !important;
  border-color: var(--ca-primary, #4C2D82) !important;
  box-shadow: 0 0 0 3px rgba(110,46,139,.1) !important;
}

/* =================================================================
   AUTH PAGINA — website header altijd zichtbaar
   ================================================================= */
body.ca-auth-page header.ca-header,
body.ca-auth-page .ca-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* AUTH INPUTS — hardcoded fallback zodat ze altijd zichtbaar zijn */
.ca-auth-card .ca-auth-input,
.ca-auth-field .ca-auth-input {
  background: var(--ca-bg) !important;
  border: 1.5px solid var(--ca-border) !important;
  color: var(--ca-text) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
.ca-auth-card .ca-auth-input:focus,
.ca-auth-field .ca-auth-input:focus {
  border-color: var(--ca-primary) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(110,46,139,.12) !important;
}

/* =================================================================
   TABEL MOBIEL — horizontaal scrollen, minimum breedtes
   ================================================================= */
.ca-tbl-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.ca-tbl {
  min-width: 700px !important;
}

.ca-tbl-td,
.ca-tbl-th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}

/* Productie en locatie mogen iets breder */
.ca-tbl-td[data-col="title"],
.ca-tbl-th:nth-child(2) {
  max-width: 180px !important;
  min-width: 100px !important;
}

/* Actions altijd zichtbaar rechts */
.ca-tbl-th--actions,
.ca-tbl-td:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 2 !important;
  background: var(--ca-surface, #fff) !important;
  box-shadow: -2px 0 6px rgba(0,0,0,.06) !important;
  max-width: none !important;
}

/* Tabel header — niet sticky (conflicteert met horizontale scroll)
   Zorg dat scroll wrapper alleen de body scrollt, head blijft boven */
.ca-tbl-scroll {
  overflow-x: auto !important;
}
.ca-tbl-head {
  background: var(--ca-bg, #f8f7fb) !important;
}
.ca-tbl-th {
  background: var(--ca-bg, #f8f7fb) !important;
}

/* Tabel: vaste header, scrollende body */
.ca-tbl-outer {
  position: relative;
}
.ca-tbl-head-wrap {
  overflow: hidden !important;
  background: var(--ca-bg, #f8f7fb) !important;
  border-bottom: 1px solid var(--ca-border) !important;
}
.ca-tbl-head-wrap .ca-tbl--head {
  min-width: 700px !important;
}
.ca-tbl-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 70vh;
  overflow-y: auto;
}
.ca-tbl-scroll .ca-tbl {
  min-width: 700px !important;
}

/* =================================================================
   AUTH KAART — volledige visuele stijlen
   ================================================================= */

.ca-auth-card-wrap {
  width: 100%;
  max-width: 420px;
}

.ca-auth-header {
  text-align: center;
  margin-bottom: 24px;
}
.ca-auth-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ca-text);
  margin: 0 0 6px;
  letter-spacing: -.02em;
}
.ca-auth-subtitle {
  font-size: .95rem;
  color: var(--ca-muted);
  margin: 0;
}

.ca-auth-card {
  background: #ffffff;
  border: 1px solid var(--ca-border, #e6e8ef);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  color-scheme: light;
}

.ca-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ca-auth-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ca-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ca-auth-label-link {
  font-weight: 400;
  font-size: .8rem;
  color: var(--ca-primary, #4C2D82);
  text-decoration: none;
}
.ca-auth-label-link:hover { text-decoration: underline; }

.ca-auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ca-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ca-text);
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
.ca-auth-input::placeholder { color: var(--ca-muted); opacity: 1; }
.ca-auth-input:focus {
  outline: none;
  border-color: var(--ca-primary, #4C2D82);
  box-shadow: 0 0 0 3px rgba(110,46,139,.12);
  background: #ffffff;
}

.ca-auth-btn {
  width: 100%;
  padding: 13px;
  background: var(--ca-primary, #4C2D82);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .1s;
  letter-spacing: .01em;
}
.ca-auth-btn:hover { filter: brightness(1.08); }
.ca-auth-btn:active { transform: scale(.98); }

.ca-auth-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .875rem;
  line-height: 1.5;
}
.ca-auth-notice span { flex-shrink: 0; font-size: 1.1rem; margin-top: 1px; }
.ca-auth-notice--success { background: var(--ca-notice-success-bg); border: 1px solid var(--ca-notice-success-border); color: var(--ca-notice-success-text); }
.ca-auth-notice--error   { background: var(--ca-notice-error-bg); border: 1px solid var(--ca-notice-error-border); color: var(--ca-notice-error-text); }
.ca-auth-notice--warning { background: var(--ca-notice-warning-bg); border: 1px solid var(--ca-notice-warning-border); color: var(--ca-notice-warning-text); }
.ca-auth-notice--info    { background: var(--ca-notice-info-bg); border: 1px solid var(--ca-notice-info-border); color: var(--ca-notice-info-text); }

.ca-auth-inline-link {
  display: block;
  margin-top: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.ca-auth-switch {
  text-align: center;
  font-size: .875rem;
  color: var(--ca-muted, #6b7280);
  margin: 0;
  white-space: normal;
  word-break: break-word;
}
.ca-auth-switch-link {
  color: var(--ca-primary, #4C2D82);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.ca-auth-switch-link:hover { text-decoration: underline; }

.ca-auth-desc {
  font-size: .9rem;
  color: var(--ca-muted, #6b7280);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .ca-auth-card { padding: 24px 20px; }
  .ca-auth-card .ca-auth-field { gap: 4px; }
  .ca-auth-input { padding: 10px 12px; }
  .ca-auth-btn { padding: 12px; }
}

/* Tabel desktop: geen vaste min-width, past zich aan */
@media (min-width: 769px) {
  .ca-tbl,
  .ca-tbl--head,
  .ca-tbl-head-wrap .ca-tbl--head,
  .ca-tbl-scroll .ca-tbl {
    min-width: unset !important;
  }
  .ca-tbl-scroll {
    overflow-x: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .ca-tbl-td,
  .ca-tbl-th {
    max-width: none !important;
  }
}

/* Auth kaart: compacter op mobiel */
@media (max-width: 480px) {
  .ca-auth-card {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
  .ca-auth-card .ca-auth-field {
    gap: 4px !important;
  }
  .ca-auth-card .ca-auth-input {
    padding: 10px 12px !important;
  }
  .ca-auth-btn {
    padding: 12px !important;
  }
}

/* =================================================================
   OVERRIDE CUSTOM CSS — auth pagina fixes
   ================================================================= */

/* Logo op mobiel tonen op auth-pagina's */
body.ca-auth-page .ca-logo.ca-logo--mobile {
  display: block !important;
}
body.ca-auth-page .ca-branding,
body.ca-auth-page .ca-brand,
body.ca-auth-page .ca-logo,
body.ca-auth-page .ca-logo img,
body.ca-auth-page header.ca-header,
body.ca-auth-page .ca-header-inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Custom CSS heeft .ca-auth img { display: none } — override */
body.ca-auth-page .ca-auth img {
  display: block !important;
}

/* Header altijd zichtbaar op auth */
body.ca-auth-page header.ca-header {
  display: block !important;
  min-height: auto !important;
}

/* Override custom CSS die header/logo verbergt op auth pagina's */
/* Alleen het desktop logo tonen — geen dubbel logo */
body.ca-auth-page .ca-logo.ca-logo--desktop,
body.ca-auth-page .ca-logo.ca-logo--desktop img,
body.ca-auth-page .ca-branding,
body.ca-auth-page .ca-brand {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Mobile logo verborgen houden ook op auth — desktop logo is genoeg */
body.ca-auth-page .ca-logo.ca-logo--mobile {
  display: none !important;
}

/* Auth: header niet sticky zodat content er niet onderdoor schuift */
body.ca-auth-page header.ca-header {
  position: relative !important;
  top: auto !important;
}

/* ── Royal Amethyst knop glans ───────────────────────────────────── */
.ca-auth-btn,
.ca-btn--primary,
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:not(.ca-btn--secondary):not(.ca-btn--ghost):not(.ca-btn--danger) {
  background: linear-gradient(
    145deg,
    var(--ca-btn-grad-1) 0%,
    var(--ca-btn-grad-2) 30%,
    var(--ca-btn-grad-3) 70%,
    var(--ca-btn-grad-4) 100%
  ) !important;
  box-shadow:
    0 2px 12px rgba(76,45,130,0.45),
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  transition: box-shadow .18s ease, transform .12s ease !important;
}
.ca-auth-btn:hover,
.ca-btn--primary:hover,
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:not(.ca-btn--secondary):not(.ca-btn--ghost):not(.ca-btn--danger):hover {
  box-shadow:
    0 5px 22px rgba(76,45,130,0.60),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  transform: translateY(-1px) !important;
}
.ca-auth-btn:active,
.ca-btn--primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 1px 6px rgba(76,45,130,0.40),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Dashboard: Alle opties + Gedaan kolommen volle breedte */
/* Dashboard: ca-all en ca-done elk de helft van de breedte op één rij */
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid .ca-footblock.ca-all,
:where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid .ca-footblock.ca-done {
  grid-column: span 2;
}

/* Account pagina: import/export knoppen naast elkaar */
.ca-ie-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.ca-ie-section {
  display: flex !important;
  flex-direction: column !important;
}

/* =================================================================
   DATUM velden mobiel: niet te breed
   ================================================================= */
@media (max-width: 600px) {
  :where(.casting-agenda-app, .ca-theme-shell) input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =================================================================
   BESTAND UPLOADEN: minder wit, zichtbaarder
   ================================================================= */
.ca-doc-upload {
  background: var(--ca-surface-2, #f3f4f6) !important;
  border: 2px dashed var(--ca-border, #c4b5e8) !important;
}
.ca-doc-upload:hover {
  background: color-mix(in srgb, var(--ca-primary) 8%, var(--ca-surface-2, #f3f4f6)) !important;
  border-color: var(--ca-primary) !important;
}

/* File input in import sectie */
.ca-file-label input[type="file"] {
  background: var(--ca-surface-2, #f3f4f6) !important;
  border: 1.5px solid var(--ca-border, #d4c5e8) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: .85rem !important;
  color: var(--ca-text) !important;
}

/* Native file input overal in de app */
:where(.casting-agenda-app, .ca-theme-shell) input[type="file"] {
  background: var(--ca-surface-2, #f3f4f6) !important;
  border: 1.5px solid var(--ca-border, #d4c5e8) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: var(--ca-text) !important;
  font-size: .85rem !important;
}

/* ── Auth knop laadstatus ─────────────────────────────────────────── */
.ca-auth-btn--loading,
.ca-auth-btn[disabled] {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
  cursor: wait !important;
  opacity: 0.85 !important;
}
.ca-auth-btn--loading::after,
.ca-auth-btn[disabled].ca-auth-btn--loading::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin: -10px 0 0 -10px !important;
  border: 2.5px solid rgba(255,255,255,0.35) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: ca-spin .7s linear infinite !important;
}
@keyframes ca-spin {
  to { transform: rotate(360deg); }
}

/* FAB en backtop: zelfde grootte + positie zodat ze netjes stapelen */
:where(.casting-agenda-app, .ca-theme-shell) .ca-backtop {
  width: 52px !important;
  height: 52px !important;
  bottom: 82px !important;
  right: 18px !important;
  font-size: 20px !important;
}
@media (max-width: 768px) {
  .ca-fab {
    width: 52px !important;
    height: 52px !important;
    bottom: 18px !important;
    right: 18px !important;
    font-size: 1.4rem !important;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-backtop {
    bottom: 82px !important;
    right: 18px !important;
  }
}

/* =================================================================
   IMPORT/EXPORT — export + import naast elkaar op desktop
   ================================================================= */
@media (min-width: 600px) {
  .ca-import-export .ca-ie-section + .ca-divider + .ca-ie-section,
  .ca-import-export > .ca-ie-section:nth-of-type(2) {
    margin-top: 0;
  }
  /* Wrap beide secties in een rij */
  .ca-import-export {
    display: flex;
    flex-direction: column;
  }
  .ca-import-export > .ca-ie-section {
    flex: 1;
  }
  /* Twee secties naast elkaar */
  .ca-ie-sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}

/* Export knoppen: altijd naast elkaar */
.ca-ie-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
  margin-top: 12px !important;
}
.ca-ie-buttons .ca-btn {
  white-space: nowrap !important;
}

/* =================================================================
   UNIVERSELE KNOP STYLING — royal amethyst voor alle primary knoppen
   Uitgesloten: hamburger, nav-toggle, tbl-icon-btn, backtop
   ================================================================= */

/* ── Basis gradient mixin ──────────────────────────────────────────── */
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:not(.ca-btn--ghost):not(.ca-btn--secondary):not(.ca-btn--sm):not(.ca-btn--danger),
.ca-auth-btn,
.ca-btn--primary,
:where(.casting-agenda-app, .ca-theme-shell) button.ca-btn:not(.ca-btn--ghost):not(.ca-btn--secondary),
:where(.casting-agenda-app, .ca-theme-shell) input[type="submit"],
:where(.casting-agenda-app, .ca-theme-shell) input[type="button"] {
  background: linear-gradient(145deg, var(--ca-btn-grad-1) 0%, var(--ca-btn-grad-2) 30%, var(--ca-btn-grad-3) 70%, var(--ca-btn-grad-4) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 2px 12px rgba(76,45,130,0.40),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;
  transition: box-shadow .18s ease, transform .12s ease, filter .12s !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:not(.ca-btn--ghost):not(.ca-btn--secondary):hover,
.ca-auth-btn:hover,
.ca-btn--primary:hover,
:where(.casting-agenda-app, .ca-theme-shell) input[type="submit"]:hover {
  box-shadow:
    0 5px 20px rgba(76,45,130,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn:active,
.ca-auth-btn:active {
  transform: translateY(0) scale(.99) !important;
  box-shadow:
    0 1px 6px rgba(76,45,130,0.35),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── Ghost / secondary knoppen ─────────────────────────────────────── */
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn--ghost,
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn--secondary,
.ca-btn--ghost {
  background: transparent !important;
  border: 1.5px solid var(--ca-primary, #4C2D82) !important;
  color: var(--ca-primary, #4C2D82) !important;
  box-shadow: none !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn--ghost:hover,
:where(.casting-agenda-app, .ca-theme-shell) .ca-btn--secondary:hover,
.ca-btn--ghost:hover {
  background: color-mix(in srgb, var(--ca-primary, #4C2D82) 8%, transparent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(76,45,130,0.15) !important;
}

/* ── Kalender vorige/volgende maand knoppen ────────────────────────── */
:where(.casting-agenda-app, .ca-theme-shell) .ca-calbtn {
  background: linear-gradient(145deg, var(--ca-btn-grad-1) 0%, var(--ca-btn-grad-2) 40%, var(--ca-btn-grad-3) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 4px 14px rgba(76,45,130,0.35),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-calbtn:hover {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ca-btn-grad-1) 80%, #fff 20%) 0%, color-mix(in srgb, var(--ca-btn-grad-2) 80%, #fff 20%) 40%, color-mix(in srgb, var(--ca-btn-grad-3) 80%, #fff 20%) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(76,45,130,0.45) !important;
}

/* ── Tabel filter knoppen (Alles/Lopend/Gedaan) ────────────────────── */
:where(.casting-agenda-app, .ca-theme-shell) .ca-tbl-toolbar .ca-btn {
  background: transparent !important;
  border: 1.5px solid var(--ca-border, #e2e8f0) !important;
  color: var(--ca-muted, #64748b) !important;
  box-shadow: none !important;
}
:where(.casting-agenda-app, .ca-theme-shell) .ca-tbl-toolbar .ca-btn.is-active,
:where(.casting-agenda-app, .ca-theme-shell) .ca-tbl-toolbar .ca-btn[data-active="true"],
:where(.casting-agenda-app, .ca-theme-shell) .ca-tbl-toolbar .ca-btn--active {
  background: linear-gradient(145deg, var(--ca-btn-grad-1) 0%, var(--ca-btn-grad-2) 40%, var(--ca-btn-grad-3) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:
    0 2px 10px rgba(76,45,130,0.35),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* ── Elementor knoppen op de website ───────────────────────────────── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
  background: linear-gradient(145deg, var(--ca-btn-grad-1) 0%, var(--ca-btn-grad-2) 30%, var(--ca-btn-grad-3) 70%, var(--ca-btn-grad-4) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 2px 12px rgba(76,45,130,0.40),
    inset 0 1px 0 rgba(255,255,255,0.38) !important;
  transition: box-shadow .18s, transform .12s !important;
}
.elementor-button:hover,
a.elementor-button:hover {
  box-shadow:
    0 5px 20px rgba(76,45,130,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Dashboard: op mobiel elke kolom volledige breedte */
@media (max-width: 860px) {
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid,
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid--top {
    grid-template-columns: 1fr !important;
  }
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid .ca-footblock.ca-all,
  :where(.casting-agenda-app, .ca-theme-shell) .ca-footer-grid .ca-footblock.ca-done {
    grid-column: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AVAILABILITY PAGE (public, read-only calendar)
   ═══════════════════════════════════════════════════════════════════ */
.ca-availability-header { text-align: center; margin-bottom: 24px; }
.ca-availability-header h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }

.ca-avail-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ca-avail-month { font-size: 1.1rem; font-weight: 700; }

.ca-avail-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.ca-avail-weekday {
  text-align: center; font-size: .75rem; font-weight: 700;
  color: var(--ca-muted); text-transform: lowercase; padding: 4px 0;
}
.ca-avail-cell {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 10px; background: var(--ca-surface); border: 1px solid var(--ca-border);
  position: relative; min-height: 48px;
}
.ca-avail-cell--empty { background: transparent; border: none; }
.ca-avail-cell--today { box-shadow: inset 0 0 0 2px var(--ca-today, #f59e0b); }
.ca-avail-cell--blocked {
  background: repeating-linear-gradient(-45deg,
    rgba(239,68,68,.10), rgba(239,68,68,.10) 4px,
    transparent 4px, transparent 10px
  );
  border-color: rgba(239,68,68,.25);
}
.ca-avail-day { font-size: .9rem; font-weight: 600; color: var(--ca-text); }

/* Available = explicit 'available' status (green) */
.ca-avail-cell--available {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}
.ca-avail-cell--available .ca-avail-day { color: #065f46; }

.ca-avail-legend-items {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 22px; font-size: .85rem; color: var(--ca-muted);
}
.ca-avail-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ca-avail-legend-swatch {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block;
}
.ca-avail-legend-swatch--available {
  background: rgba(34, 197, 94, 0.20);
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.ca-avail-cell--blocked-swatch {
  width: 14px; height: 14px; border-radius: 4px;
  background: repeating-linear-gradient(-45deg,
    rgba(239,68,68,.18), rgba(239,68,68,.18) 3px,
    transparent 3px, transparent 7px
  );
  border: 1px solid rgba(239,68,68,.3);
}

/* Required field indicator */
.ca-required::after {
  content: ' *'; color: var(--ca-danger, #dc2626); font-weight: 700;
}

/* Edit button on sidebar chips */
.ca-li {
  position: relative;
  display: flex !important;
  align-items: stretch;
}
.ca-li .ca-chip--full {
  flex: 1 1 0%;
  min-width: 0;
}
.ca-chip-edit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 1rem;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  color: inherit !important;
}
.ca-chip-edit:hover {
  opacity: 1;
}