/* =====================================================================
   Diagnopein Machine Maintenance Portal
   Brand palette taken from www.diagnopein.com
   ===================================================================== */
:root {
    --dp-blue: #0589CF;
    --dp-blue-dark: #0082C6;
    --dp-blue-deep: #056da5;
    --dp-orange: #FD7E14;
    --dp-green: #00A859;
    --dp-ink: #2C2D3F;
    --dp-muted: #6c757d;
    --dp-bg: #F3F7FA;
    --dp-line: #E3EAF0;
    --dp-red: #E03131;
    --dp-amber: #F59F00;
    --sidebar-w: 248px;
}

html, body { height: 100%; }
body {
    font-family: 'Poppins', 'GothamBook', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: var(--dp-ink);
    background: var(--dp-bg);
}
a { color: var(--dp-blue); }
a:hover { color: var(--dp-blue-deep); }
h1, h2, h3, h4, h5 { font-weight: 600; color: var(--dp-ink); }

/* ---------------- Top bar (white, like main site) ---------------- */
.dp-topbar {
    background: #fff;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--dp-line);
    position: sticky; top: 0; z-index: 1030;
}
.dp-topbar .logo img { height: 42px; width: auto; display: block; }
.dp-topbar .portal-name {
    margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--dp-line);
    font-weight: 600; color: var(--dp-blue); font-size: 15px; line-height: 1.1;
}
.dp-topbar .portal-name small { display: block; color: var(--dp-muted); font-weight: 400; font-size: 11px; }
.dp-topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dp-topbar .clock { color: var(--dp-muted); font-size: 12px; text-align: right; line-height: 1.2; }
.dp-topbar .clock b { color: var(--dp-ink); font-size: 13px; }
.dp-topbar .user-btn {
    border: 1px solid var(--dp-line); border-radius: 22px; padding: 4px 12px 4px 4px; background: #fff;
    display: flex; align-items: center; gap: 8px; color: var(--dp-ink); font-size: 13px;
}
.dp-topbar .user-btn .avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--dp-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.dp-topbar .user-btn small { display: block; color: var(--dp-muted); font-size: 11px; line-height: 1; }
.dp-burger { display: none; border: 0; background: none; font-size: 22px; color: var(--dp-blue); margin-right: 8px; }

