/* ===================================
   Re:Con Finance – Medarbetarportal
   Soft Dark Theme – Readable & Sharp
   =================================== */

/* === CSS Variables – Dark mode (default) === */
:root {
    /* Brand */
    --gold:         #F9B233;
    --gold-dim:     #d4902e;
    --gold-glow:    rgba(249,178,51,0.20);
    --gold-glow-md: rgba(249,178,51,0.38);

    /* Sidebar – slightly lighter deep blue */
    --sidebar-bg:   #141f2e;
    --sidebar-top:  #172233;
    --sidebar-w:    200px;

    /* Main BG – soft dark, not pitch black */
    --page-bg:      #141f2e;
    --card-bg:      #1c2a3a;
    --card-bg2:     #223043;
    --border:       rgba(255,255,255,0.10);
    --border-gold:  rgba(249,178,51,0.30);

    /* Text – high contrast, clearly readable */
    --txt:          #f0f4f8;
    --txt-dim:      #a8b8cc;
    --txt-muted:    #637080;

    /* Status */
    --success:  #10b981;
    --danger:   #ef4444;
    --warning:  #f59e0b;
    --info:     #3b82f6;
    --purple:   #8b5cf6;

    /* Misc */
    --font:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --r:       7px;
    --r-lg:    11px;
    --t:       all 0.2s ease;
    --shadow:  0 4px 20px rgba(0,0,0,0.4);
    --glow-sm: 0 0 12px rgba(249,178,51,0.22);
    --glow-md: 0 0 24px rgba(249,178,51,0.32);
}

/* === Light mode – html[data-theme="light"] === */
html[data-theme="light"] {
    /* Brand stays gold */
    --gold:         #e09a1a;
    --gold-dim:     #b87b10;
    --gold-glow:    rgba(224,154,26,0.18);
    --gold-glow-md: rgba(224,154,26,0.32);

    /* Sidebar – deep navy (same look, lighter feel) */
    --sidebar-bg:   #1a2b40;
    --sidebar-top:  #1e3350;

    /* Page & cards – clean off-white with blue tint */
    --page-bg:      #f0f4f8;
    --card-bg:      #ffffff;
    --card-bg2:     #e8eef5;
    --border:       rgba(26,43,64,0.12);
    --border-gold:  rgba(224,154,26,0.35);

    /* Text – dark navy for max readability */
    --txt:          #162033;
    --txt-dim:      #3d5574;
    --txt-muted:    #7a93b0;

    /* Status unchanged */
    --success:  #059669;
    --danger:   #dc2626;
    --warning:  #d97706;
    --info:     #2563eb;
    --purple:   #7c3aed;

    /* Misc */
    --shadow:  0 4px 20px rgba(26,43,64,0.15);
    --glow-sm: 0 0 12px rgba(224,154,26,0.18);
    --glow-md: 0 0 24px rgba(224,154,26,0.28);
}

/* Light mode sidebar text & nav tweaks */
html[data-theme="light"] .portal-sidebar {
    box-shadow: 4px 0 30px rgba(26,43,64,0.18);
}
html[data-theme="light"] .sidebar-header {
    border-bottom-color: rgba(255,255,255,0.15);
}
html[data-theme="light"] .nav-item {
    color: rgba(255,255,255,0.80);
}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active {
    color: #F9B233;
    background: rgba(249,178,51,0.15);
}
html[data-theme="light"] .user-info strong,
html[data-theme="light"] .user-info small {
    color: rgba(255,255,255,0.85);
}
html[data-theme="light"] .portal-logo {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(249,178,51,0.45));
}
html[data-theme="light"] .portal-title {
    color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .sidebar-footer {
    border-top-color: rgba(255,255,255,0.12);
}
/* Light mode card & input tweaks */
html[data-theme="light"] .portal-content {
    background: var(--page-bg);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #fff;
    color: var(--txt);
    border-color: var(--border);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: var(--gold);
}
html[data-theme="light"] .mobile-menu-toggle {
    background: rgba(26,43,64,0.08);
    color: var(--txt);
    border: 1px solid var(--border);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(224,154,26,0.30);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(224,154,26,0.55);
}
/* Smooth theme transition */
html, body, .portal-sidebar, .portal-content, .card, .set-card,
.forum-card, .doc-card, .booking-card, .stat-card, .news-card {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* === Reset === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* === Global Role Pills (shared across all portal pages) === */
.role-pill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.12rem 0.55rem; border-radius: 12px;
    font-size: 0.58rem; font-weight: 700;
}
.rp-admin                  { background:rgba(239,68,68,0.10);  color:#ef4444; border:1px solid rgba(239,68,68,0.25); }
.rp-manager                { background:rgba(59,130,246,0.10); color:#3b82f6; border:1px solid rgba(59,130,246,0.25); }
.rp-gc                     { background:rgba(139,92,246,0.10); color:#8b5cf6; border:1px solid rgba(139,92,246,0.25); }
.rp-konsult                { background:rgba(249,178,51,0.12); color:#F9B233; border:1px solid rgba(249,178,51,0.3); }
.rp-medarb, .rp-oh         { background:rgba(16,185,129,0.10); color:#10b981; border:1px solid rgba(16,185,129,0.25); }
.rp-under                  { background:rgba(245,158,11,0.10); color:#f59e0b; border:1px solid rgba(245,158,11,0.25); }

/* Role-badge variants (used in profil page) */
.role-badge-admin    { color:#ef4444; }
.role-badge-manager  { color:#3b82f6; }
.role-badge-gc       { color:#8b5cf6; }
.role-badge-konsult  { color:#F9B233; }
.role-badge-oh       { color:#10b981; }
.role-badge-under    { color:#f59e0b; }
.role-badge-medarb   { color:#10b981; }

body {
    font-family: var(--font);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--txt);
    background: var(--page-bg);
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(249,178,51,0.25); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(249,178,51,0.45); }

/* ===================================
   PORTAL LAYOUT
   =================================== */
.portal-page { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.portal-sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bg) 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    left:0; top:0;
    height: 100vh;
    z-index: 1000;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 30px rgba(0,0,0,0.6);
}

/* Logo area */
.sidebar-header {
    padding: 1.4rem 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* Big glowing logo */
.portal-logo {
    width: 72px;
    height: auto;
    display: block;
    margin: 0 auto 0.6rem;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(249,178,51,0.55));
}

.sidebar-header h2 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--txt-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Nav */
.sidebar-nav { flex:1; padding:0.5rem 0; overflow-y:auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--txt-dim);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: var(--t);
    position: relative;
}

.nav-item i { font-size: 0.85rem; width: 16px; flex-shrink:0; }
.nav-item span { flex:1; }

.nav-item:hover {
    color: var(--gold);
    background: rgba(249,178,51,0.06);
    border-left-color: rgba(249,178,51,0.3);
}

.nav-item.active {
    color: var(--gold);
    background: rgba(249,178,51,0.1);
    border-left-color: var(--gold);
}
.nav-item.active::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
}

/* Sub-nav (for vacation under calendar) */
.nav-sub { padding-left:1.6rem; }

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 0.5rem;
    color: var(--txt-muted);
    text-decoration: none;
    font-size: 0.7rem;
    border-left: 1.5px solid var(--border);
    transition: var(--t);
}
.nav-sub-item i { font-size: 0.7rem; width:14px; }
.nav-sub-item:hover { color: var(--gold); border-left-color: var(--gold-dim); }
.nav-sub-item.active { color: var(--gold); border-left-color: var(--gold); }

/* Sidebar footer */
.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border-radius: var(--r);
    border: 1px solid var(--border);
}
.user-info i { font-size:1.35rem; color:var(--gold); flex-shrink:0; }
.user-info strong { display:block; font-size:0.73rem; color:var(--txt); }
.user-info small  { display:block; font-size:0.65rem; color:var(--txt-dim); }

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem;
    background: rgba(239,68,68,0.1);
    color: rgba(239,68,68,0.8);
    text-decoration: none;
    border-radius: var(--r);
    font-size: 0.72rem;
    font-weight: 500;
    transition: var(--t);
}
.btn-logout:hover { background:rgba(239,68,68,0.2); color:#ef4444; }

/* Mobile toggle */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 0.75rem; left: 0.75rem;
    z-index: 1001;
    background: var(--card-bg);
    color: var(--gold);
    border: 1px solid var(--border-gold);
    width: 38px; height: 38px;
    border-radius: var(--r);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--glow-sm);
}

/* ── Main Content ── */
.portal-content {
    flex: 1;
    margin-left: var(--sidebar-w);
    padding: 1.25rem 1.5rem;
    min-height: 100vh;
}

.content-header { margin-bottom: 1.2rem; }
.content-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 0.15rem;
    display: flex; align-items: center; gap: 0.45rem;
}
.content-header h1 i { color: var(--gold); font-size: 1rem; }
.content-header p  { color: var(--txt-dim); font-size: 0.75rem; }

/* ===================================
   SHARED COMPONENTS
   =================================== */

/* Card */
.card, .dashboard-card, .admin-section,
.event-panel, .event-legend, .calendar-main,
.documents-toolbar, .forum-post {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.card-header h2 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--txt);
    display: flex; align-items: center; gap: 0.4rem;
}
.card-header h2 i { color:var(--gold); font-size:0.75rem; }
.card-body { padding: 0.85rem 1rem; }

.btn-text { color:var(--gold); text-decoration:none; font-size:0.72rem; font-weight:500; transition:var(--t); }
.btn-text:hover { color:var(--gold-dim); text-shadow: 0 0 8px rgba(249,178,51,0.5); }

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    color: #1a1000;
    border: none;
    border-radius: var(--r);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--t);
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    font-family: var(--font);
    box-shadow: 0 0 12px rgba(249,178,51,0.2);
}
.btn-primary:hover {
    box-shadow: 0 0 20px rgba(249,178,51,0.5);
    transform: translateY(-1px);
}
.btn-large { padding: 0.75rem 1.5rem; font-size: 0.85rem; }

.btn-sm {
    padding: 0.28rem 0.7rem;
    background: rgba(249,178,51,0.12);
    color: var(--gold);
    border: 1px solid var(--border-gold);
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-family: var(--font);
}
.btn-sm:hover { background: rgba(249,178,51,0.22); box-shadow: var(--glow-sm); }

.btn-secondary {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--txt-dim);
    transition: var(--t);
    font-family: var(--font);
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); color:var(--txt); }

