﻿/* RLSD komponent-styling (adskilt fil saa den kan committes uafhaengigt af Style.css-WIP).
   Indlaeses fra _Layout efter Content/css. */

/* Talkolonner (hoejrestillede via _IndexTable) skrumper til indhold i stedet for at
   fylde skaermen - tekstkolonner faar pladsen. !important slaar DataTables' inline-bredder. */
table.rlsd-datatable > thead th[style*="text-align:right"],
table.rlsd-datatable > tbody td[style*="text-align:right"] {
    width: 1% !important;
    white-space: nowrap;
}

/* Eksport-knapper + global soegning: taettere paa tabellen og med luft imellem */
.dataTables_wrapper .dt-buttons {
    margin-right: 15px;
    margin-bottom: 8px;
}
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 8px;
}

/* Spinner til lazy-tabs m.v. (universal-css'ens keyframes forsvandt med Universal) */
.rlsd-spin { animation: rlsd-spin 0.8s linear infinite; display: inline-block; }
@keyframes rlsd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Info-kort paa detaljesider (dl i tre paneler; tomme vaerdier daempes som em-dash) */
.rlsd-info dt { width: 140px; text-align: left; font-weight: 600; }
.rlsd-info dd { margin-left: 155px; word-break: break-word; }

/* Time-overblik (Views/Timesheet/Overview): diagram-kort i responsivt grid.
   Flex i stedet for Bootstrap-floats saa kort i samme raekke altid flugter i hoejden. */