/* ---------------- Orange strip (main site nav colour) ---------------- */
.dp-strip {
    background: var(--dp-orange);
    min-height: 38px;
    display: flex; align-items: center; flex-wrap: wrap;
    padding: 0 16px;
    position: sticky; top: 64px; z-index: 1020;
}
.dp-strip a {
    color: #fff; font-weight: 700; font-size: 13px; padding: 9px 12px; text-decoration: none; white-space: nowrap;
}
.dp-strip a:hover, .dp-strip a.active { background: rgba(255,255,255,.18); color: #fff; }
.dp-strip .cta { margin-left: auto; background: var(--dp-blue); border-radius: 3px; padding: 6px 14px; }
.dp-strip .cta:hover { background: var(--dp-blue-deep); }

/* ---------------- Shell ---------------- */
.dp-shell { display: flex; min-height: calc(100vh - 102px); }
.dp-sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: #fff; border-right: 1px solid var(--dp-line);
    padding: 10px 0 30px;
    position: sticky; top: 102px; height: calc(100vh - 102px); overflow-y: auto;
}
.dp-sidebar .group { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9aa7b2; padding: 14px 20px 6px; font-weight: 600; }
.dp-sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px; color: var(--dp-ink); text-decoration: none; font-size: 13.5px;
    border-left: 3px solid transparent;
}
.dp-sidebar a .fa { width: 18px; text-align: center; color: var(--dp-blue); }
.dp-sidebar a:hover { background: #F0F7FC; }
.dp-sidebar a.active { background: #E6F3FB; border-left-color: var(--dp-blue); font-weight: 600; color: var(--dp-blue-deep); }
.dp-sidebar .count { margin-left: auto; background: var(--dp-orange); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.dp-main { flex: 1; min-width: 0; padding: 22px 26px 40px; }

/* ---------------- Page header ---------------- */
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; margin: 0; }
.page-head h1:after { content: ""; display: block; width: 44px; height: 3px; background: var(--dp-orange); margin-top: 6px; border-radius: 2px; }
.page-head .sub { color: var(--dp-muted); font-size: 13px; width: 100%; margin-top: -4px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Buttons (site uses solid blue rectangles) ---------------- */
.btn { border-radius: 4px; font-size: 13.5px; font-weight: 500; }
.btn-primary { background: var(--dp-blue); border-color: var(--dp-blue); }
.btn-primary:hover, .btn-primary:focus { background: var(--dp-blue-deep); border-color: var(--dp-blue-deep); }
.btn-orange { background: var(--dp-orange); border-color: var(--dp-orange); color: #fff; }
.btn-orange:hover { background: #e96f0b; color: #fff; }
.btn-success { background: var(--dp-green); border-color: var(--dp-green); }
.btn-outline-primary { color: var(--dp-blue); border-color: var(--dp-blue); }
.btn-outline-primary:hover { background: var(--dp-blue); border-color: var(--dp-blue); }

/* ---------------- Cards ---------------- */
.dp-card { background: #fff; border: 1px solid var(--dp-line); border-radius: 8px; margin-bottom: 18px; }
.dp-card > .head { padding: 12px 16px; border-bottom: 1px solid var(--dp-line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-card > .head h3 { font-size: 15px; margin: 0; }
.dp-card > .head h3 .fa { color: var(--dp-blue); margin-right: 4px; }
.dp-card > .head .tools { margin-left: auto; }
.dp-card > .body { padding: 16px; }
.dp-card > .body.p0 { padding: 0; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
    background: #fff; border: 1px solid var(--dp-line); border-radius: 8px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px; text-decoration: none !important; color: var(--dp-ink);
    border-top: 3px solid var(--dp-blue); transition: box-shadow .15s;
}
.kpi:hover { box-shadow: 0 4px 14px rgba(5,137,207,.12); color: var(--dp-ink); }
.kpi .ic { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #E6F3FB; color: var(--dp-blue); flex: 0 0 44px; }
.kpi .val { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .lbl { font-size: 12.5px; color: var(--dp-muted); margin-top: 4px; }
.kpi .note { font-size: 11px; color: var(--dp-muted); }
.kpi.k-orange { border-top-color: var(--dp-orange); } .kpi.k-orange .ic { background: #FFF1E6; color: var(--dp-orange); }
.kpi.k-red { border-top-color: var(--dp-red); } .kpi.k-red .ic { background: #FDECEC; color: var(--dp-red); }
.kpi.k-green { border-top-color: var(--dp-green); } .kpi.k-green .ic { background: #E5F6EE; color: var(--dp-green); }
.kpi.k-amber { border-top-color: var(--dp-amber); } .kpi.k-amber .ic { background: #FFF6E0; color: #c77d00; }
.kpi.k-ink { border-top-color: var(--dp-ink); } .kpi.k-ink .ic { background: #ECEDF2; color: var(--dp-ink); }

/* ---------------- Filters ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters .f { display: flex; flex-direction: column; min-width: 150px; flex: 1 1 150px; max-width: 240px; }
.filters label { font-size: 11.5px; color: var(--dp-muted); margin-bottom: 3px; font-weight: 500; }
.filters .btns { display: flex; gap: 6px; }
.form-control, .custom-select { font-size: 13.5px; border-color: #d5dee6; }
.form-control:focus { border-color: var(--dp-blue); box-shadow: 0 0 0 .15rem rgba(5,137,207,.18); }
label { font-weight: 500; font-size: 13px; }
.req:after { content: " *"; color: var(--dp-red); }
.form-section { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dp-blue); font-weight: 600; border-bottom: 1px solid var(--dp-line); padding-bottom: 6px; margin: 8px 0 14px; }
.help { font-size: 12px; color: var(--dp-muted); }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dp-table { width: 100%; margin: 0; font-size: 13px; }
.dp-table th {
    background: #F5F9FC; color: #4a5a68; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--dp-line) !important; border-top: 0 !important; white-space: nowrap; padding: 9px 10px;
}
.dp-table td { padding: 9px 10px; border-top: 1px solid #EEF2F5; vertical-align: top; }
.dp-table tr:hover td { background: #FAFCFE; }
.dp-table td.num, .dp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dp-table tr.total td { font-weight: 700; background: #EEF6FC; }
.dp-table tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--dp-red); }
.dp-table .muted { color: var(--dp-muted); font-size: 12px; }
.cno { white-space: nowrap; }
.mono { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; }
.clip { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Badges ---------------- */
.dp-badge { font-weight: 600; font-size: 11px; padding: 4px 8px; border-radius: 4px; letter-spacing: .02em; }
.badge-open { background: #E6F3FB; color: #05679c; }
.badge-progress { background: #FFF1E6; color: #b85a07; }
.badge-spares { background: #F3E8FF; color: #6b2fb3; }
.badge-resolved { background: #E5F6EE; color: #00753f; }
.badge-closed { background: #ECEDF2; color: #4b4d5e; }
.badge-critical { background: var(--dp-red); color: #fff; }
.badge-high { background: #FFE8D6; color: #b4530a; }
.badge-medium { background: #FFF6D6; color: #8a6300; }
.badge-low { background: #EEF2F5; color: #4a5a68; }
.badge-running { background: #E5F6EE; color: #00753f; }
.badge-maint { background: #FFF6D6; color: #8a6300; }
.badge-down { background: #FDECEC; color: #c42020; }

/* ---------------- Alerts ---------------- */
.alert { font-size: 13.5px; border-radius: 6px; }
.alert-contract { background: #FFF4E5; border: 1px solid #FFD8A8; color: #8a4b00; }

/* ---------------- Detail grids ---------------- */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--dp-muted); font-weight: 500; }
.kv dd { margin: 0; }
.status-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-hero .no { font-size: 20px; font-weight: 700; color: var(--dp-ink); }

/* Timeline of automatic timestamps */
.milestones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ms { border: 1px solid var(--dp-line); border-radius: 6px; padding: 8px 10px; background: #fff; }
.ms .t { font-size: 11px; color: var(--dp-muted); text-transform: uppercase; letter-spacing: .03em; }
.ms .v { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.ms.done { border-color: #b7e4cc; background: #F3FBF7; }
.ms.done .v:before { content: "\f00c"; font-family: FontAwesome; color: var(--dp-green); margin-right: 5px; }
.ms.pending .v { color: #b0bac3; font-weight: 400; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--dp-line); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li:before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--dp-blue); }
.timeline li.ev-warn:before { border-color: var(--dp-orange); }
.timeline li.ev-bad:before { border-color: var(--dp-red); }
.timeline li.ev-good:before { border-color: var(--dp-green); }
.timeline .when { font-size: 12px; color: var(--dp-muted); }
.timeline .what { font-weight: 600; font-size: 13.5px; }
.timeline .notes { font-size: 13px; white-space: pre-wrap; word-break: break-word; }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs a { display: block; width: 120px; text-decoration: none; font-size: 11px; color: var(--dp-muted); word-break: break-all; }
.thumbs img, .thumbs .vid { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--dp-line); display: flex; align-items: center; justify-content: center; background: #F5F9FC; font-size: 30px; color: var(--dp-blue); }

.action-panel { border: 1px dashed #b9d9ee; background: #F7FBFE; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.action-panel h4 { font-size: 14px; margin-bottom: 10px; }
.rule-box { border-left: 4px solid var(--dp-orange); background: #FFF8F1; padding: 10px 14px; font-size: 13px; border-radius: 4px; }

/* ---------------- Footer (site blue) ---------------- */
.dp-footer { background: var(--dp-blue-dark); color: #fff; padding: 14px 20px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 8px; }
.dp-footer a { color: #fff; }
.dp-footer .r { margin-left: auto; opacity: .85; }

/* ---------------- Login ---------------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff 0, #fff 64px, var(--dp-blue) 64px, var(--dp-blue-dark) 100%); }
.login-box { background: #fff; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.18); width: 100%; max-width: 420px; padding: 30px 30px 24px; margin: 50px auto; border-top: 5px solid var(--dp-orange); }
.login-box h2 { font-size: 20px; margin-bottom: 4px; }

/* ---------------- Charts ---------------- */
.chart-box { position: relative; height: 260px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1199px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .dp-burger { display: inline-block; }
    .dp-sidebar { position: fixed; left: 0; top: 102px; z-index: 1040; transform: translateX(-105%); transition: transform .2s; box-shadow: 4px 0 20px rgba(0,0,0,.12); }
    body.nav-open .dp-sidebar { transform: none; }
    .dp-main { padding: 16px; }
    .dp-topbar .clock, .dp-topbar .portal-name small { display: none; }
    .dp-strip a:not(.cta) { display: none; }
    .dp-strip a.keep { display: inline-block; }
}
@media (max-width: 575px) {
    .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi { padding: 10px; gap: 10px; } .kpi .ic { display: none; } .kpi .val { font-size: 22px; }
    .kv { grid-template-columns: 1fr; gap: 0 0; } .kv dd { margin-bottom: 8px; }
    .milestones { grid-template-columns: 1fr 1fr; }
    .dp-topbar .portal-name { display: none; }
    .dp-topbar .user-btn .who { display: none; }
    .filters .f { max-width: none; flex-basis: 45%; }
    .page-head .actions { margin-left: 0; }
}
@media print {
    .dp-topbar, .dp-strip, .dp-sidebar, .dp-footer, .no-print, .page-head .actions { display: none !important; }
    .dp-main { padding: 0; } body { background: #fff; }
}