/* PreeceHost brand layer over Tabler — see design/PreeceHost-Design-System.md */
:root {
    --tblr-primary: #4263eb;
    --tblr-primary-rgb: 66, 99, 235;
    --tblr-font-sans-serif: 'Public Sans', -apple-system, system-ui, sans-serif;
    --ph-web: #4263eb; --ph-mail: #0ea5b8; --ph-dns: #7c5cff;
    --ph-ssl: #27a34a; --ph-db: #e8930c; --ph-ssh: #e8590c; --ph-bak: #e64980;
}

body { font-family: var(--tblr-font-sans-serif); }
.font-monospace, .ph-mono, td.ph-mono { font-family: 'IBM Plex Mono', monospace; font-feature-settings: "tnum"; }

/* Sidebar — indigo → violet gradient */
.ph-sidebar { background: linear-gradient(185deg, #3a4fd4, #4434b4) !important; border: 0; }
.ph-sidebar .navbar-brand, .ph-sidebar .nav-link { color: #fff !important; }
.ph-sidebar .nav-link { border-radius: 8px; margin: 1px 4px; opacity: .85; }
.ph-sidebar .nav-link:hover { opacity: 1; background: rgba(255,255,255,.08); }
.ph-sidebar .nav-link.active { opacity: 1; background: rgba(255,255,255,.16); font-weight: 600; }
.ph-sidebar .nav-header { color: rgba(255,255,255,.5); text-transform: uppercase; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 14px 12px 4px; }
.ph-brand-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.16); margin-right: 8px; }
.ph-brand-icon-lg { width: 44px; height: 44px; font-size: 24px; }
.ph-brand-text { font-weight: 700; font-size: 18px; }
.ph-sidebar .nav-link { display: flex !important; align-items: center !important; }
.ph-sidebar .nav-link .nav-link-title { flex: 1 1 auto; min-width: 0; }
/* Tabler's `.navbar .navbar-nav .nav-link .badge` (specificity 0,4,0) absolutely-pins any nav badge
   to the top-right. Override with !important so the count flows back into the flex row; auto
   top/bottom margins then vertically centre it and margin-left:auto pins it right. */
.ph-sidebar .nav-link .ph-count {
    position: static !important;
    top: auto !important; right: auto !important; transform: none !important;
    margin: auto 0 auto auto; flex: 0 0 auto;
    background: rgba(255,255,255,.18); color: #fff;
}
/* Solid light chips in the sidebar so the coloured glyph reads against the blue —
   a translucent hue-tinted chip vanished for the blue (web) and purple (dns) marks. */
.ph-sidebar .nav-link-icon.ph-svc-web,
.ph-sidebar .nav-link-icon.ph-svc-mail,
.ph-sidebar .nav-link-icon.ph-svc-dns,
.ph-sidebar .nav-link-icon.ph-svc-ssl,
.ph-sidebar .nav-link-icon.ph-svc-db,
.ph-sidebar .nav-link-icon.ph-svc-ssh { background: #fff; border: 0; box-shadow: 0 1px 2px rgba(5,9,31,.18); }

/* Service hue icon chips */
.ph-svc-web, .ph-svc-mail, .ph-svc-dns, .ph-svc-ssl, .ph-svc-db, .ph-svc-ssh, .ph-svc-bak { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.nav-link-icon.ph-svc-web i { color: var(--ph-web); }
.nav-link-icon.ph-svc-mail i { color: var(--ph-mail); }
.nav-link-icon.ph-svc-dns i { color: var(--ph-dns); }
.nav-link-icon.ph-svc-ssl i { color: var(--ph-ssl); }
.nav-link-icon.ph-svc-db i { color: var(--ph-db); }
.nav-link-icon.ph-svc-ssh i { color: var(--ph-ssh); }
.ph-svc-web { background: color-mix(in srgb, var(--ph-web) 14%, transparent); color: var(--ph-web); }
.ph-svc-mail { background: color-mix(in srgb, var(--ph-mail) 14%, transparent); color: var(--ph-mail); }
.ph-svc-dns { background: color-mix(in srgb, var(--ph-dns) 14%, transparent); color: var(--ph-dns); }
.ph-svc-ssl { background: color-mix(in srgb, var(--ph-ssl) 14%, transparent); color: var(--ph-ssl); }
.ph-svc-db { background: color-mix(in srgb, var(--ph-db) 14%, transparent); color: var(--ph-db); }
.ph-svc-ssh { background: color-mix(in srgb, var(--ph-ssh) 14%, transparent); color: var(--ph-ssh); }

/* KPI cards */
.ph-kpi-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.ph-kpi-value { font-size: 27px; font-weight: 800; line-height: 1.1; margin-top: 6px; }
/* Service-colour left accent on KPI cards (--ph-accent set per card). */
.ph-kpi-accent { border-left: 3px solid var(--ph-accent, var(--ph-web)); }
.ph-kpi-link { color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; }
.ph-kpi-link:hover { color: inherit; box-shadow: 0 2px 12px rgba(0,0,0,.10); transform: translateY(-1px); }

/* Card headers: tinted bar + service-colour icon, distinct from the pane. */
.card > .card-header.ph-head { background: color-mix(in srgb, var(--ph-head, var(--ph-web)) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ph-head, var(--ph-web)) 22%, transparent); }
.card > .card-header.ph-head .card-title { display: flex; align-items: center; gap: .5rem; }
.card > .card-header.ph-head .card-title i { color: var(--ph-head, var(--ph-web)); }
.page-title { font-size: 22px; font-weight: 700; }

/* Topbar */
.ph-topbar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
.ph-search { min-width: 280px; }
.ph-search-wrap { min-width: 280px; }
.ph-search-results { width: 100%; max-height: 60vh; overflow-y: auto; margin-top: 4px; }
/* Vertically centre the magnifier in the small search input + keep text clear of it. */
.ph-search-wrap .input-icon-addon { top: 50%; bottom: auto; transform: translateY(-50%); height: auto; width: 2.25rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ph-search.form-control-sm { padding-left: 2.25rem; }
.ph-avatar { background: linear-gradient(135deg, #4f63ff, #6b3ff0); color: #fff; font-weight: 700; }
.ph-role-badge { font-size: 10px; }
.ph-badge-admin { background: color-mix(in srgb, #7c5cff 16%, transparent); color: #7c5cff; }
.ph-badge-reseller { background: color-mix(in srgb, #0ea5b8 16%, transparent); color: #0ea5b8; }
.ph-badge-client { background: color-mix(in srgb, #4263eb 16%, transparent); color: #4263eb; }

.ph-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 12px; text-align: center; }
.ph-gauge { min-height: 150px; }

/* Event stream */
.ph-eventstream { max-height: 360px; overflow-y: auto; }
.ph-event { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--tblr-border-color); font-size: 12.5px; }
.ph-event:last-child { border-bottom: 0; }
.ph-event-time { color: var(--tblr-secondary); font-size: 11px; flex: 0 0 auto; }
.ph-event-src { font-size: 10px; text-transform: uppercase; flex: 0 0 auto; }
.ph-event-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Job progress drawer */
.ph-jobdrawer { width: 420px; visibility: visible; }
.ph-jobdrawer .ti-loader-2, .ph-spin { animation: ph-spin 1.1s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
/* Stepped progress: done steps collapse to a small muted tick + name; active step is prominent. */
.ph-step { display: flex; align-items: center; gap: 8px; }
.ph-step-done { font-size: 13px; color: var(--tblr-secondary); padding: 3px 0; }
.ph-step-done i { font-size: 15px; }
.ph-step-active { font-size: 15px; padding: 8px 0 2px; }
.ph-step-active i { font-size: 19px; }

/* Login split panel */
.ph-login-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }

/* Left: dark navy brand panel (the hero glow mark belongs on a dark ground) */
.ph-login-aside {
    position: relative; overflow: hidden; color: #fff; padding: 64px;
    display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(130% 95% at 12% 4%, #1b2f6b 0%, #0b1440 42%, #05091f 100%);
}
/* faint circuit grid, faded out toward the edges */
.ph-login-aside::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(56,216,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,216,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(80% 80% at 28% 22%, #000 38%, transparent 100%);
            mask-image: radial-gradient(80% 80% at 28% 22%, #000 38%, transparent 100%);
}
/* cyan bloom behind the logo */
.ph-login-aside::after {
    content: ""; position: absolute; width: 520px; height: 520px; top: -140px; left: -140px;
    background: radial-gradient(closest-side, rgba(56,216,255,.20), transparent 70%);
    pointer-events: none;
}
.ph-login-aside-inner { position: relative; z-index: 1; max-width: 470px; }
.ph-login-hero { margin-bottom: 30px; filter: drop-shadow(0 10px 34px rgba(56,216,255,.35)); }
.ph-login-tag { font-size: 36px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 14px; }
.ph-login-sub { opacity: .8; max-width: 430px; font-size: 15px; line-height: 1.6; }
.ph-login-features { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ph-login-features li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.85); }
.ph-login-features li > span { flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }

/* Right: sign-in column with brand header above the card */
.ph-login-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; background: var(--tblr-bg-surface-secondary, #f7f9fc); }
.ph-login-panel { width: 100%; max-width: 380px; }
.ph-login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 24px; font-weight: 700; margin-bottom: 22px; }
.ph-login-card { width: 100%; }

@media (max-width: 992px) { .ph-login-features { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .ph-login-wrap { grid-template-columns: 1fr; } .ph-login-aside { display: none; } }

/* MFA challenge / enrolment (centered card on the auth surface) */
.ph-auth-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--tblr-bg-surface-secondary, #f7f9fc); }
.ph-qr svg { width: 190px; height: 190px; display: block; }