@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* @import "sdp.css";
@import "event-calendar.css"; */
@layer base {
  body {
    @apply text-base;
  }
  /* Active Admin */
  fieldset.inputs ol {
    @apply flex flex-col gap-2;
  }

  /* Couleur de sélection globale */
  ::selection {
    @apply bg-blue-200;
  }
}

@layer components {
  /* .planning-zoom {
    zoom: 0.9;
  } */

  .turbo-progress-bar {
    @apply !bg-indigo-800;
  }

  .vertical-separator {
    @apply bg-gray-200 w-px my-1;
  }

  .navbar-link {
    @apply rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white;
  }

  /* Rendered markdown for chat messages - Tailwind's preflight zeroes out
     margins on p/ul/ol/headings, so without this the content reads as one
     cramped, unstructured block. */
  .chat-markdown p {
    @apply my-1.5;
  }

  .chat-markdown p:first-child {
    @apply mt-0;
  }

  .chat-markdown p:last-child {
    @apply mb-0;
  }

  .chat-markdown ul,
  .chat-markdown ol {
    @apply my-1.5 pl-5;
  }

  .chat-markdown ul {
    @apply list-disc;
  }

  .chat-markdown ol {
    @apply list-decimal;
  }

  .chat-markdown li {
    @apply my-0.5;
  }

  .chat-markdown li > p {
    @apply my-0;
  }

  .chat-markdown strong {
    @apply font-semibold;
  }

  .chat-markdown code {
    @apply rounded bg-gray-200 px-1 py-0.5 text-xs;
  }

  .chat-markdown pre {
    @apply my-1.5 overflow-x-auto rounded bg-gray-800 p-2 text-xs text-gray-100;
  }

  .chat-markdown pre code {
    @apply bg-transparent p-0;
  }

  .chat-markdown a {
    @apply underline;
  }

  .chat-markdown blockquote {
    @apply my-1.5 border-l-2 border-gray-300 pl-2 text-gray-600;
  }
  .navbar-link-active {
    @apply bg-gray-900 text-white;
  }

  .input {
    @apply rounded appearance-none border border-gray-300 w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-sm leading-6 transition-colors duration-200 ease-in-out;
  }

  .input-sm {
    @apply !text-sm !py-1.5 !px-2;
  }

  .hint {
    @apply text-xs text-gray-500;
  }

  .title-1 {
    @apply text-xl font-medium;
  }

  .title-2 {
    @apply text-base font-medium;
  }

  .subtitle {
    @apply text-gray-400 text-xs;
  }

  .label {
    @apply text-sm font-medium text-gray-900 my-2 inline-block;
  }

  .link {
    @apply text-sm font-medium text-indigo-600 hover:text-indigo-500;
  }

  .link-mute {
    @apply link text-gray-500 p-2;
  }

  .button {
    @apply select-none cursor-pointer inline-flex items-center rounded-md justify-center gap-x-1.5 bg-gray-200 px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600;
  }
  .button-sm {
    @apply button !px-2.5 !py-1.5;
  }

  .button-xs {
    @apply button !px-1.5 !py-1 !text-xs;
  }

  .select {
    @apply focus:ring-0 focus-visible:border-gray-200;
  }

  .button-group {
    @apply isolate inline-flex;
  }

  .button-group > * {
    @apply relative focus:z-10;
  }
  .button-group > *:first-child {
    @apply rounded-r-none border-r-0;
  }

  .button-group > *:not(:first-child):not(:last-child) {
    @apply rounded-none border-x-0;
  }

  .button-group > *:not(:first-child) {
    @apply rounded-l-none border-l-0;
  }

  /* Loading state for toggle */
  [data-loading="true"] {
    @apply cursor-not-allowed;
  }

  .button-white {
    @apply button bg-white border border-gray-200 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 transition-all duration-150;
  }

  .button-primary {
    @apply button bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-indigo-600;
  }
  .button-dropbox {
    @apply button bg-[#0061fe] text-white hover:bg-[#0061fe]/90 focus-visible:outline-[#0061fe];
  }

  .button-muted {
    @apply button font-medium shadow-none bg-white text-gray-400 hover:bg-gray-50 focus-visible:outline-gray-600;
  }

  .button-amber {
    @apply button bg-amber-500 text-white hover:bg-amber-600 focus-visible:outline-amber-500;
  }

  .toolbar-action {
    @apply text-xs font-medium flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-colors cursor-pointer select-none whitespace-nowrap text-gray-500 hover:text-gray-800 hover:bg-gray-100;
  }

  .toolbar-action-amber {
    @apply text-xs font-medium flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-colors cursor-pointer select-none whitespace-nowrap text-amber-700 bg-amber-50 hover:text-amber-800 hover:bg-amber-100;
  }

  .link-sidebar {
    @apply select-none cursor-pointer inline-flex items-center rounded-md justify-start gap-x-1.5 px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600;
  }

  .link-sidebar-active {
    @apply link-sidebar bg-gray-200 text-gray-900;
  }

  .dropdown-link {
    @apply flex items-center gap-x-2 px-4 py-3.5 md:py-3 text-sm text-gray-700 hover:bg-gray-100 text-nowrap;
  }

  button[disabled] {
    @apply pointer-events-none cursor-default opacity-50;
  }

  .modal-title {
    @apply text-lg font-medium text-gray-900 mb-8;
  }

  .modal-actions {
    @apply mt-6 flex justify-end gap-x-2;
  }

  .text-danger {
    @apply text-red-500;
  }

  .check_boxes,
  .checkbox,
  input[type="checkbox"] {
    @apply rounded;
  }

  /* Absence avatars */
  .absence-container {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .absence-avatars {
    display: flex;
    align-items: center;
  }

  .absence-avatar {
    height: 2rem;
    width: 2rem;
    border-radius: 9999px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    position: relative;
  }

  .absence-avatar:not(:first-child) {
    margin-left: -0.5rem;
  }

  .absence-avatar-more {
    height: 2rem;
    width: 2rem;
    border-radius: 9999px;
    border: 2px solid white;
    background-color: #6b7280;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: -0.5rem;
  }

  /* TipTap Editor Styles */

  /* placeholder */
  .tiptap p.is-editor-empty:first-child::before {
    @apply text-gray-500 italic pointer-events-none float-left;
    content: attr(data-placeholder);
    height: 0;
  }

  .variable-badge {
    @apply inline-flex items-center px-1 rounded text-xs font-semibold bg-white border border-gray-200;
  }

  /* Bloc deux colonnes éditable */
  .two-column-block {
    @apply flex my-4 border border-gray-200 rounded-lg divide-x divide-gray-200;
  }

  .two-column-block [data-two-column-cell] {
    @apply flex-1 p-2 min-h-[60px];
  }

  .two-column-block [data-two-column-cell] p {
    @apply m-0;
  }

  /* selected node */
  .tiptap .ProseMirror-selectednode {
    @apply border border-indigo-500 ring-indigo-200 ring-2;
  }

  /* variable dans une sélection de texte */
  .variable-badge *::selection {
    @apply bg-blue-200;
  }

  .variable-badge::selection {
    @apply bg-blue-200;
  }

  /* Animation de highlight pour la validation */
  .validation-highlight {
    animation: highlight-pulse 2s ease-out;
  }

  @keyframes highlight-pulse {
    0% {
      @apply bg-orange-50/50;
    }
    50% {
      @apply bg-orange-100/50;
    }
    100% {
      @apply bg-transparent;
    }
  }

  /* Comment Highlights */
  .comment-highlight {
    @apply cursor-pointer transition-all duration-150;
    border-radius: 0.125rem;
  }

  .comment-highlight:hover {
    @apply border-b border-black/30;
    /* box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); */
  }

  /* Commentaire résolu avec souligné au lieu du fond */
  .comment-highlight--resolved {
    @apply bg-transparent;
  }

  .comment-highlight--resolved:hover {
    @apply opacity-80;
  }

  /* Désactiver la sélection de texte standard sur les highlights pour éviter les conflits */
  .comment-highlight *::selection {
    @apply bg-blue-200;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center rounded-md px-1 py-0.5 text-xs font-medium;
  }

  .badge-holiday {
    @apply bg-yellow-100 text-yellow-600;
  }

  /* Pagination styles */
  .pagy-nav {
    @apply flex gap-1;
  }

  .pagy-nav .page {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 transition-colors;
  }

  .pagy-nav .page.active {
    @apply bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-700;
  }

  .pagy-nav .page.disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  .pagy-nav .page.prev,
  .pagy-nav .page.next {
    @apply font-semibold;
  }
}

  /* eventCalendar */

  .ec-event {
    padding: 0 !important;
    border-radius: 4px;
  }
  .ec-times {
    border-top: 1px solid white !important;
  }
  .ec-day {
    overflow: visible !important;
  }
  .ec-time {
    border: 1px solid white !important;
    border-top: 1px solid white !important;
    overflow: visible !important;
  }
  .ec-header {
    border-top: 1px solid white !important;
    border-left: 1px solid white !important;
    overflow: visible !important;
  }
  .ec-day-head {
    display: none;
    border: none;
  }

  .ec-today {
    background: white !important;
  }

  .ec-resource {
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .ec-resource span {
    padding-top: 0 !important;
  }

  .ec-resource .resource-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ec-resource .event-row,
  .ec-resource .absence-row {
    font-size: 0.8125rem;
    color: #6b7280; /* gray-500 */
    font-style: italic;
  }

  .absence-employee-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background-color: #fff7ed; /* orange-50 */
    border: 1px solid #fed7aa; /* orange-200 */
    border-radius: 4px;
    height: 100%;
    overflow: hidden;
  }

  .absence-employee-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
  }

  .absence-employee-label {
    font-size: 0.75rem;
    color: #c2410c; /* orange-700 */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ec-resource, .ec-content .ec-days {
    min-height: 64px !important;
  }
  .ec-content .ec-resource:last-child,
  #planning .ec-timeline .ec-sidebar .ec-resource:last-child,
  #employee-planning .ec-timeline .ec-sidebar .ec-resource:last-child {
    flex-basis: auto !important;
  }

  /* Info rows (absences + events): visually separated from plannable resources
     Note: :has() requires Safari 15.4+, Chrome 105+, Firefox 121+
     For older browsers, these styles won't apply (graceful degradation) */
  .ec-resource:has(.event-row),
  .ec-resource:has(.absence-row),
  .ec-days:has(.event-row),
  .ec-days:has(.absence-row) {
    background-color: #f9fafb !important; /* gray-50 */
  }

  /* Bottom border on the last info row to separate from plannable resources */
  .ec-resource:has(.event-row),
  .ec-days:has(.event-row) {
    border-bottom: 2px solid #e5e7eb !important; /* gray-200 */
  }

  .ec-days:has(.event-row) .ec-preview,
  .ec-days:has(.absence-row) .ec-preview {
    display: none !important;
  }

  .ec-timeline .ec-line,
  .ec-timeline .ec-time {
    flex-grow: 1;
    width: auto !important;
  }
  .ec-timeline .ec-main {
    width: 100%;
  }

  .ec-header {
    padding: 8px 0 !important;
  }

  .ec-timeline .ec-sidebar {
    border: 0px !important;
    border-top: 1px solid white !important;
    border-bottom: 1px solid var(--ec-border-color) !important;
    max-width: 180px !important;
    min-width: 0 !important;
  }
  .ec-all-day,
  .ec-body,
  .ec-day,
  .ec-day-head,
  .ec-days,
  .ec-header {
    border-right: none !important;
  }

  .ec-body, .ec-container {
    overflow: hidden !important;
  }

  .ec-resource-day-view .ec-line:nth-child(2n)::after {
    border-style: dashed !important;
  }

  .ec-toolbar {
    display: none !important;
  }

  /* Hors contrat : cellule vide, pas de fond bleu ni de label */
  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day.no-contract {
    background-color: white !important;
    cursor: default;
  }
  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day.no-contract::after {
    display: none !important;
  }

  /* Repos: cellules vides en vue semaine (ec-content exclut le header) */
  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day:not(:has(.ec-event)):not(.no-contract) {
    background-color: #dbeafe;
    border-right: 1px solid var(--ec-border-color) !important;
    cursor: pointer;
    position: relative;
  }

  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day:not(:has(.ec-event)):not(.no-contract)::after {
    content: 'repos';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #93c5fd;
    font-size: 0.65rem;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day:not(:has(.ec-event)):not(.no-contract):hover {
    background-color: #bfdbfe;
  }

  .is-week-view .ec-content .ec-days:not(.is-info-row) .ec-day:not(:has(.ec-event)):not(.no-contract):hover::after {
    content: '+';
    color: #1d4ed8;
    font-size: 1.2rem;
    font-style: normal;
    letter-spacing: 0;
  }

  /* Confirm dialog */
  .shift-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
  }

  .shift-confirm-dialog {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }

  .shift-confirm-dialog p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #374151;
  }

  .shift-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .shift-confirm-cancel {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-size: 14px;
  }

  .shift-confirm-cancel:hover {
    background: #f9fafb;
  }

  .shift-confirm-ok {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    font-size: 14px;
  }

  .shift-confirm-ok:hover {
    background: #2563eb;
  }

  /* ===== SHIFT DESIGN ===== */

  /* Duration badge (top-right of shift) */
  .shift-duration-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
  }

  /* Break badge (inline on time row) */
  .shift-break-badge {
    font-size: 10px;
    opacity: 0.6;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 0 4px;
    white-space: nowrap;
  }

  /* Lateness badge */
  .shift-lateness-badge {
    font-size: 10px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.25);
    color: inherit;
    border-radius: 3px;
    padding: 0 4px;
    white-space: nowrap;
  }

  /* Lateness actual start time */
  .shift-lateness-time {
    color: #fca5a5;
    font-weight: 600;
    margin: 0 2px;
  }

  /* Break overlay — day view only, absolute positioned within the shift bar */
  .shift-break-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.18);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }

  /* Status dots (bottom-right corner) */
  .shift-status-dots {
    position: absolute;
    bottom: 3px;
    right: 4px;
    display: flex;
    gap: 3px;
  }

  .shift-status-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }

  .shift-status-dot-sent {
    background-color: #3b82f6; /* blue-500 */
  }

  .shift-status-dot-validated {
    background-color: #22c55e; /* green-500 */
  }

  /* Violation badge */
  .shift-violation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }

  .shift-violation-warn {
    background-color: #f59e0b;
    color: #fff;
    padding: 0 4px;
  }

  .shift-violation-meal {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0 3px;
    font-size: 11px;
  }

  /* ===== END SHIFT DESIGN ===== */

  /* ===== COPY/PASTE FEATURE STYLES ===== */

  /* Z-index scale for copy/paste feature */
  :root {
    --z-context-menu: 1000;
    --z-toast: 1001;
    --z-confirm-overlay: 1002;
  }

  /* Context Menu */
  .shift-context-menu {
    position: fixed;
    z-index: var(--z-context-menu);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    min-width: 180px;
    font-size: 14px;
  }

  .shift-context-menu.hidden {
    display: none;
  }

  .context-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
  }

  .context-menu-item:hover {
    background-color: #f3f4f6;
  }

  .context-menu-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .context-menu-item-disabled:hover {
    background-color: transparent;
  }

  .context-menu-item-danger:hover {
    background-color: #fef2f2;
    color: #dc2626;
  }

  .context-menu-icon {
    margin-right: 8px;
    width: 20px;
    text-align: center;
  }

  .context-menu-shortcut {
    margin-left: auto;
    color: #9ca3af;
    font-size: 12px;
  }

  .context-menu-separator {
    height: 1px;
    background-color: #e5e7eb;
    margin: 4px 0;
  }

  /* Copied shift indicator - dashed blue border */
  .ec-event:has(.shift-copied-indicator),
  .ec-event.shift-copied {
    outline: 2px dashed #3b82f6 !important;
    outline-offset: -2px;
  }

  /* Draft shift indicator */
  .ec-event.shift-draft {
    outline: 2px dashed rgba(255, 255, 255, 0.6) !important;
    outline-offset: -2px;
    opacity: 0.75;
  }

  .shift-draft-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Toast notifications */
  .shift-toast {
    position: fixed;
    bottom: 100px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: var(--z-toast);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
  }

  .shift-toast-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .shift-toast-success {
    background-color: #10b981;
  }

  .shift-toast-error {
    background-color: #ef4444;
  }

  /* ===== END COPY/PASTE FEATURE STYLES ===== */
