:root{
 --oi-blue:#004EA8;--oi-navy:#062A57;--oi-gold:#D99500;--oi-ink:#172033;
 --oi-soft:#eef5fc;--oi-line:#dbe7f3;--oi-white:#fff;
}
.oi-corporate-ribbon{
 width:100%;position:relative;z-index:65;display:flex;align-items:center;justify-content:center;
 gap:.55rem;padding:.38rem .8rem;background:#fff;border-bottom:1px solid var(--oi-line);
 color:var(--oi-navy);font:700 11px/1.2 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.015em;
}
.oi-corporate-ribbon .oi-dot{width:5px;height:5px;border-radius:999px;background:var(--oi-gold)}
.oi-corporate-ribbon strong{font-weight:900}
.oi-corporate-ribbon .oi-product{color:var(--oi-blue)}
.oi-corp-footer{
 margin-top:22px;padding:14px 16px 16px;background:#fff;border-top:2px solid var(--oi-gold);
 color:var(--oi-navy);font:600 11px/1.45 Inter,Segoe UI,Arial,sans-serif;text-align:center
}
.oi-corp-footer b{font-weight:900}.oi-corp-footer .oi-sub{display:block;color:#65758a;font-weight:600;margin-top:2px}
.oi-app-splash{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;background:
 radial-gradient(circle at 50% 20%,rgba(0,78,168,.13),transparent 38%),#fff;transition:.28s ease}
.oi-app-splash.is-out{opacity:0;visibility:hidden}
.oi-app-splash-card{text-align:center;padding:26px;max-width:330px}
.oi-app-splash-mark{width:76px;height:76px;margin:auto;border-radius:24px;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--oi-navy),var(--oi-blue));color:#fff;font:900 24px/1 Inter,Segoe UI;
 box-shadow:0 18px 45px rgba(6,42,87,.22);border:2px solid rgba(217,149,0,.55)}
.oi-app-splash h2{margin:15px 0 4px;color:var(--oi-navy);font:900 18px/1.15 Inter,Segoe UI}
.oi-app-splash p{margin:0;color:#68778b;font:700 11px/1.4 Inter,Segoe UI}
.oi-install-cancelled{display:none!important;visibility:hidden!important;pointer-events:none!important}
.install-notification,.pwa-install-banner,#pwaInstallBanner{
 border:1px solid rgba(0,78,168,.18)!important;box-shadow:0 20px 50px rgba(6,42,87,.18)!important
}
.install-notification .install-btn,[data-install-pwa],.my-install-button,#pwa-install-btn{
 border-radius:999px!important
}
.ps-mobile-bottom-nav,.mobile-bottom-nav,.staff-mobile-bottom-nav{
 border-top-color:rgba(217,149,0,.28)!important
}
.ps-mobile-bottom-nav__item.is-active,.mobile-nav-link.active,.staff-mobile-link.active{
 color:#fff!important
}
@media(max-width:767px){
 .oi-corporate-ribbon{font-size:9.5px;padding:.34rem .5rem;gap:.35rem;white-space:nowrap;overflow:hidden}
 .oi-corporate-ribbon .oi-long{display:none}
 .oi-corp-footer{display:none}
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media print{.oi-corporate-ribbon,.oi-corp-footer,.oi-app-splash{display:none!important}}

/* ==========================================================
   Olutech ICT Resources — Corporate UI Brand Pass v3
   Navy / royal blue / gold system derived from corporate mark.
   ========================================================== */
:root{
 --oi-navy-950:#031b3a;--oi-navy-900:#062a57;--oi-navy-800:#083d78;
 --oi-blue-700:#004ea8;--oi-blue-600:#0866d6;--oi-blue-500:#159ee9;
 --oi-gold-600:#d99500;--oi-gold-500:#f2b705;--oi-gold-200:#ffe7a3;
 --oi-surface:#ffffff;--oi-canvas:#f3f7fc;--oi-ink:#10213d;--oi-muted:#65758a;
 --oi-line:#d9e5f2;--oi-radius:18px;--oi-shadow:0 14px 40px rgba(6,42,87,.10);
}
html{accent-color:var(--oi-blue-600)}
body{background:linear-gradient(180deg,#f8fbff 0,#f3f7fc 38%,#eef4fb 100%);color:var(--oi-ink)}
/* Corporate surfaces */
.card,.portal-card,.section-card,.dashboard-card,.stat-card,.panel,.box,.modal-content{
 border-color:var(--oi-line)!important;border-radius:var(--oi-radius)!important;box-shadow:var(--oi-shadow)
}
/* Corporate actions — class-safe overrides only */
.btn,.button,button.btn,a.btn{border-radius:13px;font-weight:800;letter-spacing:-.01em}
.btn-primary,.btn.primary,.button-primary{background:linear-gradient(135deg,var(--oi-blue-700),var(--oi-blue-500))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 22px rgba(0,78,168,.20)}
.btn-primary:hover,.btn.primary:hover{filter:brightness(.97);transform:translateY(-1px)}
.btn-outline-primary,.btn.ghost{border-color:#b7d3f2!important;color:var(--oi-blue-700)!important;background:#f7fbff!important}
/* Gold is reserved for authority / premium / official status */
.oi-official,.badge-official,.certificate-seal{border-color:rgba(217,149,0,.38)!important;color:#8a5b00!important;background:#fff8df!important}
/* Form system */
input:not([type=checkbox]):not([type=radio]),select,textarea{
 border-color:#cbd9e8!important;border-radius:12px!important;background:#fff!important
}
input:focus,select:focus,textarea:focus{border-color:var(--oi-blue-600)!important;box-shadow:0 0 0 4px rgba(8,102,214,.11)!important;outline:0}
/* Tables */
table thead th{color:var(--oi-navy-900);background:#f4f8fd;font-weight:850}
table tbody tr:hover{background:#f8fbff}
/* Universal branded divider */
.oi-brand-divider{height:3px;border:0;background:linear-gradient(90deg,var(--oi-blue-700),var(--oi-blue-500) 70%,var(--oi-gold-500));border-radius:99px}
/* Identity / certificate specific shared accents */
.identity-corporate-head,.certificate-corporate-head{position:relative}
.identity-corporate-head:after,.certificate-corporate-head:after{content:"";display:block;height:3px;margin-top:12px;border-radius:99px;background:linear-gradient(90deg,var(--oi-blue-700),var(--oi-blue-500) 72%,var(--oi-gold-500))}
/* Staff/admin mobile buttons: never collapse into vertical letter stacks */
@media(max-width:767px){
 .btn,.button,button.btn,a.btn{min-width:0!important;width:auto;white-space:normal;word-break:normal!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important;line-height:1.22;padding:10px 12px}
 .btn-group,.action-group,.actions,.ol-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;width:100%}
 .btn-group>*:only-child,.action-group>*:only-child,.actions>*:only-child,.ol-actions>*:only-child{grid-column:1/-1}
 .oi-corporate-ribbon{border-bottom-color:rgba(217,149,0,.32)}
}
@media print{
 body{background:#fff!important}.card,.portal-card,.section-card{box-shadow:none!important}
}