/* Shared surface lifecycle. Application CSS owns placement, not motion. */
:root {
  --ui-panel-duration:620ms;
  --ui-subview-duration:260ms;
  --ui-dialog-duration:180ms;
  --ui-panel-easing:cubic-bezier(0.2,0.85,0.22,1);
  --ui-feedback-success-duration:4000ms;
  --ui-feedback-fade-duration:200ms;
}
@media (prefers-reduced-motion:reduce) {
  :root { --ui-panel-duration:0ms; --ui-subview-duration:0ms; --ui-dialog-duration:0ms; --ui-feedback-fade-duration:0ms; }
}
.system-standard-dialog::backdrop,
.system-standard-dialog:not(dialog)::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(246,247,244,.34);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:ui-dialog-in var(--ui-dialog-duration) ease-out both;
}
.system-standard-dialog.is-closing::backdrop,
.system-standard-dialog.is-closing:not(dialog)::before { animation:ui-dialog-out var(--ui-dialog-duration) ease-out both; }
.system-standard-dialog:not(dialog) { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:25px; }
dialog.system-standard-dialog,
.system-standard-dialog .confirm-card {
  box-sizing:border-box; width:min(var(--ui-dialog-width,250px),calc(100vw - 50px));
  max-height:calc(100dvh - 50px); overflow:auto;
  padding:25px; border:0; border-radius:3px;
  background:#fff; color:#000001;
  box-shadow:5px 5px 5px rgba(0,0,0,.5);
  display:grid; gap:25px; overflow-wrap:anywhere;
  position:relative; z-index:1;
  animation:ui-dialog-in var(--ui-dialog-duration) ease-out both;
}
dialog.system-standard-dialog.is-closing,
.system-standard-dialog.is-closing .confirm-card { animation:ui-dialog-out var(--ui-dialog-duration) ease-out both; }
.system-standard-dialog.hidden { display:none !important; }
.system-standard-dialog .hidden { display:none !important; }
.system-standard-dialog :is(.confirm-title,.confirm-message) { margin:0; font:400 12px/1.45 Raleway,sans-serif; color:#000001; }
.system-standard-dialog .confirm-title { font-weight:600; }
.system-standard-dialog .confirm-details { display:grid; gap:25px; min-width:0; }
.system-standard-dialog .confirm-detail-row { display:grid; min-width:0; }
.system-standard-dialog :is(.confirm-detail-label,.confirm-detail-value) { font:400 12px/1.45 Raleway,sans-serif; overflow-wrap:anywhere; min-width:0; }
.system-standard-dialog .confirm-detail-label { font-weight:600; }
.system-standard-dialog .confirm-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:25px; }
.system-standard-dialog-action-slot { display:flex; align-items:center; justify-content:flex-end; flex:none; width:var(--ui-dialog-action-width); max-width:100%; }
.system-standard-dialog-action-slot[hidden] { display:none !important; }
.system-standard-dialog-action-slot>button { max-width:100% !important; }
@keyframes ui-dialog-in { from { opacity:0; } to { opacity:1; } }
@keyframes ui-dialog-out { from { opacity:1; } to { opacity:0; } }
.system-standard-feedback { font:400 12px/1.45 Raleway,sans-serif; color:#000001; overflow-wrap:anywhere; }
.system-standard-feedback[data-feedback="error"] { color:var(--action-negative,#b73535); }
.system-standard-feedback[data-feedback="success"] { color:var(--action-positive,#2a922a); }
.system-standard-feedback-banner:not(:empty) { padding:15px 25px; background:#fff; border-left:3px solid #e1c16e; }
.system-standard-feedback-banner[data-feedback="error"] { border-color:var(--action-negative,#b73535); }
.system-standard-feedback-banner[data-feedback="success"] { border-color:var(--action-positive,#2a922a); }
.system-standard-feedback.is-fading { opacity:0; transition:opacity var(--ui-feedback-fade-duration) ease; }
.system-standard-feedback>button { margin-left:25px; }

    /* Shared directional fade for every standard content-box scroll owner. */
    .system-standard-scroll-fade {
      --crm-content-scroll-fade-depth: 75px;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .system-standard-scroll-fade.has-scroll-below:not(.has-scroll-above) {
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 75px), rgba(0, 0, 0, 0.45) calc(100% - 17px), transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 75px), rgba(0, 0, 0, 0.45) calc(100% - 17px), transparent 100%);
    }

    .system-standard-scroll-fade.has-scroll-above:not(.has-scroll-below) {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.45) 17px, #000 75px, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.45) 17px, #000 75px, #000 100%);
    }

    .system-standard-scroll-fade.has-scroll-above.has-scroll-below {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.45) 17px, #000 75px, #000 calc(100% - 75px), rgba(0, 0, 0, 0.45) calc(100% - 17px), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.45) 17px, #000 75px, #000 calc(100% - 75px), rgba(0, 0, 0, 0.45) calc(100% - 17px), transparent 100%);
    }

    .system-standard-scroll-fade::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .system-standard-scroll-fade::-webkit-scrollbar-track,
    .system-standard-scroll-fade::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: transparent;
    }

    .system-standard-scroll-fade.is-scrolling {
      scrollbar-color: #203220 rgba(32, 50, 32, 0.12);
    }

    .system-standard-scroll-fade.is-scrolling::-webkit-scrollbar-track {
      background: rgba(32, 50, 32, 0.12);
    }

    .system-standard-scroll-fade.is-scrolling::-webkit-scrollbar-thumb {
      background: #203220;
    }