.rlsd-chart-grid { display: flex; flex-wrap: wrap; }
.rlsd-chart-grid > div { display: flex; }
.rlsd-chart-grid .rlsd-chart-card { display: flex; flex-direction: column; width: 100%; margin-bottom: 15px; }
.rlsd-chart-card > .panel-body { flex: 1 1 auto; padding: 8px; }
.rlsd-chart { width: 100%; height: 320px; }
.rlsd-chart-wait { height: 320px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
/* hidden-attributten SKAL vinde over display:flex ovenfor. Uden dette har [hidden] (UA-regel)
   og .rlsd-chart-wait samme specificitet -> author-reglen vinder -> baade "Loader..." og
   "Ingen data" vises samtidig. .rlsd-chart-wait[hidden] (0,2,0) slaar .rlsd-chart-wait (0,1,0). */
.rlsd-chart-wait[hidden], .rlsd-chart[hidden] { display: none; }
.rlsd-chart-card .rlsd-chart-expand { margin-top: -2px; }

/* Stor visning (global toggle): alle kort i fuld bredde og naesten fuld skaermhoejde */
.rlsd-chart-grid.rlsd-grid-big > div { flex: 0 0 100%; width: 100% !important; max-width: 100%; }
.rlsd-grid-big .rlsd-chart,
.rlsd-grid-big .rlsd-chart-wait { height: calc(100vh - 300px); min-height: 420px; }

/* Fuldskaerms-modal for eet diagram: fast dialog-hoejde + flex-kolonne, saa modal-body
   (og dermed diagrammet) fylder PRAECIS resten af dialogen - intet overloeb under bunden */
#rlsdChartModal .rlsd-chart-modal-dialog { width: 96vw; max-width: none; margin: 10px auto; height: calc(100vh - 20px); }
#rlsdChartModal .modal-content { height: 100%; display: flex; flex-direction: column; }
#rlsdChartModal .modal-header { flex: 0 0 auto; }
#rlsdChartModal .modal-body { flex: 1 1 auto; min-height: 0; padding: 10px; overflow: hidden; }
#rlsdChartModal .rlsd-chart-full { width: 100%; height: 100%; min-height: 0; }
#rlsdChartModal { z-index: 2147483647; }

/* Debug-tilstand (se som bruger / rolle-simulation): fast bund-banner, kan ikke overses */
#rlsd-debug-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2147483647; background: #b94a48; color: #fff; padding: 6px 14px; text-align: center; box-shadow: 0 -2px 6px rgba(0,0,0,.3); }

/* Vaerktoejslinje-kortet paa time-overblikket (periode-felter + Opdater paa een raekke) */
.rlsd-toolbar .form-group { margin-right: 14px; }
.rlsd-toolbar label { margin-right: 6px; }
.rlsd-toolbar .rlsd-quick-group { margin-left: 14px; }
.rlsd-toolbar .rlsd-toolbar-title { font-size: 20px; font-weight: bold; margin-right: 18px; vertical-align: middle; }

/* ---- rlsd-table (afhaengighedsfri liste-tabel: sortering/filter/paginering/colvis/eksport) ----
   Flyttet hertil fra de enkelte views' inline <style> saa enhver liste kan bruge rlsd-table uden at
   duplikere CSS (samme selvstaendiggoerelse som rlsd-combobox/rlsd-popup). rlsd-table.js goer resten. */
.rlsd-table-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
/* Soegefeltet foerst med FAST bredde: rykker sig ikke uanset antal knapper til hoejre. */
.rlsd-table-toolbar .rlsd-table-search { flex: 0 0 240px; width: 240px; }
/* Egne knapper hoistet ind i toolbaren (data-rlsd-toolbar-btn): nulstil deres eventuelle egen-margins. */
.rlsd-table-toolbar [data-rlsd-toolbar-btn] { margin: 0 !important; }
/* Ingen indre scroll-boks: tabellen flyder på siden (siden scroller). overflow-x bevares kun som
   sikkerhed for meget brede tabeller. (MC: index-tabeller må ikke være indskrænket i en scroll-boks.) */
.rlsd-table-wrap { overflow-x: auto; border: 1px solid #ddd; }
table.rlsd-table { width: 100%; border-collapse: collapse; background: #fff; }
table.rlsd-table th, table.rlsd-table td { padding: 6px 10px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
table.rlsd-table td.rlsd-num, table.rlsd-table th.rlsd-num { text-align: right; }
table.rlsd-table thead th { position: sticky; top: 0; z-index: 2; background: #f4f5f7; border-bottom: 2px solid #ccc; }
table.rlsd-table thead tr.rlsd-table-colfilters th { top: 34px; padding: 3px 4px; }
table.rlsd-table thead tr.rlsd-table-colfilters input { width: 100%; }
table.rlsd-table tbody tr:hover { background: #f6f9fc; }
table.rlsd-table tbody tr[data-href] { cursor: pointer; }
th.rlsd-sortable { cursor: pointer; user-select: none; }
th.rlsd-sortable::after { content: " \2195"; opacity: .3; font-size: 11px; }
th.rlsd-sort-asc::after { content: " \2191"; opacity: 1; }
th.rlsd-sort-desc::after { content: " \2193"; opacity: 1; }
.rlsd-table-footer { display: flex; align-items: center; gap: 20px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e3e8e0; flex-wrap: wrap; }
.rlsd-table-footer .pagination { margin: 0; }
/* Kolonne-justerede totaler i <tfoot> - tallene staar praecist under deres egen kolonne. Ved
   paginering: to linjer ("Side" + "I alt"); ellers kun "I alt". Tekst yderst til venstre. */
table.rlsd-table tfoot td { padding: 6px 10px; background: #f4f5f7; white-space: nowrap; }
table.rlsd-table tfoot tr.rlsd-table-total-row:first-child td { border-top: 2px solid #ccc; }
table.rlsd-table tfoot tr.rlsd-table-total-row + tr.rlsd-table-total-row td { border-top: 1px solid #dfe3da; }
table.rlsd-table tfoot td strong { color: #2d3a27; }
table.rlsd-table tfoot td.rlsd-table-total-label { text-align: left; color: #6b7280; }
table.rlsd-table tfoot td .rlsd-total-suffix { color: #8a9384; font-weight: 400; font-size: 92%; }

/* AEldre inline-total-visning (nu erstattet af <tfoot>) - beholdt for evt. andre tabeller. */
.rlsd-table-totals { display: inline-flex; flex-wrap: wrap; gap: 22px; align-items: baseline; }
.rlsd-table-totals span { white-space: nowrap; }
.rlsd-table-totals span strong { color: #2d3a27; margin-right: 3px; }
/* Boolean toggle-switch (RlsdCheckbox editor) - stoerre og tydeligere klik-flade end en native checkbox. */
.rlsd-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; vertical-align: middle; margin: 3px 0 0; }
.rlsd-switch input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.rlsd-switch input[type="hidden"] { display: none; }
.rlsd-switch-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #c7ccc3; border-radius: 26px; transition: background .15s; pointer-events: none; }
.rlsd-switch-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rlsd-switch input[type="checkbox"]:checked ~ .rlsd-switch-slider { background: #4a903d; }
.rlsd-switch input[type="checkbox"]:checked ~ .rlsd-switch-slider::before { transform: translateX(20px); }
.rlsd-switch input[type="checkbox"]:focus ~ .rlsd-switch-slider { box-shadow: 0 0 0 2px rgba(74,144,61,.35); }

.rlsd-table-tools { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
/* Ikon-kun-knapper: nulstil den globale "button > .fa"-margin (margin-left:-5px;margin-right:8px)
   fra Style.css, så ikonet står centreret i knappen. */
.rlsd-table-tools .btn > .fa, .rlsd-table-tools .btn > .glyphicon { margin-left: 0; margin-right: 0; }
.rlsd-colvis { position: relative; }
.rlsd-colvis-panel { position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 6px 10px; min-width: 160px; }
.rlsd-colvis-panel label { display: block; font-weight: normal; margin: 2px 0; white-space: nowrap; }

/* Ctrl/Cmd holdt nede -> celler kan kopieres (Ctrl+klik): copy-cursor + fremhævning + copy-ikon.
   Kort grøn blink-bekræftelse når en celle er kopieret. */
body.rlsd-copy-mode table.rlsd-table tbody td { cursor: copy; }
body.rlsd-copy-mode table.rlsd-table tbody td:hover { background: #fff8d6; box-shadow: inset 0 0 0 1px #e6c34a; }
body.rlsd-copy-mode table.rlsd-table tbody td:hover::after { content: "\e205"; font-family: 'Glyphicons Halflings'; float: right; margin-left: 6px; opacity: .55; font-size: 11px; }
table.rlsd-table td.rlsd-copied { background: #d9f0d9 !important; transition: background .1s ease; }

/* Ryd-kryds i select-filtre (placeret til venstre for select-pilen). */
.rlsd-filter-wrap { position: relative; display: block; }
.rlsd-filter-wrap > select.form-control { padding-right: 36px; }
.rlsd-filter-clear { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1; border: none; background: transparent; color: #999; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 3px; }
.rlsd-filter-clear:hover { color: #333; }

/* Genvejs-oversigt ("?"-knap) - keycap-look + grøn-tonet header + luftigt layout (matcher app-paletten). */
.rlsd-shortcuts-panel { min-width: 344px; padding: 12px 14px; border-color: #d9e2d3; border-radius: 8px; box-shadow: 0 10px 28px rgba(20,28,16,.18); }
.rlsd-shortcuts-head { font-weight: 700; font-size: 13px; color: #2d3a27; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #e3e8e0; }
.rlsd-shortcut-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 0; white-space: nowrap; }
.rlsd-shortcut-row + .rlsd-shortcut-row { border-top: 1px solid #f2f4f0; }
/* Tast-badge: lys "keycap" i stedet for Bootstraps hårde sorte kbd. */
.rlsd-shortcut-row kbd {
    flex: 0 0 auto; min-width: 96px; text-align: center;
    background: #f6f8f4; color: #2d3a27;
    border: 1px solid #cfd8ca; border-bottom-width: 2px; border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
    padding: 3px 8px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.rlsd-shortcut-row > span { color: #4a5646; font-size: 13px; }

/* Standard-tabel-toolbar (2026-07-05, MC): én linje pr. tabel - VENSTRE: view-knapper ("Opret ny",
   markeret data-rlsd-toolbar-btn) + eksport + kolonnevælger + længde-vælger; HØJRE: global søgning.
   Bygget af rlsd-export.js (attachButtons). Reglerne herunder ligger EFTER .dataTables_wrapper-reglerne
   ovenfor og vinder på cascade (samme specificitet). */
.rlsd-dt-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rlsd-dt-toolbar-left { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rlsd-dt-toolbar .dataTables_filter { float: none; margin: 0; }
.rlsd-dt-toolbar .dataTables_filter label { margin: 0; font-weight: normal; }
.rlsd-dt-toolbar .dataTables_length { margin: 0; }
.rlsd-dt-toolbar .dataTables_length label { margin: 0; font-weight: normal; }
.rlsd-dt-toolbar .dt-buttons { margin: 0; }
.rlsd-dt-toolbar-left .rlsd-export-group { display: inline-flex; gap: 4px; }
.rlsd-dt-toolbar-left [data-rlsd-toolbar-btn] { margin: 0; }