/* HOODI-tema, delfil: events. Indlæses af hoodi-theme-links.php. Skrives af én agent ad gangen. */

/* ------------------------------------------------------------------------------------------------------------------
   Begivenhed: visning og redigering (events/details.php, events/edit/index.php). Kortet får klassen hoodi-event på dev
   (redigeringen desuden hoodi-event-edit; også ressourcens redigering i booking/resources/edit/index.php, 04-11-2026;
   Informations forside i information/index.php, 04-11-2026). Mål fra Web_Begivenhed.png og Web_Begivenhed_uden_billede.png (2x, delt med 2):
   kort 720 px bredt med 22 px runding, billede 300 px, titel 32/800 hvid nederst til venstre med 28 px luft,
   "Deltager"-knap 40 px høj lysegrøn pille med chevron og "..." som 40 px hvid cirkel, begge 18 px fra kanten,
   meta-linje 15 px grå med 18 px ikoner og 32 px mellem punkterne (62 px høj) over en 1 px skillelinje,
   brødtekst 15/400 med 28 px luft, vedhæftninger som grå boks (16 px) med 68 px rækker, hvid 44 px flise (12 px)
   med filtypen i 11/700, filnavn 15/600 og chevron til højre.
   ------------------------------------------------------------------------------------------------------------------ */
.hoodi-event { border-radius: var(--hoodi-r-kort) !important; overflow: hidden; }
.hoodi-event .overlay .bgi-size-cover { min-height: 300px !important; border-radius: 0 !important; }
.hoodi-event .overlay .overlay-layer { border-radius: 0 !important; }
/* Uden billede: petrol flade med HOODI-symbolet som svag streg øverst til højre, klippet af kortets kant (mockup).
   Det mørke lag over billedet er unødvendigt her og skjules. */
.hoodi-event .overlay .bgi-size-cover:not([style*="background-image"]) {
  background-color: var(--hoodi-petrol) !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='2.4' stroke-linejoin='round'><path d='M71.12 86 L44 86 L26.5 95.5 L29.12 86 Q25.04 86 21.56 83.96 Q18.08 81.92 16.04 78.44 Q14 74.96 14 70.88 L14 43.28 Q14 39.44 15.8 36.08 Q17.6 32.72 20.72 30.8 L41.6 16.64 Q45.44 14 50 14 Q54.56 14 58.4 16.64 L79.28 30.8 Q82.4 32.72 84.2 36.08 Q86 39.44 86 43.28 L86 70.88 Q86 74.96 83.96 78.44 Q81.92 81.92 78.44 83.96 Q74.96 86 71.12 86 Z'/><circle cx='30.8' cy='59' r='6.4'/><circle cx='50' cy='59' r='6.4'/><circle cx='69.2' cy='59' r='6.4'/></g></svg>");
  background-repeat: no-repeat; background-size: 330px 330px; background-position: right -40px top 27px;
}
.hoodi-event .overlay .bgi-size-cover:not([style*="background-image"]) + .overlay-layer { display: none; }

