From 85c1b5a9255ef10c5d9674dd77ef6624a85f435d Mon Sep 17 00:00:00 2001 From: T Floyd Wright Date: Sun, 15 Mar 2026 21:56:56 -0800 Subject: [PATCH 1/2] Wrap nav in sticky LiveView to preserve sidebar state across navigation - Add Nav.Wrapper sticky LiveView that hosts the nav LiveComponent and Jobs LiveView, preserving DOM state across navigate events - Broadcast URI via attach_hook on handle_params so the sticky nav can update active link highlighting via PubSub - Update CSS selectors from sibling (~) to :has() since the sidebar toggle checkbox now lives inside the sticky wrapper --- assets/css/layout.css | 6 +- assets/css/sidebar.css | 6 +- dist/css/app.css | 2 +- .../components/layout/app.html.heex | 25 ++---- lib/live_admin/components/nav/wrapper.ex | 81 +++++++++++++++++++ lib/live_admin/router.ex | 7 ++ 6 files changed, 103 insertions(+), 24 deletions(-) create mode 100644 lib/live_admin/components/nav/wrapper.ex diff --git a/assets/css/layout.css b/assets/css/layout.css index 115dd744..c3f5324d 100644 --- a/assets/css/layout.css +++ b/assets/css/layout.css @@ -62,7 +62,7 @@ transition: margin-left 0.2s, max-width 0.2s; } -.sidebar-toggle-input:not(:checked) ~ .main-layout .content { +.main-layout:has(.sidebar-toggle-input:not(:checked)) .content { margin-left: 0; max-width: 100vw; } @@ -73,7 +73,7 @@ max-width: calc(100vw - 300px); } - .sidebar-toggle-input:not(:checked) ~ .main-layout .content { + .main-layout:has(.sidebar-toggle-input:not(:checked)) .content { margin-left: 0; max-width: 100vw; } @@ -85,7 +85,7 @@ max-width: calc(100vw - 200px); } - .sidebar-toggle-input:not(:checked) ~ .main-layout .content { + .main-layout:has(.sidebar-toggle-input:not(:checked)) .content { margin-left: 0; max-width: 100vw; } diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css index 48659ffd..fd4a8077 100644 --- a/assets/css/sidebar.css +++ b/assets/css/sidebar.css @@ -28,7 +28,7 @@ transition: transform 0.2s; } -.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar-toggle-label svg { +.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-toggle-label svg { transform: rotate(180deg); } @@ -54,13 +54,13 @@ position: relative; } -.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar { +.sidebar:has(.sidebar-toggle-input:not(:checked)) { min-width: 0; max-width: 0; border-right: none; } -.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar-content { +.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-content { overflow: hidden; } diff --git a/dist/css/app.css b/dist/css/app.css index 4ae207c7..d695bfe0 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1 @@ -*{box-sizing:border-box;margin:0;padding:0}:root{--primary-bg:#f5f0ff;--primary-light:#ede5ff;--primary-medium:#6d28d9;--primary-dark:#4c1d95;--bg:#fff;--bg-light:#f7f7f7;--bg-medium:#eee;--bg-dark:rgba(0,0,0,.5);--border-light:#e5e7eb;--border-medium:#d2d2d7;--border-dark:#a0aec0;--text-dark:#1d1d1f;--text-medium:#515154;--text-light:#86868b;--danger-bg:#fef2f2;--danger-medium:#dc2626;--danger-dark:#b91c1c;--success-bg:#f0fdf4;--success-light:#d1fae5;--success-medium:#16a34a;--success-dark:#065f46;--info-bg:#eff6ff;--info-light:#dbeafe;--info-medium:#2563eb;--info-dark:#1e40af;--opacity-disabled:0.4;--opacity-muted:0.7;--shadow-sm:0 1px 3px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.15);--shadow-lg:0 20px 60px rgba(0,0,0,.3);--focus-ring:0 0 0 3px rgba(107,70,193,.1);--top-height:64px}body{background:var(--bg-light);color:var(--text-dark);font-family:system-ui,sans-serif;padding-top:var(--top-height)}body:has(.alert-bar){padding-top:112px}p{margin:1lh 0}h1[class$=title],h3[class$=title]{color:var(--primary-dark);font-size:16px;font-weight:600;letter-spacing:.1em;opacity:.75;text-transform:uppercase}h1[class$=title]{font-size:16px}h2[class$=title]{font-size:14px}h3[class$=title]{font-size:12px}h1 span,h2 span,h3 span{color:var(--text-dark);display:block;font-size:2.5em;opacity:1}select{background-color:var(--bg)}pre{overflow:scroll}th{white-space:nowrap}:disabled{opacity:.5}.header{background:var(--bg);border-bottom:1px solid var(--border-medium);left:0;position:fixed;right:0;top:0;z-index:100}.header-content{align-items:center;display:flex;height:var(--top-height);justify-content:space-between;margin:0 32px 0 24px}.logo{color:var(--text-dark);font-size:20px;font-weight:600}.user-menu{align-items:center;display:flex;gap:16px}.breadcrumb,.breadcrumb a,.breadcrumb-content,.breadcrumb-current,.breadcrumb-separator{display:none}.main-layout{display:flex;min-height:calc(100vh - var(--top-height))}.content{box-sizing:border-box;flex:1;margin-left:20vw;max-width:80vw;padding:32px;transition:margin-left .2s,max-width .2s}.sidebar-toggle-input:not(:checked)~.main-layout .content{margin-left:0;max-width:100vw}@media (min-width:1500px){.content{margin-left:300px;max-width:calc(100vw - 300px)}.sidebar-toggle-input:not(:checked)~.main-layout .content{margin-left:0;max-width:100vw}}@media (max-width:1000px){.content{margin-left:200px;max-width:calc(100vw - 200px)}.sidebar-toggle-input:not(:checked)~.main-layout .content{margin-left:0;max-width:100vw}}.content-header{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:32px;max-width:100%;overflow:visible}.content-title{flex-shrink:1;font-size:32px;font-weight:600;min-width:0;overflow-wrap:break-word}@media (max-width:768px){.content-header{align-items:flex-start;flex-direction:column}.contextual-actions{width:100%}}.contextual-actions{display:flex;flex-shrink:0;flex-wrap:wrap;gap:12px}.sidebar-toggle-input{display:none}.sidebar-toggle-label{align-items:center;background:var(--bg);border:1px solid var(--border-medium);border-left:none;border-radius:0 6px 6px 0;bottom:24px;color:var(--text-light);cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:-16px;transition:color .2s;width:16px}.sidebar-toggle-label:hover{color:var(--text-dark)}.sidebar-toggle-label svg{transition:transform .2s}.sidebar-toggle-input:not(:checked)~.main-layout .sidebar-toggle-label svg{transform:rotate(180deg)}.sidebar{background:var(--bg);border-right:1px solid var(--border-medium);bottom:0;left:0;max-width:300px;min-width:200px;overflow:visible;position:fixed;top:var(--top-height);transition:min-width .2s,max-width .2s;width:20vw;z-index:10}.sidebar-content{height:100%;overflow-y:auto;padding:24px 0 180px;position:relative}.sidebar-toggle-input:not(:checked)~.main-layout .sidebar{border-right:none;max-width:0;min-width:0}.sidebar-toggle-input:not(:checked)~.main-layout .sidebar-content{overflow:hidden}body:has(.alert-bar) .sidebar{top:112px}.nav-section{margin-bottom:32px}.nav-section-title{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;padding:0 24px 12px 27px;text-transform:uppercase}.nav-item{align-items:center;border-left:3px solid transparent;color:var(--text-dark);cursor:pointer;display:flex;gap:12px;padding:10px 24px;text-decoration:none;transition:background .2s}.nav-item.active,.nav-item:hover{background:var(--bg-light)}.nav-item.active{border-left:3px solid var(--primary-dark);color:var(--primary-dark)!important;font-weight:500}.nav-icon{fill:currentColor;height:20px;width:20px}.nav-icon svg{display:block;height:100%;width:100%}.nav-item-expand{font-size:12px;margin-left:auto;opacity:var(--opacity-muted);transition:transform .2s}.nav-toggle-input{display:none}.nav-toggle-label{align-items:center;border-left:3px solid transparent;color:var(--text-dark);cursor:pointer;display:flex;gap:12px;padding:10px 24px;text-decoration:none;transition:background .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nav-toggle-label:hover{background:var(--bg-light)}.nav-toggle-label.active{background:var(--bg-medium);border-left:3px solid var(--primary-dark);font-weight:500}.nav-subitems{max-height:0;overflow:hidden}.nav-toggle-input:checked+.nav-toggle-label+.nav-subitems{max-height:none}.nav-toggle-input:checked+.nav-toggle-label .nav-item-expand{transform:rotate(180deg)}.nav-subitems .nav-toggle-label{color:var(--text-medium);font-size:16px;padding:8px 24px}.nav-subitems .nav-toggle-label:hover{background:transparent;color:var(--primary-dark)}.nav-subitems .nav-subitems{max-height:0;padding-left:16px}.nav-subitems .nav-subitems a{align-items:center;color:var(--text-medium);display:flex;font-size:16px;gap:12px;padding:8px 24px;text-decoration:none;transition:color .2s}.nav-subitems .nav-subitems a:hover{color:var(--primary-dark)}.nav-subitem{align-items:center;color:var(--text-medium);display:flex;font-size:16px;justify-content:space-between;padding:8px 24px;text-decoration:none;transition:color .2s}.nav-subitem:hover{color:var(--primary-dark)}.nav-subitem .nav-item-expand{font-size:12px;opacity:var(--opacity-muted)}.nav-subitems .nav-icon{display:none}.nav-progress-section{background:var(--bg);border-top:1px solid var(--border-medium);bottom:0;left:0;padding:16px 24px 24px;position:absolute;right:0}.nav-progress-section:not(:has(*)){display:none}.nav-progress-title{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}.progress-item{margin-bottom:16px}.progress-item:last-child{margin-bottom:0}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:6px}.progress-label{color:var(--text-dark);font-size:13px;font-weight:500}.progress-percentage{color:var(--text-light);font-size:12px;font-weight:600}.progress-bar-container{background:var(--bg-medium);border-radius:3px;height:6px;overflow:hidden;width:100%}.progress-bar{background:var(--primary-dark);border-radius:3px;height:100%;transition:width .3s ease}#alert-bar{left:0;position:fixed;right:0}#alert-bar:hover .alert-bar+.alert-bar{opacity:1;position:relative;top:64px}.alert-bar{align-items:center;border-style:solid;border-width:2px 0;display:flex;height:64px;justify-content:space-between;padding:14px 24px;position:absolute;transition:all .2s ease-in-out;width:100%;z-index:2}.alert-bar+.alert-bar{border-top-width:0;opacity:0;top:0;z-index:1}.alert-count{align-items:center;border-radius:50%;border-style:solid;border-width:2px;cursor:pointer;display:flex;height:1.25lh;justify-content:center;text-align:center;vertical-align:middle;width:1.25lh}.alert-bar.error{background:var(--danger-bg);border-color:var(--danger-medium);color:var(--danger-medium)}.alert-bar.error:hover{color:var(--danger-dark)}.alert-bar.success{background:var(--success-bg);border-color:var(--success-medium);color:var(--success-medium)}.alert-bar.success:hover{color:var(--success-dark)}.alert-bar.info{background:var(--info-bg);border-color:var(--info-medium);color:var(--info-medium)}.alert-bar.info:hover{color:var(--info-dark)}#alert-bar[class$=loading]{opacity:var(--opacity-muted);pointer-events:none}.alert-content{align-items:center;display:flex;flex:1;gap:12px}.alert-icon{cursor:pointer;flex-shrink:0;height:20px;width:20px}.alert-message{font-size:14px;font-weight:500}.alert-close{border-radius:6px;flex-shrink:0;font-size:16px;font-weight:600;line-height:1;padding:6px 12px}.alert-close,.btn{cursor:pointer;transition:all .2s}.btn{align-items:center;border:none;border-radius:8px;display:flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;text-decoration:none}.btn-primary{background:var(--primary-medium);color:var(--bg)}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--bg);border:1px solid var(--border-medium);color:var(--text-dark)}.btn-secondary:hover{background:var(--bg-light)}.btn-danger{background-color:var(--danger-medium);border:1px solid var(--danger-medium);color:var(--danger-bg)}.btn-danger:hover{background-color:var(--danger-dark)}.btn-select{background:var(--bg);border:1px solid var(--border-medium);border-radius:8px;color:var(--text-dark);cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;position:relative;transition:all .2s}.btn-select:hover,.btn-select[open]{background:var(--bg-light)}.btn-select summary{align-items:center;cursor:pointer;display:flex;gap:8px;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn-select summary::-webkit-details-marker{display:none}.btn-select summary:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-dark);content:"";height:0;margin-left:8px;width:0}.btn-select[open] summary:after{border-bottom:5px solid var(--text-dark);border-top:none}.btn-icon{fill:currentColor;height:16px;width:16px}.btn-icon svg{display:block;height:100%;width:100%}.drop-menu{background:var(--bg);border:1px solid var(--border-medium);border-radius:8px;box-shadow:var(--shadow-md);max-height:30vh;min-width:200px;overflow-y:scroll;padding:8px 0;position:absolute;right:0;top:calc(100% + 4px);z-index:1000}.drop-link{color:var(--text-dark);display:inline-block;font-size:14px;height:100%;padding:10px 16px;text-decoration:none;transition:background .2s;width:100%}.drop-link:hover{background:var(--bg-light)}.content-card{background:var(--bg);border-radius:12px;box-shadow:var(--shadow-sm);padding:24px}.content-card:has(.tabs){padding:0}.content-card:has(.tabs) .card-section{padding:24px}.card-section{margin-bottom:24px}.card-section:last-child{margin-bottom:0}.card-section-title{font-size:18px;font-weight:600;margin-bottom:16px}.card-text{color:var(--text-medium);line-height:1.6}.table-container{max-height:200vh;overflow:scroll}.data-table{border-collapse:collapse;margin-top:16px;min-width:1600px;width:100%}.data-table th{background:var(--bg-light);border-bottom:2px solid var(--border-medium);color:var(--text-dark);font-size:14px;font-weight:600;position:sticky;text-align:left;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.data-table th a{color:inherit;display:inline-block;padding:12px 16px;text-decoration:none;width:100%}.data-table th a:hover{color:var(--primary-dark)}.data-table tr{background:var(--bg)}.data-table th:first-child{cursor:default;left:0;position:sticky;z-index:4}.data-table td:first-child{background:inherit;left:0;position:sticky;z-index:3}.data-table th.sort-asc:after,.data-table th.sort-desc:after{content:"";font-size:12px;margin-left:1em;position:relative;right:3em;z-index:-1}.data-table th.sort-asc:after{color:var(--primary-dark);content:"\25B2"}.data-table th.sort-desc:after{color:var(--primary-dark);content:"\25BC"}.data-table td{border-bottom:1px solid var(--border-light);color:var(--text-medium);max-width:250px;padding:12px 16px;position:relative}.data-table td,.data-table td:first-child{vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:var(--bg-light)}.data-table td:first-child,.data-table th:first-child{text-align:center;width:40px}.data-table input[type=checkbox]:checked{background:var(--primary-dark)}.data-table tr:has(input[type=checkbox]:checked){background:var(--primary-bg)}.data-table tr:has(input[type=checkbox]:checked):hover{background:var(--primary-light)}.cell-content{display:-webkit-box;-webkit-line-clamp:3;max-height:60px;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;line-height:1.4;padding:2px}.cell-content *{display:inline}.cell-content .btn{cursor:default;margin:2px;padding:4px}.row-checkbox{accent-color:var(--primary-dark);cursor:pointer;height:18px;width:18px}.row-checkbox:checked~td{background:var(--primary-bg)}.assoc-link-icon{background:var(--bg-medium);border-radius:2px;bottom:2px;color:var(--text-light);cursor:pointer;display:none;padding:2px;position:absolute;right:24px;transition:opacity .2s;z-index:10}.assoc-link-icon:hover{color:var(--text-medium)}.expand-icon{background:var(--bg-medium);border-radius:2px;bottom:2px;color:var(--text-light);cursor:pointer;display:none;padding:2px;position:absolute;right:2px;transition:opacity .2s;z-index:10}.expand-icon:hover{color:var(--text-medium)}.copy-icon,.table-cell:hover .expand-icon{display:flex}.copy-icon{background:var(--bg-medium);border-radius:2px;bottom:6px;color:var(--text-light);cursor:pointer;padding:2px;position:absolute;right:6px;transition:opacity .2s;width:20px;z-index:100}.copy-icon:hover,.resource-link{color:var(--text-medium)}.resource-link{-webkit-text-decoration-style:dashed;text-decoration-style:dashed}.resource-link:hover{color:var(--text-dark)}.status-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:500;padding:4px 12px}.status-active{background:var(--success-light);color:var(--success-dark)}.status-pending{background:var(--danger-bg);color:var(--danger-medium)}.status-completed{background:var(--info-light);color:var(--info-dark)}.pagination{align-items:center;border-top:1px solid var(--border-light);display:flex;justify-content:center;margin-top:24px;padding-top:16px}.pagination-info{color:var(--text-medium);font-size:14px}.pagination-controls{align-items:center;display:flex;gap:8px}.pagination-btn{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;color:var(--text-dark);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s}.pagination-btn:hover:not(:disabled){background:var(--bg-light);border-color:var(--primary-dark)}.pagination-btn:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}.pagination-info-btn{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;color:var(--text-medium);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s}.pagination-info-btn:hover{background:var(--bg-light);border-color:var(--primary-dark)}.search-container{margin-bottom:16px;max-width:400px;position:relative}.search-input{border:1px solid var(--border-medium);border-radius:8px;font-family:inherit;font-size:14px;padding:10px 16px 10px 40px;transition:all .2s;width:100%}.search-input:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.search-input::-moz-placeholder{color:var(--text-light)}.search-input::placeholder{color:var(--text-light)}.search-icon{height:18px;left:12px;opacity:var(--opacity-muted);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px}.form-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:32px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field.error .error-message{color:var(--danger-medium);font-size:10px;font-weight:700}.form-field.error input,.form-field.error textarea{background:var(--danger-bg)}.form-label{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.form-input,.form-select,.form-textarea{border:1px solid var(--border-medium);border-radius:6px;color:var(--text-dark);font-family:inherit;font-size:14px;padding:10px 12px;transition:all .2s;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.form-textarea{height:39px;max-width:30vw;min-height:39px;padding:10px 12px;resize:vertical}.form-actions{border-top:2px solid var(--border-light);display:flex;gap:12px;justify-content:flex-end;margin-top:16px;padding-top:16px}.form-subsection{background:var(--bg-light);border-radius:8px;grid-column:1/-1;margin-bottom:16px;padding:24px}.form-subsection-title{color:var(--text-dark);font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}.form-subgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.form-line .form-title{color:var(--text-dark);font-size:16px;font-weight:600;margin-bottom:30px;text-align:left}.form-line .docs{background:var(--info-bg);border-left:4px solid var(--info-medium);border-radius:8px;color:var(--text-medium);font-size:14px;line-height:1.6;margin-bottom:30px;padding:16px 20px}.form-line .form-group{align-items:flex-start;display:flex;gap:12px;margin-bottom:24px;width:100%}.form-line label{color:var(--text-medium);display:block;flex-shrink:0;font-size:14px;font-weight:500;min-width:20px;padding-top:7px}.form-line textarea{background:var(--bg);border:2px solid var(--border-medium);border-radius:8px;color:var(--text-dark);flex:1;font-family:inherit;font-size:15px;padding:8px 16px;resize:vertical;transition:all .3s ease;width:100%}.form-line textarea:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.form-line .button-group{display:flex;gap:12px;justify-content:flex-end;margin-top:32px;width:100%}select[multiple]{height:39px}select[multiple]:focus-within{height:100px}.search-select-container{position:relative;width:100%}.select-filter{box-sizing:border-box;padding:10px;width:100%}.select-filter,.select-options{border:1px solid var(--border-medium);border-radius:4px}.select-options{background-color:var(--bg);display:none;left:0;list-style:none;margin:0;max-height:150px;overflow-y:auto;padding:0;position:absolute;right:0;top:120%;z-index:1}.search-select-container:focus-within .select-options{display:block}.search-select-container .select-options:active,.search-select-container .select-options:focus{display:block}.select-options li{cursor:pointer;padding:10px}.select-options li:hover{background-color:var(--bg-medium)}.array-input-wrapper{border:1px solid var(--border-light);border-radius:8px;display:flex;flex-wrap:wrap;gap:8px;min-height:39px;padding:2px;transition:border-color .2s}.array-input-wrapper:focus-within{background:var(--bg);border-color:var(--primary-dark)}.array-input-wrapper .btn{height:32px;padding:0 10px}.array-input-wrapper input{background:transparent;border:none;flex:1;font-size:14px;min-width:120px;outline:none;padding:6px}.array-input-wrapper input:not(:-moz-placeholder-shown)+.return-icon{display:block}.array-input-wrapper input:not(:placeholder-shown)+.return-icon{display:block}.return-icon{animation:fadeIn .2s ease-out;display:none;height:20px;margin:5px;opacity:.5;transition:opacity .2s;width:20px}.detail-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:32px}.detail-field{display:flex;flex-direction:column;gap:8px}.detail-field-label{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.detail-field-value{color:var(--text-dark);display:flex;font-size:16px;max-height:3lh;min-height:1.5lh;overflow:hidden;position:relative}.detail-field-value>span{display:flex}.detail-field-value .btn{cursor:default;margin:2px;padding:4px}.detail-field-value:hover .assoc-link-icon,.detail-field-value:hover .expand-icon{display:flex}.detail-subtitle+.detail-subtitle:before{content:"|"}.expand-content{background:var(--bg-light);border-radius:8px;color:var(--text-medium);font-family:monospace;line-height:1.6;overflow:scroll;padding:16px;white-space:pre}.modal{align-items:center;background:var(--bg-dark);bottom:0;cursor:auto;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.modal-content{background:var(--bg);border-radius:12px;box-shadow:var(--shadow-lg);max-height:80vh;max-width:600px;min-width:50%;overflow-y:auto;padding:32px;position:relative}.modal-header{align-items:center;border-bottom:2px solid var(--border-light);display:flex;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.modal-title{color:var(--text-dark);font-size:20px;font-weight:600}.modal-close{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-light);cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.modal-close:hover{background:var(--bg-light);color:var(--text-dark)}.modal-body{color:var(--text-medium);line-height:1.6;position:relative}.modal-body:hover .copy-icon,.tabs{display:flex}.tabs{border-bottom:1px solid var(--border-light);justify-content:right;padding:0}.tabs a{align-content:center;background:none;border:none;border-left:1px dashed var(--border-medium);cursor:pointer;flex:1;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;max-width:200px;padding:4px 2px;text-align:center;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.tabs a,.tabs a:hover{color:var(--text-light)}.tabs a.active,.tabs a:hover{background-color:var(--bg-light)}.tabs a.active{color:var(--text-dark);font-weight:700}#main-link.active{visibility:hidden}#main-link{border:none;border-right:2px solid var(--border-light);margin-right:auto}#main-link:before{content:"\2190";font-size:16px;font-weight:400}.switch-container{display:inline-block;position:relative}input[type=radio]{display:none}.switch{background:var(--bg);border:1px solid var(--border-medium);border-radius:5.5px;cursor:pointer;height:38px;overflow:hidden;position:relative;width:125px}.switch-background{display:flex;height:100%;left:0;position:absolute;top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:300%}.bg-section{height:100%;width:33.333%}.switch-handle{align-items:center;background:var(--bg);border:1px solid var(--border-medium);border-radius:5.5px;display:flex;font-size:12px;height:34px;justify-content:center;position:absolute;top:1px;transition:transform .3s cubic-bezier(.4,0,.2,1);width:34px;z-index:2}.switch-left:checked~.switch .switch-background,.switch-left:checked~.switch .switch-handle{transform:translateX(1px)}.switch-left:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-center:checked~.switch .switch-background{transform:translateX(-33.333%)}.switch-center:checked~.switch .switch-handle{transform:translateX(45px)}.switch-center:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-right:checked~.switch .switch-background{transform:translateX(-66.666%)}.switch-right:checked~.switch .switch-handle{transform:translateX(88px)}.switch-right:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-center:checked~.labels .label-center,.switch-left:checked~.labels .label-left,.switch-right:checked~.labels .label-right{color:var(--text-dark);font-weight:600;transform:scale(1.1)}.label-area{cursor:pointer;height:35px;position:absolute;top:0;width:33.333px;z-index:3}.label-area.left{left:0}.label-area.center{left:33.333px}.label-area.right{right:0}.embed-container{display:flex;flex-direction:column;gap:30px}.embed-section,.embed-section-title-wrapper,.embed-section-wrapper{margin-bottom:15px}.embed-section{background:var(--bg-light);border-radius:8px;padding:50px 25px 25px;position:relative}.embed-section.odd{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;position:relative;transition:border-color .2s}.embed.subsection:hover{border-color:var(--border-dark)}.embed-section:has(.remove-icon.phx-click-loading){opacity:var(--opacity-disabled);pointer-events:none}.add-section-btn{align-items:center;background:var(--bg);border:1px dashed var(--border-light);border-radius:8px;color:var(--text-dark);cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:8px;justify-content:center;margin-top:0;padding:16px;transition:all .2s;width:100%}.add-section-btn:hover{border-style:solid}.remove-icon{background:none;border:none;color:var(--danger-medium);cursor:pointer;height:24px;left:6px;opacity:var(--opacity-muted);padding:0;position:absolute;top:6px;transition:color .2s,opacity .2s;width:24px}.remove-icon:hover{color:var(--danger-dark);opacity:1}.remove-icon svg{height:100%;width:100%}.drag-icon{background:none;border:none;color:var(--text-light);cursor:grab;height:28px;padding:0;position:absolute;right:6px;top:6px;transition:color .2s;width:28px}.drag-icon:active{cursor:grabbing}.drag-icon:hover{color:var(--text-medium)}.drag-icon svg{height:100%;width:100%}.dragging{opacity:.5;transform:scale(.95);transition:transform .2s,opacity .2s}.drop-zone{background:var(--info-bg);border:2px dashed var(--info-medium);border-radius:8px;color:var(--info-medium);display:none;font-size:14px;font-weight:500;height:60px;margin:10px 0;opacity:var(--opacity-muted)}.drop-zone,.error-box{align-items:center;justify-content:center}.error-box{display:flex;flex-direction:column;padding:80px 40px;text-align:center}.error-header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.error-icon{flex-shrink:0;height:32px;width:32px}.error-icon svg{height:100%;width:100%}.error-header h3{color:var(--text-dark);font-size:24px;font-weight:600}.error-message{color:var(--text-light);font-size:15px;line-height:1.6;max-width:500px}.edit-view{display:block}.edit-view.hidden{display:none}.search-select-container[class$=loading]{opacity:.5}.search-select-container[class$=loading] button,.search-select-container[class$=loading] input,input[class$=loading]{opacity:.5;pointer-events:none}input[class$=loading]+.select-options{content:""}button[class$=loading]{opacity:.5;pointer-events:none}@keyframes slideIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:.5}}.spinner{animation:spin 1s linear infinite;border:8px solid var(--primary-bg);border-radius:50%;border-top-color:var(--primary-light);height:80px;margin:80px auto;width:80px}@keyframes spin{to{transform:rotate(1turn)}} \ No newline at end of file +*{box-sizing:border-box;margin:0;padding:0}:root{--primary-bg:#f5f0ff;--primary-light:#ede5ff;--primary-medium:#6d28d9;--primary-dark:#4c1d95;--bg:#fff;--bg-light:#f7f7f7;--bg-medium:#eee;--bg-dark:rgba(0,0,0,.5);--border-light:#e5e7eb;--border-medium:#d2d2d7;--border-dark:#a0aec0;--text-dark:#1d1d1f;--text-medium:#515154;--text-light:#86868b;--danger-bg:#fef2f2;--danger-medium:#dc2626;--danger-dark:#b91c1c;--success-bg:#f0fdf4;--success-light:#d1fae5;--success-medium:#16a34a;--success-dark:#065f46;--info-bg:#eff6ff;--info-light:#dbeafe;--info-medium:#2563eb;--info-dark:#1e40af;--opacity-disabled:0.4;--opacity-muted:0.7;--shadow-sm:0 1px 3px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.15);--shadow-lg:0 20px 60px rgba(0,0,0,.3);--focus-ring:0 0 0 3px rgba(107,70,193,.1);--top-height:64px}body{background:var(--bg-light);color:var(--text-dark);font-family:system-ui,sans-serif;padding-top:var(--top-height)}body:has(.alert-bar){padding-top:112px}p{margin:1lh 0}h1[class$=title],h3[class$=title]{color:var(--primary-dark);font-size:16px;font-weight:600;letter-spacing:.1em;opacity:.75;text-transform:uppercase}h1[class$=title]{font-size:16px}h2[class$=title]{font-size:14px}h3[class$=title]{font-size:12px}h1 span,h2 span,h3 span{color:var(--text-dark);display:block;font-size:2.5em;opacity:1}select{background-color:var(--bg)}pre{overflow:scroll}th{white-space:nowrap}:disabled{opacity:.5}.header{background:var(--bg);border-bottom:1px solid var(--border-medium);left:0;position:fixed;right:0;top:0;z-index:100}.header-content{align-items:center;display:flex;height:var(--top-height);justify-content:space-between;margin:0 32px 0 24px}.logo{color:var(--text-dark);font-size:20px;font-weight:600}.user-menu{align-items:center;display:flex;gap:16px}.breadcrumb,.breadcrumb a,.breadcrumb-content,.breadcrumb-current,.breadcrumb-separator{display:none}.main-layout{display:flex;min-height:calc(100vh - var(--top-height))}.content{box-sizing:border-box;flex:1;margin-left:20vw;max-width:80vw;padding:32px;transition:margin-left .2s,max-width .2s}.main-layout:has(.sidebar-toggle-input:not(:checked)) .content{margin-left:0;max-width:100vw}@media (min-width:1500px){.content{margin-left:300px;max-width:calc(100vw - 300px)}.main-layout:has(.sidebar-toggle-input:not(:checked)) .content{margin-left:0;max-width:100vw}}@media (max-width:1000px){.content{margin-left:200px;max-width:calc(100vw - 200px)}.main-layout:has(.sidebar-toggle-input:not(:checked)) .content{margin-left:0;max-width:100vw}}.content-header{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:32px;max-width:100%;overflow:visible}.content-title{flex-shrink:1;font-size:32px;font-weight:600;min-width:0;overflow-wrap:break-word}@media (max-width:768px){.content-header{align-items:flex-start;flex-direction:column}.contextual-actions{width:100%}}.contextual-actions{display:flex;flex-shrink:0;flex-wrap:wrap;gap:12px}.sidebar-toggle-input{display:none}.sidebar-toggle-label{align-items:center;background:var(--bg);border:1px solid var(--border-medium);border-left:none;border-radius:0 6px 6px 0;bottom:24px;color:var(--text-light);cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:-16px;transition:color .2s;width:16px}.sidebar-toggle-label:hover{color:var(--text-dark)}.sidebar-toggle-label svg{transition:transform .2s}.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-toggle-label svg{transform:rotate(180deg)}.sidebar{background:var(--bg);border-right:1px solid var(--border-medium);bottom:0;left:0;max-width:300px;min-width:200px;overflow:visible;position:fixed;top:var(--top-height);transition:min-width .2s,max-width .2s;width:20vw;z-index:10}.sidebar-content{height:100%;overflow-y:auto;padding:24px 0 180px;position:relative}.sidebar:has(.sidebar-toggle-input:not(:checked)){border-right:none;max-width:0;min-width:0}.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-content{overflow:hidden}body:has(.alert-bar) .sidebar{top:112px}.nav-section{margin-bottom:32px}.nav-section-title{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;padding:0 24px 12px 27px;text-transform:uppercase}.nav-item{align-items:center;border-left:3px solid transparent;color:var(--text-dark);cursor:pointer;display:flex;gap:12px;padding:10px 24px;text-decoration:none;transition:background .2s}.nav-item.active,.nav-item:hover{background:var(--bg-light)}.nav-item.active{border-left:3px solid var(--primary-dark);color:var(--primary-dark)!important;font-weight:500}.nav-icon{fill:currentColor;height:20px;width:20px}.nav-icon svg{display:block;height:100%;width:100%}.nav-item-expand{font-size:12px;margin-left:auto;opacity:var(--opacity-muted);transition:transform .2s}.nav-toggle-input{display:none}.nav-toggle-label{align-items:center;border-left:3px solid transparent;color:var(--text-dark);cursor:pointer;display:flex;gap:12px;padding:10px 24px;text-decoration:none;transition:background .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nav-toggle-label:hover{background:var(--bg-light)}.nav-toggle-label.active{background:var(--bg-medium);border-left:3px solid var(--primary-dark);font-weight:500}.nav-subitems{max-height:0;overflow:hidden}.nav-toggle-input:checked+.nav-toggle-label+.nav-subitems{max-height:none}.nav-toggle-input:checked+.nav-toggle-label .nav-item-expand{transform:rotate(180deg)}.nav-subitems .nav-toggle-label{color:var(--text-medium);font-size:16px;padding:8px 24px}.nav-subitems .nav-toggle-label:hover{background:transparent;color:var(--primary-dark)}.nav-subitems .nav-subitems{max-height:0;padding-left:16px}.nav-subitems .nav-subitems a{align-items:center;color:var(--text-medium);display:flex;font-size:16px;gap:12px;padding:8px 24px;text-decoration:none;transition:color .2s}.nav-subitems .nav-subitems a:hover{color:var(--primary-dark)}.nav-subitem{align-items:center;color:var(--text-medium);display:flex;font-size:16px;justify-content:space-between;padding:8px 24px;text-decoration:none;transition:color .2s}.nav-subitem:hover{color:var(--primary-dark)}.nav-subitem .nav-item-expand{font-size:12px;opacity:var(--opacity-muted)}.nav-subitems .nav-icon{display:none}.nav-progress-section{background:var(--bg);border-top:1px solid var(--border-medium);bottom:0;left:0;padding:16px 24px 24px;position:absolute;right:0}.nav-progress-section:not(:has(*)){display:none}.nav-progress-title{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}.progress-item{margin-bottom:16px}.progress-item:last-child{margin-bottom:0}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:6px}.progress-label{color:var(--text-dark);font-size:13px;font-weight:500}.progress-percentage{color:var(--text-light);font-size:12px;font-weight:600}.progress-bar-container{background:var(--bg-medium);border-radius:3px;height:6px;overflow:hidden;width:100%}.progress-bar{background:var(--primary-dark);border-radius:3px;height:100%;transition:width .3s ease}#alert-bar{left:0;position:fixed;right:0}#alert-bar:hover .alert-bar+.alert-bar{opacity:1;position:relative;top:64px}.alert-bar{align-items:center;border-style:solid;border-width:2px 0;display:flex;height:64px;justify-content:space-between;padding:14px 24px;position:absolute;transition:all .2s ease-in-out;width:100%;z-index:2}.alert-bar+.alert-bar{border-top-width:0;opacity:0;top:0;z-index:1}.alert-count{align-items:center;border-radius:50%;border-style:solid;border-width:2px;cursor:pointer;display:flex;height:1.25lh;justify-content:center;text-align:center;vertical-align:middle;width:1.25lh}.alert-bar.error{background:var(--danger-bg);border-color:var(--danger-medium);color:var(--danger-medium)}.alert-bar.error:hover{color:var(--danger-dark)}.alert-bar.success{background:var(--success-bg);border-color:var(--success-medium);color:var(--success-medium)}.alert-bar.success:hover{color:var(--success-dark)}.alert-bar.info{background:var(--info-bg);border-color:var(--info-medium);color:var(--info-medium)}.alert-bar.info:hover{color:var(--info-dark)}#alert-bar[class$=loading]{opacity:var(--opacity-muted);pointer-events:none}.alert-content{align-items:center;display:flex;flex:1;gap:12px}.alert-icon{cursor:pointer;flex-shrink:0;height:20px;width:20px}.alert-message{font-size:14px;font-weight:500}.alert-close{border-radius:6px;flex-shrink:0;font-size:16px;font-weight:600;line-height:1;padding:6px 12px}.alert-close,.btn{cursor:pointer;transition:all .2s}.btn{align-items:center;border:none;border-radius:8px;display:flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;text-decoration:none}.btn-primary{background:var(--primary-medium);color:var(--bg)}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--bg);border:1px solid var(--border-medium);color:var(--text-dark)}.btn-secondary:hover{background:var(--bg-light)}.btn-danger{background-color:var(--danger-medium);border:1px solid var(--danger-medium);color:var(--danger-bg)}.btn-danger:hover{background-color:var(--danger-dark)}.btn-select{background:var(--bg);border:1px solid var(--border-medium);border-radius:8px;color:var(--text-dark);cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;position:relative;transition:all .2s}.btn-select:hover,.btn-select[open]{background:var(--bg-light)}.btn-select summary{align-items:center;cursor:pointer;display:flex;gap:8px;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn-select summary::-webkit-details-marker{display:none}.btn-select summary:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-dark);content:"";height:0;margin-left:8px;width:0}.btn-select[open] summary:after{border-bottom:5px solid var(--text-dark);border-top:none}.btn-icon{fill:currentColor;height:16px;width:16px}.btn-icon svg{display:block;height:100%;width:100%}.drop-menu{background:var(--bg);border:1px solid var(--border-medium);border-radius:8px;box-shadow:var(--shadow-md);max-height:30vh;min-width:200px;overflow-y:scroll;padding:8px 0;position:absolute;right:0;top:calc(100% + 4px);z-index:1000}.drop-link{color:var(--text-dark);display:inline-block;font-size:14px;height:100%;padding:10px 16px;text-decoration:none;transition:background .2s;width:100%}.drop-link:hover{background:var(--bg-light)}.content-card{background:var(--bg);border-radius:12px;box-shadow:var(--shadow-sm);padding:24px}.content-card:has(.tabs){padding:0}.content-card:has(.tabs) .card-section{padding:24px}.card-section{margin-bottom:24px}.card-section:last-child{margin-bottom:0}.card-section-title{font-size:18px;font-weight:600;margin-bottom:16px}.card-text{color:var(--text-medium);line-height:1.6}.table-container{max-height:200vh;overflow:scroll}.data-table{border-collapse:collapse;margin-top:16px;min-width:1600px;width:100%}.data-table th{background:var(--bg-light);border-bottom:2px solid var(--border-medium);color:var(--text-dark);font-size:14px;font-weight:600;position:sticky;text-align:left;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.data-table th a{color:inherit;display:inline-block;padding:12px 16px;text-decoration:none;width:100%}.data-table th a:hover{color:var(--primary-dark)}.data-table tr{background:var(--bg)}.data-table th:first-child{cursor:default;left:0;position:sticky;z-index:4}.data-table td:first-child{background:inherit;left:0;position:sticky;z-index:3}.data-table th.sort-asc:after,.data-table th.sort-desc:after{content:"";font-size:12px;margin-left:1em;position:relative;right:3em;z-index:-1}.data-table th.sort-asc:after{color:var(--primary-dark);content:"\25B2"}.data-table th.sort-desc:after{color:var(--primary-dark);content:"\25BC"}.data-table td{border-bottom:1px solid var(--border-light);color:var(--text-medium);max-width:250px;padding:12px 16px;position:relative}.data-table td,.data-table td:first-child{vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:var(--bg-light)}.data-table td:first-child,.data-table th:first-child{text-align:center;width:40px}.data-table input[type=checkbox]:checked{background:var(--primary-dark)}.data-table tr:has(input[type=checkbox]:checked){background:var(--primary-bg)}.data-table tr:has(input[type=checkbox]:checked):hover{background:var(--primary-light)}.cell-content{display:-webkit-box;-webkit-line-clamp:3;max-height:60px;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;line-height:1.4;padding:2px}.cell-content *{display:inline}.cell-content .btn{cursor:default;margin:2px;padding:4px}.row-checkbox{accent-color:var(--primary-dark);cursor:pointer;height:18px;width:18px}.row-checkbox:checked~td{background:var(--primary-bg)}.assoc-link-icon{background:var(--bg-medium);border-radius:2px;bottom:2px;color:var(--text-light);cursor:pointer;display:none;padding:2px;position:absolute;right:24px;transition:opacity .2s;z-index:10}.assoc-link-icon:hover{color:var(--text-medium)}.expand-icon{background:var(--bg-medium);border-radius:2px;bottom:2px;color:var(--text-light);cursor:pointer;display:none;padding:2px;position:absolute;right:2px;transition:opacity .2s;z-index:10}.expand-icon:hover{color:var(--text-medium)}.copy-icon,.table-cell:hover .expand-icon{display:flex}.copy-icon{background:var(--bg-medium);border-radius:2px;bottom:6px;color:var(--text-light);cursor:pointer;padding:2px;position:absolute;right:6px;transition:opacity .2s;width:20px;z-index:100}.copy-icon:hover,.resource-link{color:var(--text-medium)}.resource-link{-webkit-text-decoration-style:dashed;text-decoration-style:dashed}.resource-link:hover{color:var(--text-dark)}.status-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:500;padding:4px 12px}.status-active{background:var(--success-light);color:var(--success-dark)}.status-pending{background:var(--danger-bg);color:var(--danger-medium)}.status-completed{background:var(--info-light);color:var(--info-dark)}.pagination{align-items:center;border-top:1px solid var(--border-light);display:flex;justify-content:center;margin-top:24px;padding-top:16px}.pagination-info{color:var(--text-medium);font-size:14px}.pagination-controls{align-items:center;display:flex;gap:8px}.pagination-btn{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;color:var(--text-dark);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s}.pagination-btn:hover:not(:disabled){background:var(--bg-light);border-color:var(--primary-dark)}.pagination-btn:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}.pagination-info-btn{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;color:var(--text-medium);cursor:pointer;font-size:14px;padding:6px 12px;transition:all .2s}.pagination-info-btn:hover{background:var(--bg-light);border-color:var(--primary-dark)}.search-container{margin-bottom:16px;max-width:400px;position:relative}.search-input{border:1px solid var(--border-medium);border-radius:8px;font-family:inherit;font-size:14px;padding:10px 16px 10px 40px;transition:all .2s;width:100%}.search-input:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.search-input::-moz-placeholder{color:var(--text-light)}.search-input::placeholder{color:var(--text-light)}.search-icon{height:18px;left:12px;opacity:var(--opacity-muted);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px}.form-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:32px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field.error .error-message{color:var(--danger-medium);font-size:10px;font-weight:700}.form-field.error input,.form-field.error textarea{background:var(--danger-bg)}.form-label{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.form-input,.form-select,.form-textarea{border:1px solid var(--border-medium);border-radius:6px;color:var(--text-dark);font-family:inherit;font-size:14px;padding:10px 12px;transition:all .2s;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.form-textarea{height:39px;max-width:30vw;min-height:39px;padding:10px 12px;resize:vertical}.form-actions{border-top:2px solid var(--border-light);display:flex;gap:12px;justify-content:flex-end;margin-top:16px;padding-top:16px}.form-subsection{background:var(--bg-light);border-radius:8px;grid-column:1/-1;margin-bottom:16px;padding:24px}.form-subsection-title{color:var(--text-dark);font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}.form-subgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.form-line .form-title{color:var(--text-dark);font-size:16px;font-weight:600;margin-bottom:30px;text-align:left}.form-line .docs{background:var(--info-bg);border-left:4px solid var(--info-medium);border-radius:8px;color:var(--text-medium);font-size:14px;line-height:1.6;margin-bottom:30px;padding:16px 20px}.form-line .form-group{align-items:flex-start;display:flex;gap:12px;margin-bottom:24px;width:100%}.form-line label{color:var(--text-medium);display:block;flex-shrink:0;font-size:14px;font-weight:500;min-width:20px;padding-top:7px}.form-line textarea{background:var(--bg);border:2px solid var(--border-medium);border-radius:8px;color:var(--text-dark);flex:1;font-family:inherit;font-size:15px;padding:8px 16px;resize:vertical;transition:all .3s ease;width:100%}.form-line textarea:focus{border-color:var(--primary-dark);box-shadow:var(--focus-ring);outline:none}.form-line .button-group{display:flex;gap:12px;justify-content:flex-end;margin-top:32px;width:100%}select[multiple]{height:39px}select[multiple]:focus-within{height:100px}.search-select-container{position:relative;width:100%}.select-filter{box-sizing:border-box;padding:10px;width:100%}.select-filter,.select-options{border:1px solid var(--border-medium);border-radius:4px}.select-options{background-color:var(--bg);display:none;left:0;list-style:none;margin:0;max-height:150px;overflow-y:auto;padding:0;position:absolute;right:0;top:120%;z-index:1}.search-select-container:focus-within .select-options{display:block}.search-select-container .select-options:active,.search-select-container .select-options:focus{display:block}.select-options li{cursor:pointer;padding:10px}.select-options li:hover{background-color:var(--bg-medium)}.array-input-wrapper{border:1px solid var(--border-light);border-radius:8px;display:flex;flex-wrap:wrap;gap:8px;min-height:39px;padding:2px;transition:border-color .2s}.array-input-wrapper:focus-within{background:var(--bg);border-color:var(--primary-dark)}.array-input-wrapper .btn{height:32px;padding:0 10px}.array-input-wrapper input{background:transparent;border:none;flex:1;font-size:14px;min-width:120px;outline:none;padding:6px}.array-input-wrapper input:not(:-moz-placeholder-shown)+.return-icon{display:block}.array-input-wrapper input:not(:placeholder-shown)+.return-icon{display:block}.return-icon{animation:fadeIn .2s ease-out;display:none;height:20px;margin:5px;opacity:.5;transition:opacity .2s;width:20px}.detail-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:32px}.detail-field{display:flex;flex-direction:column;gap:8px}.detail-field-label{color:var(--text-light);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.detail-field-value{color:var(--text-dark);display:flex;font-size:16px;max-height:3lh;min-height:1.5lh;overflow:hidden;position:relative}.detail-field-value>span{display:flex}.detail-field-value .btn{cursor:default;margin:2px;padding:4px}.detail-field-value:hover .assoc-link-icon,.detail-field-value:hover .expand-icon{display:flex}.detail-subtitle+.detail-subtitle:before{content:"|"}.expand-content{background:var(--bg-light);border-radius:8px;color:var(--text-medium);font-family:monospace;line-height:1.6;overflow:scroll;padding:16px;white-space:pre}.modal{align-items:center;background:var(--bg-dark);bottom:0;cursor:auto;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.modal-content{background:var(--bg);border-radius:12px;box-shadow:var(--shadow-lg);max-height:80vh;max-width:600px;min-width:50%;overflow-y:auto;padding:32px;position:relative}.modal-header{align-items:center;border-bottom:2px solid var(--border-light);display:flex;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.modal-title{color:var(--text-dark);font-size:20px;font-weight:600}.modal-close{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-light);cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.modal-close:hover{background:var(--bg-light);color:var(--text-dark)}.modal-body{color:var(--text-medium);line-height:1.6;position:relative}.modal-body:hover .copy-icon,.tabs{display:flex}.tabs{border-bottom:1px solid var(--border-light);justify-content:right;padding:0}.tabs a{align-content:center;background:none;border:none;border-left:1px dashed var(--border-medium);cursor:pointer;flex:1;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;max-width:200px;padding:4px 2px;text-align:center;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.tabs a,.tabs a:hover{color:var(--text-light)}.tabs a.active,.tabs a:hover{background-color:var(--bg-light)}.tabs a.active{color:var(--text-dark);font-weight:700}#main-link.active{visibility:hidden}#main-link{border:none;border-right:2px solid var(--border-light);margin-right:auto}#main-link:before{content:"\2190";font-size:16px;font-weight:400}.switch-container{display:inline-block;position:relative}input[type=radio]{display:none}.switch{background:var(--bg);border:1px solid var(--border-medium);border-radius:5.5px;cursor:pointer;height:38px;overflow:hidden;position:relative;width:125px}.switch-background{display:flex;height:100%;left:0;position:absolute;top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:300%}.bg-section{height:100%;width:33.333%}.switch-handle{align-items:center;background:var(--bg);border:1px solid var(--border-medium);border-radius:5.5px;display:flex;font-size:12px;height:34px;justify-content:center;position:absolute;top:1px;transition:transform .3s cubic-bezier(.4,0,.2,1);width:34px;z-index:2}.switch-left:checked~.switch .switch-background,.switch-left:checked~.switch .switch-handle{transform:translateX(1px)}.switch-left:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-center:checked~.switch .switch-background{transform:translateX(-33.333%)}.switch-center:checked~.switch .switch-handle{transform:translateX(45px)}.switch-center:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-right:checked~.switch .switch-background{transform:translateX(-66.666%)}.switch-right:checked~.switch .switch-handle{transform:translateX(88px)}.switch-right:checked~.switch .switch-handle:before{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;content:"";flex-shrink:0;height:16px;width:16px}.switch-center:checked~.labels .label-center,.switch-left:checked~.labels .label-left,.switch-right:checked~.labels .label-right{color:var(--text-dark);font-weight:600;transform:scale(1.1)}.label-area{cursor:pointer;height:35px;position:absolute;top:0;width:33.333px;z-index:3}.label-area.left{left:0}.label-area.center{left:33.333px}.label-area.right{right:0}.embed-container{display:flex;flex-direction:column;gap:30px}.embed-section,.embed-section-title-wrapper,.embed-section-wrapper{margin-bottom:15px}.embed-section{background:var(--bg-light);border-radius:8px;padding:50px 25px 25px;position:relative}.embed-section.odd{background:var(--bg);border:1px solid var(--border-medium);border-radius:6px;position:relative;transition:border-color .2s}.embed.subsection:hover{border-color:var(--border-dark)}.embed-section:has(.remove-icon.phx-click-loading){opacity:var(--opacity-disabled);pointer-events:none}.add-section-btn{align-items:center;background:var(--bg);border:1px dashed var(--border-light);border-radius:8px;color:var(--text-dark);cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:8px;justify-content:center;margin-top:0;padding:16px;transition:all .2s;width:100%}.add-section-btn:hover{border-style:solid}.remove-icon{background:none;border:none;color:var(--danger-medium);cursor:pointer;height:24px;left:6px;opacity:var(--opacity-muted);padding:0;position:absolute;top:6px;transition:color .2s,opacity .2s;width:24px}.remove-icon:hover{color:var(--danger-dark);opacity:1}.remove-icon svg{height:100%;width:100%}.drag-icon{background:none;border:none;color:var(--text-light);cursor:grab;height:28px;padding:0;position:absolute;right:6px;top:6px;transition:color .2s;width:28px}.drag-icon:active{cursor:grabbing}.drag-icon:hover{color:var(--text-medium)}.drag-icon svg{height:100%;width:100%}.dragging{opacity:.5;transform:scale(.95);transition:transform .2s,opacity .2s}.drop-zone{background:var(--info-bg);border:2px dashed var(--info-medium);border-radius:8px;color:var(--info-medium);display:none;font-size:14px;font-weight:500;height:60px;margin:10px 0;opacity:var(--opacity-muted)}.drop-zone,.error-box{align-items:center;justify-content:center}.error-box{display:flex;flex-direction:column;padding:80px 40px;text-align:center}.error-header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.error-icon{flex-shrink:0;height:32px;width:32px}.error-icon svg{height:100%;width:100%}.error-header h3{color:var(--text-dark);font-size:24px;font-weight:600}.error-message{color:var(--text-light);font-size:15px;line-height:1.6;max-width:500px}.edit-view{display:block}.edit-view.hidden{display:none}.search-select-container[class$=loading]{opacity:.5}.search-select-container[class$=loading] button,.search-select-container[class$=loading] input,input[class$=loading]{opacity:.5;pointer-events:none}input[class$=loading]+.select-options{content:""}button[class$=loading]{opacity:.5;pointer-events:none}@keyframes slideIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:.5}}.spinner{animation:spin 1s linear infinite;border:8px solid var(--primary-bg);border-radius:50%;border-top-color:var(--primary-light);height:80px;margin:80px auto;width:80px}@keyframes spin{to{transform:rotate(1turn)}} \ No newline at end of file diff --git a/lib/live_admin/components/layout/app.html.heex b/lib/live_admin/components/layout/app.html.heex index f32a1ab7..98689fe6 100644 --- a/lib/live_admin/components/layout/app.html.heex +++ b/lib/live_admin/components/layout/app.html.heex @@ -48,27 +48,18 @@ - +
@@ -133,7 +147,7 @@ defmodule LiveAdmin.Components.Nav do type="checkbox" id={"#{parent}-toggle"} class="nav-toggle-input" - checked={open?(assigns, parent)} + checked={MapSet.member?(@open_groups, parent)} />