/* ---------------------------------------------------------------------------
   Friday – designsystem
   Implementeret efter Figma-designsystemet:
   https://www.figma.com/design/Z9o6o4SEsszB51eTZqQGZW/Friday
   --------------------------------------------------------------------------- */

:root {
    /* === Color tokens === */

    /* Green — brand-palette */
    --friday-green-50:  #EAEEEA;   /* row backgrounds (userlist o.l.) */
    --friday-green-100: #D5DED4;   /* very light (disabled buttons + table headers) */
    --friday-green-300: #587954;   /* sage / "Igang" */
    --friday-green-400: #2E5829;   /* mid-green / button active */
    --friday-green-500: #254621;   /* forest / "Aktiv" / button default */
    --friday-green-600: #1C3519;   /* deep forest / button hover */

    /* Blue / slate — sekundær palette */
    --friday-blue-300:  #68748A;   /* light slate */
    --friday-blue-400:  #42526D;   /* slate / "Åben" */
    --friday-blue-500:  #354157;   /* dark slate / Edit-knap default */
    --friday-blue-700:  #1A212C;   /* very dark slate / Edit-knap hover */

    /* Alert / red — destruktive handlinger */
    --friday-alert-100: #F2CDCD;   /* light pink */
    --friday-alert-500: #C00505;   /* red */
    --friday-alert-600: #730303;   /* dark red / stop-timer hover */
    --friday-alert-700: #730303;   /* alias — bevares for bagudkompatibilitet */

    /* Function colors — knap-specifikke states */
    --friday-fn-start:        #5FB455;   /* Start timer */
    --friday-fn-stop:         #7E4848;   /* Stop timer (idle) */
    --friday-fn-manuel:       #C4C4C4;   /* Manuel timer */
    --friday-fn-manuel-hover: #B8B8B8;   /* Manuel timer hover */

    /* === Spacing tokens === */
    --friday-space-100: 4px;
    --friday-space-200: 8px;
    --friday-space-250: 10px;
    --friday-space-500: 20px;

    /* === Bootstrap-overrides ===
       Vi sætter Bootstrap's CSS-variabler så alt der bruger
       text-bg-primary, btn-primary, link osv. automatisk får
       Friday-farverne. */
    --bs-primary:                var(--friday-green-400);
    --bs-primary-rgb:            46, 88, 41;
    --bs-success:                var(--friday-green-500);
    --bs-success-rgb:            37, 70, 33;
    --bs-danger:                 var(--friday-alert-500);
    --bs-danger-rgb:             192, 5, 5;
    --bs-info:                   var(--friday-blue-300);
    --bs-info-rgb:               104, 116, 138;

    --bs-link-color:             var(--friday-green-400);
    --bs-link-color-rgb:         46, 88, 41;
    --bs-link-hover-color:       var(--friday-green-500);
    --bs-link-hover-color-rgb:   37, 70, 33;

    --bs-body-font-family:       'Inter', -apple-system, BlinkMacSystemFont,
                                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === Base === */
body {
    font-family: var(--bs-body-font-family);
    color: var(--friday-blue-500);
}

/* === Knapper fra designsystemet ===
   Spec: padding 10×20, radius 8px, Inter Medium 18px, hvid tekst.
   States: default → green/500, hover → green/600, active → green/400,
           disabled → green/100 baggrund + green/300 tekst. */

.btn-primary {
    --bs-btn-bg:                    var(--friday-green-500);
    --bs-btn-border-color:          var(--friday-green-500);
    --bs-btn-hover-bg:              var(--friday-green-600);
    --bs-btn-hover-border-color:    var(--friday-green-600);
    --bs-btn-active-bg:             var(--friday-green-400);
    --bs-btn-active-border-color:   var(--friday-green-400);
    --bs-btn-disabled-bg:           var(--friday-green-100);
    --bs-btn-disabled-border-color: var(--friday-green-100);
    --bs-btn-disabled-color:        var(--friday-green-300);
    --bs-btn-padding-y:             var(--friday-space-250);
    --bs-btn-padding-x:             var(--friday-space-500);
    --bs-btn-font-size:             18px;
    --bs-btn-font-weight:           500;
    --bs-btn-border-radius:         var(--friday-space-200);
}

.btn-outline-primary {
    --bs-btn-color:                 var(--friday-green-500);
    --bs-btn-border-color:          var(--friday-green-500);
    --bs-btn-hover-bg:              var(--friday-green-500);
    --bs-btn-hover-border-color:    var(--friday-green-500);
    --bs-btn-active-bg:             var(--friday-green-400);
    --bs-btn-active-border-color:   var(--friday-green-400);
    --bs-btn-border-radius:         var(--friday-space-200);
}

.btn-success {
    --bs-btn-bg:                    var(--friday-green-500);
    --bs-btn-border-color:          var(--friday-green-500);
    --bs-btn-hover-bg:              var(--friday-green-600);
    --bs-btn-hover-border-color:    var(--friday-green-600);
}

.btn-outline-success {
    --bs-btn-color:                 var(--friday-green-500);
    --bs-btn-border-color:          var(--friday-green-500);
    --bs-btn-hover-bg:              var(--friday-green-500);
    --bs-btn-hover-border-color:    var(--friday-green-500);
}

.btn-danger {
    --bs-btn-bg:                    var(--friday-alert-500);
    --bs-btn-border-color:          var(--friday-alert-500);
    --bs-btn-hover-bg:              var(--friday-alert-600);
    --bs-btn-hover-border-color:    var(--friday-alert-600);
}

/* Standardize border-radius på alle knapper, men bevar Bootstrap's størrelser
   (sm/lg) for tabel-actions og store CTAs. */
.btn { border-radius: var(--friday-space-200); }
.btn-sm { --bs-btn-border-radius: 6px; }

/* === Funktionelle knapper fra designsystemet ===
   Inline-flex med ikon-gap, fast 42px højde, 18px Inter Medium. */

.btn-friday-start,
.btn-friday-stop,
.btn-friday-manuel,
.btn-friday-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--friday-space-250);
    height: 42px;
    padding: var(--friday-space-250) var(--friday-space-500);
    border: 0;
    border-radius: var(--friday-space-200);
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.18px;
    cursor: pointer;
    transition: background-color .15s ease;
    white-space: nowrap;
    text-decoration: none;
}
.btn-friday-start  i, .btn-friday-stop i, .btn-friday-manuel i, .btn-friday-edit i { font-size: 18px; }
.btn-friday-start  .friday-icon,
.btn-friday-stop   .friday-icon,
.btn-friday-manuel .friday-icon,
.btn-friday-edit   .friday-icon { flex-shrink: 0; }

