/* LelangPet V6.2.0 — Visual hierarchy + feedback polish
   Loaded last. Keeps navy/orange branding clean, raises tiny admin typography,
   gives the dark admin sidebar a contrast-safe logo, and makes auth feedback obvious.
*/

:root{
    --lp-admin-navy:#172455;
    --lp-admin-navy-2:#1d2d66;
    --lp-admin-navy-3:#263b80;
    --lp-admin-text:#dce4ff;
    --lp-admin-muted:#aab7df;
    --lp-admin-label:#8fa1d6;
    --lp-surface:#ffffff;
    --lp-surface-soft:#f6f8ff;
    --lp-text:#1f2f69;
    --lp-text-soft:#667394;
    --lp-accent:#f5a126;
    --lp-danger:#c94e4e;
    --lp-danger-bg:#fff1f0;
    --lp-info:#3658a7;
    --lp-info-bg:#eef3ff;
}

/* ----------------------- Contrast-safe sidebar brand ----------------------- */
.brand-inverse{color:#fff!important;max-width:100%}
.brand-inverse .brand-lockup{display:none!important}
.brand-inverse-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.brand-inverse-mark{
    width:35px;height:35px;display:grid;place-items:center;flex:0 0 35px;
    border-radius:11px;background:#fff;border:1px solid rgba(255,255,255,.82);
    box-shadow:0 8px 20px rgba(3,10,37,.18);overflow:hidden
}
.brand-inverse-mark img{width:31px;height:31px;object-fit:contain}
.brand-inverse-name{display:flex;align-items:flex-start;line-height:1;min-width:0;white-space:nowrap}
.brand-inverse-name strong{font-size:21px;letter-spacing:-.85px;font-weight:850;color:#fff}
.brand-inverse-name strong span{color:var(--lp-accent)}
.brand-inverse-name small{font-size:7px;line-height:1;margin:3px 0 0 2px;color:#b9c5e8;font-weight:800;letter-spacing:.02em}
.admin-mode .sidebar-brand{padding:3px 10px 27px}
.admin-mode .sidebar-brand .brand-inverse{width:max-content}

/* ------------------------------- Admin shell ------------------------------- */
.admin-mode .sidebar{
    background:var(--lp-admin-navy)!important;
    border-right:1px solid rgba(255,255,255,.06)!important;
    box-shadow:none!important
}
.admin-mode .sidebar-kicker{
    color:#ffb13d!important;font-size:9.5px!important;line-height:1.2;
    letter-spacing:.14em!important;margin-bottom:10px!important
}
.admin-mode .nav-label{
    color:var(--lp-admin-label)!important;font-size:9.5px!important;
    line-height:1.3;letter-spacing:.13em!important;margin-top:18px!important
}
.admin-mode .sidebar-nav{gap:4px}
.admin-mode .sidebar-nav>a{
    color:var(--lp-admin-text)!important;font-size:12.5px!important;line-height:1.35;
    min-height:44px;padding:11px 12px!important;border-radius:12px!important;font-weight:720!important
}
.admin-mode .sidebar-nav>a>span{color:#aebcf0;width:24px!important}
.admin-mode .sidebar-nav>a:hover{
    background:rgba(255,255,255,.075)!important;color:#fff!important
}
.admin-mode .sidebar-nav>a.active{
    background:#fff!important;color:var(--lp-admin-navy)!important;
    box-shadow:0 8px 20px rgba(4,12,45,.14)!important
}
.admin-mode .sidebar-nav>a.active>span{color:#3653a6!important}
.admin-mode .sidebar-foot{border-top-color:rgba(255,255,255,.08)!important}
.admin-mode .sidebar-foot a{color:#aebbea!important;font-size:10.5px!important}

.admin-mode .app-header{background:rgba(251,252,255,.97)!important}
.admin-mode .profile-copy strong{font-size:12.5px!important;color:#20284d!important}
.admin-mode .profile-copy small{font-size:10.5px!important;color:#7883a4!important}
.admin-mode .admin-chip{font-size:10px!important;letter-spacing:.12em;padding:8px 11px!important}
.admin-mode .app-search input{font-size:13px!important;color:#26325f!important}
.admin-mode .app-search input::placeholder{color:#9aa5c2!important}

/* --------------------------- Readable admin type --------------------------- */
.admin-mode .page-head{margin-bottom:28px!important}
.admin-mode .page-head .eyebrow{font-size:10.5px!important;letter-spacing:.16em!important}
.admin-mode .page-head h1{font-size:34px!important;line-height:1.05!important;letter-spacing:-1.45px!important;margin:7px 0!important}
.admin-mode .page-head p{font-size:13.5px!important;line-height:1.55!important;color:#697695!important}
.admin-mode .admin-live-chip{font-size:10.5px!important;padding:8px 12px!important}

.admin-mode .metric-grid{gap:16px!important}
.admin-mode .metric-card{min-height:126px!important;padding:21px!important;gap:14px!important}
.admin-mode .metric-card small{font-size:11px!important;line-height:1.35!important;letter-spacing:.055em!important;color:#667392!important}
.admin-mode .metric-card strong{font-size:29px!important;line-height:1.08!important;margin-top:4px!important;color:#172455!important}
.admin-mode .metric-card p{font-size:12px!important;line-height:1.45!important;margin-top:5px!important;color:#75809e!important}
.admin-mode .metric-card>b{color:#9ba6bf!important}

.admin-mode .admin-kpi-strip{
    margin-top:16px!important;background:var(--lp-admin-navy-2)!important;
    border:1px solid rgba(255,255,255,.04)!important;border-radius:18px!important;
    box-shadow:0 10px 28px rgba(23,36,85,.08)!important;overflow:hidden
}
.admin-mode .admin-kpi-strip>div{
    min-height:118px!important;padding:21px 23px!important;
    justify-content:center!important;gap:0!important;
    border-right:1px solid rgba(255,255,255,.09)!important
}
.admin-mode .admin-kpi-strip>div:last-child{border-right:0!important}
.admin-mode .admin-kpi-strip small{
    font-size:10.5px!important;line-height:1.35!important;letter-spacing:.105em!important;
    color:#b9c5e8!important;font-weight:800!important
}
.admin-mode .admin-kpi-strip strong{
    display:block;font-size:24px!important;line-height:1.15!important;
    color:#fff!important;margin:8px 0 7px!important;letter-spacing:-.45px!important
}
.admin-mode .admin-kpi-strip span{
    font-size:10.75px!important;line-height:1.45!important;color:#aab6dc!important
}

.admin-mode .dash-card{padding:22px!important}
.admin-mode .dash-card-head{margin-bottom:17px!important}
.admin-mode .dash-card-head .eyebrow{font-size:10px!important}
.admin-mode .dash-card-head h2{font-size:21px!important;line-height:1.2!important;margin:6px 0!important}
.admin-mode .dash-card-head>a{font-size:11.5px!important;color:#dd820f!important;font-weight:800!important}
.admin-mode .moderation-list strong,.admin-mode .mini-transactions strong{font-size:12.5px!important;line-height:1.35!important}
.admin-mode .moderation-list span,.admin-mode .moderation-list small,.admin-mode .mini-transactions small{font-size:10.5px!important;line-height:1.45!important;color:#75809f!important}
.admin-mode .moderation-list>a>b{font-size:10.5px!important}
.admin-mode .mini-empty p{font-size:11.5px!important;color:#72809f!important}

/* Tables, filters, details: no microscopic backoffice copy. */
.admin-mode .table-wrap th{font-size:10.5px!important;line-height:1.35!important}
.admin-mode .table-wrap td{font-size:12px!important;line-height:1.5!important}
.admin-mode .table-pet strong,.admin-mode .user-cell strong{font-size:12px!important}
.admin-mode .table-pet small,.admin-mode .user-cell small{font-size:10px!important}
.admin-mode .status-badge{font-size:9.5px!important}
.admin-mode .filter-tabs a{font-size:10.5px!important}
.admin-mode .category-admin-head small,.admin-mode .category-admin-card summary,
.admin-mode .attribute-list-head,.admin-mode .attribute-list small,
.admin-mode .seller-risk small,.admin-mode .strike-list small,
.admin-mode .admin-status-list small,.admin-mode .audit-list small{font-size:9.75px!important;line-height:1.45!important}
.admin-mode .category-admin-head p,.admin-mode .audit-list p{font-size:10.75px!important;line-height:1.55!important}
.admin-mode .attribute-list strong,.admin-mode .seller-risk strong,
.admin-mode .strike-list strong,.admin-mode .admin-status-list>div>span,
.admin-mode .audit-list strong{font-size:11px!important;line-height:1.4!important}
.admin-mode .audit-list code{font-size:10px!important;line-height:1.45!important;background:#f3f5fb!important;color:#34405e!important}

/* ------------------------------ Auth feedback ------------------------------ */
.auth-heading p{font-size:13px!important;line-height:1.6!important;color:#6b7898!important}
.auth-form form{gap:16px!important}
.auth-form label{font-size:12px!important;line-height:1.35!important;color:#3f4967!important}
.auth-form input{min-height:46px!important;font-size:13.5px!important}
.auth-form .form-between{font-size:11.5px!important}
.auth-form .auth-switch{font-size:12px!important}
.has-server-error input{
    border-color:rgba(201,78,78,.72)!important;
    box-shadow:0 0 0 3px rgba(201,78,78,.08)!important
}
.lp-server-field-error,.lp-field-error{
    display:flex;align-items:flex-start;gap:6px;margin-top:1px!important;
    color:#a33f3f!important;font-size:11.5px!important;line-height:1.45!important;font-weight:700!important
}
.lp-server-field-error:before{content:'!';display:inline-grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:#fbe0de;color:#a33f3f;font-size:10px;font-weight:900}

/* -------------------------------- Feedback -------------------------------- */
.flash{
    font-size:13px!important;line-height:1.5!important;padding:14px 16px!important;
    border-radius:14px!important;box-shadow:0 12px 32px rgba(31,47,105,.09)!important
}
.flash-center{gap:10px!important}
.flash-message{font-size:13px!important;line-height:1.5!important;font-weight:650!important}
.flash-error{background:var(--lp-danger-bg)!important;color:#8d3434!important;border-color:rgba(201,78,78,.24)!important}
.flash-info{background:var(--lp-info-bg)!important;color:#294a94!important;border:1px solid rgba(54,88,167,.18)!important}
.flash-info .flash-symbol{background:#dce6ff!important;color:#3658a7!important}
.flash[data-flash-sticky]{box-shadow:0 14px 36px rgba(145,50,50,.10)!important}
.public-mode main>.flash{max-width:760px!important;margin:16px auto 0!important}

/* Avoid hover movement creating visual jitter in dense backoffice. */
.admin-mode .metric-card:hover{transform:translateY(-2px)!important}

@media(max-width:1180px){
    .admin-mode .admin-kpi-strip>div{padding:18px!important}
    .admin-mode .admin-kpi-strip strong{font-size:22px!important}
}

@media(max-width:650px){
    .brand-inverse-name strong{font-size:20px}
    .admin-mode .admin-kpi-strip{grid-template-columns:1fr 1fr!important}
    .admin-mode .admin-kpi-strip>div{min-height:106px!important;padding:17px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
    .admin-mode .admin-kpi-strip strong{font-size:21px!important}
    .admin-mode .page-head h1{font-size:29px!important}
    .public-mode main>.flash{margin:12px 14px 0!important}
}