:root {
  --sdp-selected: rgb(239, 68, 68);
  --sdp-selected-invert: #ffffff;
  --sdp-prev-month: #888888;
  --sdp-next-month: #888888;
  --sdp-disabled: #1010104d;
  --sdp-disabled-invert: #ffffff;
  --sdp-background: #ffffff;
  --sdp-border: #dddddd;
  --sdp-shadow: 0deg 0% 50%;
  --sdp-icon: #4a4a4acc;
  --sdp-nav-button-background: #f5f5f5;
  --sdp-nav-button-background-hover: #eeeeee;
  --sdp-days-of-week: #4a4a4a;
}

@keyframes fadeIn {
  from {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  to {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }
}

[data-controller="datepicker"] {
  position: relative;
}

.sdp-cal {
  top: 0;
  z-index: 1;
  position: absolute;
  margin-top: 5px;
  box-sizing: border-box;
  width: fit-content;
  border: 1px solid var(--sdp-border);
  border-radius: 12px;
  padding: 15px;
  background: white;
  box-shadow: 0 1.25em 1.25em -0.9375em hsl(var(--sdp-shadow) / 0.3);
}

.sdp-cal.fade-in {
  animation: fadeIn 0.1s ease-out;
}

.sdp-cal.fade-out {
  animation: fadeOut 0.1s ease-out;
}

@media (prefers-reduced-motion: reduce) {

  .sdp-cal.fade-in,
  .sdp-cal.fade-out {
    animation: none;
  }
}

.sdp-cal button {
  border: none;
  background: none;
  padding: 0;
}

.sdp-nav {
  margin-bottom: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sdp-nav-dropdowns,
.sdp-nav-buttons {
  display: flex;
}

.sdp-nav-dropdowns select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: var(--sdp-background);
  color: currentColor;
  padding: 1px 12px 1px 1px;
  border: 1px solid transparent;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
}

.sdp-nav-dropdowns>div {
  display: flex;
  align-items: center;
}

.sdp-nav-dropdowns>div::after {
  content: " ";
  border: 2px solid var(--sdp-icon);
  border-top: 0;
  border-right: 0;
  width: 0.3em;
  height: 0.3em;
  transform: translateY(-1px) rotate(-45deg);
  right: 10px;
  position: relative;
}

.sdp-nav-buttons button {
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  color: var(--sdp-icon);
  background-color: var(--sdp-nav-button-background);
  cursor: pointer;
}

.sdp-nav-buttons button:hover {
  background-color: var(--sdp-nav-button-background-hover);
}

.sdp-nav-buttons svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  width: 0.75em;
  height: 0.75em;
}

