/* --- 1. STRICT UNIFORM MASTHEAD (FULL WIDTH) --- */
.custom-masthead {
    background-color: #f0f0f0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #d1d1d1 !important;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1020;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.5 !important;
}

.masthead-unified {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;        /* FILL SCREEN */
    max-width: 100% !important;    /* NO LIMIT */
    margin: 0 !important;          /* NO MARGIN */
    padding: 0 20px !important;    /* Safe padding */
}

.masthead-left {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.masthead-icon {
    margin-right: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.masthead-text {
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    color: #333333 !important;
}

.masthead-right {
    display: flex !important;
    align-items: center !important;
}

a.status-link {
    text-decoration: none !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

a.status-link:hover { opacity: 0.7 !important; color: #333333 !important; text-decoration: none !important; }

.status-dot-header {
    width: 8px !important;
    height: 8px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 6px !important;
}

/* --- REST OF CSS --- */
body { background-color: #f8f9fa; font-family: 'Inter', sans-serif; color: #1D2939; line-height: 1.5; }
.main-container { margin-top: 2rem; margin-bottom: 2rem; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.status-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.status-table th { background-color: #F7F7F9; color: #1D2939; font-weight: 600; padding: 12px 16px; border-bottom: 2px solid #E4E7EC; }
.status-table td { vertical-align: middle; padding: 12px 16px; border-bottom: 1px solid #E4E7EC; }
.col-label { width: 28%; padding-right: 20px; } 
.col-url { width: 57%; max-width: 0; }
.col-status { width: 15%; text-align: center; } 
.service-label { display: inline-block; padding: 6px 12px; border-radius: 50rem; font-weight: 700; font-size: 0.85rem; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.tag-loan, .tag-om { background-color: #ffd200; color: #333; }
.tag-motorist { background-color: #00c3ff; color: #fff; }
.tag-flat { background-color: #ff0099; color: #fff; }
.tag-mint { background-color: #00e676; color: #fff; }
.tag-cpf { background-color: #198754; color: #fff; }
.tag-singpass { background-color: #dc3545; color: #fff; }
.tag-default { background-color: #6c757d; color: #fff; }
.service-url { font-size: 0.85rem; color: #6c757d; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.service-url:hover { text-decoration: underline; color: #007bff; }
a[target="_blank"]:after { display: inline-block; font-family: "bootstrap-icons"; content: "\F1C5"; padding-left: 0.25rem; font-size: 0.75em; text-decoration: none; vertical-align: middle; }
.timestamp-text { color: #6c757d; font-size: 0.875rem; margin-top: 0.5rem; }
.separator-dot { display: inline; margin: 0 8px; }
.refresh-note { display: inline; font-style: italic; }
.legend-card { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; margin-top: 2rem; }
.legend-title { font-weight: 700; font-size: 0.875rem; color: #2c3e50; margin-bottom: 1rem; display: flex; align-items: center; }
.legend-item .badge { font-size: 0.8rem; }
.legend-desc { font-size: 0.7rem; color: #6c757d; margin-top: 4px; line-height: 1.2; }
@media (max-width: 992px) {
    .main-container { padding: 1rem; margin-top: 1rem; }
    .status-table thead { display: none; }
    .status-table tbody, .status-table tr, .status-table td { display: block; width: 100%; }
    .status-table tr { margin-bottom: 15px; border: 1px solid #e9ecef; border-radius: 8px; background-color: #fff; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
    .status-table td { border: none; padding: 6px 0; text-align: left; }
    .col-label, .col-url, .col-status { width: 100%; max-width: none; padding-right: 0; }
    .service-label { white-space: normal; display: inline-block; margin-bottom: 5px; }
    .service-url { white-space: normal; word-break: break-all; color: #007bff; margin-bottom: 10px; }
    .col-status { text-align: left; }
    .separator-dot { display: none; }
    .refresh-note { display: block; margin-top: 4px; }
}