/* Inline SVG-ikoner — sørg for de aligner pænt i tekst og knapper */
.friday-icon {
    display: inline-block;
    vertical-align: -.18em;
}

/* === Datalist (designsystem-komponent: userlist + companylist) === */
.datalist {
    border-radius: var(--friday-space-200);
    overflow: hidden;
}
.datalist-head {
    background: var(--friday-green-100);
    color: var(--friday-green-500);
    font-weight: 500;
    font-size: 16px;
    padding: 14px 16px;
    display: grid;
    gap: 16px;
    align-items: center;
}
.datalist-row {
    background: var(--friday-green-50);
    padding: 12px 16px;
    display: grid;
    gap: 16px;
    align-items: center;
    font-size: 15px;
    color: #000;
}
.datalist-row + .datalist-row { border-top: 1px solid #fff; }
.datalist-row.is-inactive { color: var(--friday-blue-300); }

/* Hvis en kunde ikke har nogen projekter — markér med rødlig baggrund */
.datalist-row.is-empty {
    background: var(--friday-alert-100);
}

.datalist .badge {
    font-size: 14px;
    padding: 4px 18px;
    justify-self: start;
}
.datalist-actions {
    display: inline-flex;
    gap: 8px;
    justify-self: end;
}
.datalist-actions .friday-icon-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--friday-green-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.datalist-actions .friday-icon-btn:hover { color: var(--friday-green-400); }
.datalist-actions .friday-icon-btn.is-danger { color: var(--friday-alert-500); }
.datalist-actions .friday-icon-btn.is-danger:hover { color: var(--friday-alert-600); }
.datalist-actions form { display: inline-flex; }

/* Layout-varianter pr. liste */
.userlist-grid    { grid-template-columns: 2fr 3fr 1.5fr 1fr 1.5fr auto; }
.companylist-grid { grid-template-columns: 1.6fr 1fr 1.6fr 1.8fr 1fr 1fr auto; }
.projectlist-grid { grid-template-columns: 2fr 1.5fr 1.5fr 0.7fr 1fr auto; }
.tasklist-grid    { grid-template-columns: 2fr 1.6fr 1.5fr 1.2fr 1fr auto; }
.minitasklist-grid    { grid-template-columns: 2.5fr 1.5fr 1.2fr 1fr; }
.miniprojectlist-grid { grid-template-columns: 2fr 1.5fr 0.7fr 1fr; }
.timelist-grid        { grid-template-columns: 1.4fr 1.4fr 0.9fr 3fr; }

/* Total-række i bunden af en datalist (samme styling som header) */
.datalist-foot {
    background: var(--friday-green-100);
    color: var(--friday-green-500);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
    display: grid;
    gap: 16px;
    align-items: center;
}

@media (max-width: 992px) {
    .datalist-head { display: none; }
    .datalist-row { grid-template-columns: 1fr; gap: 6px; }
    .datalist-actions { justify-self: start; }
}
.btn-friday-start:disabled, .btn-friday-stop:disabled, .btn-friday-manuel:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Start timer — vibrant grøn baggrund, mørk tekst */
.btn-friday-start {
    background-color: var(--friday-fn-start);
    color: var(--friday-green-600);
}
.btn-friday-start:hover, .btn-friday-start:focus {
    background-color: var(--friday-green-300);
    color: var(--friday-green-600);
}

/* Stop timer — dæmpet rød default, dyb rød hover */
.btn-friday-stop {
    background-color: var(--friday-fn-stop);
    color: #fff;
}
.btn-friday-stop:hover, .btn-friday-stop:focus {
    background-color: var(--friday-alert-600);
    color: #fff;
}

/* Manuel timer — neutral grå, mørkt grøn tekst */
.btn-friday-manuel {
    background-color: var(--friday-fn-manuel);
    color: var(--friday-green-600);
}
.btn-friday-manuel:hover, .btn-friday-manuel:focus {
    background-color: var(--friday-fn-manuel-hover);
    color: var(--friday-green-600);
}

/* Edit / Rediger — slate-blå default, dyb mørkblå hover, hvid tekst */
.btn-friday-edit {
    background-color: var(--friday-blue-500);
    color: #fff;
}
.btn-friday-edit:hover, .btn-friday-edit:focus {
    background-color: var(--friday-blue-700);
    color: #fff;
}

/* === Form-controls: focus-ring i brand-grøn === */
.form-control:focus,
.form-select:focus {
    border-color: var(--friday-green-300);
    box-shadow: 0 0 0 .25rem rgba(88, 121, 84, .25);
}
.form-check-input:checked {
    background-color: var(--friday-green-400);
    border-color: var(--friday-green-400);
}

/* === Navigation === */
.navbar-brand {
    font-weight: 600;
    color: var(--friday-green-500) !important;
}
.navbar-brand i.text-primary {
    color: var(--friday-green-400) !important;
}
.nav-link.active {
    color: var(--friday-green-500) !important;
    font-weight: 500;
}

/* === Cards === */
.card {
    border-radius: .75rem;
}

main.container {
    max-width: 1140px;
}

/* === Badges fra designsystemet ===
   Pill-form (border-radius: 20px) med 4px/20px padding, 16px Inter Medium,
   hvid tekst — som specificeret i Figma. */
.badge {
    font-weight: 500;
    font-size: 14px;
    padding: var(--friday-space-100) var(--friday-space-500);
    border-radius: 20px;
    line-height: 1.4;
}

/* Eksakte status-farver fra designsystemet. */
.badge.friday-status-aaben     { background-color: var(--friday-blue-400);  color: #fff; }
.badge.friday-status-igang     { background-color: var(--friday-green-300); color: #fff; }
.badge.friday-status-aktiv     { background-color: var(--friday-green-500); color: #fff; }
.badge.friday-status-faerdig   { background-color: var(--friday-green-600); color: #fff; }
.badge.friday-status-pause     { background-color: var(--friday-blue-300);  color: #fff; }
.badge.friday-status-lukket    { background-color: var(--friday-blue-300);  color: #fff; }
.badge.friday-prio-high        { background-color: var(--friday-alert-500); color: #fff; }
.badge.friday-prio-low         { background-color: var(--friday-blue-300);  color: #fff; }
.badge.friday-klippekort       { background-color: var(--friday-blue-400);  color: #fff; }

/* Bootstrap badge-overrides så eksisterende klasser også får brand-farver */
.text-bg-primary  { background-color: var(--friday-green-400) !important; color: #fff !important; }
.text-bg-success  { background-color: var(--friday-green-500) !important; color: #fff !important; }
.text-bg-secondary{ background-color: var(--friday-blue-400)  !important; color: #fff !important; }
.text-bg-danger   { background-color: var(--friday-alert-500) !important; color: #fff !important; }
.text-bg-info     { background-color: var(--friday-blue-300)  !important; color: #fff !important; }

/* === Alerts: brug subtle-baggrund ud af samme palette === */
.alert-info {
    --bs-alert-bg: #EEF2F6;
    --bs-alert-border-color: #DCE3EB;
    --bs-alert-color: var(--friday-blue-500);
}
.alert-success {
    --bs-alert-bg: #E8F0E6;
    --bs-alert-border-color: #C9DBC4;
    --bs-alert-color: var(--friday-green-500);
}
.alert-danger {
    --bs-alert-bg: var(--friday-alert-100);
    --bs-alert-border-color: #E5A8A8;
    --bs-alert-color: var(--friday-alert-700);
}

/* === Progress-bar i brand-grøn === */
.progress-bar {
    background-color: var(--friday-green-400);
}

/* === Tabeller — bordfarver i brand === */
.table-light {
    --bs-table-bg: #F4F6F4;
    --bs-table-border-color: #E0E5DD;
    --bs-table-color: var(--friday-blue-500);
}

/* === Dropdown-aktiv-tilstand === */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--friday-green-400);
}

/* === Login/auth-sider === */
.btn-primary i.bi-box-arrow-in-right { margin-right: 4px; }

/* ---------------------------------------------------------------------------
   Komponent-specifik styling
   --------------------------------------------------------------------------- */

/* Rich text — gemt fra Quill */
.rich-text { line-height: 1.55; }
.rich-text p { margin-bottom: .75rem; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; color: var(--friday-blue-500); }
.rich-text h3 { font-size: 1.1rem;  font-weight: 600; margin-top: .75rem; color: var(--friday-blue-500); }
.rich-text ul, .rich-text ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.rich-text blockquote {
    border-left: 3px solid var(--friday-green-300);
    padding-left: 1rem;
    color: var(--friday-blue-300);
}
.rich-text pre { background: #F4F6F4; padding: .75rem; border-radius: .375rem; }
.rich-text a { color: var(--friday-green-500); }

/* WYSIWYG-editor (Quill) */
.wysiwyg-wrapper { background: #fff; }
.wysiwyg-wrapper .ql-toolbar.ql-snow {
    border: 0; border-bottom: 1px solid #dee2e6;
    border-top-left-radius: .375rem; border-top-right-radius: .375rem;
}
.wysiwyg-wrapper .ql-container.ql-snow {
    border: 0; min-height: 160px;
    border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem;
    font-family: inherit; font-size: 1rem;
}
.wysiwyg-wrapper .ql-editor { min-height: 160px; }