.sdp-goto-today {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.sdp-days-of-week,
.sdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
  gap: 0.3em;
}

.sdp-days-of-week {
  margin-bottom: 0.7em;
}

.sdp-days-of-week div {
  text-transform: uppercase;
  font-size: 0.8em;
  color: var(--sdp-days-of-week);
  font-weight: 600;
}

.sdp-days button {
  width: 3.5ch;
  height: 3.5ch;
  border-radius: 50%;
  background-color: transparent;
}

.sdp-days button:not([aria-disabled]) {
  color: currentColor;
  cursor: pointer;
}

.sdp-days button[aria-disabled] {
  color: var(--sdp-disabled);
}

/* .sdp-days button:not([aria-disabled]).sdp-selected {
  background-color: var(--sdp-selected);
  color: var(--sdp-selected-invert);
}

.sdp-days button[aria-disabled].sdp-selected {
  background-color: var(--sdp-disabled);
  color: var(--sdp-disabled-invert);
}
*/
.sdp-days button:not([aria-disabled]).sdp-today {
  /* border: 1px solid var(--sdp-selected); */
  background: var(--sdp-selected);
  color: white !important;
}

.sdp-days button[aria-disabled].sdp-today {
  /* border: 1px solid var(--sdp-disabled); */
  color: white !important;
}

/* Ideally we would use outline and outline-offset for the :hover and :focus
 * styles.  But Safari's outline doesn't follow the border-radius; it is square.
 * https://bugs.webkit.org/show_bug.cgi?id=231433
 * https://bugs.webkit.org/show_bug.cgi?id=20807
 */
.sdp-days button:hover,
.sdp-days button:focus {
  outline: none;
}

.sdp-days button:not([aria-disabled]):hover,
.sdp-days button:not([aria-disabled]):focus {
  /* border: 2px solid var(--sdp-selected); */
}