.btn-danger-outline {
    padding: 0.48rem 1rem;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: var(--r);
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--t);
    display: flex; align-items: center; gap: 0.35rem;
    font-family: var(--font);
}
.btn-danger-outline:hover { background:rgba(239,68,68,0.15); box-shadow:0 0 10px rgba(239,68,68,0.2); }

/* Badge */
.badge {
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 600;
}
.badge-admin { background:rgba(239,68,68,0.15); color:#ef4444; }
.badge-user  { background:rgba(59,130,246,0.15); color:#3b82f6; }

.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:0.4rem; }
.status-dot.active   { background:var(--success); box-shadow:0 0 6px var(--success); }
.status-dot.inactive { background:var(--txt-muted); }

/* Form elements */
.form-group { margin-bottom: 0.8rem; }
.form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--txt-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-group label i { margin-right:0.3rem; color:var(--gold); }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 0.78rem;
    font-family: var(--font);
    color: var(--txt);
    transition: var(--t);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--txt-muted); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold-dim);
    background: rgba(249,178,51,0.06);
    box-shadow: 0 0 0 3px rgba(249,178,51,0.12);
}

.form-group select {
    -webkit-appearance:none; appearance:none; cursor:pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cc' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: right 0.7rem center;
    padding-right:2rem;
}
.form-group select option { background: var(--card-bg); color:var(--txt); }
.form-group textarea { resize:vertical; min-height:64px; line-height:1.5; }

.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:0.65rem; }
.form-help { display:block; margin-top:0.3rem; font-size:0.66rem; color:var(--txt-muted); }

/* ===================================
   LOGIN PAGE
   =================================== */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--page-bg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Ambient glow blobs */
.login-page::before, .login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.login-page::before {
    width: 400px; height: 400px;
    background: rgba(249,178,51,0.07);
    top: -100px; right: -100px;
    animation: blobFloat 8s ease-in-out infinite;
}
.login-page::after {
    width: 300px; height: 300px;
    background: rgba(47,69,80,0.2);
    bottom: -80px; left: -80px;
    animation: blobFloat 10s ease-in-out infinite reverse;
}

@keyframes blobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(20px,-20px) scale(1.05); }
}

.login-container { width:100%; max-width:400px; position:relative; z-index:1; }

.login-box {
    background: var(--card-bg);
    border: 1px solid var(--border-gold);
    border-radius: 16px;
    box-shadow: 0 0 60px rgba(249,178,51,0.12), 0 20px 60px rgba(0,0,0,0.45);
    overflow: hidden;
    animation: loginSlideUp 0.5s ease;
}

@keyframes loginSlideUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

.login-header {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(249,178,51,0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}

.login-header .logo {
    width: 70px;
    height: auto;
    margin: 0 auto 0.85rem;
    display: block;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(249,178,51,0.6));
}

.login-header h1 { font-size:1.3rem; font-weight:700; color:var(--txt); margin-bottom:0.25rem; }
.login-header p  { color:var(--txt-dim); font-size:0.78rem; }

.login-body { padding: 1.5rem; }

.error-message {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 0.6rem 0.9rem;
    border-radius: var(--r);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.78rem;
}

.demo-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.demo-section h3 { text-align:center; margin-bottom:0.85rem; font-size:0.78rem; color:var(--txt-dim); }

.demo-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; }

.demo-card {
    background: rgba(255,255,255,0.02);
    padding: 0.9rem;
    border-radius: var(--r);
    text-align: center;
    cursor: pointer;
    transition: var(--t);
    border: 1px solid var(--border);
}
.demo-card:hover {
    border-color: var(--gold-dim);
    background: rgba(249,178,51,0.06);
    box-shadow: var(--glow-sm);
    transform: translateY(-2px);
}
.demo-card i { font-size:1.5rem; color:var(--gold); margin-bottom:0.4rem; display:block; }
.demo-card h4 { font-size:0.78rem; color:var(--txt); margin-bottom:0.1rem; }
.demo-card p  { font-size:0.68rem; color:var(--txt-dim); }
.demo-card small { font-size:0.63rem; color:var(--txt-muted); }

/* ===================================
   DASHBOARD
   =================================== */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 0.9rem 1rem;
    border-radius: var(--r-lg);
    display: flex; align-items: center; gap: 0.85rem;
    transition: var(--t);
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content:'';
    position:absolute;
    top:0; right:0; bottom:0;
    width:3px;
    border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.stat-card:hover { border-color:var(--border-gold); box-shadow:var(--glow-sm); transform:translateY(-2px); }

.stat-icon {
    width: 40px; height: 40px;
    border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink:0;
}
.stat-icon.blue   { background:rgba(59,130,246,0.1);  color:#3b82f6; }
.stat-icon.orange { background:rgba(249,178,51,0.1);  color:var(--gold); }
.stat-icon.green  { background:rgba(16,185,129,0.1);  color:var(--success); }
.stat-icon.purple { background:rgba(139,92,246,0.1);  color:var(--purple); }

.stat-card h3 { font-size:1.4rem; font-weight:700; color:var(--txt); line-height:1; }
.stat-card p  { font-size:0.68rem; color:var(--txt-dim); margin-top:0.1rem; }

.dashboard-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }

/* Dashboard doc list */
.document-list { list-style:none; }
.document-item {
    display:flex; align-items:center; gap:0.65rem;
    padding:0.55rem 0;
    border-bottom:1px solid var(--border);
}
.document-item:last-child { border-bottom:none; }
.doc-icon { font-size:1.2rem; flex-shrink:0; }
.doc-icon.pdf   { color:#ef4444; }
.doc-icon.word  { color:#3b82f6; }
.doc-icon.excel { color:var(--success); }
.doc-info { flex:1; min-width:0; }
.doc-info h4    { font-size:0.75rem; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-info small { color:var(--txt-dim); font-size:0.65rem; }

/* Forum list */
.forum-list { list-style:none; }
.forum-item {
    display:flex; gap:0.55rem; padding:0.55rem 0;
    border-bottom:1px solid var(--border);
}
.forum-item:last-child { border-bottom:none; }
.forum-avatar {
    width:28px; height:28px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    display:flex; align-items:center; justify-content:center;
    color:#1a1000; font-size:0.8rem; flex-shrink:0;
}
.forum-info h4 { font-size:0.75rem; font-weight:600; color:var(--txt); margin-bottom:0.1rem; }
.forum-info p  { font-size:0.65rem; color:var(--txt-dim); }

/* Quick Links */
.quick-links-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.quick-link-item {
    display:flex; flex-direction:column; align-items:center; gap:0.35rem;
    padding:0.8rem 0.4rem;
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border);
    border-radius:var(--r);
    text-decoration:none;
    color:var(--txt-dim);
    font-size:0.68rem;
    font-weight:500;
    transition:var(--t);
    text-align:center;
}
.quick-link-item:hover {
    border-color:var(--gold-dim);
    color:var(--gold);
    background:rgba(249,178,51,0.06);
    box-shadow:var(--glow-sm);
    transform:translateY(-2px);
}
.quick-link-item i { font-size:1.1rem; }

/* Announcements */
.announcement-item {
    display:flex; gap:0.65rem;
    padding:0.65rem 0.8rem;
    border-left:2px solid var(--info);
    background:rgba(59,130,246,0.05);
    border-radius:0 var(--r) var(--r) 0;
    margin-bottom:0.55rem;
}
.announcement-item:last-child { margin-bottom:0; }
.announcement-item.important { border-left-color:var(--warning); background:rgba(245,158,11,0.05); }
.announcement-icon { font-size:1rem; color:var(--info); flex-shrink:0; padding-top:0.1rem; }
.announcement-item.important .announcement-icon { color:var(--warning); }
.announcement-content h4    { font-size:0.75rem; font-weight:600; color:var(--txt); margin-bottom:0.15rem; }
.announcement-content p     { font-size:0.7rem; color:var(--txt-dim); margin-bottom:0.15rem; }
.announcement-content small { font-size:0.63rem; color:var(--txt-muted); }

/* ===================================
   DOCUMENTS PAGE
   =================================== */
.documents-toolbar {
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    display: flex; align-items:center; gap:0.85rem; flex-wrap:wrap;
}

.search-box { position:relative; flex:1; min-width:180px; }
.search-box i { position:absolute; left:0.7rem; top:50%; transform:translateY(-50%); color:var(--txt-muted); font-size:0.72rem; }
.search-box input {
    width:100%; padding:0.48rem 0.8rem 0.48rem 2rem;
    background:rgba(255,255,255,0.07);
    border:1px solid var(--border);
    border-radius: var(--r);
    font-size:0.75rem; color:var(--txt); font-family:var(--font);
    transition:var(--t);
}
.search-box input::placeholder { color:var(--txt-muted); }
.search-box input:focus { outline:none; border-color:var(--gold-dim); background:rgba(249,178,51,0.03); }

.filter-buttons { display:flex; flex-wrap:wrap; gap:0.35rem; }
.filter-btn {
    padding:0.28rem 0.75rem;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border);
    border-radius:20px;
    font-size:0.68rem; font-weight:500;
    cursor:pointer;
    transition:var(--t);
    display:flex; align-items:center; gap:0.28rem;
    font-family:var(--font);
    color:var(--txt-dim);
    white-space:nowrap;
}
.filter-btn:hover { border-color:var(--border-gold); color:var(--gold); background:rgba(249,178,51,0.05); }
.filter-btn.active { background:rgba(249,178,51,0.12); border-color:var(--gold-dim); color:var(--gold); }

/* Doc sections */
.doc-section { margin-bottom:1.25rem; }
.doc-section-header {
    display:flex; align-items:center; gap:0.5rem;
    margin-bottom:0.5rem;
    padding-bottom:0.35rem;
    border-bottom:1px solid var(--border);
}
.doc-section-header h3 {
    font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.07em;
    color:var(--txt-muted);
}
.doc-section-header i { color:var(--gold); font-size:0.7rem; }
.doc-count {
    margin-left:auto; font-size:0.62rem; color:var(--txt-muted);
    background:rgba(255,255,255,0.12);
    padding:0.1rem 0.4rem; border-radius:10px; font-weight:600;
}

.doc-list {
    display:flex; flex-direction:column; gap:0;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    overflow:hidden;
}

.doc-row {
    display:flex; align-items:center; gap:0.65rem;
    padding:0.55rem 0.85rem;
    border-bottom:1px solid var(--border);
    transition:background .15s;
}
.doc-row:last-child { border-bottom:none; }
.doc-row:hover { background:rgba(249,178,51,0.03); }

.doc-row-icon {
    width:28px; height:28px; border-radius:5px;
    display:flex; align-items:center; justify-content:center;
    font-size:0.85rem; flex-shrink:0;
}
.doc-row-icon.pdf   { background:rgba(220,38,38,0.12);  color:#ef4444; }
.doc-row-icon.word  { background:rgba(37,99,235,0.12);  color:#3b82f6; }
.doc-row-icon.excel { background:rgba(5,150,105,0.12);  color:var(--success); }
.doc-row-icon.file  { background:rgba(107,114,128,0.12);color:var(--txt-muted); }

.doc-row-info { flex:1; min-width:0; }
.doc-row-name { font-size:0.75rem; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-row-meta { font-size:0.63rem; color:var(--txt-dim); margin-top:0.1rem; display:flex; align-items:center; gap:0.45rem; }
.doc-row-meta i { font-size:0.6rem; color:var(--gold); }

.doc-tag { font-size:0.6rem; font-weight:600; padding:0.12rem 0.45rem; border-radius:10px; white-space:nowrap; flex-shrink:0; }
.doc-tag.handbook { background:rgba(59,130,246,0.12); color:#3b82f6; }
.doc-tag.policy   { background:rgba(239,68,68,0.12);  color:#ef4444; }
.doc-tag.template { background:rgba(16,185,129,0.12); color:var(--success); }
.doc-tag.guide    { background:rgba(249,178,51,0.12); color:var(--gold); }

.doc-row-actions { display:flex; gap:0.28rem; flex-shrink:0; }

.doc-btn {
    display:flex; align-items:center; gap:0.25rem;
    padding:0.25rem 0.55rem;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.03);
    border-radius:4px;
    font-size:0.65rem; font-weight:500; cursor:pointer;
    transition:var(--t);
    font-family:var(--font);
    color:var(--txt-dim);
    white-space:nowrap;
}
.doc-btn:hover { background:rgba(249,178,51,0.1); border-color:var(--border-gold); color:var(--gold); }
.doc-btn.download:hover { background:rgba(16,185,129,0.1); border-color:rgba(16,185,129,0.3); color:var(--success); }
.doc-btn.danger:hover { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:#ef4444; }
.doc-btn i { font-size:0.6rem; }

/* ===================================
   FORUM PAGE
   =================================== */
.forum-toolbar {
    display:flex; align-items:center; gap:0.65rem;
    margin-bottom:1rem; flex-wrap:wrap;
}
.forum-toolbar .search-box { flex:1; min-width:200px; }
.forum-filters { display:flex; gap:0.3rem; }

.forum-posts { display:flex; flex-direction:column; gap:0.85rem; }

.forum-post {
    padding: 1rem;
    display: flex; gap: 0.75rem;
    box-shadow: none;
}

.post-avatar {
    width: 34px; height:34px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    display:flex; align-items:center; justify-content:center;
    color:#1a1000; font-size:1rem; flex-shrink:0;
}

.post-content { flex:1; }
.post-header  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.55rem; }
.post-meta h3 { font-size:0.83rem; font-weight:600; color:var(--txt); margin-bottom:0.18rem; }
.post-author  { font-size:0.68rem; color:var(--txt-dim); }
.post-author strong { color:var(--txt); }

.post-badge { padding:0.2rem 0.6rem; border-radius:20px; font-size:0.65rem; font-weight:600; display:flex; align-items:center; gap:0.25rem; white-space:nowrap; }
.question-badge     { background:rgba(59,130,246,0.12);  color:#3b82f6; }
.announcement-badge { background:rgba(245,158,11,0.12);  color:var(--warning); }
.info-badge         { background:rgba(16,185,129,0.12);  color:var(--success); }

.post-body { font-size:0.75rem; color:var(--txt-dim); line-height:1.65; margin-bottom:0.65rem; }
.post-body ul { margin:0.35rem 0 0.35rem 1.1rem; }

.post-footer { display:flex; gap:0.65rem; padding-top:0.55rem; border-top:1px solid var(--border); margin-bottom:0.65rem; }
.post-action { background:none; border:none; color:var(--txt-muted); cursor:pointer; font-size:0.68rem; display:flex; align-items:center; gap:0.28rem; transition:var(--t); font-family:var(--font); }
.post-action:hover { color:var(--gold); }

.post-replies { margin:0.65rem 0; padding-left:0.65rem; border-left:2px solid var(--border); }
.reply { display:flex; gap:0.5rem; padding:0.55rem 0.7rem; background:rgba(255,255,255,0.02); border-radius:var(--r); margin-bottom:0.4rem; }
.reply:last-child { margin-bottom:0; }
.reply-avatar { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; color:var(--txt-dim); font-size:0.65rem; flex-shrink:0; }
.reply-content { flex:1; }
.reply-meta { font-size:0.65rem; color:var(--txt-dim); margin-bottom:0.2rem; }
.reply-meta strong { color:var(--txt); }
.reply-form { margin-top:0.65rem; padding-top:0.65rem; border-top:1px solid var(--border); }
.reply-form.collapsed { display:none; }

/* ===================================
   ADMIN PAGE
   =================================== */
.admin-tabs {
    display:flex; gap:0.3rem; margin-bottom:1rem;
    background:var(--card-bg);
    border:1px solid var(--border);
    padding:0.3rem;
    border-radius:var(--r-lg);
}
.tab-btn {
    flex:1; padding:0.55rem;
    background:transparent; border:none; border-radius:var(--r);
    font-size:0.75rem; font-weight:500; cursor:pointer;
    transition:var(--t); color:var(--txt-dim);
    display:flex; align-items:center; justify-content:center; gap:0.35rem;
    font-family:var(--font);
}
.tab-btn:hover  { background:rgba(255,255,255,0.07); color:var(--txt); }
.tab-btn.active { background:rgba(249,178,51,0.12); color:var(--gold); box-shadow:inset 0 0 0 1px var(--border-gold); }

.tab-content        { display:none; }
.tab-content.active { display:block; }

.admin-section { padding:1.1rem; margin-bottom:0.85rem; }

.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.85rem; }
.section-header h2, .section-header h3 { font-size:0.88rem; font-weight:600; color:var(--txt); }

.table-container { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table thead { }
.admin-table th {
    padding:0.55rem 0.8rem;
    text-align:left; font-size:0.65rem; font-weight:700;
    color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--border); white-space:nowrap;
}
.admin-table td { padding:0.55rem 0.8rem; font-size:0.75rem; border-bottom:1px solid var(--border); color:var(--txt); }
.admin-table tbody tr:hover { background:rgba(255,255,255,0.05); }

.user-cell, .doc-cell { display:flex; align-items:center; gap:0.5rem; }
.user-cell i, .doc-cell i { font-size:1.1rem; color:var(--gold); }

/* Upload box */
.upload-area { margin:1rem 0; }
.upload-box {
    border:1px dashed var(--border);
    border-radius:var(--r-lg);
    padding:1.75rem 1.5rem;
    text-align:center;
    background:rgba(255,255,255,0.01);
    transition:var(--t);
    cursor:pointer;
}
.upload-box:hover { border-color:var(--gold-dim); background:rgba(249,178,51,0.03); box-shadow:var(--glow-sm); }
.upload-box i  { font-size:1.75rem; color:var(--gold-dim); margin-bottom:0.5rem; display:block; }
.upload-box h3 { font-size:0.85rem; color:var(--txt); margin-bottom:0.25rem; }
.upload-box p  { font-size:0.72rem; color:var(--txt-dim); margin-bottom:0.85rem; }

/* Settings */
.settings-group { margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.settings-group:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.settings-group h3 { font-size:0.82rem; font-weight:600; color:var(--txt); margin-bottom:0.85rem; display:flex; align-items:center; gap:0.4rem; }
.setting-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.7rem 0.85rem;
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border);
    border-radius:var(--r);
    margin-bottom:0.5rem;
}
.setting-info strong { display:block; font-size:0.75rem; color:var(--txt); margin-bottom:0.12rem; }
.setting-info p      { font-size:0.67rem; color:var(--txt-dim); }
.setting-input { padding:0.45rem 0.65rem; background:rgba(255,255,255,0.07); border:1px solid var(--border); border-radius:var(--r); font-size:0.75rem; color:var(--txt); font-family:var(--font); min-width:200px; }
.setting-input.short { min-width:70px; }
.setting-input:focus { outline:none; border-color:var(--gold-dim); }
.settings-actions { display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1rem; }

/* Toggle Switch */
.toggle-switch { position:relative; width:42px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
    position:absolute; cursor:pointer;
    top:0; left:0; right:0; bottom:0;
    background:rgba(255,255,255,0.1);
    border-radius:22px; transition:var(--t);
}
.toggle-slider:before {
    content:""; position:absolute;
    height:15px; width:15px;
    left:3px; bottom:3.5px;
    background:white; border-radius:50%; transition:var(--t);
}
.toggle-switch input:checked + .toggle-slider { background:var(--success); box-shadow:0 0 8px rgba(16,185,129,0.4); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }

/* ===================================
   MODAL
   =================================== */
.modal {
    display:none; position:fixed;
    top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.75);
    z-index:2000;
    align-items:center; justify-content:center;
    padding:1.5rem;
    backdrop-filter:blur(4px);
}
.modal.active { display:flex; }

.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-lg);
    max-width: 520px; width:100%;
    max-height:90vh; overflow-y:auto;
    box-shadow: 0 0 40px rgba(249,178,51,0.1), 0 20px 60px rgba(0,0,0,0.7);
    animation: modalIn 0.2s ease;
}
@keyframes modalIn {
    from { opacity:0; transform:scale(0.96) translateY(10px); }
    to   { opacity:1; transform:scale(1)    translateY(0); }
}

.modal-large { max-width:620px !important; }

.modal-header {
    padding:0.9rem 1.1rem;
    border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
    position:sticky; top:0; background:var(--card-bg); z-index:1;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.modal-header h2 { font-size:0.88rem; font-weight:600; color:var(--txt); display:flex; align-items:center; gap:0.4rem; }
.modal-header h2 i { color:var(--gold); }

.modal-close {
    background:none; border:none; font-size:1rem; color:var(--txt-muted);
    cursor:pointer; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border-radius:5px; transition:var(--t);
}
.modal-close:hover { background:rgba(255,255,255,0.09); color:var(--txt); }

.modal-body { padding:1.1rem; }

.modal-actions {
    display:flex; justify-content:flex-end; gap:0.5rem;
    margin-top:0.9rem; padding-top:0.7rem;
    border-top:1px solid var(--border);
}

/* File info in modal */
.current-file-info {
    background:rgba(255,255,255,0.02);
    padding:0.7rem 0.85rem;
    border-radius:var(--r);
    margin-bottom:0.9rem;
    border:1px solid var(--border);
}
.current-file-info h3 { font-size:0.65rem; font-weight:700; color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.45rem; }
.file-info-box { display:flex; align-items:center; gap:0.65rem; }
.file-info-box i { font-size:1.4rem; color:#ef4444; }
.file-info-box strong { display:block; font-size:0.78rem; color:var(--txt); }
.file-info-box small  { font-size:0.65rem; color:var(--txt-dim); }
.file-upload-area { display:flex; align-items:center; gap:0.65rem; padding:0.55rem 0.8rem; background:rgba(255,255,255,0.02); border:1px dashed var(--border); border-radius:var(--r); }
.selected-file-name { flex:1; font-size:0.72rem; color:var(--txt-muted); }

/* ===================================
   EVENTKALENDER
   =================================== */
.calendar-page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.65rem; }
.btn-add-event { width:auto !important; padding:0.55rem 1.1rem !important; white-space:nowrap; }

/* ── Dual-month calendar layout ── */
.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1rem;
    align-items: start;
}

/* The two-months wrapper replaces old .calendar-main in the layout */
.calendar-two-months {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card-bg);
}

