:root {
  --ao-backdrop: rgb(24 24 27 / 94%);
  --ao-card-bg: #0f0f10;
  --ao-card-bd: #262626;
  --ao-text: #fff;
  --ao-muted: #bdbdbd;
  --ao-btn-bd: #2b2b2e;
  --ao-btn-text: #fff;
  --ao-primary: #0170eb;
  --ao-danger: #b00020;
  --ao-danger-hover: #8b0019;
  --ao-radius: 16px;
  --ao-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  --ao-shadow: 0 0 20px #00000038;
  --ao-ease: cubic-bezier(.6,.05,.28,.91);
  --ao-dur: .40s;
  --ao-vt-in-dur: .20s;
  --ao-vt-out-dur: .06s;
  --ao-vt-new-delay: .02s;
  --ao-dock-w: 380px;
  --ao-dock-m: 16px;
}

[ao-root].ao-theme-light {
  --ao-backdrop: rgba(17, 24, 39, 0.45);
  --ao-card-bg: #ffffff;
  --ao-card-bd: #e5e7eb;
  --ao-text: #111827;
  --ao-muted: #4b5563;
  --ao-btn-bd: #d1d5db;
  --ao-btn-text: #111827;
  --ao-shadow: 0 16px 30px rgba(0,0,0,0.12);
}

[ao-root] .ao-reveal-in {
  animation: ao-fade-in-up .22s var(--ao-ease) both;
}
[ao-root] .ao-reveal-out {
  animation: ao-fade-out-down .18s var(--ao-ease) both;
}

@keyframes ao-fade-in-up {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes ao-fade-out-down {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px) scale(.98); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [ao-root] .ao-reveal-in,
  [ao-root] .ao-reveal-out { animation: none !important; }
}


button[ao-btn] i {
  line-height: 1;
  width: min-content;
  justify-self: center;
}

[ao-root] [ao-card]:has([ao-subtitle]) [ao-header] { padding-bottom: 0px; }

[ao-root] [ao-content] {
  position: relative;
  view-transition-name: ao-content;
  transform-origin: 50% 50%;
}

[ao-root] [ao-actions],
[ao-root] [ao-extra] {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

::view-transition-old(ao-content) { animation: ao-vt-out-scale var(--ao-vt-out-dur) cubic-bezier(.4,0,.8,.2) 0s both; }
::view-transition-new(ao-content) { animation: ao-vt-in-scale var(--ao-vt-in-dur) var(--ao-ease) var(--ao-vt-new-delay) both; }

@keyframes ao-vt-in-scale { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }
@keyframes ao-vt-out-scale { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.995); } }

[ao-root] [ao-content][ao-exit] { opacity: 1; transform: none; }
[ao-root] [ao-content][ao-exit-active] { transition: transform .10s var(--ao-ease), opacity .10s var(--ao-ease); opacity: 0; transform: scale(.995); }
[ao-root] [ao-content][ao-enter] { opacity: 0; transform: scale(.995); }
[ao-root] [ao-content][ao-enter-active] { transition: transform .22s var(--ao-ease), opacity .22s var(--ao-ease); opacity: 1; transform: none; }

[ao-root] {
    position: fixed;
    inset: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: var(--ao-backdrop);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--ao-dur) var(--ao-ease), background-color .25s ease;
    will-change: opacity, background-color;
    cursor: pointer;
}
[ao-root][ao-open] { opacity: 1; }

[ao-root][ao-docked] {
  background: transparent;
  align-items: end;
  justify-items: end;
  pointer-events: none;
}

[ao-root][ao-docked][ao-dock-corner="br"] { align-items: end; justify-items: end; }
[ao-root][ao-docked][ao-dock-corner="bl"] { align-items: end; justify-items: start; }
[ao-root][ao-docked][ao-dock-corner="tr"] { align-items: start; justify-items: end; }
[ao-root][ao-docked][ao-dock-corner="tl"] { align-items: start; justify-items: start; }

