body { margin:0; background:#f4f6f8; }

/* Layout */
/* TOPBAR BASE */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}

/* LEFT SIDE */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-name {
    font-weight: 700;
    font-size: 15px;
}

.brand-sub {
    font-size: 12px;
    color: #777;
}

/* RIGHT LOGO */
.topbar-right {
    display: flex;
    align-items: center;
}

.topbar-logo {
    width: 110px;   /* adjust if needed */
    height: auto;
}

/* BURGER */
.burger {
    font-size: 22px;
    cursor: pointer;
}

.content { padding:20px; }

/* Sidebar */
.sidebar {
    position:fixed;
    top:0; left:-240px;
    width:240px;
    height:100%;
    background:#1b1c1d;
    padding:20px;
    color:white;
    transition:left .3s ease;
    z-index:1000;
}
.sidebar.active { left:0; }
.overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    display:none;
    z-index:900;
}
.overlay.active { display:block; }

/* Table */
/* ===== TABLE BASE ===== */
.ui.table {
    border-collapse: collapse;
}

/* ===== HEADER HEIGHT (FIXED) ===== */
.fixed-table-wrapper thead th,
.days-table-wrapper thead th {
    height: 56px;                 /* 👈 header height */
    min-height: 56px;
    max-height: 56px;
    vertical-align: middle;
    padding: 6px !important;
}

/* ===== ROW HEIGHT (FIXED) ===== */
.fixed-table-wrapper tbody tr,
.days-table-wrapper tbody tr {
    height: 64px;                 /* 👈 row height */
    min-height: 64px;
    max-height: 64px;
}

/* ===== CELL ALIGNMENT ===== */
.fixed-table-wrapper td,
.days-table-wrapper td {
    vertical-align: middle;
    padding: 4px 6px !important;
    white-space: nowrap;
}

/* ===== DAYS CELL WIDTH (UNCHANGED) ===== */
.days-table-wrapper th,
.days-table-wrapper td {
    min-width: 90px;
    max-width: 90px;
    text-align: center;
}

/* ===== CELL CONTENT ===== */
.cell {
    display: flex;                /* 👈 center content */
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 4px;
    font-weight: 600;
}

.covered    { background:#e8f7ef; border-left:4px solid #21ba45; }
.pending   { background:#ffecec; border-left:4px solid #db2828; }
.empty { background:#f1f1f1; color:#aaa; }


.client-cell {
    
    font-weight:bold;
    vertical-align:middle;
}

.client-0 {
    background: #acd1a0;    
}

.client-1 {
    background: #edb39c;    
}

.tables-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* LEFT TABLE (fixed) */
.fixed-table-wrapper {
    flex: 0 0 auto;
}

/* DAYS TABLE (scrollable) */
.days-table-wrapper {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
}

/* DAYS CELL WIDTH (fixed forever) */
.days-table-wrapper th,
.days-table-wrapper td {
    min-width: 90px;
    max-width: 90px;
    white-space: nowrap;
}

/* OPTIONAL: make fixed table compact */
.fixed-table-wrapper th,
.fixed-table-wrapper td {
    white-space: nowrap;
}

.fixed-table-wrapper td,
.days-table-wrapper td {
    vertical-align: middle;
}

.micro-progress {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.micro-progress > div {
    height: 100%;
    background: #21ba45; /* green */
}

/* color variations */
.micro-progress.warn > div {
    background: #fbbd08; /* yellow */
}

.micro-progress.danger > div {
    background: #db2828; /* red */
}

.today-col {
    background: #fffbea !important;
}

.today-badge {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #f2711c;
}

.status-legend {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.legend-box {
    width: 32px;
    height: 18px;
    border-radius: 4px;
}


/* ===== POPUP TWO-COLUMN LAYOUT ===== */
.po-popup-layout {
    display: flex;
    gap: 12px;
    min-width: 620px;
    max-width: 760px;
}

/* LEFT SIDE */
.po-popup-left {
    flex: 0 0 300px;
}

/* RIGHT SIDE (TRACEABILITY) */
.po-popup-right {
    flex: 1 1 auto;
    border-left: 1px solid #e0e0e0;
    padding-left: 8px;
}

/* SCROLLABLE TRACEABILITY */
.trace-scroll {
    max-height: 260px;      /* 👈 controls popup height */
    overflow-y: auto;
}

/* TABLE COMPACT */
.trace-table {
    margin: 0 !important;
}

.trace-table th,
.trace-table td {
    font-size: 12px;
    padding: 4px !important;
}

/* COMMENTS */
.po-comments {
    margin-top: 10px;
}

.po-comments textarea {
    font-size: 12px;
    resize: vertical;
}

/* ===== FILTERS CONTAINER ===== */
.filters-container {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding: 10px 12px;
    margin-bottom: 12px;

    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

/* GROUPS */
.filter-group {
    display: flex;
    flex-direction: column;
}

/* LABELS */
.filter-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    margin-bottom: 2px;
}

/* ACTION BUTTONS */
.filter-actions {
    display: flex;
    gap: 8px;
}