.sdp-days button[aria-disabled]:hover,
.sdp-days button[aria-disabled]:focus {
  border: 2px solid var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-selected:hover,
.sdp-days button:not([aria-disabled]).sdp-selected:focus {
  /* border: 2px solid var(--sdp-selected-invert);
  box-shadow: 0 0 0 2px var(--sdp-selected); */
}

.sdp-days button[aria-disabled].sdp-selected:hover,
.sdp-days button[aria-disabled].sdp-selected:focus {
  border: 2px solid var(--sdp-disabled-invert);
  box-shadow: 0 0 0 2px var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-today:hover,
.sdp-days button:not([aria-disabled]).sdp-today:focus {
  /* border: 2px solid var(--sdp-selected); */
}

.sdp-days button[aria-disabled].sdp-today:hover,
.sdp-days button[aria-disabled].sdp-today:focus {
  border: 2px solid var(--sdp-disabled);
}

.sdp-days button:not([aria-disabled]).sdp-prev-month {
  color: var(--sdp-prev-month);
}

.sdp-days button:not([aria-disabled]).sdp-next-month {
  color: var(--sdp-next-month);
}

.sdp-days button[aria-disabled].sdp-prev-month,
.sdp-days button[aria-disabled].sdp-next-month {
  color: var(--sdp-disabled);
}
/* Régie — design tokens & shell for the SuperAdmin::V2 back-office */

:root{
  --regie-bg:#eef0f3; --regie-surface:#ffffff; --regie-surface-2:#f5f6f8; --regie-surface-3:#eceef2;
  --regie-ink:#1b2030; --regie-ink-dim:#565f75; --regie-ink-faint:#8890a1;
  --regie-line:#dadde3; --regie-line-strong:#c3c8d2;
  --regie-accent:#9c6a1a; --regie-accent-ink:#6e4c11; --regie-accent-soft:#f2e3c6; --regie-accent-line:#e0c48f;
  --regie-ok:#2f7a57; --regie-ok-soft:#e0f0e7; --regie-ok-line:#b9dcc7;
  --regie-warn:#a8681c; --regie-warn-soft:#f6e6cf; --regie-warn-line:#e6c891;
  --regie-danger:#a23b3b; --regie-danger-soft:#f6dede; --regie-danger-line:#e3b7b7;
  --regie-info:#35618c; --regie-info-soft:#dde8f2; --regie-info-line:#b7ccdf;
  --regie-violet:#6b4c9a; --regie-violet-soft:#e6ddf2; --regie-violet-line:#c9b8e0;
  --regie-shadow: 0 1px 2px rgba(20,24,34,.06), 0 8px 24px -12px rgba(20,24,34,.12);
  --regie-font-display:"Arial Narrow","Roboto Condensed","Noto Sans Condensed",sans-serif;
  --regie-font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --regie-bg:#12151c; --regie-surface:#1b2028; --regie-surface-2:#212733; --regie-surface-3:#272f3c;
    --regie-ink:#e9e7e0; --regie-ink-dim:#9aa2b4; --regie-ink-faint:#6d7488;
    --regie-line:#323a48; --regie-line-strong:#414b5c;
    --regie-accent:#e3a83f; --regie-accent-ink:#f0c274; --regie-accent-soft:#3a2f18; --regie-accent-line:#5b4620;
    --regie-ok:#6fbf95; --regie-ok-soft:#1c3329; --regie-ok-line:#2d5240;
    --regie-warn:#e0a53f; --regie-warn-soft:#3a2c15; --regie-warn-line:#5c4620;
    --regie-danger:#e08585; --regie-danger-soft:#3a1e1e; --regie-danger-line:#5c3232;
    --regie-info:#7bb0dd; --regie-info-soft:#1c2c3a; --regie-info-line:#2e455c;
    --regie-violet:#b39ddb; --regie-violet-soft:#332a47; --regie-violet-line:#4d3f68;
    --regie-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --regie-bg:#12151c; --regie-surface:#1b2028; --regie-surface-2:#212733; --regie-surface-3:#272f3c;
  --regie-ink:#e9e7e0; --regie-ink-dim:#9aa2b4; --regie-ink-faint:#6d7488;
  --regie-line:#323a48; --regie-line-strong:#414b5c;
  --regie-accent:#e3a83f; --regie-accent-ink:#f0c274; --regie-accent-soft:#3a2f18; --regie-accent-line:#5b4620;
  --regie-ok:#6fbf95; --regie-ok-soft:#1c3329; --regie-ok-line:#2d5240;
  --regie-warn:#e0a53f; --regie-warn-soft:#3a2c15; --regie-warn-line:#5c4620;
  --regie-danger:#e08585; --regie-danger-soft:#3a1e1e; --regie-danger-line:#5c3232;
  --regie-info:#7bb0dd; --regie-info-soft:#1c2c3a; --regie-info-line:#2e455c;
  --regie-violet:#b39ddb; --regie-violet-soft:#332a47; --regie-violet-line:#4d3f68;
}
:root[data-theme="light"]{
  --regie-bg:#eef0f3; --regie-surface:#ffffff; --regie-surface-2:#f5f6f8; --regie-surface-3:#eceef2;
  --regie-ink:#1b2030; --regie-ink-dim:#565f75; --regie-ink-faint:#8890a1;
  --regie-line:#dadde3; --regie-line-strong:#c3c8d2;
  --regie-accent:#9c6a1a; --regie-accent-ink:#6e4c11; --regie-accent-soft:#f2e3c6; --regie-accent-line:#e0c48f;
  --regie-ok:#2f7a57; --regie-ok-soft:#e0f0e7; --regie-ok-line:#b9dcc7;
  --regie-warn:#a8681c; --regie-warn-soft:#f6e6cf; --regie-warn-line:#e6c891;
  --regie-danger:#a23b3b; --regie-danger-soft:#f6dede; --regie-danger-line:#e3b7b7;
  --regie-info:#35618c; --regie-info-soft:#dde8f2; --regie-info-line:#b7ccdf;
  --regie-violet:#6b4c9a; --regie-violet-soft:#e6ddf2; --regie-violet-line:#c9b8e0;
}

body.regie{
  margin:0; background:var(--regie-bg); color:var(--regie-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.regie *{box-sizing:border-box;}
.regie .tabular{font-variant-numeric:tabular-nums; font-family:var(--regie-font-mono);}
.regie a{color:inherit;}
.regie :focus-visible{outline:2px solid var(--regie-accent); outline-offset:2px;}

.regie-shell{display:grid; grid-template-columns:252px 1fr; min-height:100vh;}
.regie-main-col{display:flex; flex-direction:column; min-width:0;}
.regie-main{padding:26px 30px 60px; max-width:1180px;}

/* ---------- rail ---------- */
.regie-rail{background:var(--regie-surface); border-right:1px solid var(--regie-line); padding:18px 0;}
.regie-brand{display:block; padding:0 20px 18px; border-bottom:1px solid var(--regie-line); margin-bottom:14px; text-decoration:none; cursor:pointer;}
.regie-brand:hover .mark{color:var(--regie-accent);}
.regie-brand .mark{
  font-family:var(--regie-font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:20px; color:var(--regie-ink);
}
.regie-brand .mark em{font-style:normal; color:var(--regie-accent);}
.regie-brand .sub{font-size:11.5px; color:var(--regie-ink-faint); margin-top:2px; letter-spacing:.03em;}

.regie-rail-section{padding:0 12px; margin-bottom:16px;}
.regie-rail-label--toggle{
  display:flex; align-items:center; gap:5px; width:100%; background:none; border:none; cursor:pointer;
  padding:0 8px; margin-bottom:6px;
}
.regie-section-caret{font-size:9px; transition:transform .12s ease; color:var(--regie-ink-faint);}
.regie-rail-label--toggle.is-collapsed .regie-section-caret{transform:rotate(-90deg);}
.regie-rail-label{
  font-family:var(--regie-font-display); text-transform:uppercase; letter-spacing:.09em; font-size:11px;
  color:var(--regie-ink-faint); padding:0 8px; margin-bottom:6px; font-weight:700;
}
.regie-rail-link{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:7px 8px; border-radius:6px;
  border:none; background:transparent; color:var(--regie-ink-dim); cursor:pointer; font-size:13.5px;
  text-decoration:none;
}
.regie-rail-link:hover{background:var(--regie-surface-2); color:var(--regie-ink);}
.regie-rail-link.is-active{background:var(--regie-accent-soft); color:var(--regie-accent-ink); font-weight:600;}

.regie-tree-group-row{display:flex; align-items:center; gap:0; cursor:pointer; border-radius:6px;}
.regie-tree-group-row:hover{background:var(--regie-surface-2);}
.regie-tree-group-row:hover .regie-tree-row{color:var(--regie-ink);}
.regie-tree-caret{
  color:var(--regie-ink-faint); font-size:10px;
  width:22px; height:26px; flex:none; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease; pointer-events:none;
}
.regie-tree-caret--sm{width:18px; font-size:9px;}
.regie-tree-caret.is-open{transform:rotate(90deg);}
.regie-tree-children[hidden]{display:none;}
.regie-tree-children{margin-left:15px; padding-left:7px; border-left:1px solid var(--regie-line);}

.regie-tree-row{
  display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:6px; font-size:13.5px;
  color:var(--regie-ink-dim); text-decoration:none;
}
.regie-tree-row:hover{background:var(--regie-surface-2); color:var(--regie-ink);}
.regie-tree-row.regie-tree-row--group{
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--regie-ink);
}
.regie-tree-row.regie-tree-row--lvl2{font-size:13px; font-weight:600; color:var(--regie-ink-dim);}
.regie-tree-row.regie-tree-row--lvl3{font-size:12.5px; font-weight:400; color:var(--regie-ink-faint); padding-left:14px;}

/* ---------- topbar ---------- */
.regie-topbar{
  height:56px; border-bottom:1px solid var(--regie-line); background:var(--regie-surface);
  display:flex; align-items:center; gap:16px; padding:0 22px; position:sticky; top:0; z-index:5;
}
.regie-crumbs{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--regie-ink-faint); flex:1; min-width:0;}
.regie-crumbs b{color:var(--regie-ink); font-weight:600;}
.regie-crumbs .sep{opacity:.5;}
.regie-search{flex:0 1 320px; min-width:160px;}
.regie-search input{
  width:100%; background:var(--regie-surface-2); border:1px solid var(--regie-line); border-radius:7px;
  padding:6px 10px; font-size:13px; color:var(--regie-ink);
}
.regie-search input::placeholder{color:var(--regie-ink-faint);}
.regie-search input:focus{outline:2px solid var(--regie-accent); outline-offset:-1px;}
.regie-who{display:flex; align-items:center; gap:9px; padding-left:14px; border-left:1px solid var(--regie-line);}
.regie-who .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--regie-accent-soft); color:var(--regie-accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.regie-who .name{font-size:12.5px; line-height:1.25;}
.regie-who .role{font-size:10.5px; color:var(--regie-ink-faint);}

/* ---------- page ---------- */
.regie-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px 20px; margin-bottom:20px; flex-wrap:wrap;}
.regie-page-head > div:first-child{flex:1 1 280px; min-width:0;}
.regie-back-link{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--regie-ink-faint); text-decoration:none; margin-bottom:6px;}
.regie-back-link:hover{color:var(--regie-ink-dim); text-decoration:underline;}
.regie-page-title{font-family:var(--regie-font-display); font-weight:700; letter-spacing:.01em; font-size:26px; margin:0 0 4px; text-wrap:balance;}
.regie-page-sub{color:var(--regie-ink-dim); font-size:13.5px; margin:0;}
.regie-head-actions{display:flex; gap:8px; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end;}

.regie-btn{
  display:inline-flex; align-items:center; gap:6px; border-radius:7px; padding:7px 13px; font-size:13px;
  font-weight:600; border:1px solid var(--regie-line-strong); background:var(--regie-surface); color:var(--regie-ink);
  cursor:pointer; text-decoration:none;
}
.regie-btn:hover{background:var(--regie-surface-2);}
.regie-btn--primary{background:var(--regie-accent); border-color:var(--regie-accent); color:#1b140a;}
.regie-btn--primary:hover{filter:brightness(1.06);}
.regie-btn--danger{color:var(--regie-danger); border-color:var(--regie-danger-line); background:var(--regie-danger-soft);}
.regie-btn--ghost{border-color:transparent; background:transparent; color:var(--regie-ink-dim);}
.regie-btn--sm{padding:5px 10px; font-size:12px;}
.regie-btn[disabled]{opacity:.6; cursor:not-allowed;}

.regie-dropdown{position:relative; display:inline-block;}
.regie-dropdown > summary{list-style:none; cursor:pointer;}
.regie-dropdown > summary::-webkit-details-marker{display:none;}
.regie-dropdown > summary::after{content:" ▾"; font-size:11px;}
.regie-dropdown-menu{
  position:absolute; top:calc(100% + 4px); right:0; z-index:20; min-width:220px;
  background:var(--regie-surface); border:1px solid var(--regie-line); border-radius:8px; box-shadow:var(--regie-shadow);
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.regie-dropdown-item{
  display:block; padding:7px 10px; border-radius:6px; font-size:13px; color:var(--regie-ink); text-decoration:none;
  white-space:nowrap;
}
.regie-dropdown-item:hover{background:var(--regie-surface-3);}
.regie-dropdown-item-label{display:block; font-size:10.5px; color:var(--regie-ink-faint); text-transform:uppercase; letter-spacing:.04em;}

.regie-pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px;
  font-weight:600; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap;
}
.regie-pill--ok{background:var(--regie-ok-soft); color:var(--regie-ok); border-color:var(--regie-ok-line);}
.regie-pill--warn{background:var(--regie-warn-soft); color:var(--regie-warn); border-color:var(--regie-warn-line);}
.regie-pill--danger{background:var(--regie-danger-soft); color:var(--regie-danger); border-color:var(--regie-danger-line);}
.regie-pill--info{background:var(--regie-info-soft); color:var(--regie-info); border-color:var(--regie-info-line);}
.regie-pill--violet{background:var(--regie-violet-soft); color:var(--regie-violet); border-color:var(--regie-violet-line);}
.regie-pill--neutral{background:var(--regie-surface-3); color:var(--regie-ink-dim); border-color:var(--regie-line);}
.regie-pill .dot{width:5px; height:5px; border-radius:50%; background:currentColor;}

.regie-tag{
  display:inline-flex; padding:3px 8px; border-radius:5px; font-size:11px; background:var(--regie-surface-3);
  color:var(--regie-ink-dim); border:1px solid var(--regie-line); font-family:var(--regie-font-mono);
}
.regie-tags{display:flex; flex-wrap:wrap; gap:5px;}

.regie-feature-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.regie-feature-chip{
  position:relative; display:flex; align-items:center; gap:7px; padding:7px 12px 7px 8px; border-radius:99px;
  border:1px solid var(--regie-line-strong); background:var(--regie-surface); font-size:12.5px; color:var(--regie-ink-dim);
  cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.regie-feature-chip:hover{background:var(--regie-surface-2);}
.regie-feature-chip input{position:absolute; opacity:0; width:0; height:0; pointer-events:none;}
.regie-feature-chip::before{
  content:""; width:15px; height:15px; min-width:15px; border-radius:4px; border:1px solid var(--regie-line-strong);
  background:var(--regie-surface-2); display:flex; align-items:center; justify-content:center;
}
.regie-feature-chip:has(input:checked){
  background:var(--regie-accent-soft); border-color:var(--regie-accent-line); color:var(--regie-accent-ink); font-weight:600;
}
.regie-feature-chip:has(input:checked)::before{
  content:"✓"; background:var(--regie-accent); border-color:var(--regie-accent); color:#1b140a; font-size:10px; font-weight:700;
}

.regie-grid-2{display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start;}

.regie-card{background:var(--regie-surface); border:1px solid var(--regie-line); border-radius:10px; box-shadow:var(--regie-shadow); margin-bottom:18px;}
.regie-card-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 16px; border-bottom:1px solid var(--regie-line); flex-wrap:wrap;}
.regie-card-head h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--regie-font-display); font-weight:700; margin:0; color:var(--regie-ink-dim);}
.regie-card-body{padding:14px 16px;}