/* Shared nav bar spanning both months */
.calendar-nav-dual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    background: linear-gradient(135deg, rgba(249,178,51,0.10) 0%, rgba(249,178,51,0.03) 100%);
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}
.cal-dual-titles {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}
.cal-dual-titles .calendar-month-title {
    font-size: 0.95rem;
    flex: 1;
    text-align: center;
}

/* The two month grids side by side */
.calendar-dual-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Each individual month panel */
.calendar-main-half {
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.calendar-main-half + .calendar-main-half {
    border-left: 1px solid var(--border);
}

/* Keep old single .calendar-main working elsewhere */
.calendar-main {
    overflow: hidden;
}

/* Responsive: stack months on smaller screens */
@media (max-width: 900px) {
    .calendar-dual-grids {
        grid-template-columns: 1fr;
    }
    .calendar-main-half + .calendar-main-half {
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .cal-dual-titles {
        flex-direction: column;
        gap: 0.1rem;
    }
    .cal-dual-titles .calendar-month-title {
        font-size: 0.82rem;
    }
}
@media (max-width: 768px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }
    .cal-dual-titles .calendar-month-title {
        font-size: 0.78rem;
    }
}

.calendar-nav {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.8rem 1.1rem;
    background:linear-gradient(135deg, rgba(249,178,51,0.1) 0%, rgba(249,178,51,0.03) 100%);
    border-bottom:1px solid var(--border);
}
.calendar-month-title { font-size:1rem; font-weight:700; color:var(--txt); }

.cal-nav-btn {
    width:30px; height:30px;
    background:rgba(255,255,255,0.12);
    border:1px solid var(--border); border-radius:6px;
    color:var(--txt-dim); font-size:0.75rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:var(--t);
}
.cal-nav-btn:hover { border-color:var(--border-gold); color:var(--gold); background:rgba(249,178,51,0.08); }

.calendar-weekdays {
    display:grid; grid-template-columns:repeat(7,1fr);
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,0.02);
}
.calendar-weekdays span {
    text-align:center; padding:0.48rem 0.2rem;
    font-size:0.62rem; font-weight:700; color:var(--txt-muted);
    text-transform:uppercase; letter-spacing:0.05em;
}