/* Øverste række på billedet: mærke til venstre, knapper til højre, 18 px fra kanten */
.hoodi-event table.position-absolute.text-white.top-0 td { padding: 18px 18px 0 !important; vertical-align: top; }
.hoodi-event table.position-absolute.text-white.top-0 td.text-end > span { display: inline-block; vertical-align: top; }
/* Kladde/Aflyst: neutralt mærke (grå flade, petrol tekst) som i designguiden */
.hoodi-event .badge.badge-dark, .hoodi-eventcard .badge.badge-dark { background-color: var(--hoodi-graa) !important; color: var(--hoodi-petrol) !important; }
/* Deltag/Deltager: hvid pille, lysegrøn når medlemmet deltager; chevronen åbner valget (samme menu som før) */
.hoodi-event .hoodi-eventjoin, .hoodi-event .hoodi-eventjoin.btn {
  display: inline-flex !important; align-items: center; gap: 4px; height: 40px;
  padding: 0 12px 0 20px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--hoodi-hvid) !important; color: var(--hoodi-petrol) !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1;
}
.hoodi-event .hoodi-eventjoin:hover { background: var(--hoodi-hover) !important; }
.hoodi-event .hoodi-eventjoin-aktiv, .hoodi-event .hoodi-eventjoin-aktiv.btn { background: var(--hoodi-lysgroen) !important; }
.hoodi-event .hoodi-eventjoin-aktiv:hover { background: #CBDDCD !important; }
.hoodi-event .hoodi-eventjoin .fi { display: inline-flex; margin: 0 !important; font-size: 18px !important; line-height: 1; color: var(--hoodi-petrol) !important; }
/* "..." og redigeringens Offentliggør-knap: 40 px hvide, 10 px fra knappen ved siden af */
.hoodi-event a.symbol.symbol-35px.symbol-circle > .symbol-label:not(.bg-dark) { width: 40px; height: 40px; }
.hoodi-event a.symbol.symbol-35px.symbol-circle > .symbol-label:not(.bg-dark) .fi { font-size: 16px !important; }   /* prikkerne er mindre i mockup end sidernes 20 px */
.hoodi-event td.text-end a.symbol.ms-2 { margin-left: 6px !important; }   /* + mellemrummet mellem de to inline-elementer = 10 px som i mockup */
.hoodi-event-edit td.text-end .btn.btn-secondary {
  display: inline-flex !important; align-items: center; height: 40px; padding: 0 20px !important; margin-right: 8px !important;   /* 8 + kebabens 6 + mellemrummet = 18 px som fra kebaben til kortets kant (Patrick 04-11-2026; før 20) */
  border: 0 !important; border-radius: 999px !important; background: var(--hoodi-hvid) !important;
  color: var(--hoodi-petrol) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1;
}
.hoodi-event-edit td.text-end .btn.btn-secondary:hover { background: var(--hoodi-hover) !important; }

/* Titlen nederst til venstre (visningen tegner den som overskrift i dev-grenen; redigeringen beholder sit felt) */
.hoodi-event .hoodi-eventheading { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 24px; color: var(--hoodi-hvid); }
.hoodi-event .hoodi-eventlabel, .hoodi-event-edit .position-absolute.bottom-0 > .fs-8 { font-size: 13px !important; font-weight: 600; opacity: .85; margin-bottom: 6px; }
.hoodi-event .hoodi-eventtitle-lg {
  margin: 0; color: var(--hoodi-hvid); font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.hoodi-event-edit .position-absolute.text-white.bottom-0 { left: 0; right: 0; margin: 0 !important; padding: 0 24px 24px; }
.hoodi-event-edit #event_title_h3, .hoodi-event-edit #resources_name {   /* ressourcens redigering bruger samme kort (booking/resources/edit, 04-11-2026) */
  height: auto !important; min-height: 0 !important; font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em;
}
.hoodi-event-edit #event_title_h3::placeholder, .hoodi-event-edit #resources_name::placeholder { color: rgba(255, 255, 255, .6); }
/* Tilbage-pilen står samme sted som på alle andre sider (kortets overkant); den flugtede før med knapperne på billedet
   (18 px nede) og så skæv ud ved siden af kortet (Patrick 04-11-2026) */
.row:has(> div > .hoodi-event) #backButtonClick { display: inline-block; }

/* Meta-linjen: tid, sted og deltagere */
.hoodi-event .hoodi-eventmeta {
  display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 20px 24px;
  border-bottom: 1px solid var(--hoodi-skillelinje); color: var(--hoodi-tekst2); font-size: 15px; line-height: 22px;
}
.hoodi-event .hoodi-eventmeta > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hoodi-event .hoodi-eventmeta .fi { display: inline-flex; flex-shrink: 0; font-size: 16px; line-height: 1; color: var(--hoodi-tekst2) !important; }   /* 18 -> 16 som listernes ikoner (Patrick 02-11-2026: mindre) */
.hoodi-event .hoodi-eventmeta a { margin-left: 4px; color: var(--hoodi-petrol); font-weight: 700; }

/* Brødtekst og vedhæftninger: 28 px luft hele vejen rundt, ingen ekstra rækkeafstande fra gitteret */
/* 24 px indre luft som underskriftssagen og beskedkortene (Patrick 04-11-2026: "inner margin virker større end under idura"; mockup'en 28).
   Titel, meta-linje, tekst og bilag står alle 24 px inde, og redigeringens værktøjslinje flugter med teksten (ikonets 4 px luft i knappen). */
.hoodi-event > .card-body { padding: 24px !important; }
.hoodi-event-edit .description-toolbar > .card-body { padding-left: 20px; padding-right: 20px; }
.hoodi-event > .card-body > .row { margin: 0 !important; }
.hoodi-event > .card-body > .row > * { padding-left: 0 !important; padding-right: 0 !important; }
.hoodi-event > .card-body > .row.py-4.px-6 { padding: 0 !important; }
.hoodi-event > .card-body > .row.py-4.px-6 td.fs-7 { font-size: 15px !important; line-height: 1.5; color: var(--hoodi-petrol) !important; }
.hoodi-event > .card-body > .row.py-4.px-6 td.fs-7 li { padding-top: 3px; padding-bottom: 3px; }   /* kun lodret: tekstfeltets egen indrykning af punkterne (hoodi-richtext, 1,75 rem til prikken) skal stå (04-11-2026: prikkerne lå oven i teksten) */
.hoodi-event > .card-body > .row.py-4.px-6 td.fs-7 strong { font-size: 16px; font-weight: 700; }
.hoodi-event > .card-body > .row.mt-8 { margin-top: 24px !important; }
.hoodi-event .row.mt-8 .card:not(.hoodi-approvalfile) { background: transparent !important; border-radius: 16px; overflow: hidden; }   /* filboksen (redigeringen, dev) har sin grå flade fra administration.css */
.hoodi-event .tablebankgray.bg-gray-200 { background: var(--hoodi-graa) !important; border-radius: 16px !important; border-collapse: separate; border-spacing: 0; }
/* Cellerne gennemsigtige: på redigeringen giver DataTables rækken klassen odd, og Metronic maler så cellerne hvide oven på den grå tabel */
.hoodi-event .tablebankgray > tbody > tr > td { border: 0 !important; background: transparent !important; padding-top: 12px !important; padding-bottom: 12px !important; }
.hoodi-event .tablebankgray > tbody > tr > td:first-child { width: 56px; padding-left: 12px !important; padding-right: 0 !important; }
.hoodi-event .tablebankgray > tbody > tr > td:nth-child(2) { padding-left: 16px !important; }
.hoodi-event .tablebankgray > tbody > tr > td:last-child { padding-right: 20px !important; }
.hoodi-event .tablebankgray > tbody > tr + tr > td { border-top: 1px solid var(--hoodi-hvid) !important; }
.hoodi-event .tablebankgray > tbody > tr:hover > td { background: #E6E6E6 !important; }
.hoodi-event .tablebankgray .me-2 { margin-right: 0 !important; }
.hoodi-event .tablebankgray .symbol-40px .symbol-label {
  width: 44px; height: 44px; border-radius: 12px !important; background-color: var(--hoodi-hvid) !important; padding-top: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
.hoodi-event .tablebankgray .symbol-40px .symbol-label .fi { color: var(--hoodi-petrol) !important; font-size: 16px !important; line-height: 1; display: inline-flex; }   /* 16 px som redigeringens flise (.hoodi-attach-tile i inbox.css), så visning og redigering er ens (05-11-2026; før 20) */
.hoodi-event .hoodi-filetype { font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1; color: var(--hoodi-tekst2); }
.hoodi-event .tablebankgray .fw-semibold.fs-7,
.hoodi-event .tablebankgray input.form-control-transparent.fw-bold.fs-7 { font-size: 15px !important; font-weight: 600 !important; color: var(--hoodi-petrol) !important; }
.hoodi-event .tablebankgray .fi-rr-angle-small-right { font-size: 16px !important; color: var(--hoodi-tekst2) !important; }   /* som alle rækker (mockup 7x15 ved 2x) */
/* Menupunkter i kortet (Information, information/index.php, dev): Administration-sidens rækker (table.tablebank: 44 px cirkel
   med 14 px på alle sider, 72 px rækker, 15/600) i en grå boks som bilagenes, med hvide cirkler og hvide skillelinjer. Bilagenes
   hvide fliser ovenfor er kun til filer (Patrick 04-11-2026: "det er ikke sådan her vi laver menu-ikoner"). Runding og
   gennemsigtigt kort kommer fra .row.mt-8 .card ovenfor. */
.hoodi-event > .card-body > .row.mt-8 table.tablebank { background: var(--hoodi-graa) !important; border-collapse: separate; border-spacing: 0; }
.hoodi-event > .card-body > .row.mt-8 table.tablebank > tbody > tr + tr > td { border-top: 1px solid var(--hoodi-hvid) !important; }
.hoodi-event > .card-body > .row.mt-8 table.tablebank .symbol-40px .symbol-label { background: var(--hoodi-hvid) !important; }
.hoodi-event > .card-body > .row.mt-8 table.tablebank > tbody > tr:is([onclick], [style*="cursor:pointer"], [style*="cursor: pointer"]):hover > td { background: #E6E6E6 !important; }   /* som de grå bokse */
/* Kommentarer under teksten: samme 28 px sidekant (cellerne har selv 16 px) */
.hoodi-event > .px-5 { padding: 0 12px 8px !important; }

/* Ressourcens visning: mulighederne for den valgte dato (booking/resources/details.php, #resource_opportunities; rækkerne tegnes
   af fetchOpportunities). Samme grå boks som bilagene ovenfor (16 px runding, 12 px over og under, hvide skillelinjer, mørkere
   grå ved hover) med Informations hvide 44 px cirkler: ikon 16 px petrol, titel 15/600, tidsrum 13/400 grå og prisen som hvidt
   mærke 20 px fra kanten. Før: lysere grå boks, 40 px cirkel, titel 500 og undertekst 14 px (Patrick 05-11-2026). */
#resource_opportunities { background: transparent !important; border-radius: 16px; overflow: hidden; }
#resource_opportunities .tablebankgray { background: var(--hoodi-graa) !important; border-radius: 16px !important; border-collapse: separate; border-spacing: 0; }
#resource_opportunities .tablebankgray > tbody > tr > td { border: 0 !important; background: transparent !important; padding-top: 12px !important; padding-bottom: 12px !important; }
#resource_opportunities .tablebankgray > tbody > tr > td:first-child { padding-left: 12px !important; padding-right: 0 !important; }
#resource_opportunities .tablebankgray > tbody > tr > td:nth-child(2) { padding-left: 16px !important; }
#resource_opportunities .tablebankgray > tbody > tr > td:last-child { padding-right: 20px !important; }
#resource_opportunities .tablebankgray > tbody > tr + tr > td { border-top: 1px solid var(--hoodi-hvid) !important; }
#resource_opportunities .tablebankgray > tbody > tr:hover > td { background: #E6E6E6 !important; }
#resource_opportunities .symbol-group { margin: 0 !important; padding: 0 !important; display: flex; }   /* Metronics 10 px gruppemargen og cirklens -10 px gjorde cellen 10 px for bred med én cirkel (som i table.tablebank) */
#resource_opportunities .symbol-group > .symbol { margin: 0 !important; border: 0 !important; }
#resource_opportunities .symbol-40px .symbol-label {
  width: 44px; height: 44px; padding-top: 0 !important; background: var(--hoodi-hvid) !important;
  display: flex; align-items: center; justify-content: center;
}
#resource_opportunities .symbol-40px .symbol-label .fi { color: var(--hoodi-petrol) !important; font-size: 16px !important; line-height: 1; display: inline-flex; }
#resource_opportunities .fw-semibold.fs-7 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3; color: var(--hoodi-petrol); }
#resource_opportunities .text-muted.fs-8 { font-size: 13px !important; font-weight: 400 !important; line-height: 1.4; color: var(--hoodi-tekst2) !important; }
#resource_opportunities .badge { background-color: var(--hoodi-hvid) !important; color: var(--hoodi-petrol) !important; margin-right: 0 !important; }

/* ------------------------------------------------------------------------------------------------------------------
   Begivenhedslisten (events/index.php): kortene får klassen hoodi-eventcard på dev (tidligere desuden hoodi-eventcard-past).
   Ingen mockup af listen; mål efter guiden: kort 22 px, korttitel 20/700, undertekst 14-15 grå, ikoner 18 px, knap 48 px
   rund pille, mærker runde 13/600, luft 20/24 px.
   ------------------------------------------------------------------------------------------------------------------ */
.hoodi-eventcard { border-radius: var(--hoodi-r-kort) !important; overflow: hidden; }
.hoodi-eventcard .overlay .bgi-size-cover, .hoodi-eventcard .overlay .overlay-layer { border-radius: 0 !important; }
.hoodi-eventcard .overlay .min-h-150px { min-height: 160px !important; }
.hoodi-eventcard .position-absolute.top-0 { margin: 0 !important; padding: 16px 24px 0; }
.hoodi-eventcard .position-absolute.bottom-0 { left: 0; right: 0; margin: 0 !important; padding: 0 24px 20px; }
.hoodi-eventcard h3.fs-1qx { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.hoodi-eventcard .position-absolute.bottom-0 .fs-7.fw-semibold { margin-top: 6px; font-size: 13px !important; font-weight: 600 !important; opacity: .85; }
.hoodi-eventcard .position-absolute.bottom-0 .fs-8.text-gray-400 { margin-bottom: 4px !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .85) !important; }
.hoodi-eventcard > .card-body {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 0 !important;
  color: var(--hoodi-tekst2); font-size: 15px; line-height: 22px;
}
.hoodi-eventcard > .card-body > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hoodi-eventcard > .card-body .fi { display: inline-flex; flex-shrink: 0; margin: 0 !important; font-size: 16px !important; line-height: 1; color: var(--hoodi-tekst2) !important; }   /* 18 -> 16 som listernes ikoner (Patrick 02-11-2026: mindre) */
.hoodi-eventcard > .card-body a { margin-left: 4px !important; color: var(--hoodi-petrol); font-weight: 700; }
.hoodi-eventcard > .card-footer { padding: 20px 24px 24px !important; }
.hoodi-eventcard > .card-footer > .btn {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border: 0;
  border-radius: 999px !important; background: var(--hoodi-graa) !important; color: var(--hoodi-petrol) !important;
  font-size: 15px !important; font-weight: 700 !important;
}
.hoodi-eventcard:hover > .card-footer > .btn { background: #E6E6E6 !important; }

/* Mødechattens skrivefelt (meeting/index.php, panelet Chat) er AI-chattens: samme grå pille 46 px med 34 px petrol sendeknap,
   6 px over og under og 7 px til kanten, som Spørg HOODI (settings.css) og kommentarfelterne (hoodi-theme.css); luften om
   knappen følger Energi-fanens plus (Patrick 05-11-2026: "god balance"). Sidens egen CSS havde 36 px knap med 5 px luft. */
.meeting-chat-inputrow { border-radius: 999px !important; background: var(--hoodi-graa) !important; padding: 6px 7px 6px 20px !important; min-height: 46px; gap: 10px; }
.meeting-chat-inputrow #chatText { font-size: 15px !important; color: var(--hoodi-petrol) !important; padding: 5px 0 !important; line-height: 1.5; }
.meeting-chat-inputrow #chatText::placeholder { color: var(--hoodi-tekst2); opacity: 1; }
.meeting-chat-inputrow #chatSend { width: 34px !important; height: 34px !important; background: var(--hoodi-petrol) !important; }
.meeting-chat-inputrow #chatSend:hover { background: #1D3640 !important; }
.meeting-chat-inputrow #chatSend i { font-size: 16px !important; line-height: 1; display: inline-flex; color: var(--hoodi-hvid) !important; }