.regie-attr{display:grid; grid-template-columns:190px 1fr; gap:9px 16px; font-size:13.5px; margin:0;}
.regie-attr dt{color:var(--regie-ink-faint);}
.regie-attr dd{margin:0;}

.regie-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.regie-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--regie-ink-faint);
  font-weight:700; padding:9px 16px; border-bottom:1px solid var(--regie-line); background:var(--regie-surface-2);
}
.regie-table tbody td{padding:10px 16px; border-bottom:1px solid var(--regie-line); vertical-align:middle;}
.regie-table tbody tr:last-child td{border-bottom:none;}
.regie-table tbody tr:hover{background:var(--regie-surface-2);}
.regie-table td.num, .regie-table th.num{text-align:right; font-family:var(--regie-font-mono); font-variant-numeric:tabular-nums;}

.regie-param-list{display:flex; flex-wrap:wrap; gap:6px 20px;}
.regie-param{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;}
.regie-param-label{color:var(--regie-ink-faint); font-size:12px;}
.regie-param-value{font-weight:600;}
.regie-table-wrap{overflow-x:auto;}
.regie-row-link{font-weight:600; text-decoration:none;}
.regie-row-link:hover{text-decoration:underline;}
.regie-muted{color:var(--regie-ink-faint);}
.regie-empty{color:var(--regie-ink-faint); font-size:13px; padding:4px 0;}

