@import "reset.css";
@import "cards.css";
@import "dashboard.css";
@import "glyphicon.css";
@import "form-base.css";



:root { --toolbg: #B7D9E8; --toggle-w: 42px; --toggle-h: 22px; --darkcolor: rgba(23,80,153,1); --pad: 2px; --knob: calc(var(--toggle-h) - (var(--pad) * 2)); --off: #fbfbfb; --on: #C3E0EB; /* iOS-ish grøn */ }
html { scroll-behavior: smooth; }

html, body { height: 100%; margin: 0; }

body, p, td, div, label, th, li { font-size: 14px; }

h1 { margin: 0 0 0 0; font-size: 22px; font-weight: normal; }
h2 { margin: 0 0 0 0; font-size: 16px; font-weight: normal; }
h3 { margin: 0; font-size: 16px; }

h2 span.glyphicon { font-size: 14px; }


#FormFields { padding-bottom: 20px; position: relative; }

.wIcon { width: 24px; }
.vm { vertical-align: middle !important; }
.ac { text-align: center !important; }
.ar { text-align: right; }
.sm { font-size: 0.8em; }
.green { color: green; }
.gray { color: gray; }
.red { color: darkred; }
.hidden { visibility: hidden; }
td { position: relative; }

.glyphicon-eye-open,
.glyphicon-eye-close { cursor: pointer; }
.page-head { margin-bottom: 12px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: rgba(0,0,0,.55); }
    .breadcrumb a { color: rgba(0,0,0,.55); text-decoration: none; transition: color .12s ease; }
        .breadcrumb a:hover { color: rgba(0,0,0,.80); }
    .breadcrumb .sep { opacity: .35; }
    .breadcrumb .current { color: rgba(0,0,0,.75); font-weight: 500; }


/*Site Tables*/
/* Card */
.table-card { border: 1px solid rgba(0,0,0,.14); border-radius: 6px; background: rgba(255,255,255,.90); overflow: auto; margin: 1%; }
.table-card-wide { margin: 0; }

.table-card__header, .table-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.96); }
.table-card__header { border-bottom: 1px solid rgba(0,0,0,.10); }
.table-card__footer { border-top: 1px solid rgba(0,0,0,.10); }
.table-card__title { margin: 0; font-size: 1.05rem; font-weight: 650; color: rgba(0,0,0,.82); }
.table-card__meta { margin-top: 2px; font-size: .85rem; color: rgba(0,0,0,.56); }
.table-card__actions { display: flex; align-items: center; gap: 10px; }

.list-table tbody tr:nth-child(even) { background: rgba(0,0,0,.025); }
.list-table tbody tr:hover { background: rgba(120,180,200,.14); }

.table-search { width: 220px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.98); outline: none; }
    .table-search:focus { border-color: rgba(70,140,165,.85); box-shadow: 0 0 0 3px rgba(70,140,165,.20); }
.table-btn { padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(0,0,0,.18); background: rgba(0,0,0,.88); color: #fff; }
.table-btn--ghost { background: rgba(0,0,0,.04); color: rgba(0,0,0,.78); }

.table-wrap { overflow-x: auto; }

/* Table */
.list-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .94rem; }
    .list-table thead th { padding: 12px 16px; text-align: left; font-size: .82rem; letter-spacing: .02em; color: rgba(0,0,0,.82); background: rgba(0,0,0,.035); border-bottom: 1px solid rgba(0,0,0,.12); white-space: nowrap; }
    .list-table tbody td { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.10); vertical-align: middle; }
    .list-table tbody tr { transition: background-color .12s ease; }
        .list-table tbody tr:hover { background: rgba(120,180,200,.14); }
        .list-table tbody tr:last-child td { border-bottom: none; }

.list-table-narrow tbody td { padding: 4px 6px; }
.list-table-narrow thead th { padding: 8px 6px; }

/* Bits */
.muted { color: rgba(0,0,0,.58); font-size: .85em; margin-top: 2px; }
.ta-right { text-align: right; }
.badge--ok { border-color: rgba(70,160,120,.55); background: rgba(70,160,120,.16); }
.pager { display: flex; gap: 8px; }


.pointer { cursor: pointer; }
.cursor-move { cursor: move; }

div#TopArea { padding: 16px 16px 0 16px; border-bottom: 1px solid var(--toolbg); margin: 0; display: flex; flex-direction: row; }
    div#TopArea h1 { margin: 6px 0 0 0; }
    div#TopArea .left { width: 70%; }
    div#TopArea .right { flex: 1; }

#MainContainer { display: flex; min-height: 100vh; flex-direction: row; flex-wrap: nowrap; }
#AppContainer { flex: 1; min-height: 100vh; overflow-y: auto; }


