/* volunteer.css - kompletterar style.css för volontärsidan och admin */

.vol-header {
    background: linear-gradient(120deg, #fdf6ea 0%, var(--color-bg-alt) 55%, #eef3fa 100%);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-accent)) 1;
    padding: 0;
}

.vol-header .site-header {
    position: static;
    backdrop-filter: none;
    background: transparent;
}

.vol-page-title {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.6rem 1.5rem 0.5rem;
}

.vol-page-title h1 {
    margin: 0 0 0.3rem;
    font-size: 1.7rem;
    color: var(--color-primary-dark);
}

.vol-page-title p {
    margin: 0;
    color: var(--color-muted);
}

.vol-shell {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .vol-shell { grid-template-columns: 1fr; }
}

.vol-sidebar {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    padding: 1rem;
    position: sticky;
    top: 1rem;
    border-top: 3px solid var(--color-primary);
}

.vol-sidebar a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.vol-sidebar a:hover,
.vol-sidebar a.active {
    background: linear-gradient(90deg, rgba(198,147,46,0.16), rgba(198,147,46,0.06));
    color: var(--color-primary-dark);
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(0.7rem - 3px);
}

.vol-sidebar .sidebar-divider {
    height: 1px;
    background: rgba(12,38,63,0.08);
    margin: 0.6rem 0;
}

/* Rubrik högst upp i sidomenyn, t.ex. "Administratörsöversikt" / "Volontärsöversikt",
   så det är tydligt vilken del av systemet man befinner sig i - oavsett färgtema. */
.sidebar-zone-label {
    margin: 0 0 0.7rem;
    padding: 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

/* Adminpanelens layout-klasser - medvetet separata från .vol-* ovan så att
   framtida visuella ändringar för volontärsidan aldrig påverkar adminpanelen.
   Ljust kallgrått/blåtonat tema för att tydligt skilja adminpanelen från den
   varma volontärsidan, utan att vara mörkt. */
body.admin-page {
    background: #e8ecf3;
    min-height: 100vh;
}

.admin-header {
    background: #dde3ee;
    border-bottom: 1px solid rgba(12,38,63,0.1);
    padding: 0;
}

.admin-header .site-header {
    position: static;
    backdrop-filter: none;
    background: transparent;
}

.admin-header .brand-subtitle {
    color: var(--color-muted);
}

.admin-header .brand-text,
.admin-header a.nav-link,
.admin-header .small-muted {
    color: var(--color-text);
}

.admin-header a.nav-link:hover {
    color: var(--color-accent);
}

.admin-page-title {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.6rem 1.5rem 0.5rem;
}

.admin-page-title h1 {
    margin: 0 0 0.3rem;
    font-size: 1.7rem;
    color: var(--color-text);
}

.admin-page-title p {
    margin: 0;
    color: var(--color-muted);
}

.admin-shell {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.admin-shell .admin-main {
    min-width: 0; /* tillåter innehåll (t.ex. tabeller) att krympa istället för att tvinga hela griden bredare */
}

@media (max-width: 800px) {
    .admin-shell { grid-template-columns: 1fr; }
}

/* Hamburgerknapp - dold på desktop, visas bara när sidomenyn kan fällas ihop */
.admin-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid rgba(12,38,63,0.15);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}
.admin-menu-toggle span {
    display: block;
    height: 2px;
    width: 18px;
    margin: 0 auto;
    background: var(--color-text);
    border-radius: 2px;
}

@media (max-width: 800px) {
    .admin-menu-toggle { display: flex; }

    /* Sidomenyn (admin och volontär) är hopfälld som standard på mobil - visas
       bara vid tryck på hamburgerknappen, så mobilanvändare möter sidans
       innehåll direkt istället för att behöva skrolla förbi en lång länklista. */
    .admin-sidebar,
    .vol-sidebar {
        display: none;
    }
    .admin-sidebar.admin-sidebar-open,
    .vol-sidebar.admin-sidebar-open {
        display: block;
    }
}

.admin-sidebar {
    background: #ffffff;
    border: 1px solid rgba(12,38,63,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px -14px rgba(12,38,63,0.18);
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

.admin-sidebar a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(28,74,127,0.1);
    color: var(--color-accent);
    font-weight: 600;
}

.admin-sidebar .sidebar-divider {
    height: 1px;
    background: rgba(12,38,63,0.08);
    margin: 0.6rem 0;
}

/* Hopfällbara sektioner i adminmenyn - varje <details> är en grupp,
   <summary> är sektionsrubriken man klickar för att fälla ihop/ut. */
.admin-sidebar-group {
    margin-bottom: 0.3rem;
}
.admin-sidebar-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}
.admin-sidebar-group summary::-webkit-details-marker { display: none; }
.admin-sidebar-group summary::after {
    content: "▸";
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.admin-sidebar-group[open] summary::after {
    transform: rotate(90deg);
}
.admin-sidebar-group summary:hover {
    background: rgba(12,38,63,0.04);
}
.admin-sidebar-group a {
    margin-left: 0.4rem;
}

.admin-main {
    min-width: 0;
}

/* Kort inom adminpanelen har vit bakgrund så de sticker ut lätt mot den ljusgrå ytan runtom */
.admin-shell .card,
.admin-shell .card-flat {
    background: var(--color-bg-alt);
    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.45);
}

.admin-shell .card h2,
.admin-shell .card h3,
.admin-shell .card-flat h2,
.admin-shell .card-flat h3 {
    color: var(--color-text);
}



.vol-main {
    min-width: 0;
}

.card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.card h2, .card h3 {
    margin-top: 0;
}

.card-flat {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    border: 1px solid rgba(12,38,63,0.07);
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(12,38,63,0.16);
    font-size: 0.95rem;
    font-family: var(--font-sans);
    background: #fff;
    color: var(--color-text);
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(198,147,46,0.18);
}

.form-hint-small {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.3rem;
}

.alert {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error {
    background: #fdecec;
    color: #92221a;
    border: 1px solid #f2c2bd;
}

.alert-success {
    background: #eaf7ef;
    color: #1c6b41;
    border: 1px solid #bfe6cd;
}

.alert-info {
    background: #eaf1fb;
    color: #1c4a7f;
    border: 1px solid #c7dbf4;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-open { background: #fdecec; color: #92221a; }
.badge-progress { background: #fff4e0; color: #8a6513; }
.badge-done { background: #eaf7ef; color: #1c6b41; }
.badge-pending { background: #fff4e0; color: #8a6513; }
.badge-approved { background: #eaf7ef; color: #1c6b41; }
.badge-admin { background: #eaf1fb; color: #1c4a7f; }

.table-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table-simple th,
.table-simple td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(12,38,63,0.08);
    vertical-align: top;
}

.table-simple th {
    color: var(--color-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.list-plain {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-plain li {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(12,38,63,0.07);
}

.list-plain li:last-child {
    border-bottom: none;
}

.slot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Markerar raden man länkats till direkt (t.ex. "Visa detaljer" på ett
   café-pass från startsidan), så det syns tydligt vilken rad som avses. */
li:target {
    animation: target-highlight 2.5s ease-out;
    border-radius: 10px;
}
@keyframes target-highlight {
    0% { background: rgba(198,147,46,0.25); }
    100% { background: transparent; }
}

.slot-fill {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.slot-fill.full {
    color: #1c6b41;
    font-weight: 600;
}

.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(12,38,63,0.07);
    gap: 0.8rem;
    flex-wrap: wrap;
}

.doc-item:last-child { border-bottom: none; }

.doc-name {
    font-weight: 600;
}

.doc-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.btn-danger {
    background: #c6392e;
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid rgba(12,38,63,0.2);
}

.inline-form {
    display: inline;
}

.top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.small-muted {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.auth-wrapper {
    max-width: 420px;
    margin: 3rem auto;
    padding: 0 1.2rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}

/* Varm bakgrund för volontär-inloggning/registrering, för att skilja den ytan visuellt
   från både den publika hemsidan och adminpanelen. Adminpanelen berörs inte av detta. */
body.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(198,147,46,0.16), transparent 55%),
        radial-gradient(circle at 88% 92%, rgba(28,74,127,0.14), transparent 55%),
        linear-gradient(160deg, #fdf8f0 0%, var(--color-bg) 45%, #eef2f7 100%);
    background-attachment: fixed;
}

body.auth-page .site-header {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(12,38,63,0.06);
}

body.auth-page .auth-wrapper {
    margin-top: 4.5rem;
}

body.auth-page .auth-wrapper .card {
    box-shadow: 0 20px 50px -20px rgba(12,38,63,0.25), 0 2px 8px rgba(12,38,63,0.06);
    border: 1px solid rgba(198,147,46,0.15);
    position: relative;
    overflow: hidden;
}

body.auth-page .auth-wrapper .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

body.auth-page .auth-wrapper h2 {
    color: var(--color-primary-dark);
}

/* Bakgrundston på de inloggade volontärsidorna (efter login) - tydligt märkbar men lugn
   nog för vardagsbruk, skiljer dem visuellt från adminpanelens rena vita bakgrund. */
body.volunteer-page {
    background:
        radial-gradient(circle at 100% 0%, rgba(198,147,46,0.10), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(28,74,127,0.07), transparent 40%),
        linear-gradient(180deg, #fdf9f2 0%, var(--color-bg) 30%);
    min-height: 100vh;
}

/* Kort inom volontär-shellen (ej adminpanelen) får en tunn guldkant upptill,
   för att kännas som samma varma yta som inloggningssidan. */
.vol-shell .card,
.vol-shell .card-flat {
    border-top: 3px solid rgba(198,147,46,0.5);
}

/* Status-pill för publika evenemang, t.ex. "Slutsåld" / "Bokning stängd" på event-kort */
.status-pill {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    box-shadow: 0 4px 12px rgba(5,16,37,0.25);
}

.status-pill-soldout {
    background: linear-gradient(135deg, #c6392e, #8a231b);
}

.status-pill-closed {
    background: linear-gradient(135deg, #6c7484, #4a5160);
}

.status-pill-inline {
    position: static;
    box-shadow: none;
    margin-left: 0.6rem;
}