.regie-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:24px;}
.regie-stat{
  background:var(--regie-surface); border:1px solid var(--regie-line); border-radius:10px; padding:14px 16px;
  box-shadow:var(--regie-shadow); transition:border-color .12s ease, transform .12s ease;
}
.regie-stat .label{
  display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--regie-ink-faint); font-weight:700; margin-bottom:6px;
}
.regie-stat .value{font-family:var(--regie-font-mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums;}
.regie-stat .value a{text-decoration:none;}
.regie-stat .value a:hover{text-decoration:underline;}
.regie-stat .foot{font-size:11.5px; color:var(--regie-ink-faint); margin-top:3px;}
.regie-stat:has(a):hover{border-color:var(--regie-line-strong); transform:translateY(-1px);}
.regie-stat--live .value{color:var(--regie-ok);}
.regie-live-dot{
  width:7px; height:7px; min-width:7px; border-radius:50%; background:var(--regie-ok);
  box-shadow:0 0 0 3px var(--regie-ok-soft);
}

.regie-tabpanel-intro{margin:0 0 18px; font-size:13px; color:var(--regie-ink-dim);}
.regie-subsection-head{margin:26px 0 14px; padding-top:20px; border-top:1px solid var(--regie-line);}
.regie-subsection-head h3{font-family:var(--regie-font-display); font-weight:700; font-size:14px; margin:0; color:var(--regie-ink);}
.regie-subsection-head p{margin:2px 0 0; font-size:12.5px; color:var(--regie-ink-faint);}

.regie-kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.regie-kanban-col{background:var(--regie-surface); border:1px solid var(--regie-line); border-radius:10px; padding:12px; min-width:0;}
.regie-kanban-col-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.regie-kanban-col-head h4{font-family:var(--regie-font-display); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin:0; color:var(--regie-ink-dim);}
.regie-kanban-count{font-family:var(--regie-font-mono); font-size:11.5px; color:var(--regie-ink-faint);}
.regie-kanban-card{
  display:block; padding:8px 10px; border-radius:7px; border:1px solid var(--regie-line); background:var(--regie-surface-2);
  margin-bottom:8px; font-size:12.5px; color:var(--regie-ink); text-decoration:none;
}
.regie-kanban-card:last-child{margin-bottom:0;}
.regie-kanban-card:hover{border-color:var(--regie-line-strong);}
.regie-kanban-card--staging{border-color:var(--regie-violet-line); background:var(--regie-violet-soft);}
.regie-kanban-card-meta{margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}

.regie-status-ok{
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:8px; font-size:13px;
  margin-bottom:18px; border:1px solid var(--regie-ok-line); background:var(--regie-ok-soft); color:var(--regie-ok);
}

.regie-chart-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--regie-ink-faint);}
.regie-chart-legend span{display:inline-flex; align-items:center; gap:6px;}
.regie-chart-legend .swatch{width:10px; height:10px; border-radius:2px; background:var(--regie-accent); display:inline-block;}
.regie-chart-legend .swatch.is-approx{opacity:.4;}

.regie-visits-chart{width:100%; height:120px; display:block;}
.regie-visits-chart rect{fill:var(--regie-accent); opacity:.85;}
.regie-visits-chart rect:hover{opacity:1;}
.regie-visits-chart rect.is-approx{fill:var(--regie-accent); opacity:.35;}
.regie-visits-chart rect.is-approx:hover{opacity:.55;}
.regie-visits-chart-labels{position:relative; height:16px; margin-top:4px;}
.regie-visits-chart-label{position:absolute; transform:translateX(-50%); font-size:.7rem; color:var(--regie-ink-faint); white-space:nowrap;}