.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }

.calendar-day {
    min-height:82px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:0.3rem;
    cursor:pointer;
    transition:background .12s;
    position:relative;
}
.calendar-day:nth-child(7n) { border-right:none; }
.calendar-day:hover { background:rgba(249,178,51,0.04); }
.calendar-day.other-month { background:rgba(0,0,0,0.1); }
.calendar-day.other-month .day-number { color:var(--txt-muted); opacity:0.4; }
.calendar-day.today { background:rgba(249,178,51,0.06); }
.calendar-day.today .day-number {
    background:linear-gradient(135deg, var(--gold), var(--gold-dim));
    color:#1a1000; border-radius:50%;
    box-shadow:0 0 8px rgba(249,178,51,0.5);
}
.calendar-day.selected {
    background:rgba(249,178,51,0.08);
    outline:1.5px solid var(--gold-dim);
    outline-offset:-1.5px;
}

.day-number {
    font-size:0.7rem; font-weight:600; color:var(--txt);
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:0.18rem;
}

.day-events { display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.day-event-chip {
    font-size:0.6rem; font-weight:500;
    padding:1px 4px; border-radius:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:pointer; line-height:1.4; transition:opacity .12s;
}
.day-event-chip:hover { opacity:0.75; }
.day-event-chip.company      { background:rgba(47,69,80,0.3);    color:#b3c7cb; }
.day-event-chip.hr           { background:rgba(59,130,246,0.2);  color:#93c5fd; }
.day-event-chip.team         { background:rgba(16,185,129,0.2);  color:#6ee7b7; }
.day-event-chip.personal     { background:rgba(139,92,246,0.2);  color:#c4b5fd; }
.day-event-chip.other        { background:rgba(245,158,11,0.2);  color:#fcd34d; }
/* Customer contact events – only visible to GC/admin */
.day-event-chip.customer     { background:rgba(249,178,51,0.18); color:#f9b233; border-left:2px solid rgba(249,178,51,0.6); font-weight:600; }
/* Vacation chips in month calendar */
.day-event-chip.vac-approved { background:rgba(16,185,129,0.22); color:#6ee7b7; border-left:2px solid rgba(16,185,129,0.6); }
.day-event-chip.vac-pending  { background:rgba(245,158,11,0.22); color:#fcd34d; border-left:2px solid rgba(245,158,11,0.6); }
/* Medarbetarsamtal chips */
.day-event-chip.medarbetarsamtal { background:rgba(167,139,250,0.22); color:#c4b5fd; border-left:2px solid rgba(167,139,250,0.6); }
/* Room booking chips */
.day-event-chip.booking      { background:rgba(194,128,37,0.22); color:#f9b233; border-left:2px solid rgba(194,128,37,0.6); }
.event-color-bar.medarbetarsamtal { background:#a78bfa; }
.event-color-bar.booking          { background:var(--gold); }
.event-badge-small.medarbetarsamtal { background:rgba(167,139,250,0.15); color:#c4b5fd; }
.event-badge-small.booking          { background:rgba(194,128,37,0.15); color:var(--gold); }
.day-more { font-size:0.57rem; color:var(--txt-muted); font-weight:600; padding:1px 4px; }

.calendar-sidebar-panel { display:flex; flex-direction:column; gap:0.75rem; }

.event-panel-header {
    padding:0.75rem 1rem;
    background:linear-gradient(135deg, rgba(249,178,51,0.08), transparent);
    border-bottom:1px solid var(--border);
}
.event-panel-header h3 { font-size:0.8rem; font-weight:600; color:var(--txt); display:flex; align-items:center; gap:0.4rem; }
.event-panel-header h3 i { color:var(--gold); }

.event-list-container { padding:0.65rem; max-height:340px; overflow-y:auto; }

.event-list-item {
    display:flex; gap:0.55rem; padding:0.55rem 0.65rem;
    border-radius:var(--r); margin-bottom:0.4rem; cursor:pointer;
    transition:var(--t); border:1px solid transparent;
    background:rgba(255,255,255,0.02);
}
.event-list-item:last-child { margin-bottom:0; }
.event-list-item:hover { border-color:var(--border-gold); background:rgba(249,178,51,0.04); transform:translateX(3px); }

.event-color-bar { width:2.5px; border-radius:3px; flex-shrink:0; }
.event-color-bar.company  { background:#b3c7cb; }
.event-color-bar.hr       { background:#3b82f6; }
.event-color-bar.team     { background:var(--success); }
.event-color-bar.personal { background:var(--purple); }
.event-color-bar.other    { background:var(--warning); }

.event-list-info { flex:1; min-width:0; }
.event-list-title { font-size:0.73rem; font-weight:600; color:var(--txt); margin-bottom:0.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-list-meta { font-size:0.63rem; color:var(--txt-dim); display:flex; flex-direction:column; gap:1px; }
.event-list-meta span { display:flex; align-items:center; gap:0.28rem; }
.event-list-meta i { font-size:0.58rem; width:10px; color:var(--gold); }

.event-badge-small { font-size:0.58rem; padding:0.08rem 0.4rem; border-radius:10px; font-weight:600; white-space:nowrap; align-self:flex-start; }
.event-badge-small.company  { background:rgba(47,69,80,0.3);   color:#b3c7cb; }
.event-badge-small.hr       { background:rgba(59,130,246,0.2); color:#93c5fd; }
.event-badge-small.team     { background:rgba(16,185,129,0.2); color:#6ee7b7; }
.event-badge-small.personal { background:rgba(139,92,246,0.2); color:#c4b5fd; }
.event-badge-small.other    { background:rgba(245,158,11,0.2); color:#fcd34d; }

.no-events { text-align:center; padding:1.25rem 0.75rem; color:var(--txt-muted); }
.no-events i { font-size:1.75rem; color:var(--border); margin-bottom:0.45rem; display:block; }
.no-events p { font-size:0.73rem; margin-bottom:0.65rem; }

.event-legend { padding:0.9rem 1rem; }
.event-legend h4 { font-size:0.72rem; font-weight:700; color:var(--txt-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.55rem; display:flex; align-items:center; gap:0.35rem; }
.legend-items { display:flex; flex-direction:column; gap:0.35rem; }
.legend-item  { font-size:0.68rem; font-weight:500; display:flex; align-items:center; gap:0.45rem; color:var(--txt-dim); }
.legend-item i { font-size:0.5rem; }
.legend-item.company i  { color:#b3c7cb; }
.legend-item.hr i       { color:#3b82f6; }
.legend-item.team i     { color:var(--success); }
.legend-item.personal i { color:var(--purple); }
.legend-item.other i    { color:var(--warning); }

/* Publish toggle */
.publish-toggle-row {
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(255,255,255,0.02); border:1px solid var(--border);
    border-radius:var(--r); padding:0.65rem 0.85rem; gap:0.85rem;
}
.publish-info { flex:1; }
.publish-label { font-weight:600; font-size:0.75rem; color:var(--txt); display:flex; align-items:center; gap:0.35rem; margin-bottom:0.08rem !important; }
.publish-label i { color:var(--gold); }
.publish-desc { font-size:0.65rem; color:var(--txt-dim); margin:0; }

/* Event detail */
.event-detail-content { display:flex; flex-direction:column; gap:0.75rem; }
.event-detail-badge {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.25rem 0.85rem; border-radius:20px;
    font-size:0.7rem; font-weight:600; width:fit-content;
}
.event-detail-badge.company  { background:rgba(47,69,80,0.3);   color:#b3c7cb; }
.event-detail-badge.hr       { background:rgba(59,130,246,0.2); color:#93c5fd; }
.event-detail-badge.team     { background:rgba(16,185,129,0.2); color:#6ee7b7; }
.event-detail-badge.personal { background:rgba(139,92,246,0.2); color:#c4b5fd; }
.event-detail-badge.other    { background:rgba(245,158,11,0.2); color:#fcd34d; }

.event-detail-info { display:flex; flex-direction:column; gap:0.5rem; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem; }
.event-detail-row  { display:flex; align-items:flex-start; gap:0.65rem; font-size:0.75rem; color:var(--txt); }
.event-detail-row i { width:14px; color:var(--gold); flex-shrink:0; margin-top:2px; font-size:0.68rem; }
.event-detail-desc { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem; }
.event-detail-desc h4 { font-size:0.63rem; font-weight:700; color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.3rem; }
.event-detail-desc p  { font-size:0.75rem; color:var(--txt-dim); line-height:1.6; }
.event-detail-author  { display:flex; align-items:center; gap:0.55rem; font-size:0.67rem; color:var(--txt-muted); padding-top:0.45rem; border-top:1px solid var(--border); }
.event-detail-author i { color:var(--gold); }

.modal-header-actions { display:flex; align-items:center; gap:0.35rem; }
.btn-icon-sm {
    width:28px; height:28px;
    background:rgba(255,255,255,0.07);
    border:none; border-radius:5px;
    color:var(--txt-dim); cursor:pointer; font-size:0.78rem;
    display:flex; align-items:center; justify-content:center;
    transition:var(--t);
}
.btn-icon-sm:hover { background:rgba(249,178,51,0.15); color:var(--gold); }

.published-indicator { display:flex; align-items:center; gap:0.3rem; font-size:0.68rem; font-weight:600; color:var(--success); }

/* ===================================
   TOAST
   =================================== */
.toast {
    position:fixed; bottom:1.25rem; right:1.25rem;
    background:var(--card-bg2);
    border:1px solid var(--border-gold);
    color:var(--txt);
    padding:0.65rem 1rem;
    border-radius:var(--r-lg);
    box-shadow:0 0 20px rgba(249,178,51,0.15), 0 8px 30px rgba(0,0,0,0.5);
    display:flex; align-items:center; gap:0.55rem;
    font-weight:500; font-size:0.75rem;
    z-index:9999;
    transform:translateY(70px); opacity:0;
    transition:all .3s cubic-bezier(.175,.885,.32,1.275);
    max-width:300px;
}
.toast i { color:var(--gold); font-size:0.9rem; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-color:rgba(16,185,129,0.4); }
.toast.success i { color:var(--success); }
.toast.error   { border-color:rgba(239,68,68,0.4); }
.toast.error i { color:#ef4444; }

/* ===================================
   VACATION ↔ CALENDAR SYNC CHIPS
   =================================== */
/* Vacation chips rendered inside month calendar day cells */
.day-event-chip.vacation-chip {
    font-size: 0.58rem;
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 1.4;
    transition: opacity .12s;
}
.day-event-chip.vacation-chip--approved {
    background: rgba(16,185,129,0.22);
    color: #6ee7b7;
    border-left: 2px solid var(--success);
}
.day-event-chip.vacation-chip--pending {
    background: rgba(245,158,11,0.22);
    color: #fcd34d;
    border-left: 2px solid var(--warning);
}
.day-event-chip.vacation-chip:hover { opacity: 0.75; }

/* ===================================
   VACATION PLANNER
   =================================== */
.vacation-year-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1rem; flex-wrap:wrap; gap:0.65rem;
}
.vacation-year-title { font-size:1rem; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:0.45rem; }
.vacation-year-title i { color:var(--gold); }
.vacation-year-controls { display:flex; align-items:center; gap:0.5rem; }
.vacation-year-controls span { font-size:0.85rem; font-weight:700; color:var(--gold); min-width:50px; text-align:center; }

/* Stats row */
.vacation-stats {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:0.65rem; margin-bottom:1rem;
}
.vac-stat {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--r); padding:0.75rem 0.85rem;
    text-align:center; transition:var(--t);
}
.vac-stat:hover { border-color:var(--border-gold); box-shadow:var(--glow-sm); }
.vac-stat-num  { font-size:1.4rem; font-weight:700; color:var(--gold); line-height:1; }
.vac-stat-label{ font-size:0.63rem; color:var(--txt-dim); margin-top:0.15rem; }

/* Year grid */
.year-calendar-wrap {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--r-lg); overflow:hidden;
}

.year-cal-header {
    display:grid; grid-template-columns:50px repeat(12,1fr);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--card-bg); z-index:5;
}

.year-month-label {
    padding:0.5rem 0.3rem; text-align:center;
    font-size:0.62rem; font-weight:700; color:var(--txt-muted);
    text-transform:uppercase; letter-spacing:0.05em;
    border-right:1px solid var(--border);
}
.year-month-label:last-child { border-right:none; }
.week-label-header { font-size:0.6rem; color:var(--txt-muted); display:flex; align-items:center; justify-content:center; padding:0.5rem 0; border-right:1px solid var(--border); }

/* Week rows */
.year-week-row {
    display:grid; grid-template-columns:50px repeat(12,1fr);
    border-bottom:1px solid rgba(255,255,255,0.03);
    min-height:28px;
    transition:background .1s;
}
.year-week-row:last-child { border-bottom:none; }
.year-week-row:hover { background:rgba(249,178,51,0.02); }

.week-num-cell {
    display:flex; align-items:center; justify-content:center;
    font-size:0.58rem; color:var(--txt-muted);
    font-weight:700; border-right:1px solid var(--border);
    padding:0.2rem;
    position:sticky; left:0; background:var(--card-bg); z-index:2;
}

.year-month-cell {
    border-right:1px solid rgba(255,255,255,0.03);
    position:relative; padding:0.2rem;
    display:flex; align-items:center; gap:2px;
}
.year-month-cell:last-child { border-right:none; }

/* Individual day inside a cell */
.year-day {
    flex:1; min-width:0; height:20px;
    border-radius:2px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:0.52rem; color:var(--txt-muted);
    transition:all .1s;
    position:relative;
}
.year-day:hover { background:rgba(249,178,51,0.15); color:var(--gold); }
.year-day.weekend { opacity:0.45; }
.year-day.other-month { opacity:0; pointer-events:none; }
.year-day.today { background:rgba(249,178,51,0.2); color:var(--gold); border:1px solid var(--border-gold); font-weight:700; }

/* Vacation states */
.year-day.vacation-pending {
    background:rgba(245,158,11,0.25);
    color:#fcd34d; border:1px solid rgba(245,158,11,0.3);
}
.year-day.vacation-approved {
    background:rgba(16,185,129,0.25);
    color:#6ee7b7; border:1px solid rgba(16,185,129,0.3);
}
.year-day.vacation-other {
    background:rgba(139,92,246,0.2);
    color:#c4b5fd;
}

/* Vacation status legend */
.vacation-legend {
    display:flex; gap:1.25rem; flex-wrap:wrap;
    padding:0.65rem 1rem;
    border-top:1px solid var(--border);
    background:rgba(255,255,255,0.01);
}
.vac-legend-item { display:flex; align-items:center; gap:0.4rem; font-size:0.65rem; color:var(--txt-dim); }
.vac-legend-dot  { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.vac-legend-dot.pending  { background:rgba(245,158,11,0.4); border:1px solid rgba(245,158,11,0.5); }
.vac-legend-dot.approved { background:rgba(16,185,129,0.4); border:1px solid rgba(16,185,129,0.5); }
.vac-legend-dot.other    { background:rgba(139,92,246,0.3); border:1px solid rgba(139,92,246,0.4); }

/* Tooltip */
.vac-tooltip {
    position:absolute; bottom:calc(100% + 4px); left:50%;
    transform:translateX(-50%);
    background:var(--card-bg2); border:1px solid var(--border-gold);
    padding:0.35rem 0.65rem; border-radius:5px;
    font-size:0.62rem; color:var(--txt); white-space:nowrap;
    z-index:100; pointer-events:none;
    box-shadow:0 0 10px rgba(249,178,51,0.15);
    display:none;
}
.year-day:hover .vac-tooltip { display:block; }

/* Admin overview section */
.admin-vacation-section { margin-top:1.5rem; }

.admin-vacation-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:0.85rem;
}
.admin-vacation-header h3 { font-size:0.88rem; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:0.4rem; }
.admin-vacation-header h3 i { color:var(--gold); }

/* Employee filter tabs */
.emp-filter-tabs { display:flex; gap:0.35rem; margin-bottom:0.85rem; flex-wrap:wrap; }
.emp-tab {
    padding:0.25rem 0.75rem;
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:20px; font-size:0.65rem; font-weight:500;
    cursor:pointer; color:var(--txt-dim); transition:var(--t);
    font-family:var(--font);
}
.emp-tab:hover  { border-color:var(--border-gold); color:var(--gold); }
.emp-tab.active { background:rgba(249,178,51,0.1); border-color:var(--gold-dim); color:var(--gold); }

/* Vacation request list */
.vac-request-list { display:flex; flex-direction:column; gap:0.4rem; }

.vac-request-item {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.65rem 0.85rem;
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--r); transition:var(--t);
}
.vac-request-item:hover { border-color:var(--border-gold); }

.vac-req-avatar {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.68rem; font-weight:700; flex-shrink:0;
    color:#1a1000; background:linear-gradient(135deg, var(--gold), var(--gold-dim));
}

.vac-req-info { flex:1; min-width:0; }
.vac-req-name  { font-size:0.75rem; font-weight:600; color:var(--txt); margin-bottom:0.1rem; }
.vac-req-dates { font-size:0.65rem; color:var(--txt-dim); }

.vac-req-days {
    font-size:0.68rem; font-weight:700; color:var(--gold);
    background:rgba(249,178,51,0.1); border:1px solid var(--border-gold);
    padding:0.15rem 0.5rem; border-radius:10px; white-space:nowrap;
}

.vac-status-badge {
    font-size:0.63rem; font-weight:600; padding:0.15rem 0.55rem; border-radius:10px; white-space:nowrap;
}
.vac-status-badge.pending  { background:rgba(245,158,11,0.15); color:#fcd34d; border:1px solid rgba(245,158,11,0.25); }
.vac-status-badge.approved { background:rgba(16,185,129,0.15); color:#6ee7b7; border:1px solid rgba(16,185,129,0.25); }
.vac-status-badge.denied   { background:rgba(239,68,68,0.15);  color:#fca5a5; border:1px solid rgba(239,68,68,0.25); }

.vac-req-actions { display:flex; gap:0.3rem; }
.vac-action-btn {
    width:26px; height:26px; border:none; border-radius:5px;
    cursor:pointer; font-size:0.7rem;
    display:flex; align-items:center; justify-content:center;
    transition:var(--t);
}
.vac-action-btn.approve { background:rgba(16,185,129,0.1); color:var(--success); }
.vac-action-btn.approve:hover { background:rgba(16,185,129,0.25); box-shadow:0 0 8px rgba(16,185,129,0.25); }
.vac-action-btn.deny    { background:rgba(239,68,68,0.1);  color:#ef4444; }
.vac-action-btn.deny:hover    { background:rgba(239,68,68,0.25); }

/* ===================================
   RESPONSIVE – Mobile-first
   =================================== */

/* ── 1280 px – wide tablets / small desktops ─────────────────────────── */
@media (max-width:1280px) {
    .dashboard-stats { grid-template-columns:repeat(2,1fr); }
    .vacation-stats  { grid-template-columns:repeat(2,1fr); }
    .year-cal-header, .year-week-row { grid-template-columns:40px repeat(12,1fr); }
}

/* ── 1100 px – tablets landscape ─────────────────────────────────────── */
@media (max-width:1100px) {
    .dashboard-grid          { grid-template-columns:1fr; }
    .calendar-layout         { grid-template-columns:1fr; }
    .calendar-sidebar-panel  { display:grid; grid-template-columns:1fr 1fr; }
    /* profile */
    .profile-page-wrap       { grid-template-columns:1fr !important; }
    /* gc */
    .gc-two-col              { grid-template-columns:1fr !important; }
    /* mas */
    .mas-layout              { grid-template-columns:1fr !important; }
}

/* ── 900 px – tablets portrait ───────────────────────────────────────── */
@media (max-width:900px) {
    .booking-layout          { grid-template-columns:1fr !important; }
    .booking-sidebar         { order:-1; }          /* my-bookings above grid */
}

/* ── 768 px – phones landscape / small tablets ───────────────────────── */
@media (max-width:768px) {

    /* ── Sidebar overlay ───────────────────────────────────────── */
    .portal-sidebar {
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 1100;
    }
    .portal-sidebar.active { transform: translateX(0); }

    /* Backdrop overlay when sidebar is open */
    .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 1099;
        backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.active { display: block; }

    /* ── Mobile toggle button ──────────────────────────────────── */
    .mobile-menu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 0.75rem; left: 0.75rem;
        z-index: 1200;
    }

    /* ── Main content ──────────────────────────────────────────── */
    .portal-content {
        margin-left: 0;
        padding: 0.85rem 0.75rem 5rem; /* bottom pad for safe area */
    }

    /* ── Content header ────────────────────────────────────────── */
    .content-header { margin-bottom: 0.75rem; }
    .content-header h1 { font-size: 1rem; }
    .content-header p  { font-size: 0.72rem; }

    /* page headers that use flex row */
    .calendar-page-header,
    .booking-page-header,
    .page-header-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .calendar-page-header > div,
    .booking-page-header > div { flex:1 1 100%; }

    /* ── Stat grids ────────────────────────────────────────────── */
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .vacation-stats  { grid-template-columns: 1fr 1fr; }
    .mas-stats       { grid-template-columns: repeat(2,1fr) !important; }

    /* ── Dashboard quick links ─────────────────────────────────── */
    .quick-links-grid { grid-template-columns: repeat(3,1fr); }

    /* ── Calendar ──────────────────────────────────────────────── */
    .calendar-sidebar-panel { grid-template-columns: 1fr; }
    .calendar-day           { min-height: 52px; padding: 0.15rem; }
    .day-number             { font-size: 0.7rem; }
    .cal-header-actions     { gap: 0.35rem; }
    .btn-sync-cal span      { display: none; } /* icon only on small */

    /* ── Booking page ──────────────────────────────────────────── */
    .week-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    .week-strip::-webkit-scrollbar { display:none; }
    .week-nav  { flex-wrap: wrap; gap: 0.4rem; }

    /* resource cards – single column on phone */
    .resource-grid { grid-template-columns: 1fr !important; }
    .res-timeline  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Forms ─────────────────────────────────────────────────── */
    .form-row              { grid-template-columns: 1fr; }
    .profile-form-row      { grid-template-columns: 1fr !important; }
    .receipt-form-row      { grid-template-columns: 1fr !important; }
    .cust-form-grid        { grid-template-columns: 1fr !important; }

    /* ── Admin ─────────────────────────────────────────────────── */
    .admin-tabs            { flex-direction: column; }
    .table-container       { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Documents toolbar ─────────────────────────────────────── */
    .documents-toolbar     { flex-direction: column; align-items: stretch; }
    .documents-toolbar .search-box { width: 100%; }

    /* ── Forum toolbar ─────────────────────────────────────────── */
    .forum-toolbar         { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .forum-toolbar .search-box { width: 100%; min-width: unset; }

    /* ── Year calendar ─────────────────────────────────────────── */
    .year-cal-header, .year-week-row { grid-template-columns: 32px repeat(12,1fr); }
    .year-day                        { font-size: 0px; }

    /* ── Tidsrapport week view ─────────────────────────────────── */
    .tr-inline-form-row { grid-template-columns: 1fr 1fr !important; }
    .tr-week-header     { flex-wrap: wrap; gap: 0.35rem; }
    .tr-week-tabs       { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Modals ────────────────────────────────────────────────── */
    .modal-content {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
        margin: auto auto 0;          /* slides up from bottom */
    }
    .modal {
        align-items: flex-end;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .modal-body { padding: 1rem; }
    .modal-actions { flex-direction: column-reverse; gap: 0.5rem; }
    .modal-actions button { width: 100%; justify-content: center; }

    /* ── Buttons in headers – icon-only on very small screens ──── */
    .btn-add-event .btn-text { display:none; }
}

/* ── 600 px – small phones ───────────────────────────────────────────── */
@media (max-width:600px) {
    .portal-content { padding: 0.65rem 0.6rem 5rem; }

    /* ── Stats → single column ─────────────────────────────────── */
    .dashboard-stats { grid-template-columns: 1fr 1fr; }

    /* ── Quick links ────────────────────────────────────────────── */
    .quick-links-grid { grid-template-columns: repeat(2,1fr); }

    /* ── Profile sidebar collapse ──────────────────────────────── */
    .profile-page-wrap { grid-template-columns: 1fr !important; }

    /* ── Booking: week strip ────────────────────────────────────── */
    .week-day-btn { min-width: 44px; padding: 0.3rem 0.25rem; }
    .week-day-btn .wd-name { font-size: 0.6rem; }
    .week-day-btn .wd-date { font-size: 0.75rem; }
}

/* ── 480 px – tiny phones ─────────────────────────────────────────────── */
@media (max-width:480px) {
    .dashboard-stats  { grid-template-columns: 1fr; }
    .vacation-stats   { grid-template-columns: 1fr 1fr; }
    .mas-stats        { grid-template-columns: 1fr 1fr !important; }
    .quick-links-grid { grid-template-columns: repeat(2,1fr); }
    .demo-cards       { grid-template-columns: 1fr; }
    .forum-post       { flex-direction: column; }

    /* calendar day cells even smaller */
    .calendar-day { min-height: 44px; }
    .day-event-chip { font-size: 0.52rem; padding: 1px 3px; }

    /* booking resource card */
    .resource-card { padding: 0.75rem; }
    .book-slot-btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
}


/* ── Role-based visibility (anti-flicker: data-role set on <html> before CSS) ── */

/* Admin Only */
.admin-only { display:none; }
html[data-role="admin"] .admin-only,
body[data-role="admin"] .admin-only { display:flex; }
html[data-role="admin"] .admin-only.block,
body[data-role="admin"] .admin-only.block { display:block; }

/* Gruppchef Only – visas BARA för Gruppchef och Admin
   data-role="gruppchef"  (role.toLowerCase()) */
.gruppchef-only { display:none; }
html[data-role="gruppchef"] .gruppchef-only,
body[data-role="gruppchef"] .gruppchef-only { display:flex; }
html[data-role="gruppchef"] .gruppchef-only.block,
body[data-role="gruppchef"] .gruppchef-only.block { display:block; }
/* Admin ser också gruppchef-navigationslänkar */
html[data-role="admin"] .gruppchef-only,
body[data-role="admin"] .gruppchef-only { display:flex; }
html[data-role="admin"] .gruppchef-only.block,
body[data-role="admin"] .gruppchef-only.block { display:block; }

/* Manager Only – hela bolaget (COO/CFO/CEO) */
.manager-only { display:none; }
html[data-role="manager"] .manager-only,
body[data-role="manager"] .manager-only { display:flex; }
html[data-role="manager"] .manager-only.block,
body[data-role="manager"] .manager-only.block { display:block; }
html[data-role="admin"] .manager-only,
body[data-role="admin"] .manager-only { display:flex; }
html[data-role="admin"] .manager-only.block,
body[data-role="admin"] .manager-only.block { display:block; }

/* Nav badge */
.nav-badge {
    background: linear-gradient(135deg, rgba(139,92,246,0.30), rgba(139,92,246,0.18));
    color: #c4b5fd;
    border: 1.5px solid rgba(139,92,246,0.55);
    border-radius: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.18rem 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(139,92,246,0.3);
    text-shadow: 0 0 6px rgba(139,92,246,0.5);
}
/* Active/hover state – even brighter */
.nav-item.active .nav-badge,
.nav-item:hover .nav-badge {
    background: linear-gradient(135deg, rgba(139,92,246,0.45), rgba(139,92,246,0.28));
    border-color: rgba(139,92,246,0.75);
    box-shadow: 0 0 12px rgba(139,92,246,0.45);
    color: #ddd6fe;
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION  (Re:Con Finance – v2)
   Comprehensive mobile improvements: touch targets, bottom nav,
   card layouts, typography, and smooth interactions.
══════════════════════════════════════════════════════════════════ */

/* ── Bottom Navigation Bar (mobile only) ─────────────────────────── */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Show bottom nav on mobile */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1050;
        background: var(--sidebar-bg, #0e1a1f);
        border-top: 1px solid var(--border, rgba(255,255,255,0.07));
        padding: 0.4rem 0 env(safe-area-inset-bottom, 0.4rem);
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
        backdrop-filter: blur(12px);
    }

    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.3rem 0.5rem;
        color: var(--txt-dim, #7a9ba3);
        text-decoration: none;
        font-size: 0.52rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        min-width: 52px;
        border-radius: 8px;
        transition: color 0.18s, background 0.18s;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-nav-item i {
        font-size: 1.15rem;
        line-height: 1;
    }
    .mob-nav-item.active,
    .mob-nav-item:active {
        color: var(--gold, #f9b233);
    }
    .mob-nav-item:active {
        background: rgba(249,178,51,0.08);
    }

    /* Hide the bottom nav spacer on pages that don't use it */
    .portal-content {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Mobile Menu Toggle (larger touch target) ─────────────────────── */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 10px;
        background: var(--card-bg, rgba(255,255,255,0.05));
        border: 1px solid var(--border, rgba(255,255,255,0.07));
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
}

/* ── Smoother sidebar animation ───────────────────────────────────── */
.portal-sidebar {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Stat cards – better on mobile ───────────────────────────────── */
@media (max-width: 480px) {
    .stat-card {
        padding: 0.85rem 0.9rem;
    }
    .stat-value { font-size: 1.4rem; }
    .stat-label { font-size: 0.62rem; }
    .stat-icon  { font-size: 1.3rem; }
}

/* ── Quick-links touch targets ────────────────────────────────────── */
@media (max-width: 768px) {
    .quick-link-card {
        padding: 0.85rem 0.6rem;
        min-height: 72px;
    }
    .quick-link-card i { font-size: 1.4rem; }
    .quick-link-card span { font-size: 0.68rem; }
}

/* ── Cards – remove excessive padding on small screens ───────────── */
@media (max-width: 600px) {
    .card, .portal-card, .detail-card, .section-card {
        padding: 0.85rem !important;
        border-radius: 10px !important;
    }
    .card-header, .section-header {
        font-size: 0.8rem;
        gap: 0.5rem;
    }
}

/* ── Buttons – minimum touch target 44×44 px ─────────────────────── */
@media (max-width: 768px) {
    .btn-primary, .btn-secondary, .btn-ghost,
    .btn-add-event, .btn-sync-cal,
    .week-nav-btn, .btn-action {
        min-height: 40px;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ── Form inputs – readable on mobile ────────────────────────────── */
@media (max-width: 768px) {
    .form-group input, .form-group select, .form-group textarea,
    .modal-body input, .modal-body select, .modal-body textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 42px;
        padding: 0.55rem 0.75rem;
    }
    label, .form-label { font-size: 0.73rem; }
}

/* ── Modals – full-screen sheet on very small phones ─────────────── */
@media (max-width: 480px) {
    .modal-content {
        border-radius: 16px 16px 0 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 95vh !important;
    }
    .modal-header { padding: 0.85rem 1rem; }
    .modal-header h2, .modal-header h3 { font-size: 0.88rem; }
    .modal-body { padding: 0.75rem 1rem 1rem; }
}

/* ── Calendar – more breathing room on mobile ────────────────────── */
@media (max-width: 480px) {
    .calendar-weekdays span { font-size: 0.56rem; }
    .calendar-day { min-height: 46px; padding: 0.1rem 0.08rem; }
    .day-number   { font-size: 0.65rem; margin-bottom: 1px; }
    .day-event-chip {
        font-size: 0.5rem;
        padding: 1px 2px;
        border-radius: 3px;
    }
    .btn-add-event { min-width: 36px; }
}

/* ── Booking – resource timeline scroll fix ──────────────────────── */
@media (max-width: 768px) {
    .res-timeline-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .res-timeline-wrap::-webkit-scrollbar { display: none; }
    .week-strip {
        scroll-snap-type: x mandatory;
    }
    .week-day-btn {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* ── Tidsrapport – table horizontal scroll ────────────────────────── */
@media (max-width: 768px) {
    .tr-table-wrap, .tr-entries-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    .tr-entries-table th,
    .tr-entries-table td {
        font-size: 0.7rem;
        padding: 0.45rem 0.5rem;
        white-space: nowrap;
    }
    .tr-inline-form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem;
    }
}
@media (max-width: 480px) {
    .tr-inline-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── Forum – post cards on mobile ────────────────────────────────── */
@media (max-width: 600px) {
    .forum-post {
        padding: 0.75rem;
    }
    .forum-post-title { font-size: 0.82rem; }
    .forum-post-meta  { font-size: 0.62rem; }
    .forum-post-body  { font-size: 0.73rem; }
}

/* ── GC / Admin tables ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gc-table-wrap, .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gc-table th, .gc-table td,
    .admin-table th, .admin-table td {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
    }
}

/* ── Vacation – stat cards 2-col on mobile ───────────────────────── */
@media (max-width: 480px) {
    .vacation-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── Profile – avatar sizing ─────────────────────────────────────── */
@media (max-width: 600px) {
    .profile-avatar-lg { width: 72px !important; height: 72px !important; font-size: 1.6rem !important; }
}

/* ── Toast notifications – full-width on mobile ──────────────────── */
@media (max-width: 600px) {
    .toast-container {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 5.5rem !important; /* above bottom nav */
        width: auto !important;
    }
    .toast {
        font-size: 0.78rem;
        padding: 0.65rem 0.9rem;
    }
}

/* ── ICS export modal category list ─────────────────────────────── */
@media (max-width: 600px) {
    .ics-category-list {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Medarbetarsamtal timeline cards ─────────────────────────────── */
@media (max-width: 600px) {
    .mas-card { padding: 0.75rem; }
    .mas-card-title { font-size: 0.82rem; }
    .mas-card-meta  { font-size: 0.65rem; }
}

/* ── Prevent content from going under bottom nav ─────────────────── */
@media (max-width: 768px) {
    #portalSidebar .sidebar-footer {
        padding-bottom: env(safe-area-inset-bottom, 1rem);
    }
}

/* ── Active page highlight on bottom nav ────────────────────────── */
.mob-nav-item[data-page].active { color: var(--gold, #f9b233); }


/* ── Bottom nav "Mer" button ─────────────────────────────────── */
.mob-nav-more {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
@media (max-width: 768px) {
    .mob-nav-more { color: var(--txt-dim, #7a9ba3); }
    .mob-nav-more:active { color: var(--gold, #f9b233); background: rgba(249,178,51,0.08); }
}