/* ============================================================
   ElektroPM – Corporate Stylesheet
   ============================================================ */

:root {
    --epm-primary:   #1B3A6B;
    --epm-primary-d: #132d55;
    --epm-accent:    #2563EB;
    --epm-success:   #16a34a;
    --epm-bg:        #f0f2f5;
    --epm-card:      #ffffff;
    --epm-border:    #dee2e6;
    --epm-nav-h:     58px;
}

/* ---- Layout -------------------------------------------------- */
body { background: var(--epm-bg); font-size:.92rem; color:#1e293b; }

.epm-navbar {
    background: var(--epm-primary) !important;
    height: var(--epm-nav-h);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    position: sticky; top:0; z-index:1030;
}
.epm-logo-icon { font-size:1.5rem; color:#f59e0b; }
.epm-main { min-height:calc(100vh - var(--epm-nav-h) - 48px); padding-bottom:2rem; }
.epm-footer { background:var(--epm-primary); color:rgba(255,255,255,.5); padding:.7rem 0; margin-top:2rem; }

/* ---- Avatar & Role ------------------------------------------- */
.epm-avatar {
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.2);
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.8rem;
}
.epm-role-badge { background:rgba(255,255,255,.18); color:#fff; font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }

/* ---- Page header -------------------------------------------- */
.epm-page-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.5rem; padding-bottom:.75rem; border-bottom:2px solid var(--epm-primary);
}
.epm-page-header h1 { font-size:1.4rem; font-weight:700; color:var(--epm-primary); margin:0; }

/* ---- Cards --------------------------------------------------- */
.epm-card { background:var(--epm-card); border:1px solid var(--epm-border); border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.epm-card .card-header {
    background:var(--epm-primary); color:#fff; border-radius:7px 7px 0 0 !important;
    font-weight:600; padding:.6rem 1rem; font-size:.9rem;
}

/* ---- Stat cards ---------------------------------------------- */
.epm-stat-card { border-radius:10px; padding:1.2rem 1.4rem; color:#fff; display:flex; align-items:center; gap:1rem; }
.epm-stat-card .stat-icon { font-size:2.2rem; opacity:.8; }
.epm-stat-card .stat-value { font-size:2rem; font-weight:700; line-height:1; }
.epm-stat-card .stat-label { font-size:.8rem; opacity:.85; text-transform:uppercase; letter-spacing:.04em; }

/* ---- Status badges ------------------------------------------- */
.badge-aktiv       { background:#16a34a; }
.badge-abgeschlossen { background:#2563eb; }
.badge-archiviert  { background:#6b7280; }

/* ---- Tables -------------------------------------------------- */
.epm-table thead th {
    background:var(--epm-primary); color:#fff; font-weight:600;
    font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
    border:none; padding:.65rem 1rem;
}
.epm-table tbody tr:hover { background:#f1f5fd; }
.epm-table td { vertical-align:middle; padding:.6rem 1rem; border-color:#e9ecef; }

/* ---- Tabs ---------------------------------------------------- */
.nav-tabs .nav-link { color:#64748b; font-weight:500; border:none; border-bottom:2px solid transparent; padding:.6rem 1.1rem; border-radius:0; }
.nav-tabs .nav-link.active { color:var(--epm-primary); border-bottom-color:var(--epm-primary); background:transparent; font-weight:700; }
.nav-tabs .nav-link:hover:not(.active) { color:var(--epm-accent); border-bottom-color:#cbd5e1; }

/* ---- Frageliste accordion ------------------------------------ */
.epm-cat-accordion .accordion-button { background:#f8faff; color:var(--epm-primary); font-weight:600; font-size:.88rem; }
.epm-cat-accordion .accordion-button:not(.collapsed) { background:var(--epm-primary); color:#fff; box-shadow:none; }
.epm-cat-accordion .accordion-button:not(.collapsed)::after { filter:brightness(0) invert(1); }

.epm-cat-progress { width:90px; height:6px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden; }
.epm-cat-progress .bar { height:100%; background:#f59e0b; border-radius:3px; transition:width .3s; }

.epm-question-row { display:flex; align-items:flex-start; gap:.75rem; padding:.55rem .75rem; border-bottom:1px solid #f1f5f9; }
.epm-question-row:last-child { border-bottom:none; }
.epm-question-label { flex:0 0 300px; font-size:.85rem; padding-top:.35rem; color:#374151; }
.epm-question-input { flex:1; }
.epm-save-indicator { flex:0 0 20px; text-align:center; padding-top:.3rem; font-size:.9rem; }
.is-important .epm-question-label::before { content:'★'; color:#f59e0b; margin-right:.25rem; font-size:.75rem; }

/* ---- Checklists ---------------------------------------------- */
.epm-checklist-card { border:1px solid var(--epm-border); border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.epm-checklist-header { background:#f8faff; padding:.6rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--epm-border); font-weight:600; font-size:.9rem; color:var(--epm-primary); }
.epm-checklist-item { display:flex; align-items:center; gap:.75rem; padding:.45rem .85rem; border-bottom:1px solid #f1f5f9; transition:background .1s; }
.epm-checklist-item:last-child { border-bottom:none; }
.epm-checklist-item:hover { background:#f8faff; }
.epm-checklist-item.done .item-text { text-decoration:line-through; color:#94a3b8; }
.epm-checklist-item input[type="checkbox"] { width:17px; height:17px; cursor:pointer; }

/* ---- Notes --------------------------------------------------- */
.epm-note-card { border:1px solid var(--epm-border); border-left:4px solid var(--epm-accent); border-radius:6px; padding:.9rem 1rem; margin-bottom:.75rem; background:#fff; transition:box-shadow .15s; }
.epm-note-card:hover { box-shadow:0 2px 8px rgba(37,99,235,.12); }
.epm-note-title { font-weight:600; font-size:.9rem; color:var(--epm-primary); margin-bottom:.3rem; }
.epm-note-meta { font-size:.75rem; color:#94a3b8; margin-bottom:.4rem; }
.epm-note-content { font-size:.85rem; white-space:pre-wrap; color:#374151; }

/* ---- Task Cards ---------------------------------------------- */
.epm-task-card {
    background:#fff;
    border:1px solid var(--epm-border);
    border-left:4px solid var(--epm-accent);
    border-radius:8px;
    padding:.85rem 1rem;
    margin-bottom:.6rem;
    transition:box-shadow .15s;
}
.epm-task-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.epm-status-sel { border-color:#e2e8f0; background:#f8faff; }

/* ---- Timeline ------------------------------------------------ */
.epm-timeline { position:relative; padding-left:20px; }
.epm-timeline::before {
    content:'';
    position:absolute;
    left:7px; top:0; bottom:0;
    width:2px;
    background:linear-gradient(to bottom, var(--epm-primary), #e2e8f0);
    border-radius:2px;
}
.epm-tl-item { position:relative; margin-bottom:1.1rem; }
.epm-tl-dot {
    position:absolute;
    left:-16px; top:4px;
    width:14px; height:14px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 2px rgba(0,0,0,.1);
    z-index:1;
}
.epm-tl-content {
    background:#fff;
    border:1px solid var(--epm-border);
    border-radius:8px;
    padding:.7rem .9rem;
    margin-left:4px;
}
.epm-tl-content:hover { box-shadow:0 2px 6px rgba(0,0,0,.07); }

/* ---- Search -------------------------------------------------- */
.epm-search-result { border:1px solid var(--epm-border); border-radius:8px; padding:.9rem 1.1rem; margin-bottom:.65rem; background:#fff; }
.epm-search-result .result-project { font-weight:700; color:var(--epm-primary); font-size:.9rem; }
.epm-search-result .result-where { font-size:.78rem; color:#64748b; margin-bottom:.35rem; }
.epm-search-result mark { background:#fef08a; border-radius:2px; padding:0 2px; }

/* ---- Login page ---------------------------------------------- */
.epm-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--epm-primary) 0%, #2563eb 100%); }
.epm-login-card { width:100%; max-width:400px; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.22); padding:2.5rem 2rem; }
.epm-login-logo { text-align:center; margin-bottom:1.5rem; }
.epm-login-logo .icon { font-size:3rem; color:#f59e0b; }

/* ---- Responsive ---------------------------------------------- */
@media (max-width:768px) {
    .epm-question-label { flex:0 0 100%; }
    .epm-question-row { flex-wrap:wrap; }
    .epm-page-header { flex-direction:column; align-items:flex-start; gap:.5rem; }
    .epm-task-card .d-flex { flex-wrap:wrap; }
}

/* ---- Dashboard due-rows -------------------------------------- */
.epm-due-row { display:flex; align-items:flex-start; gap:10px; padding:.5rem .75rem; border-bottom:1px solid #f1f5f9; }
.epm-due-row:last-child { border-bottom:none; }
.epm-due-row:hover { background:#f8faff; }
.epm-due-row .due-icon { font-size:1rem; flex-shrink:0; padding-top:1px; }
.due-overdue { background:#fff5f5; }

/* ---- Milestones in project ----------------------------------- */
.epm-milestone-row { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem .85rem; border-bottom:1px solid #f1f5f9; transition:background .1s; }
.epm-milestone-row:last-child { border-bottom:none; }
.epm-milestone-row:hover { background:#f8faff; }
.epm-milestone-row.done { opacity:.6; }
.epm-milestone-row.overdue { background:#fff5f5; }
.ms-check { flex-shrink:0; padding-top:1px; }
.ms-check .form-check-input { width:16px; height:16px; cursor:pointer; }

/* ---- Wochenplanung ------------------------------------------ */
.wp-kw-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--epm-border);
    border-radius: 8px;
    padding: .6rem 1rem;
}
.wp-kw-center { flex: 1; text-align: center; }

.wp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: .83rem;
}
.wp-header-row th {
    background: var(--epm-primary);
    color: #fff;
    padding: 5px 6px;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.2);
    white-space: nowrap;
    vertical-align: bottom;
}
.wp-header-row th.wp-day-col {
    color: #1a1a1a;
}
.wp-header-row th:nth-child(1),
.wp-header-row th:nth-child(2),
.wp-header-row th:nth-child(4),
.wp-header-row th:last-child { text-align: left; }

.wp-date-sub { font-weight: 400; font-size: .72rem; opacity: .8; }
.wp-day-col { background: rgba(255,206,2,.18) !important; }
.wp-kw-col  { background: rgba(255,206,2,.28) !important; }

.wp-row:hover td { background: #f8faff; }
.wp-row td { border-bottom: 1px solid #eee; padding: 2px 2px; }

.wp-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 2px 4px;
    font-size: .82rem;
    outline: none;
    color: #1e293b;
}
.wp-input:focus {
    background: #fffbea;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #FFCE02;
}
.wp-h-input { text-align: center; }
.wp-phase-sel { font-size: .78rem; }

.wp-kw-total {
    text-align: center;
    font-weight: 600;
    font-size: .8rem;
    color: #1B3A6B;
    padding: 2px 4px;
    background: rgba(255,206,2,.1);
}

.wp-total-row td {
    background: #FFCE02;
    font-weight: 700;
    font-size: .82rem;
    text-align: center;
    padding: 4px 6px;
    border: 1px solid rgba(0,0,0,.15);
}
.wp-total-row td:first-child { text-align: left; }

.wp-soll-row td {
    background: rgba(255,206,2,.45);
    font-size: .8rem;
    text-align: center;
    padding: 3px 6px;
    border: 1px solid rgba(0,0,0,.1);
}
.wp-soll-row td:first-child { text-align: left; }

.wp-ferien-row td {
    background: rgba(255,206,2,.25);
    font-size: .8rem;
    padding: 3px 6px;
    border: 1px solid rgba(0,0,0,.08);
}

/* Sidebar */
.wp-proj-item { border-bottom: 1px solid #f1f5f9; }
.wp-proj-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background .1s;
}
.wp-proj-header:hover { background: #f0f6ff; }
.wp-proj-nr { font-size: .75rem; font-weight: 700; color: #1B3A6B; flex-shrink: 0; min-width: 40px; }
.wp-proj-name { font-size: .8rem; color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-task-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 22px;
    cursor: pointer;
    font-size: .77rem;
    color: #6b7280;
    transition: background .1s;
}
.wp-task-item:hover { background: #f0f6ff; color: #1B3A6B; }

/* ---- Simple custom tabs (replaces Bootstrap tab behavior) ---- */
.epm-tab-pane {
    display: none !important;
}
.epm-tab-pane.active {
    display: block !important;
}

/* ---- Dashboard panes (same simple system as project tabs) ---- */
.epm-dash-pane { display: none; }
.epm-dash-pane.active { display: block; }

/* ---- Note category color swatch ---- */
.cat-color-swatch:hover { transform: scale(1.15); transition: transform .1s; }
.cat-color-swatch { transition: transform .1s, border-color .1s; }

/* ---- Hide question button ---- */
.epm-question-row > div:last-child .btn-link { opacity: 0; transition: opacity .15s; }
.epm-question-row:hover > div:last-child .btn-link { opacity: 1; }
.q-hidden { background: #fff8f0 !important; opacity: .6; }