.regie-filterbar{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.regie-scopes{display:flex; background:var(--regie-surface-2); border:1px solid var(--regie-line); border-radius:8px; padding:2px;}
.regie-scope-btn{
  border:none; background:none; padding:6px 12px; border-radius:6px; font-size:12.5px; font-weight:600;
  color:var(--regie-ink-dim); cursor:pointer; text-decoration:none; display:inline-block;
}
.regie-scope-btn.is-active{background:var(--regie-surface); color:var(--regie-ink); box-shadow:var(--regie-shadow);}

.regie-tabbar{display:flex; gap:2px; border-bottom:1px solid var(--regie-line); margin-bottom:18px;}
.regie-tab{
  border:none; background:none; padding:10px 4px; margin-right:22px; font-size:13.5px; font-weight:600;
  color:var(--regie-ink-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.regie-tab[aria-selected="true"]{color:var(--regie-accent-ink); border-bottom-color:var(--regie-accent);}
.regie-tabpanel[hidden]{display:none;}

.regie-form-row{display:flex; gap:10px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap;}
.regie-field{display:flex; flex-direction:column; gap:4px;}
.regie-field label{font-size:11.5px; color:var(--regie-ink-faint); font-weight:600;}
.regie-field select, .regie-field input{
  border:1px solid var(--regie-line-strong); border-radius:7px; padding:7px 10px; background:var(--regie-surface); min-width:220px;
}

.regie-switch-row{display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 0;}
.regie-switch{position:relative; width:36px; height:20px; flex:none; display:inline-block;}
.regie-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.regie-switch .track{position:absolute; inset:0; background:var(--regie-surface-3); border:1px solid var(--regie-line-strong); border-radius:99px; transition:.15s;}
.regie-switch .knob{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--regie-ink-faint); transition:.15s;}
.regie-switch input:checked + .track{background:var(--regie-accent-soft); border-color:var(--regie-accent-line);}
.regie-switch input:checked + .track .knob{transform:translateX(16px); background:var(--regie-accent);}

.regie-diff-old{color:var(--regie-ink-faint); font-family:var(--regie-font-mono); font-size:12px;}
.regie-diff-new{color:var(--regie-accent-ink); font-weight:700; font-family:var(--regie-font-mono); font-size:12.5px;}

.regie-bar{height:6px; border-radius:99px; background:var(--regie-surface-3); overflow:hidden; width:90px; display:inline-block;}
.regie-bar > span{display:block; height:100%; background:var(--regie-accent);}

.regie-alert{
  display:flex; gap:9px; align-items:flex-start; padding:10px 14px; border-radius:8px; font-size:13px;
  margin-bottom:12px; border:1px solid var(--regie-warn-line); background:var(--regie-warn-soft); color:var(--regie-warn);
}
.regie-alert--danger{border-color:var(--regie-danger-line); background:var(--regie-danger-soft); color:var(--regie-danger);}
.regie-hint{font-size:12px; color:var(--regie-ink-faint); margin-top:4px;}

/* ---------- batch selection bar ---------- */
.regie-batchbar{
  position:sticky; bottom:16px; margin:16px 0 0; padding:10px 16px; border-radius:10px;
  background:var(--regie-ink); color:var(--regie-bg); box-shadow:var(--regie-shadow);
  display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.regie-batchbar.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.regie-batchbar .count{font-weight:700; font-family:var(--regie-font-mono);}
.regie-batchbar .regie-btn{border-color:transparent;}

.regie-main nav.pagy{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
.regie-main nav.pagy a{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px;
  padding:0 8px; border-radius:6px; font-size:12.5px; font-family:var(--regie-font-mono);
  color:var(--regie-ink-dim); text-decoration:none; border:1px solid transparent;
}
.regie-main nav.pagy a[href]:hover{background:var(--regie-surface-2); color:var(--regie-ink);}
.regie-main nav.pagy a.current{background:var(--regie-accent-soft); color:var(--regie-accent-ink); font-weight:700;}
.regie-main nav.pagy a[aria-disabled]{color:var(--regie-ink-faint); cursor:default;}

/* ---------- chat inbox ---------- */
.regie-chat-inbox{
  display:flex; height:calc(100vh - 170px); min-height:480px; border:1px solid var(--regie-line);
  border-radius:10px; overflow:hidden; background:var(--regie-surface);
}
.regie-chat-sidebar{width:270px; flex-shrink:0; border-right:1px solid var(--regie-line); overflow-y:auto; background:var(--regie-surface-2);}
.regie-chat-sidebar-label{
  display:flex; align-items:center; gap:5px; width:100%; font:inherit; text-align:left; background:none; border:none; cursor:pointer;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--regie-ink-faint);
  padding:12px 12px 4px;
}
.regie-chat-sidebar-label:not(:first-child){border-top:1px solid var(--regie-line); margin-top:6px; padding-top:12px;}
.regie-chat-sidebar-label .regie-section-caret{transition:transform .12s ease;}
.regie-chat-sidebar-label.is-collapsed .regie-section-caret{transform:rotate(-90deg);}
.regie-chat-row{
  display:block; padding:9px 12px; text-decoration:none; color:inherit; border-bottom:1px solid var(--regie-line);
}
.regie-chat-row:hover{background:var(--regie-surface-3);}
.regie-chat-row.is-active{background:var(--regie-accent-soft);}
.regie-chat-row-head{display:flex; align-items:center; gap:6px;}
.regie-chat-dot{width:7px; height:7px; min-width:7px; border-radius:50%; background:var(--regie-ok);}
.regie-chat-dot--urgent{background:var(--regie-danger);}
.regie-chat-dot--closed{background:var(--regie-ink-faint);}
.regie-chat-row-name{font-size:12.5px; font-weight:700;}
.regie-chat-row-cinema{font-size:11px; color:var(--regie-ink-faint); margin-top:2px;}
.regie-chat-row-snippet{
  font-size:12px; color:var(--regie-ink-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.regie-chat-row-time{font-size:10px; color:var(--regie-ink-faint); margin-top:2px; font-family:var(--regie-font-mono);}

.regie-chat-thread{flex:1; min-width:0; display:flex; flex-direction:column;}
.regie-chat-messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;}

.regie-chat-message{display:flex; gap:8px; max-width:76%; align-self:flex-start;}
.regie-chat-message--staff, .regie-chat-message--agent{align-self:flex-end; flex-direction:row-reverse;}

.regie-chat-avatar{
  width:26px; height:26px; min-width:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; margin-top:2px;
}
.regie-chat-avatar--client{background:var(--regie-surface-3); color:var(--regie-ink-dim); border:1px solid var(--regie-line);}
.regie-chat-avatar--staff{background:var(--regie-accent); color:#1b140a;}
.regie-chat-avatar--agent{background:var(--regie-violet); color:#fff; font-size:13px;}

.regie-chat-message-bubble{padding:9px 12px; border-radius:11px; font-size:13px; min-width:0;}
.regie-chat-message--client .regie-chat-message-bubble{background:var(--regie-surface-2); border:1px solid var(--regie-line); border-top-left-radius:3px;}
.regie-chat-message--staff .regie-chat-message-bubble{background:var(--regie-accent-soft); border:1px solid var(--regie-accent-line); border-top-right-radius:3px;}
.regie-chat-message--agent .regie-chat-message-bubble{background:var(--regie-violet-soft); border:1px solid var(--regie-violet-line); border-top-right-radius:3px;}

.regie-chat-message-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11px; color:var(--regie-ink-faint); margin-bottom:2px;}
.regie-chat-message--staff .regie-chat-message-head, .regie-chat-message--agent .regie-chat-message-head{flex-direction:row-reverse;}
.regie-chat-message-head strong{color:var(--regie-ink); font-weight:700; font-size:12px;}
.regie-chat-message-meta{display:flex; align-items:center; gap:6px;}
.regie-chat-message-time{font-family:var(--regie-font-mono); white-space:nowrap;}
.regie-chat-message-meta form{display:contents;}
.regie-chat-flag{
  background:none; border:1px solid var(--regie-line); border-radius:99px; padding:1px 6px; font-size:11px;
  line-height:1.5; cursor:pointer; color:var(--regie-ink-faint); font-family:inherit;
}
.regie-chat-flag:hover{background:var(--regie-surface-3); color:var(--regie-ink-dim);}
.regie-chat-flag.is-flagged{background:var(--regie-danger-soft); border-color:var(--regie-danger-line); color:var(--regie-danger);}

.regie-chat-message-body{white-space:pre-line;}
.regie-chat-message-body.chat-markdown{white-space:normal;}
.regie-chat-message-body p{margin:0 0 6px;}
.regie-chat-message-body p:last-child{margin-bottom:0;}
.regie-chat-message-body ul, .regie-chat-message-body ol{margin:0 0 6px; padding-left:18px;}
.regie-chat-message-body li{margin-bottom:2px;}
.regie-chat-message-body a{color:inherit; text-decoration:underline; text-decoration-color:var(--regie-line-strong);}
.regie-chat-message-body code{
  background:var(--regie-surface-3); border-radius:4px; padding:1px 5px; font-family:var(--regie-font-mono); font-size:12px;
}
.regie-chat-message-body pre{
  background:var(--regie-surface-3); border-radius:6px; padding:8px 10px; overflow-x:auto; margin:0 0 6px;
}
.regie-chat-message-body pre code{background:none; padding:0;}
.regie-chat-message-body blockquote{
  margin:0 0 6px; padding-left:10px; border-left:2px solid var(--regie-line-strong); color:var(--regie-ink-dim);
}

.regie-chat-attachments{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
.regie-chat-message--staff .regie-chat-attachments, .regie-chat-message--agent .regie-chat-attachments{justify-content:flex-end;}
.regie-chat-attachments img{max-width:120px; max-height:120px; border-radius:6px; border:1px solid var(--regie-line);}

.regie-chat-trace{margin-top:8px; font-size:11px;}
.regie-chat-trace summary{
  cursor:pointer; color:var(--regie-ink-faint); list-style:none; display:flex; align-items:center; gap:4px;
}
.regie-chat-trace summary::-webkit-details-marker{display:none;}
.regie-chat-trace summary::before{content:"🔧"; font-size:10px;}
.regie-chat-trace summary:hover{color:var(--regie-ink-dim);}
.regie-chat-trace-call{
  margin-top:6px; padding:8px; border-radius:6px; background:var(--regie-surface); border:1px solid var(--regie-line);
}
.regie-chat-trace-call + .regie-chat-trace-call{margin-top:6px;}
.regie-chat-trace-name{font-weight:700; font-family:var(--regie-font-mono); color:var(--regie-ink-dim); margin-bottom:4px;}
.regie-chat-trace-call pre{
  margin:0 0 4px; white-space:pre-wrap; word-break:break-word; font-size:10.5px; font-family:var(--regie-font-mono);
  color:var(--regie-ink-faint);
}
.regie-chat-trace-call pre:last-child{margin-bottom:0;}

.regie-chat-directive{
  align-self:center; max-width:92%; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 12px; border-radius:8px; background:var(--regie-violet-soft); border:1px dashed var(--regie-violet-line);
  font-size:11.5px; color:var(--regie-ink-dim);
}
.regie-chat-directive strong{color:var(--regie-ink);}
.regie-chat-directive-icon{font-size:11px;}
.regie-chat-directive-text{font-style:italic;}
.regie-chat-directive-time{margin-left:auto; font-family:var(--regie-font-mono); color:var(--regie-ink-faint);}

.regie-chat-quote{
  border-left:2px solid var(--regie-line-strong); padding:4px 8px; margin-bottom:6px; font-size:11.5px;
  color:var(--regie-ink-dim); background:var(--regie-surface); border-radius:0 6px 6px 0;
}
.regie-chat-quote-author{font-weight:700; margin-right:6px;}
.regie-chat-quote-btn{
  border:none; background:none; color:var(--regie-ink-faint); cursor:pointer; font-size:12px;
  padding:0 2px; line-height:1;
}
.regie-chat-quote-btn:hover{color:var(--regie-ink-dim);}
.regie-chat-read-receipt{font-size:10px; color:var(--regie-ok); white-space:nowrap;}
.regie-chat-reply-quote[hidden]{display:none;}
.regie-chat-reply-quote{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-left:2px solid var(--regie-accent); background:var(--regie-accent-soft);
  border-radius:0 6px 6px 0; padding:6px 10px; margin-bottom:8px; font-size:12px;
}
.regie-chat-reply-quote-author{font-weight:700; margin-right:6px;}
.regie-chat-reply-quote-text{color:var(--regie-ink-dim);}
.regie-chat-reply-quote button{border:none; background:none; color:var(--regie-ink-faint); cursor:pointer; font-size:16px; line-height:1;}
.regie-chat-reply-quote button:hover{color:var(--regie-ink-dim);}
.regie-chat-reply{border-top:1px solid var(--regie-line); padding:12px; background:var(--regie-surface);}
.regie-chat-reply textarea{
  width:100%; border:1px solid var(--regie-line-strong); border-radius:7px; padding:8px 10px; background:var(--regie-surface);
  font:inherit; resize:vertical;
}
.regie-chat-reply-actions{margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.regie-chat-reply input[type="file"]{color:var(--regie-ink-faint); font-size:12px; max-width:60%;}
.regie-chat-reply input[type="file"]::file-selector-button{
  border:1px solid var(--regie-line-strong); border-radius:7px; padding:6px 10px; margin-right:8px;
  background:var(--regie-surface-2); color:var(--regie-ink); font:inherit; font-size:12px; cursor:pointer;
}
.regie-chat-reply input[type="file"]::file-selector-button:hover{background:var(--regie-surface-3);}

.regie-chat-info{width:290px; flex-shrink:0; border-left:1px solid var(--regie-line); overflow-y:auto; overflow-x:hidden; padding:16px; background:var(--regie-surface-2);}
.regie-chat-info .regie-attr{grid-template-columns:1fr; gap:0;}
.regie-chat-info .regie-attr dt{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-top:12px;
}
.regie-chat-info .regie-attr dt:first-child{margin-top:0;}
.regie-chat-info .regie-attr dd{margin:2px 0 0; word-break:break-word;}
.regie-chat-info-section{border-top:1px solid var(--regie-line); margin-top:16px; padding-top:16px;}
.regie-chat-info-section:first-child{border-top:none; margin-top:0; padding-top:0;}
.regie-chat-info-section-label{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--regie-ink-faint);
  margin-bottom:10px;
}
.regie-chat-info-section--directive{
  margin:-16px -16px 16px; padding:16px; border-top:none; background:var(--regie-violet-soft); border-bottom:1px solid var(--regie-violet-line);
}
.regie-chat-info-section--directive .regie-chat-info-section-label{color:var(--regie-violet);}
.regie-chat-info-section--directive textarea{
  width:100%; border:1px solid var(--regie-violet-line); border-radius:7px; padding:8px 10px; background:var(--regie-surface);
  font:inherit; resize:vertical;
}

/* ---------- article markdown (read view + preview) ---------- */
.article-markdown{font-size:14px; line-height:1.6; color:var(--regie-ink-dim);}
.article-markdown h1, .article-markdown h2, .article-markdown h3, .article-markdown h4{
  color:var(--regie-ink); font-family:var(--regie-font-display); font-weight:700; margin:20px 0 8px;
}
.article-markdown h1:first-child, .article-markdown h2:first-child, .article-markdown h3:first-child{margin-top:0;}
.article-markdown p{margin:0 0 12px;}
.article-markdown ul, .article-markdown ol{margin:0 0 12px; padding-left:22px;}
.article-markdown li{margin-bottom:4px;}
.article-markdown a{color:var(--regie-accent-ink); text-decoration:underline;}
.article-markdown code{
  background:var(--regie-surface-3); border-radius:4px; padding:1px 5px; font-family:var(--regie-font-mono); font-size:12.5px;
}
.article-markdown pre{background:var(--regie-surface-3); border-radius:6px; padding:10px 12px; overflow-x:auto; margin:0 0 12px;}
.article-markdown pre code{background:none; padding:0;}
.article-markdown blockquote{
  margin:0 0 12px; padding-left:12px; border-left:2px solid var(--regie-line-strong); color:var(--regie-ink-faint);
}
.article-markdown table{border-collapse:collapse; margin:0 0 12px; width:100%; font-size:13px;}
.article-markdown th, .article-markdown td{border:1px solid var(--regie-line); padding:6px 10px; text-align:left;}
.article-markdown th{background:var(--regie-surface-2); font-weight:700;}

/* ---------- markdown editor (toolbar + textarea + preview) ---------- */
.regie-md-editor{border:1px solid var(--regie-line-strong); border-radius:8px; overflow:hidden;}
.regie-md-toolbar{
  display:flex; align-items:center; gap:4px; padding:6px; border-bottom:1px solid var(--regie-line); background:var(--regie-surface-2);
  flex-wrap:wrap;
}
.regie-md-toolbar button{
  border:1px solid transparent; background:none; border-radius:6px; padding:5px 9px; font-size:12.5px; font-weight:600;
  color:var(--regie-ink-dim); cursor:pointer; min-width:28px;
}
.regie-md-toolbar button:hover{background:var(--regie-surface-3); color:var(--regie-ink);}
.regie-md-toolbar-spacer{flex:1;}
.regie-md-toolbar .regie-md-preview-toggle{border-color:var(--regie-line-strong);}
.regie-md-editor textarea{
  display:block; width:100%; border:none; border-radius:0; padding:12px; background:var(--regie-surface); color:var(--regie-ink);
  font:13px/1.6 var(--regie-font-mono); resize:vertical; min-height:360px;
}
.regie-md-editor textarea:focus{outline:none;}
.regie-md-preview{padding:14px 16px; min-height:360px; background:var(--regie-surface);}

@media (max-width:880px){
  .regie-shell{grid-template-columns:1fr;}
  .regie-rail{display:none;}
  .regie-grid-2{grid-template-columns:1fr;}
  .regie-stats{grid-template-columns:repeat(2,1fr);}
  .regie-kanban{grid-template-columns:1fr;}
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Public help-center pages (app/views/articles) always render on a plain
   white background, unlike the SuperAdmin::V2 shell that .article-markdown
   (super_admin_v2.css) is themed for - so its colors must stay fixed here
   instead of following the shell's light/dark --regie-* tokens, which flip
   to light-on-dark values under prefers-color-scheme: dark and become
   unreadable against this always-white page. */
.article-markdown.article-markdown--public{color:#565f75;}
.article-markdown.article-markdown--public h1,
.article-markdown.article-markdown--public h2,
.article-markdown.article-markdown--public h3,
.article-markdown.article-markdown--public h4{color:#1b2030;}
.article-markdown.article-markdown--public a{color:#6e4c11;}
.article-markdown.article-markdown--public code{background:#eceef2;}
.article-markdown.article-markdown--public pre{background:#eceef2;}
.article-markdown.article-markdown--public blockquote{color:#8890a1; border-left-color:#c3c8d2;}
.article-markdown.article-markdown--public th,
.article-markdown.article-markdown--public td{border-color:#dadde3;}
.article-markdown.article-markdown--public th{background:#f5f6f8;}