@keyframes ao-dock-in { from { transform: translate(20px, 20px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

[ao-root][ao-docked] [ao-card] {
  width: var(--ao-dock-w);
  max-width: min(92vw, var(--ao-dock-w));
  margin: var(--ao-dock-m);
  animation: ao-dock-in .28s var(--ao-ease) both;
  pointer-events: auto;
}

[ao-root] [ao-card] {
  background: var(--ao-card-bg);
  border: none;
  border-radius: var(--ao-radius);
  box-shadow: var(--ao-shadow);
  width: clamp(var(--ao-card-min-w, 320px), var(--ao-card-w, 92vw), var(--ao-card-max-w, min(92vw, 960px)));
  max-width: var(--ao-card-max-w, min(92vw, 960px));
  min-width: var(--ao-card-min-w, 320px);
  height: var(--ao-card-h, auto);
  max-height: var(--ao-card-max-h, min(calc(var(--ao-vvh, 1px) * 0.86), 880px));
  min-height: var(--ao-card-min-h, auto);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  grid-template-rows: auto auto 1fr;
  transform: scale(.8);
  opacity: 0;
  transition: transform var(--ao-dur) var(--ao-ease), opacity var(--ao-dur) var(--ao-ease);
  will-change: transform, opacity;
  contain: paint;
  cursor: auto;
}

[ao-root] [ao-right-pop] { animation: ao-right-pop .35s var(--ao-ease); }
@keyframes ao-right-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { [ao-root] [ao-right-pop] { animation: none; } }

[ao-root][ao-open] [ao-card] { transform: scale(1); opacity: 1; }

[ao-root] [ao-header] {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 25px;
}

[ao-root] [ao-back],
[ao-root] [ao-close] {
  width: 25px;
  height: 35px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ao-text);
  font-size: 25px;
  cursor: pointer;
  display: grid;
  align-items: center;
}

[ao-root] [ao-back] { display: none; justify-content: flex-start; }
[ao-root][ao-can-back] [ao-back] { display: grid; }
[ao-root] [ao-close] { margin-left: auto; font-size: 27px; justify-content: flex-end; }

[ao-root] [ao-title] {
  margin: 0;
  letter-spacing: .01em;
  color: var(--ao-text);
  text-align: left;
  font-family: var(--ao-font);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[ao-root] [ao-title] i {
  margin-right: 15px;
}

[ao-root] [ao-btn][hidden] {display: none;}

[ao-root] [ao-subtitle] {
  margin: 0 25px 20px 25px;
  color: var(--ao-muted);
  font: 500 14px/1.6 var(--ao-font);
  max-width: 80%;
}
[ao-root] [ao-subtitle] ul[ao-subtitle-list] {
  margin: 0;
  padding-left: 18px;
}
[ao-root] [ao-subtitle] ul[ao-subtitle-list] li {
  margin-bottom: 6px;
}
[ao-root] [ao-subtitle] ul[ao-subtitle-list] li:last-child {
  margin-bottom: 0;
}

[ao-root] [ao-content] {
  padding: 20px;
  overflow: auto;
  border-top: 1px solid var(--ao-card-bd);
}
[ao-root] [ao-content]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[ao-root] [ao-content]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}
[ao-root].ao-theme-light [ao-content]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
[ao-root] [ao-content]::-webkit-scrollbar-track {
  background: transparent;
}

[ao-root] [ao-content][ao-layout="split"] {
  display: grid;
  grid-template-columns: 1fr min(44%, 440px);
  gap: 16px;
  flex-grow: 1;
}

@media (max-width: 720px) {
  [ao-root] [ao-content][ao-layout="split"] { display: block; flex-grow: 1; }
}

[ao-root] [ao-meta] {
  justify-self: end;
  align-self: center;
  font: 600 12px/1 var(--ao-font);
  color: var(--ao-muted);
  padding: 6px 8px;
  border: 1px solid var(--ao-btn-bd);
  border-radius: 8px;
}

[ao-root] [ao-actions],
[ao-root] [ao-confirm] { display: grid; gap: 14px; }

[ao-root] [ao-confirm] { display: none; }
[ao-root][ao-confirming] [ao-confirm] { display: grid; }

[ao-root] [ao-extra] { padding: 4px 2px 12px 2px; }

[ao-row] [ao-btn] {
    text-align: center;
    grid-template-columns: 1fr !important;
    font-size: 18px !important;
    min-height: 70px !important;
}
[ao-root] [ao-btn] {
  display: grid;
  grid-template-columns: 30px 1fr auto 18px;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ao-btn-bd);
  border-radius: 12px;
  background: var(--ao-btn-bg, #181818);
  color: var(--ao-btn-text);
  font-family: var(--ao-font);
  padding: 14px 20px;
  font-weight: 400;
  font-size: var(--ao-btn-font-size, 17px);
  cursor: pointer;
  min-height: var(--ao-btn-min-h, 70px);
  transition: transform .12s cubic-bezier(.2,.7,.2,1), background .12s linear, border-color .12s linear, opacity .12s linear;
  line-height: 1;
}

[ao-root].ao-theme-light {
  --ao-btn-bg: #ffffff;
  --ao-btn-bd: #d1d5db;
  --ao-btn-text: #111827;
}
[ao-root] [ao-btn][ao-no-left] { grid-template-columns: 1fr auto 18px !important; }

[ao-root] [ao-btn][ao-no-meta] { grid-template-columns: 30px 1fr 18px; }

[ao-root] [ao-btn]:hover { background: var(--ao-btn-bg-hover, #1b1b1b); }
[ao-root] [ao-btn]:active { transform: translateY(1px) scale(.995); }
[ao-root] [ao-btn][disabled] { opacity: .6;  transform: none; cursor: auto;}
[ao-root] [ao-btn]:focus-visible { outline: 0; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.45); }

/* Display-only items (divs that look like buttons but aren't interactive) */
[ao-root] div[ao-btn] { cursor: auto; }
[ao-root] div[ao-btn]:active { transform: none; }
[ao-root] [ao-btn][ao-role="primary"] { background: var(--ao-primary); border-color: transparent; }
[ao-root] [ao-btn][ao-role="primary"]:hover { filter: brightness(1.05); }
[ao-root] [ao-btn][ao-role="destructive"] { background: var(--ao-danger); border-color: transparent; }
[ao-root] [ao-btn][ao-role="destructive"]:hover { background: var(--ao-danger-hover); }

[ao-root].ao-theme-light {
  --ao-btn-bg: #ffffff;
  --ao-btn-bd: #d1d5db;
  --ao-btn-text: #111827;
  --ao-btn-bg-hover: #f3f4f6;
}

[ao-root] [ao-search] {
  width: 100%;
  padding: 12px 25px;
  border-top: 1px solid var(--ao-card-bd);
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 6px;
}
[ao-root] [ao-search] i {
  color: var(--ao-muted);
  font-size: 15px;
}
[ao-root] [ao-search-input] {
  width: 100%;
  padding: 7px 0px;
  border-radius: 10px;
  font-size: 18px;
  border: none;
  background: none;
  color: var(--ao-text);
  font-family: var(--ao-font);
}
[ao-root] [ao-search-input]:focus-visible {
  outline: 0;
}
[ao-root] [ao-time-filter] {
  width: 100%;
  border-top: 1px solid var(--ao-card-bd);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
[ao-root] [ao-time-filter] button {
  width: 100%;
  border: none;
  background: var(--ao-btn-bg, #181818);
  color: var(--ao-btn-text);
  border-radius: 0;
  padding: 22px 12px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  font-size: 16px;
}
[ao-root] [ao-time-filter] button:first-child {
  border-right: 0;
}
[ao-root] [ao-time-filter] button:last-child {
  border-left: 1px solid var(--ao-btn-bd);
}
[ao-root] [ao-time-filter] button.active {
  background: #4b5563;
  color: #fff;
}
[ao-root] [ao-time-filter] button:not(.active):hover {
  background: rgba(255,255,255,0.06);
}
[ao-root] [ao-search-input]::-webkit-search-decoration,
[ao-root] [ao-search-input]::-webkit-search-cancel-button,
[ao-root] [ao-search-input]::-webkit-search-results-button,
[ao-root] [ao-search-input]::-webkit-search-results-decoration {
  display: none;
}
[ao-root] [ao-search-input]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

[ao-root] [ao-left] { justify-self: center; font-size: 18px; }

[ao-root] [ao-label] { align-self: center; display: grid; gap: 2px; text-align: left; }
[ao-root] [ao-label] [ao-item-title] { font-weight: 500; }
[ao-root] [ao-label] [ao-note] { color: var(--ao-muted); font-weight: 500; font-size: 12px; line-height: 1.3; }

[ao-root] [ao-right] { justify-self: end; opacity: .6; font-size: 25px; }

[ao-root] [ao-row] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  [ao-root], [ao-root] [ao-card] { transition: none !important; }
}

@media (max-width: 1000px) {
  [ao-root]:not([ao-docked]) { align-items: stretch; justify-items: stretch; }
  [ao-root]:not([ao-docked]) [ao-card] {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: var(--ao-vvh, 100vh);
    max-height: none;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
}



[ao-root] [ao-editor] {
  display: grid;
  gap: 12px;
}

[ao-root] [ao-editor-group] {
  position: relative;
  margin-bottom: 14px;
}

[ao-root] [ao-editor] label {
  position: absolute;
  top: 13px;
  left: 16px;
  font-size: 16px;
  color: #fff;
  transition: .3s;
  pointer-events: none;
  font-weight: 600;
  margin: 0;
  z-index: 0;
  font-family:'Source Sans 3';
}

[ao-root] [ao-textarea] {
  width: 100%;
  appearance: none;
  display: block;
  padding: 35px 16px 12px;
  background: rgb(30, 30, 30);
  color: #fff;
  border-radius: 8px;
  position: relative;
  transition: none;
  font-weight: 400;
  line-height: 23px;
  font-size: 16px;
  border: 1px solid rgb(49, 49, 49);
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
  min-height: 150px;
  font-family: 'Source Sans 3';
}

[ao-root] [ao-field-meta] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


[ao-root] [ao-counter] {
  font-size: 13px;
  color: rgb(153,153,153);
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: 12px;
  right: 15px;
  font-family: var(--ao-font);
  font-weight: 400;
}

[ao-root] [ao-btn][ao-wide] {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  text-align: center;
}

[ao-root][ao-can-back] [ao-card]:has([ao-subtitle]) [ao-header],
[ao-root][ao-can-back] [ao-header] {
  padding-bottom: 10px !important;
}
/* Modal Component Styles */

/* Modal Select Field (replaces custom-dropdown for new modal system) */
.modal-select-field {
    position: relative;
    width: 100%;
    cursor: pointer;
    padding: 0;
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
}

.modal-select-field.has-value {
    color: #000;
}

/* Show floating label for modal selects */
.field-footprint:has(.modal-select-field) .typeable-label {
    display: block;
}

/* Hide placeholder when not focused and no value */
.field-footprint:has(.modal-select-field):not(.focused):not(.has-value) .modal-select-field {
    color: transparent;
}

/* Show value text when focused */
.field-footprint.focused .modal-select-field:not(.has-value) {
    color: transparent;
}

/* Select arrow icon */
.modal-select-field .select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Modal Dropdown Styles */
.modal-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-dropdown-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-dropdown-overlay .modal-dropdown-options {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: auto;
    max-height: 70vh;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1001;
    padding: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    border: 1px solid #e5e7eb;
}

.modal-dropdown-overlay.show .modal-dropdown-options {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Modal Search Box */
.modal-dropdown-overlay .modal-search-box {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.modal-dropdown-overlay .modal-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.modal-dropdown-overlay .modal-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 54%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.modal-dropdown-overlay .modal-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s ease;
}

.modal-dropdown-overlay .modal-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-dropdown-overlay .modal-search-input:focus + .modal-search-icon {
    color: #3b82f6;
}

.modal-dropdown-overlay .modal-search-input::placeholder {
    color: #9ca3af;
}

.modal-dropdown-overlay .modal-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.modal-dropdown-overlay .modal-search-clear:hover {
    color: #6b7280;
    background: #f3f4f6;
}

.modal-dropdown-overlay .modal-search-clear:active {
    color: #374151;
    background: #e5e7eb;
}

/* Scrollable options container */
.modal-dropdown-overlay .modal-options-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(70vh - 80px); /* Account for search box height */
}

/* Modal option items */
.modal-dropdown-overlay .modal-option {
    padding: 1.1rem 1rem;
    color: #000;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s;
}

.modal-dropdown-overlay .modal-option:hover {
    background-color: #f3f4f6;
}

.modal-dropdown-overlay .modal-option:last-child {
    border-bottom: none;
}

/* Modal Close Button */
.modal-dropdown-overlay .modal-close-button {
    position: absolute;
    top: -17px;
    right: -75px;
    width: 52px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.2s ease;
    z-index: 1002;
}

/* Position close button relative to modal-dropdown-options */
.modal-dropdown-overlay .modal-dropdown-options {
    position: relative;
}

.modal-dropdown-overlay .modal-close-button:hover {
    color: #ffffff;
    background: #ffffff36;
}

.modal-dropdown-overlay .modal-close-button:active {
    transform: scale(0.95);
}

/* Modal Time Filter Bar */
.modal-time-filter-bar {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
}

/* Time filter buttons - styled to match ButtonHelper system */
.modal-time-filter-bar .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    background-color: transparent;
    color: #1f2937;
    border: 1px solid #1f2937;
}

.modal-time-filter-bar .filter-btn:hover:not(.active) {
    background-color: #1f2937;
    color: #ffffff;
}

.modal-time-filter-bar .filter-btn.active {
    background-color: #1f2937;
    color: #ffffff;
    border-color: #1f2937;
}