.not-active,
.not-active td { background: #f5e5e4 !important; }
/*.not-active .tool-cells-in-row { background-color: white !important; }*/

.readonly { background: #fbfbfb !important; }


.state-flex-cell { padding: 4px 0 0 6px; }



tr.odd td { }
tr.even td { background: #fefefe; }

#PageDetails { width: 24%; min-width: 300px; flex-direction: row; position: relative; overflow-y: auto; min-height: 100vh; }
    #PageDetails .detail-close-button { position: absolute; top: 15px; right: 12px; cursor: pointer; }
    #PageDetails .detail-function-button { position: absolute; top: 12px; right: 12px; cursor: pointer; }
    #PageDetails .detail-close-button:hover { color: gray; }
    #PageDetails h2:first-child { background-color: var(--on); padding: 10px; margin: 0; }


.detail-pane-container { margin: 20px 0 0 12px; background: white; }
.detail-pane-container-narrow { width: 80%; margin: 20px auto; }
.container-center { margin-left: auto; margin-right: auto; }
.form-flex-row { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0 0 10px 0; padding: 0 0 6px 0 }
    .form-flex-row .form-flex-label-cell { width: 40%; padding-top: 6px; border-bottom: 1px dotted var(--on); margin-right: 4px; }
    .form-flex-row .form-flex-value-cell { display: flex; flex: 1; justify-content: flex-start; align-items: flex-start; }
    .form-flex-row .form-flex-icon { flex: 1; text-align: center; border-bottom: 1px solid white; color: gray; padding: 6px 0 4px 0; }

        .form-flex-row .form-flex-icon.isActive { border-bottom: 1px solid gray; background-color: var(--on); }
.form-flex-button-row { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0 0 10px 0; padding: 0 0 6px 0 }
    .form-flex-button-row .form-flex-label-cell { border: none; }
    .form-flex-button-row .form-flex-value-cell { justify-content: flex-end; }


.form-full-row { display: flex; flex-direction:: column; flex-wrap: nowrap; margin: 0 0 10px 0; padding: 0 0 6px 0 }
    .form-full-row .form-flex-label-cell { width: 40%; padding-top: 6px; border-bottom: 1px dotted var(--on); margin-right: 4px; }
    .form-full-row .form-flex-value-cell { display: flex; flex: 1; justify-content: flex-start; align-items: flex-start; }
    .form-full-row .form-flex-icon { flex: 1; text-align: center; border-bottom: 1px solid white; color: gray; padding: 6px 0 4px 0; }


.form-rangebox { width: 100%; }
.form-colorbox { width: 10%; }
.listitem-foredit { display: flex; flex-direction: row; flex-wrap: nowrap; }
    .listitem-foredit .lblinlist { width: 80%; }
        .listitem-foredit .lblinlist span { margin: 0 8px 0 0; }
    .listitem-foredit .fieldinlist { width: 50%; }


table.form-table-inner { width: 100%; border-collapse: collapse; }
    table.form-table-inner td { border: 1px solid silver; background: white; }
    table.form-table-inner th { border: 1px solid silver; background: white; text-align: left; }
div.form-blue { background: #dbf3fa; }
div.form-green { background: #effcef; }
div.form-rose { background: #feeff5; }
div.form-gray { background: #f7f7f7; }
div.form-gray { background: #f7f7f7; }
div.form-blank { background: white; }
div.form-empty { background: white; }
    div.form-empty table.form-table-inner th,
    div.form-empty table.form-table-inner td { border: none !important; }


.grey-cell { background: var(--off); padding: 6px; }
.cell-print-value { padding: 6px 6px 6px 6px; display: block; font-family: Courier New; font-size: 14px; }


#PageSection { display: flex !important; min-height: 100vh; display: flex; flex-direction: row; flex-wrap: nowrap; }
#ViewContainer { position: relative; flex: 1; min-height: 100vh; overflow-y: auto; padding: 16px; background: linear-gradient( to bottom, rgba(195, 224, 235, 0.45) 0%, rgba(195, 224, 235, 0.25) 60%, rgba(195, 224, 235, 0.08) 80%, rgba(195, 224, 235, 0.00) 99% ); }
    #ViewContainer.forForm { padding: 0; }

.ThirdsContainer { display: grid; grid-template-columns: 2fr 1fr; /* 2/3 og 1/3 */ gap: 20px; /* valgfri afstand mellem kolonner */ }

#ColContainer { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; min-height: 100vh; overflow-y: auto; padding: 16px; background: linear-gradient( to bottom, rgba(195, 224, 235, 0.45) 0%, rgba(195, 224, 235, 0.25) 60%, rgba(195, 224, 235, 0.08) 80%, rgba(195, 224, 235, 0.00) 99% ); }
    #ColContainer .col { width: 100%; }
#ToolsSection { width: 260px; min-height: 100vh; overflow-y: auto; background-color: linear-gradient( to bottom, #fbfbfb 0%, #fdfdfd 25%, #ffffff 55%, #ffffff 100% ); }

.formbackdrop { background-size: 200% 200%; }
.formbackdrop-beginner { background: #F0FAFD; }
.formbackdrop-aurora { background: linear-gradient(115deg, rgba(120, 170, 255, 0.80), rgba(180, 120, 255, 0.55), rgba(120, 255, 210, 0.55), rgba(255, 210, 120, 0.65) ); filter: saturate(1.15) contrast(1.05); }
.formbackdrop-cold { background: linear-gradient( 115deg, rgba(90, 150, 255, 0.85), rgba(140, 110, 255, 0.65), rgba(110, 200, 255, 0.65), rgba(180, 220, 255, 0.75) ); }
.formbackdrop-nature { background: linear-gradient( 115deg, rgba(110, 200, 170, 0.85), rgba(90, 180, 140, 0.65), rgba(120, 220, 200, 0.65), rgba(200, 235, 210, 0.75) ); }
.formbackdrop-warm { background: linear-gradient( 115deg, rgba(255, 160, 190, 0.85), rgba(255, 190, 150, 0.65), rgba(255, 210, 170, 0.65), rgba(255, 230, 200, 0.75) ); }
.formbackdrop-spirit { background: linear-gradient( 115deg, rgba(120, 100, 220, 0.85), rgba(160, 120, 255, 0.65), rgba(130, 170, 255, 0.65), rgba(200, 210, 255, 0.75) ); }
.formbackdrop-pastel { background: linear-gradient( 115deg, rgba(190, 210, 255, 0.85), rgba(220, 200, 255, 0.65), rgba(200, 235, 255, 0.65), rgba(255, 240, 220, 0.75) ); }
.formbackdrop-joy { background: linear-gradient( 115deg, rgba(255, 210, 120, 0.85), rgba(255, 180, 140, 0.65), rgba(255, 220, 160, 0.65), rgba(255, 240, 200, 0.75) ); }
.formbackdrop-ice { background: linear-gradient( 115deg, rgba(200, 225, 255, 0.85), rgba(170, 210, 255, 0.65), rgba(200, 240, 255, 0.65), rgba(230, 250, 255, 0.75) ); }
.formbackdrop-crystal { background: linear-gradient( 115deg, rgba(120, 220, 210, 0.85), rgba(90, 200, 190, 0.65), rgba(140, 235, 225, 0.65), rgba(210, 245, 240, 0.75) ); }
.formbackdrop-forest { background: linear-gradient( 115deg, rgba(80, 160, 120, 0.85), rgba(100, 180, 140, 0.65), rgba(130, 200, 160, 0.65), rgba(200, 230, 210, 0.75) ); }
.formbackdrop-cosmic { background: linear-gradient( 115deg, rgba(60, 90, 180, 0.85), rgba(90, 110, 220, 0.65), rgba(120, 150, 255, 0.65), rgba(180, 200, 255, 0.75) ); }
.formbackdrop-sunset { background: linear-gradient( 115deg, rgba(255, 150, 120, 0.85), rgba(220, 130, 180, 0.65), rgba(190, 150, 220, 0.65), rgba(230, 200, 255, 0.75) ); }
.formbackdrop-earth { background: linear-gradient( 115deg, rgba(230, 200, 150, 0.85), rgba(210, 180, 130, 0.65), rgba(240, 220, 180, 0.65), rgba(255, 240, 210, 0.75) ); }
.formbackdrop-sky { background: linear-gradient(115deg, rgba(140, 200, 255, .85), rgba(120, 235, 225, .65), rgba(255, 230, 170, .65), rgba(255, 245, 220, .75) ); }
.formbackdrop-lavender { background: linear-gradient(115deg, rgba(170, 140, 255, .85), rgba(210, 160, 255, .65), rgba(255, 190, 220, .65), rgba(245, 235, 255, .75) ); }
.formbackdrop-ocean { background: linear-gradient(115deg, rgba(70, 120, 230, .85), rgba(90, 200, 215, .65), rgba(140, 235, 235, .65), rgba(220, 250, 255, .75) ); }
.formbackdrop-moss { background: linear-gradient(115deg, rgba(90, 170, 120, .85), rgba(130, 220, 170, .65), rgba(220, 235, 200, .65), rgba(255, 245, 220, .75) ); }
.formbackdrop-sunrise { background: linear-gradient(115deg, rgba(255, 170, 150, .85), rgba(255, 190, 130, .65), rgba(255, 220, 150, .65), rgba(255, 245, 210, .75) ); }
.formbackdrop-berry { background: linear-gradient(115deg, rgba(200, 90, 160, .85), rgba(170, 120, 230, .65), rgba(230, 170, 220, .65), rgba(255, 235, 245, .75) ); }
.formbackdrop-night { background: linear-gradient(115deg, rgba(55, 70, 165, .85), rgba(85, 120, 220, .65), rgba(120, 255, 210, .55) ); }
.formbackdrop-rosegold { background: linear-gradient(115deg, rgba(255, 175, 205, .85), rgba(255, 210, 180, .65), rgba(245, 230, 205, .65), rgba(255, 245, 235, .75) ); }
.formbackdrop-desert { background: linear-gradient(115deg, rgba(235, 150, 110, .85), rgba(240, 195, 140, .65), rgba(255, 225, 175, .65), rgba(235, 240, 255, .70) ); }
.formbackdrop-glacier { background: linear-gradient(115deg, rgba(160, 190, 220, .85), rgba(190, 225, 245, .65), rgba(220, 245, 255, .65), rgba(250, 250, 255, .75) ); }

.formbackdrop-multisoft { background: radial-gradient(1200px 700px at 20% 30%, rgba(120, 255, 210, .55), transparent 65%), radial-gradient(1100px 800px at 80% 25%, rgba(110, 170, 255, .55), transparent 65%), radial-gradient(1200px 800px at 50% 85%, rgba(170, 120, 255, .50), transparent 68%), radial-gradient(1400px 900px at 50% 50%, rgba(40, 70, 120, .85), transparent 70%); }
.formbackdrop-multicosmic { background: radial-gradient(1200px 800px at 15% 40%, rgba(150, 255, 235, .55), transparent 65%), radial-gradient(1200px 800px at 85% 30%, rgba(140, 210, 255, .55), transparent 65%), radial-gradient(1200px 800px at 60% 85%, rgba(200, 230, 255, .45), transparent 68%), radial-gradient(1500px 1000px at 50% 50%, rgba(60, 100, 160, .80), transparent 70%); }
.formbackdrop-multipastel { background: radial-gradient(1100px 750px at 20% 30%, rgba(255, 170, 210, .55), transparent 65%), radial-gradient(1100px 750px at 85% 35%, rgba(200, 150, 255, .55), transparent 65%), radial-gradient(1100px 750px at 55% 85%, rgba(255, 215, 160, .50), transparent 68%), radial-gradient(1500px 1000px at 50% 50%, rgba(120, 70, 140, .80), transparent 72%); }
.formbackdrop-multideep { background: radial-gradient(1200px 850px at 20% 25%, rgba(120, 255, 200, .45), transparent 65%), radial-gradient(1200px 850px at 85% 30%, rgba(100, 160, 255, .45), transparent 65%), radial-gradient(1200px 850px at 50% 85%, rgba(140, 110, 255, .45), transparent 68%), radial-gradient(1600px 1100px at 50% 50%, rgba(20, 30, 70, .95), transparent 75%); }

.formbackdrop-white { background: white; }
.formbackdrop-silver { background: silver; }
.formbackdrop-gray { background: gray; }
.formbackdrop-black { background: black; }


.formbackdrop-animate { background-size: 200% 200%; animation: auroraFlow 12s ease infinite; }

@keyframes auroraFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.section-headline { margin: 10px 0 0 0; }
/* --- Picker --- */
.picker { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.tile { width: 46px; height: 46px; border-radius: 8px; border: 1px solid rgba(0,0,0,.10); cursor: pointer; position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 6px 14px rgba(0,0,0,.06); }
    .tile:hover { transform: translateY(-1px); }
    .tile.isActive { outline: 3px solid rgba(0,0,0,.22); box-shadow: 0 10px 20px rgba(0,0,0,.10); }



.list-group { margin: 0 0 18px 0 }
.list-heading { }
    .list-heading h3 { font-size: 14px; margin: 0 0 8px 0; font-weight: normal; }
        .list-heading h3.toggle { cursor: pointer; }
        .list-heading h3 span { display: inline-block; font-size: 11px; margin: 0 6px 0 0; font-weight: normal; }

.list-holder { border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.06); margin-right: 12px; }
.list-holder-links { text-align: right; margin: 6px 12px; font-size: 0.9em; }
.list-holder div.list-item { width: 100% !important; margin: 0; height: auto; border: 1px solid rgba(0,0,0,.10); padding: 10px; font-size: 0.9em; cursor: pointer; position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; box-shadow: none; display: flex; flex-direction: row; }
    .list-holder div.list-item + div.list-item { border-top: none; }
    .list-holder div.list-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
    .list-holder div.list-item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
    .list-holder div.list-item:not(:first-child):not(:last-child) { border-radius: 0; }
    .list-holder div.list-item:hover { background-color: rgba(0,0,0,.03); }
    .list-holder div.list-item:active { background-color: rgba(0,0,0,.06); }
.list-holder div.active { background: #B7D9E8; }

.list-holder span.list-name { flex: 1 1 auto; }
.list-holder span.list-function { flex: 0 0 10%; color: var(--on); display: none; }
.list-holder:hover span.list-function { display: block; }
.list-holder span.list-function:hover { color: var(--darkcolor); }


/*checkbox*/
.ios-toggle { display: inline-flex; align-items: center; gap: 10px; font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; user-select: none; }
.ios-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ios-toggle__track { width: var(--toggle-w); height: var(--toggle-h); background: var(--off); border-radius: 999px; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: background .18s ease; cursor: pointer; }
.ios-toggle__knob { width: var(--knob); height: var(--knob); position: absolute; top: var(--pad); left: var(--pad); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.12); transition: transform .18s ease; }
.ios-toggle__input:checked + .ios-toggle__track { background: var(--on); }
    .ios-toggle__input:checked + .ios-toggle__track .ios-toggle__knob { transform: translateX(calc(var(--toggle-w) - var(--toggle-h))); }
.ios-toggle__input:focus-visible + .ios-toggle__track { outline: 3px solid rgba(52,199,89,.35); outline-offset: 2px; }
.ios-toggle__input:disabled + .ios-toggle__track { opacity: .55; cursor: not-allowed; }
.ios-toggle__label { color: #111; }









.ForList { padding: 10px; min-height: 100vh; }
.ForView { padding: 30px 30px; min-height: 100vh; position: relative; }
.FullView { padding: 1px 20px; min-height: 100vh; position: relative; }



#FormSettings { background: white; flex-direction: row; }
    #FormSettings span { margin: 6px; }

/*Navigator*/
#NavigatorTop { padding: 6px; display: flex; flex-direction: row; }
#NavigatorSelect { width: 100%; margin: 0 0 0 0; }
.custom-select { width: 100%; position: relative; }
.options { position: absolute; top: 100%; left: 0; width: 100%; display: none; background: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.25); overflow: hidden; z-index: 1000; }
.selected { padding: 8px 10px; font-size: 0.9rem; background: #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.15); display: flex; justify-content: space-between; align-items: center; }

.arrow { transition: transform 0.25s ease; }
.custom-select.open .arrow { transform: rotate(180deg); }
.option { padding: 8px 10px; font-size: 0.9rem; cursor: pointer; transition: background 0.2s ease; }
    .option:hover { background: #f0f0f0; }
    .option.active { background: #002346; color: #fff; }
/*Navigator*/


#NavigatorCenterPane { flex: 1; margin: 0 0 0 20px; }

#FormSettings a { font-size: 14px; display: block; margin: 6px; }

#ReportHolder { box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); padding: 40px; background: white; }
#FormHolder { box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); background: white; padding: 0 0 0 0; position: relative; }
#ListHolder { box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); background: white; }

.white { color: white; }


.form-section { background: white; padding: 4px; margin: 4px 4px 4px 4px; border-bottom: 1px dashed var(--on); }
    .form-section h3 { font-size: 14px; margin: 0 0 12px 0; font-weight: normal; }
        .form-section h3.toggle { cursor: pointer; margin: 0; }
        .form-section h3 span { display: inline-block; font-size: 11px; margin: 0 6px 0 0; font-weight: normal; }

.form-section-hero { text-align: center; border: none; }
    .form-section-hero h3 { font-size: 16px; margin: 20px; }

.subcontainer { margin: 0 0 20px 0; }
.subcontainer-toggle { margin: 10px 0 20px 17px; }

.division { }

.completeform { }
    .completeform .form-table { }
        .completeform .form-table tr { }
        .completeform .form-table td.form-cell { width: 92%; padding: 8px 4px 2px 4px; }
        .completeform .form-table td.state-cell { width: 8%; padding: 0 8px 12px 0px; vertical-align: bottom; }
            .completeform .form-table td.state-cell span { display: block; }
        .completeform .form-table td label { display: block; padding: 6px 2px 2px 2px; font-size: 12px; }
        .completeform .form-table a { }



.cell-text { }
.cell-name { display: block; }
.cell-name-full { display: block; }
h2.cell-name { padding: 6px; font-size: 18px; margin: 0 !important; }
h3.cell-name { padding: 6px; font-size: 16px; margin: 0 !important; }
.cell-text-value { display: block; padding: 6px; }
.form-description { margin: 1% 0; display: block; }
.cell-checkbox input { display: inline-block; float: left; margin: 2px 4px 2px 4px; zoom: 1.3; }
.cell-checkbox label { display: inline-block; float: left; margin-top: -6px; width: 90%; }



div.ItemToolContainer { margin: 0; padding: 0 0; }
.cell-guidance { font-size: 0.8em !important; color: gray; display: block; margin: 2px; }
.form-cell-base { }

.NavItem { display: block; }

.top-shadow { box-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.3); }
.bottom-shadow { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3); }
.bottom-right-shadow { box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.3); }
.right-shadow { box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.3); /* 0 → horizontal offset (no left/right shift)
     -4px → vertical offset (negative = shadow above)
     6px  → blur radius
     -2px → spread radius (optional, reduces size)
     rgba(...) → shadow color with transparency */ }
.left-shadow { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* 0 → horizontal offset (no left/right shift)
     -4px → vertical offset (negative = shadow above)
     6px  → blur radius
     -2px → spread radius (optional, reduces size)
     rgba(...) → shadow color with transparency */ }

span.success { color: lightgreen; }

td.tool-cells-in-row { position: relative; width: 22px; min-width: 22px; border-left: none !important; border-top: none !important; border-bottom: none !important; text-align: center; vertical-align: middle; }

/*forms*/
/*input[type="time"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="text"],
input[type="password"],
textarea,
select { width: 100%; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid silver; padding: 6px; color: #333333; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; }
    */




input,
textarea,
select { font-family: inherit; font-size: 0.95rem; line-height: 1.4; color: #1f2933; width: 100%; padding: 4px; background-color: #fff; border: 1px solid rgba(0,0,0,.18); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
    input.radius8, textarea.radius8, select.radius8 { border-radius: 8px; }
    input.radius4, textarea.radius4, select.radius4 { border-radius: 4px; }
    input.radius2, textarea.radius2, select.radius2 { border-radius: 2px; }

    input.glass, textarea.glass, select.glass { background: linear-gradient( 180deg, rgba(255,255,255,.85), rgba(255,255,255,.65) ); border-color: rgba(0,0,0,.22); box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06); }
    input.frame, textarea.frame, select.frame { background: rgba(255,255,255,.9); border-color: rgba(120, 160, 140, .35); box-shadow: 0 0 0 3px rgba(120,160,140,.12); }
    input.tech, textarea.tech, select.tech { background: #f9fafb; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); }
    input.oldphone, textarea.oldphone, select.oldphone { background: linear-gradient( 180deg, #ffffff, #f3fbff ); border: 2px solid #8fd3f4; border-radius: 999px; box-shadow: inset 0 2px 4px rgba(255,255,255,.9), 0 8px 18px rgba(143,211,244,.35); transition: transform .15s ease, box-shadow .15s ease; }
    input.rainbow, textarea.rainbow, select.rainbow { background: #fff; border: 2px solid transparent; border-radius: 12px; background-image: linear-gradient(#fff, #fff), linear-gradient( 90deg, #ff6f61, #ffcc00, #6dd47e, #4d96ff, #b983ff ); background-origin: border-box; background-clip: padding-box, border-box; }

    input: hover, textarea:hover, select:hover { border-color: rgba(0,0,0,.28); }

    /* Focus */
    input:focus, textarea:focus, select:focus { border-color: rgba(0,0,0,.45); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
/*input:focus,textarea:focus { box-shadow: 0 0 0 3px rgba(180,140,220,.18), 0 12px 26px rgba(180,140,220,.18); }*/

textarea { resize: vertical; min-height: 80px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,.6) 50%), linear-gradient(135deg, rgba(0,0,0,.6) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
    input:disabled, textarea:disabled, select:disabled { background-color: rgba(0,0,0,.04); color: rgba(0,0,0,.45); cursor: not-allowed; }






.form-cell-editor { position: relative; vertical-align: top; }



.highlight-cell { background-color: #F0FAFD !important; }

h1.form-name { margin: 0; }
h2.form-table-name { margin: 0; }

.form-table-footnote { font-size: 0.9em; color: gray; margin: 4px 0 0 24px; }
.form-table-description { }
.form-table-guidance { color: gray; }

.ItemWithIcon { display: flex; flex-direction: row; flex-wrap: nowrap; }
    .ItemWithIcon .text { display: flex; flex: 1; }
    .ItemWithIcon .icon { width: 30px; text-align: center; color: silver !important; margin: 6px 0 0 0; }
        .ItemWithIcon .icon:hover { color: gray !important; }

.editor-placeholder span.text { border: 1px dashed silver; border-right: none; border-top: none; padding: 6px; color: silver; font-size: 0.9em; display: block; }

.form-table-header { position: relative; }
.form-table-body { }
.form-table-footer { }



.p1 { width: 1% !important; }
.p2 { width: 2% !important; }
.p3 { width: 3% !important; }
.p4 { width: 4% !important; }
.p5 { width: 5% !important; }
.p6 { width: 6% !important; }
.p7 { width: 7% !important; }
.p8 { width: 8% !important; }
.p9 { width: 9% !important; }
.p10 { width: 10% !important; }
.p15 { width: 15% !important; }
.p20 { width: 20% !important; }
.p23 { width: 23% !important; }
.p25 { width: 25% !important; }
.p30 { width: 30% !important; }
.p33 { width: 33% !important; }
.p35 { width: 35% !important; }
.p38 { width: 38% !important; }

.p40 { width: 40% !important; }
.p45 { width: 45% !important; }
.p48 { width: 48% !important; }
.p50 { width: 50% !important; }
.p60 { width: 60% !important; }
.p65 { width: 65% !important; }
.p66 { width: 66% !important; }
.p70 { width: 70% !important; }
.p80 { width: 80% !important; }
.p85 { width: 85% !important; }
.p90 { width: 90% !important; }
.p95 { width: 95% !important; }
.p98 { width: 98% !important; }
.p100 { width: 100% !important; }



table.cpv-2 td { padding-top: 2px; padding-bottom: 2px; }
table.cpv-4 td { padding-top: 4px; padding-bottom: 4px; }
table.cpv-6 td { padding-top: 6px; padding-bottom: 6px; }
table.cpv-8 td { padding-top: 8px; padding-bottom: 8px; }
table.cpv-10 td { padding-top: 10px; padding-bottom: 10px; }
table.cpv-12 td { padding-top: 12px; padding-bottom: 12px; }
table.cpv-14 td { padding-top: 14px; padding-bottom: 14px; }
table.cpv-16 td { padding-top: 16px; padding-bottom: 16px; }
table.cpv-18 td { padding-top: 18px; padding-bottom: 18px; }
table.cpv-20 td { padding-top: 20px; padding-bottom: 20px; }

table.cph-2 td { padding-left: 2px; padding-right: 2px; }
table.cph-4 td { padding-left: 4px; padding-right: 4px; }
table.cph-6 td { padding-left: 6px; padding-right: 6px; }
table.cph-8 td { padding-left: 8px; padding-right: 8px; }
table.cph-10 td { padding-left: 10px; padding-right: 10px; }
table.cph-12 td { padding-left: 12px; padding-right: 12px; }
table.cph-14 td { padding-left: 14px; padding-right: 14px; }
table.cph-16 td { padding-left: 16px; padding-right: 16px; }
table.cph-18 td { padding-left: 18px; padding-right: 18px; }
table.cph-20 td { padding-left: 20px; padding-right: 20px; }



td.align-left { text-align: left; }
td.align-center { text-align: center; }
td.align-right { text-align: right; }

.in-align-left { text-align: left; }
.in-align-center { text-align: center; }
.in-align-right { text-align: right; }



.table-excel { width: 100%; border-collapse: collapse; font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px; color: #111; background: #fff; }

    .table-excel th,
    .table-excel td { border: 1px solid #d9d9d9; padding: 4px 6px; vertical-align: middle; white-space: nowrap; text-align: left; }
        .table-excel th.ac, .table-excel td.ac { text-align: center; }
    .table-excel thead th { background: #f3f3f3; font-weight: 600; text-align: left; }

    .table-excel th.greenshade { background: #effcef; }

    .table-excel tbody tr:nth-child(odd) { background: #ffffff; }
    .table-excel tbody tr:nth-child(even) { background: #f7fbff; }

    .table-excel tbody tr:hover { background: #eaf2ff; }

    .table-excel td.is-active { outline: 2px solid #2f5597; outline-offset: -2px; }

    .table-excel .num { text-align: right; font-variant-numeric: tabular-nums; }




.is-accepted { animation: acceptPulse 1s ease-out forwards; }

@keyframes acceptPulse {
    0% { background-color: rgba(120, 200, 140, 0.00); box-shadow: inset 0 0 0 0 rgba(120, 200, 140, 0.0); }
    30% { background-color: rgba(120, 200, 140, 0.28); box-shadow: inset 0 0 0 3px rgba(120, 200, 140, 0.45); }
    60% { background-color: rgba(120, 200, 140, 0.18); box-shadow: inset 0 0 0 2px rgba(120, 200, 140, 0.30); }
    100% { background-color: rgba(120, 200, 140, 0.00); box-shadow: inset 0 0 0 0 rgba(120, 200, 140, 0.0); }
}

.edit-table-container,
.edit-form-container,
#table-navigator,
.edit-form-background-container,
.edit-form-previewlink-container { font-size: 11px !important; white-space: nowrap; display: none; background: white; width: auto; padding: 4px 8px; text-transform: uppercase; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3); }


.form-table-container { position: relative; }
    .form-table-container:hover { border: 1px dashed var(--on); box-shadow: inset 0 50px 50px -50px rgba(23,81,157,.1); }
        .form-table-container:hover .edit-table-container { display: block; }
        .form-table-container:hover #table-navigator { display: flex; }
    .form-table-container #table-navigator { position: absolute; top: -2px; left: 12px; gap: 20px; }
        .form-table-container #table-navigator a { display: inline-block; align-items: center; white-space: nowrap; }

.edit-table-container { position: absolute; top: -2px; right: 6px; }

.form-head-container { border: 1px solid transparent; }
    .form-head-container:hover { border: 1px dashed var(--on); box-shadow: inset 0 50px 50px -50px rgba(23,81,157,.1); }
.form-foot-container {  }
.form-container .form-table-container { border: 1px solid transparent; padding-top: 32px; }


.form-head-container { position: relative; }
    .form-head-container:hover .edit-form-container { display: block; }
.edit-form-container { cursor: pointer; position: absolute; top: 0; right: 72px; font-size: 11px !important; }

.form-head-container:hover .edit-form-background-container { display: block; }
.edit-form-background-container { cursor: pointer; position: absolute; top: 0; right: 36px; font-size: 11px !important; }

.form-head-container:hover .edit-form-previewlink-container { display: block; }
.edit-form-previewlink-container { cursor: pointer; position: absolute; top: 0; right: 6px; font-size: 11px !important; }




#style-preview-table { width: 50%; margin: 20px auto; border-collapse: collapse; }
    #style-preview-table .style-preview-content { border: 1px solid gray; }
    #style-preview-table .style-preview-spillover { border-top: 1px solid gray; border-bottom: 1px solid gray; }
    #style-preview-table .style-preview-spilldown { border-left: 1px solid gray; border-right: 1px solid gray; }


#style-theater { position: relative; padding: 40px; margin: 40px 0; border-radius: 8px; border: 1px solid rgba(0,0,0,.10); background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6); }
.style-theater-heading { border: 1px dashed silver; }
.style-theater-text { border: 1px dashed silver; }
.style-theater-cell { border: 1px dashed silver; }
.style-theater-form { border: 1px dashed silver; }
.style-theater-table-wrap { border: 1px dashed silver; overflow: hidden; }
.style-theater-table { min-height: 100px }
.style-theater-tag { position: absolute; top: 0; left: 20px; display: inline-block; background: var(--toolbg); width: auto !important; padding: 2px 8px; text-transform: uppercase; font-size: 0.7em !important; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3); }


/*buttons*/



/*Modal*/
/* Simple buttons */


.modal-overlay { position: fixed; inset: 0; display: none; /* hidden by default */ align-items: center; justify-content: center; padding: 18px; z-index: 9999; /* the blur layer */ background: rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .modal-overlay.is-open { display: flex; }
.modal { width: min(520px, 100%); border-radius: 16px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.82); box-shadow: 0 18px 60px rgba(0,0,0,.22); overflow: hidden; /* crisp look */ backdrop-filter: saturate(1.15); -webkit-backdrop-filter: saturate(1.15); }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.9); }
.modal__title { margin: 0; font-size: 1.05rem; color: rgba(0,0,0,.78); }
.modal__x { border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.03); border-radius: 10px; width: 36px; height: 32px; cursor: pointer; }
.modal__body { padding: 16px 14px; color: rgba(0,0,0,.72); line-height: 1.45; }
.modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.86); }
.modal-overlay.is-open .modal { animation: modalPop .16s ease-out; }

@keyframes modalPop {
    from { transform: translateY(6px) scale(.985); opacity: .0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.form-help-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); background: linear-gradient( 180deg, rgba(220, 242, 246, 0.88), rgba(200, 232, 238, 0.88) ); color: rgba(0,0,0,.7); font-size: 0.7em; cursor: pointer; user-select: none; }
    .form-help-icon::after { content: attr(data-help); position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); min-width: 220px; max-width: 320px; padding: 8px 10px; background: linear-gradient( 180deg, rgba(220, 242, 246, 0.88), rgba(200, 232, 238, 0.88) ); color: rgba(0,0,0,.75); font-size: 0.82rem; line-height: 1.35; border-radius: 10px; border: 1px solid rgba(120, 180, 190, .35); box-shadow: 0 10px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 10; }
    .form-help-icon::before { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: linear-gradient( 180deg, rgba(220, 242, 246, 0.88), rgba(200, 232, 238, 0.88) ); border-left: 1px solid rgba(120, 180, 190, .35); border-top: 1px solid rgba(120, 180, 190, .35); opacity: 0; visibility: hidden; transition: opacity .12s ease; }
    .form-help-icon:hover::after,
    .form-help-icon:hover::before { opacity: 1; visibility: visible; }



.y-scroll .subcontainer { overflow-y: auto; max-height: 200px; }

:root { --btn-radius: 10px; --btn-font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; --btn-transition: 160ms ease; --save: #3a8f6a; --save-hover: #327c5c; --open: #2f6fae; --open-hover: #295f94; --delete: #c64747; --delete-hover: #aa3c3c; }

.btn { display: inline-flex; align-items: center; width: auto; padding: 0.65em 1.1em; border-radius: var(--btn-radius); font: var(--btn-font); border: none; cursor: pointer; user-select: none; color: #fff; background: #666; box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15); transition: transform var(--btn-transition), box-shadow var(--btn-transition), background-color var(--btn-transition); }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.2); }
    .btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 2px 4px rgba(0,0,0,0.25); }
    .btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

.btn-small { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: normal; transform: translateY(2px); }

.btn-save { background: var(--save); }
    .btn-save:hover { background: var(--save-hover); }
.btn-open { background: var(--open); }
    .btn-open:hover { background: var(--open-hover); }
.btn-delete { background: var(--delete); }
    .btn-delete:hover { background: var(--delete-hover); }
.btn-danger { background: rgba(180,40,40,.08); border: 1px solid rgba(180,40,40,.35); color: #8a1f1f; padding: 7px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
    .btn-danger:hover { background: rgba(180,40,40,.14); }
    .btn-danger:disabled { opacity: .45; cursor: default; }
.btn-ghost { background: transparent; box-shadow: none; color: gray; }

.top-margin { margin-top: 12px; }

.panel-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; align-items: stretch; margin: 20px 0; }

/* Panel basis */
.panel { position: relative; background: #ffffff; border-radius: 16px; padding: 18px; border: 1px solid rgba(0, 0, 0, 0.12); }


/* Venstre panel */
/* Gør panelet til 2 rækker: header + body */
.panel-main { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 240px; /* justér efter behov */ }
/* Header forbliver øverst */
.panel h2 { margin: 0 0 6px 0; font-size: 16px; font-weight: 650; }
.panel p { margin: 0; color: rgba(0,0,0,0.6); line-height: 1.5; }

/* Body fylder resten og centrerer valg-elementet */
.panel-body { align-items: center; }

/* “Vælg template” elementet */
.select-template { width: 100%; text-align: center; padding: 28px 36px; border-radius: 14px; border: 1.5px dashed rgba(0,0,0,0.35); background: rgba(255,255,255,0.7); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
    .select-template:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }


.selected-template { display: flex; align-items: center; gap: 14px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.12); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }

    /* Hover */
    .selected-template:hover { background: rgba(0,0,0,0.05); box-shadow: 0 6px 16px rgba(0,0,0,0.10); transform: translateY(-1px); }

    /* Ikon-container */
    .selected-template .done { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(34,197,94,0.15); /* grøn hint */ display: flex; align-items: center; justify-content: center; }

        /* Selve ikonet */
        .selected-template .done .glyphicon { font-size: 22px; color: #22c55e; }

    .selected-template .preview { display: flex; flex-direction: column; }

    /* Tekstblok */
    .selected-template .selector { display: flex; width: 70%; flex-direction: column; }

/* Titel */
.select-title { font-size: 14px; font-weight: 600; line-height: 1.2; }

/* Undertitel */
.select-subtitle { font-size: 12px; color: rgba(0,0,0,0.55); }

.select-icon { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(0,0,0,0.7); }

.select-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.select-sub-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.select-subtitle { font-size: 13px; color: rgba(0,0,0,0.6); }


/* Højre kolonne */
.panel-right { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }

/* Placeholder panel */
.panel-placeholder { justify-content: center; border: 1.5px dashed rgba(0, 0, 0, 0.25); background: linear-gradient( 180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75) ); position: relative; overflow: hidden; }

    /* Placeholder shimmer */
    .panel-placeholder::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.6), transparent ); transform: translateX(-60%); animation: shimmer 1.6s acceptPulse; }

@keyframes shimmer {
    100% { transform: translateX(60%); }
}

/* Placeholder indhold */
.placeholder-content { display: flex; flex-direction: column; gap: 10px; }

.placeholder-title { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.6); }

/* Skeleton linjer */
.placeholder-line { height: 12px; border-radius: 999px; background: rgba(0,0,0,0.1); width: 85%; }

    .placeholder-line.w75 { width: 75%; }
    .placeholder-line.w60 { width: 60%; }
    .placeholder-line.w40 { width: 40%; }

.flex-me { display: flex; }
    .flex-me * { width: 49% }
/* Responsiv */
@media (max-width: 860px) {
    .panel-layout { grid-template-columns: 1fr; }
    .panel-right { grid-template-rows: auto; }
}

/* Placering i panelet */
.panel-action { display: flex; justify-content: flex-end; margin: 6px 0; }

/* Selve knappen */
.action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.25); font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.75); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.action-btn { margin-right: 6px; }
    .action-btn:last-child { margin-right: 0; }
    .action-btn:hover { background: #ffffff; box-shadow: 0 2px 2px rgba(0,0,0,0.12); transform: translateY(-1px); }
    .action-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }



.panel-intro { flex: 0 0 100%; }



    .panel-intro h2 { margin: 0 0 6px 0; font-size: 16px; font-weight: 650; }
    .panel-intro p { margin: 0; color: rgba(0,0,0,0.6); line-height: 1.5; }



/* Nederste fuldbredde panel */
.panel-full { flex: 0 0 100%; }

/* Panel header */
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }

/* Venstre tekstblok */
.panel-head-text { max-width: 720px; }

    .panel-head-text h2 { margin: 0 0 6px 0; font-size: 16px; font-weight: 650; }

    .panel-head-text p { margin: 0; color: rgba(0,0,0,0.6); line-height: 1.5; }

/* Actions til højre */
.panel-action { display: flex; gap: 8px; flex-shrink: 0; }

.panel-head h2 { margin: 0 0 6px 0; font-size: 16px; font-weight: 650; }
.panel-head p { margin: 0 0 12px 0; color: rgba(0,0,0,0.6); line-height: 1.5; }


/* Mobil: alt i én kolonne */
@media (max-width: 860px) {
    .panel-main,
    .panel-right { flex: 0 0 100%; }
}

/* Summary panel */
.panel-summary { padding: 16px 18px; }
.panel-statuslist { margin-top: 20px; }

/* Header */
.summary-head { margin-bottom: 12px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; }

    .summary-head h2 { margin: 0 0 4px 0; font-size: 15px; font-weight: 650; }

    .summary-head p { margin: 0; font-size: 13px; color: rgba(0,0,0,0.6); }


.summary-head-left { min-width: 0; }

.summary-head-right { text-align: right; }


/* 3 kolonner */
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }


/* Hvert punkt */
.summary-item { background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 10px 12px; }
.summary-item-two { grid-column: span 2; }
.summary-label { font-size: 12px; color: rgba(0,0,0,0.55); margin-bottom: 0; }
.summary-value { font-size: 14px; margin-bottom: 4px; }
.summary-top { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
    .summary-top:first-child { margin-top: 0; }

.is-shimmering::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.0) 35%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.0) 65%, transparent 100% ); /* Gør striben bred nok til at bevæge sig flot */ transform: translateX(-80%); animation: shimmer-sweep 1.4s infinite; pointer-events: none; }

@keyframes shimmer-sweep {
    0% { transform: translateX(-80%); }
    100% { transform: translateX(80%); }
}

/* Valgfrit: en lidt “placeholder” baggrund når shimmer er aktiv */
.is-shimmering { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,1,0.01)); height: 200px; }

#RootMenu { width: 40px; flex-shrink: 0; background: var(--darkcolor); min-height: 100vh; }
    #RootMenu a { display: block; margin: 36px 0; text-align: center; font-size: 22px; color: white; position: relative; }


:root { --surface: #f6f8fb; --card: #ffffff; --card-soft: #f9fbfd; --border: #e4e9f0; --text: #1f2937; --muted: #6b7280; --accent: #c3e0eb; --accent-strong: #9fc9da; --save: #4fb286; --save-hover: #43a079; --open: #5b8fdc; --open-hover: #4c7fc8; --delete: #e57373; --delete-hover: #d96565; }
.current-subscription { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; margin-bottom: 22px; background: linear-gradient(180deg, #ffffff, #f9fbfd); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.current-subscription__info { display: grid; gap: 6px; }
.current-subscription__label { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.current-subscription__name { font-size: 22px; font-weight: 800; color: var(--text); }
.current-subscription__meta { font-size: 14px; color: var(--muted); }
.current-subscription__actions { flex-shrink: 0; }
.plans { padding: 20px 0; border-radius: 22px; }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.plan { position: relative; background: linear-gradient(180deg, var(--card), var(--card-soft)); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: all 180ms ease; }
    .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.plan__title { margin: 0; font-size: 18px; font-weight: 700; }
.plan__subtitle { margin-top: 6px; font-size: 13px; color: var(--muted); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0; }
.plan__amount { font-size: 42px; font-weight: 800; color: #111827; }
.plan__period { font-size: 14px; color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
    .plan__list li { position: relative; padding-left: 22px; font-size: 14px; color: #374151; }
        .plan__list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--accent-strong); font-size: 22px; line-height: 1; }
.plan__cta { width: 100%; }
.plan--featured { transform: translateY(-12px); border-color: var(--accent-strong); box-shadow: 0 22px 50px rgba(0,0,0,.10); }
    .plan--featured::after { content: ""; position: absolute; inset: -1px; border-radius: 18px; pointer-events: none; background: linear-gradient(180deg, rgba(195,224,235,.6), transparent 60%); }
.plan__badge { position: absolute; top: 16px; right: 16px; background: var(--accent); color: #0f172a; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }

@media (max-width: 900px) {
    .plans__grid { grid-template-columns: 1fr; }
    .plan--featured { transform: none; }
}




.panel.panel-intro { border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(0,0,0,.10); padding: 14px; }
.panel-intro { /* header øverst, drawers under */ }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.panel-title h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.panel-title p { margin: 6px 0 0; color: rgba(0,0,0,.65); }

.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }


.panel-drawer { margin-top: 12px; border-top: 1px solid rgba(0,0,0,.10); padding-top: 12px; }

.drawer-inner { background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 12px; }

.drawer-row { display: flex; flex-direction: column; gap: 8px; }
.drawer-label { font-size: 12px; color: rgba(0,0,0,.7); }
.drawer-input,
.drawer-textarea { width: 100%; border: 1px solid rgba(0,0,0,.14); border-radius: 8px; padding: 10px; background: #fff; outline: none; }
.drawer-textarea { resize: vertical; min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.5px; }
.drawer-actions { margin-top: 10px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.drawer-hint { margin-top: 10px; font-size: 12px; color: rgba(0,0,0,.60); }


.table-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.table-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.table-title { font-size: 15px; font-weight: 600; color: rgba(0,0,0,.75); }
.table-buttons { display: flex; gap: 8px; }

#ToolsSection { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: rgba(255,255,255,.96); border-left: 1px solid rgba(0,0,0,.12); box-shadow: -12px 0 28px rgba(0,0,0,.14); z-index: 1000; transform: translateX(100%); /* helt skjult */ transition: transform .24s ease; }
    #ToolsSection.tools-open { transform: translateX(0); }
.tools-toggle { position: fixed; top: 40%; right: 0; width: 36px; height: 100px; border-radius: 10px 0 0 10px; border: 1px solid rgba(0,0,0,.14); border-right: none; background: rgba(255,255,255,.96); box-shadow: -6px 0 18px rgba(0,0,0,.12); cursor: pointer; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 0; }
    .tools-toggle:hover { background: rgba(23,81,157,.08); }
    .tools-toggle .glyphicon { font-size: 12px; color: rgba(0,0,0,.65); transition: transform .2s ease; }
    .tools-toggle.is-open .glyphicon { transform: rotate(180deg); }
.tools-label { writing-mode: vertical-rl; /* top → bund */ text-orientation: mixed; font-size: 11px; letter-spacing: .08em; margin-left: 3px; color: rgba(0,0,0,.6); user-select: none; }

.vfield-wrap { position: relative; }
.vfield.is-invalid { border-color: #d96a6a; }
.vfield.is-valid { border-color: #2b8a3e; }
.verror { position: absolute; left: 0; top: 100%; margin-top: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.4; background: #d96a6a; color: #fff; border-radius: 6px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 50; display: none; }
    .verror::before { content: ""; position: absolute; top: -5px; /* var -6px */ left: 12px; border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #d96a6a transparent; }

.checkbox-wrapper { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-field { display: flex; align-items: center; }
    .checkbox-field input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.checkbox-label { color: #333; cursor: pointer; user-select: none; }
.checkbox-list { display: flex; flex-direction: column; gap: 6px; }

.radio-wrapper { display: flex; align-items: center; gap: 4px; margin-bottom: 0; cursor: pointer; }
    .radio-wrapper input[type="radio"] { width: 18px; height: 18px; cursor: pointer; }
    .radio-wrapper label { cursor: pointer; user-select: none; }

.file-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-file { flex: 1 1 320px; font-size: 14px; padding: 2px; border-radius: 10px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(0,0,0,.08); color: #333; max-width: 100%; }
    .form-file::-webkit-file-upload-button { margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,.22); background: linear-gradient(#ffffff, #f2f2f2); cursor: pointer; }
        .form-file::-webkit-file-upload-button:hover { background: linear-gradient(#ffffff, #eaeaea); }
    .form-file::file-selector-button { margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,.22); background: linear-gradient(#ffffff, #f2f2f2); cursor: pointer; }
        .form-file::file-selector-button:hover { background: linear-gradient(#ffffff, #eaeaea); }
.btn-upload { flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.10); cursor: pointer; }
    .btn-upload:hover { border-color: rgba(0,0,0,.28); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
    .btn-upload:active { transform: translateY(1px); }
    .btn-upload:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }




.scheme-row { position: relative; }



.tcell { position: relative; overflow: visible; /* tillad at tools stikker ud */ }
.form-row-actions { z-index: 1000; position: absolute; left: -24px; top: 50%; transform: translate(-6px, -50%); /* lille slide-effekt */ display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; background: var(--toolbg, rgba(255,255,255,.6)); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
tr:hover .form-row-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
.form-row-actions a { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; text-decoration: none; }
    .form-row-actions a:last-child { margin-top: 14px; color: darkred; }

.form-cell-actions { position: absolute; top: 50%; left: 50%; transform: translate(-6px, -50%); border-radius: 4px; width: auto; background: var(--toolbg, rgba(255,255,255,.9)); opacity: 0.8; border-top: 1px solid silver; visibility: hidden; }
    .form-cell-actions a { display: inline-block; float: left; margin: 6px 4px; cursor: pointer; height: 16px; width: 16px; }
        .form-cell-actions a:last-child { margin-left: 14px; color: darkred; }
.form-cell-editor:hover .form-cell-actions { visibility: visible; transform: translate(0, -50%); }