*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:#192033;background:#f5f7fb}a{text-decoration:none;color:inherit}body{font-size:14px}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#101422;color:#fff;padding:28px 18px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 10px;margin-bottom:35px}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8c7cff);display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:0 8px 30px #6957ff44}.brand strong,.brand span{display:block}.brand strong{font-size:15px}.brand span{font-size:11px;color:#8f97ad;margin-top:3px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav-link{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#aeb5c8;font-weight:500;transition:.18s}.nav-link:hover{background:#1b2031;color:#fff}.ico{width:22px;text-align:center;font-size:18px}.sidebar-bottom{margin-top:auto;border-top:1px solid #262c3e;padding-top:18px}.tenant-pill{display:flex;align-items:center;gap:10px;padding:8px 10px}.tenant-pill small,.tenant-pill b{display:block}.tenant-pill small{color:#727b94;font-size:10px;text-transform:uppercase}.tenant-pill b{font-size:12px;margin-top:2px}.status-dot{width:8px;height:8px;background:#49d59c;border-radius:50%;display:inline-block;box-shadow:0 0 0 5px #49d59c18}.logout{display:block;color:#747e98;padding:10px;font-size:12px}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:78px;border-bottom:1px solid #e8ebf2;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:15}.topbar>div:first-of-type small,.topbar>div:first-of-type strong{display:block}.topbar>div:first-of-type small{font-size:10px;text-transform:uppercase;color:#9aa2b3;letter-spacing:.08em}.topbar>div:first-of-type strong{font-size:14px;margin-top:2px}.user-chip{display:flex;align-items:center;gap:10px}.user-chip>span{width:34px;height:34px;border-radius:10px;background:#eeeafe;color:var(--accent);display:grid;place-items:center;font-weight:700}.user-chip b,.user-chip small{display:block}.user-chip b{font-size:12px}.user-chip small{font-size:10px;color:#9aa2b3;margin-top:2px}.content{padding:38px;max-width:1500px;margin:auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}.page-head h1{font-size:31px;margin:5px 0 7px;letter-spacing:-.04em}.page-head p{margin:0;color:#7a8396}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--accent)}.soft-btn,.count-pill{background:#fff;border:1px solid #e6e9f1;border-radius:11px;padding:10px 14px;font-weight:600;box-shadow:0 3px 12px #1f29400a}.soft-btn span{color:var(--accent);margin-left:12px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat-card{background:#fff;border:1px solid #e8ebf2;border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px;box-shadow:0 7px 30px #1f294008;transition:.2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px #1f294012}.stat-icon,.quick-icon,.license-icon{width:45px;height:45px;border-radius:12px;background:#f0edff;color:var(--accent);display:grid;place-items:center;font-size:21px}.stat-card span,.stat-card strong{display:block}.stat-card>div:nth-child(2) span{font-size:11px;color:#8991a4}.stat-card strong{font-size:27px;margin-top:3px}.stat-card .arrow{margin-left:auto;color:#b0b6c4}.dashboard-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;margin-bottom:20px}.panel{background:#fff;border:1px solid #e8ebf2;border-radius:16px;padding:22px;box-shadow:0 7px 30px #1f294008}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-head h3{font-size:18px;margin:3px 0}.panel-head a{font-size:12px;font-weight:600;color:#778096}.panel-head a span{color:var(--accent);margin-left:6px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mini-stats>div{background:#f7f8fb;border-radius:11px;padding:13px}.mini-stats small,.mini-stats b{display:block}.mini-stats small{color:#8b93a6}.mini-stats b{font-size:19px;margin-top:5px}.network-art{height:115px;margin-top:18px;position:relative;overflow:hidden}.network-art svg{width:100%;height:100%}.network-art path{fill:none;stroke:#d9d5fa;stroke-width:2;stroke-dasharray:4 5}.node{position:absolute;width:13px;height:13px;background:var(--accent);border:4px solid #eeeafe;border-radius:50%;z-index:2}.n1{left:8%;top:50%}.n2{left:39%;top:27%}.n3{left:61%;top:62%}.n4{right:8%;top:52%}.device-list{display:flex;flex-direction:column}.device-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #f0f1f5}.device-row:last-child{border:0}.device-avatar{width:36px;height:36px;border-radius:9px;background:#f2f4f8;color:#6f7890;display:grid;place-items:center;font-weight:700;font-size:11px}.device-row>div:nth-child(2){min-width:0;flex:1}.device-row b,.device-row small{display:block}.device-row b{font-size:12px}.device-row small{font-size:10px;color:#969dae;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{display:inline-flex;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:700}.badge.ok{background:#e8faf3;color:#16885d}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.quick-grid>a{background:#fff;border:1px solid #e8ebf2;border-radius:14px;padding:17px;display:flex;align-items:center;gap:13px}.quick-grid>a>div{flex:1}.quick-grid b,.quick-grid small{display:block}.quick-grid small{color:#939bad;font-size:10px;margin-top:4px}.table-panel{padding:0;overflow:hidden}.filter-row{padding:18px 20px;border-bottom:1px solid #edf0f4;position:relative}.filter-row input{width:320px;background:#f7f8fa;border:1px solid #e8ebf0;border-radius:10px;padding:11px 36px 11px 13px;outline:none}.filter-row span{position:absolute;left:312px;top:27px;color:#9da4b2}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#939bab;background:#fafbfc;padding:12px 18px}td{padding:14px 18px;border-top:1px solid #f0f2f5;font-size:12px;color:#657087}.name-cell{display:flex;align-items:center;gap:11px}.name-cell b,.name-cell small{display:block}.name-cell b{color:#222b3e}.name-cell small{font-size:10px;color:#a1a8b7;margin-top:3px}.table-icon{width:35px;height:35px;background:#f1effd;color:var(--accent);border-radius:9px;display:grid;place-items:center;font-size:16px}.row-link{font-weight:700;color:var(--accent)}.muted{color:#939bad}.empty{text-align:center;color:#9aa2b2;padding:28px}.back{font-size:11px;color:#7e8798}.rack-grid{display:grid;grid-template-columns:minmax(390px,.9fr) 1.1fr;gap:20px}.rack-photo{width:100%;max-height:670px;object-fit:contain;border-radius:12px;background:#f5f6f8}.rack-frame{background:#202534;padding:12px;border-radius:10px;max-width:420px;margin:auto}.rack-u{height:15px;border:1px solid #41495c;border-top:0;position:relative;color:#727c92;font-size:7px;display:flex;align-items:center}.rack-u:first-child{border-top:1px solid #41495c}.rack-u>span{width:22px;text-align:center}.rack-device{height:11px;line-height:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#6050d9;color:#fff;border-radius:2px;padding:0 6px;position:absolute;left:24px;right:3px;font-size:7px}.center{text-align:center;font-size:10px}.network-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.network-cards>div{background:#171c2b;color:#fff;border-radius:15px;padding:18px}.network-cards span,.network-cards b{display:block}.network-cards span{color:#818aa1;font-size:10px}.network-cards b{font-size:25px;margin-top:6px}.data-section{margin-bottom:18px}.license-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.license-card{background:#fff;border:1px solid #e8ebf2;border-radius:16px;padding:20px}.license-top{display:flex;justify-content:space-between}.license-card h3{font-size:16px;margin:18px 0 6px}.license-card p{font-size:11px;color:#8d95a6;min-height:30px}.license-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eef0f4;margin-top:17px;padding-top:15px}.license-meta small,.license-meta b{display:block}.license-meta small{font-size:9px;color:#9ca3b2}.license-meta b{font-size:12px;margin-top:4px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.contact-card{background:#fff;border:1px solid #e8ebf2;border-radius:15px;padding:19px;display:flex;gap:14px}.contact-avatar{width:45px;height:45px;border-radius:50%;background:#eeeafe;color:var(--accent);display:grid;place-items:center;font-weight:800}.contact-card h3{margin:2px 0 5px;font-size:14px}.contact-card p{margin:0 0 9px;font-size:10px;color:#9299a8}.contact-card a{display:block;font-size:10px;color:var(--accent);margin-top:4px}.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.doc-card{background:#fff;border:1px solid #e8ebf2;border-radius:14px;padding:16px;display:flex;align-items:center;gap:13px}.doc-icon{width:45px;height:50px;border-radius:9px;background:#f1effd;color:var(--accent);display:grid;place-items:center;font-size:9px;font-weight:800}.doc-card>div:nth-child(2){flex:1}.doc-card b,.doc-card small{display:block}.doc-card small{font-size:9px;color:#9ca3b2;margin-top:5px}.wide{grid-column:1/-1}.alert{background:#fff2f2;border:1px solid #ffd7d7;color:#a64040;border-radius:10px;padding:11px 13px;margin:15px 0;font-size:11px}.primary-btn{width:100%;border:0;background:linear-gradient(135deg,var(--accent),#7c69ff);color:#fff;border-radius:11px;padding:13px 16px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.primary-btn.inline{width:auto;display:inline-flex;gap:18px;margin-top:12px}.error-panel{max-width:600px}.login-body{background:#101421;overflow:hidden}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;position:relative;z-index:2}.login-hero{padding:48px 7vw;display:flex;flex-direction:column;justify-content:space-between;color:#fff}.login-brand{padding:0;margin:0}.hero-copy{max-width:600px}.hero-copy h1{font-size:64px;line-height:.98;letter-spacing:-.06em;margin:18px 0 24px}.hero-copy h1 em{font-style:normal;color:#8b7cff}.hero-copy p{max-width:500px;color:#9aa3b9;font-size:16px;line-height:1.7}.hero-status{display:flex;gap:12px;align-items:center;color:#8d96aa;font-size:11px}.login-card{display:grid;place-items:center;padding:30px}.login-card-inner{width:min(440px,100%);background:#fff;border-radius:24px;padding:43px;box-shadow:0 40px 100px #0004}.login-card h2{font-size:31px;margin:6px 0 8px;letter-spacing:-.04em}.login-card .muted{margin:0 0 25px;font-size:12px}.login-card label{display:block;font-size:11px;font-weight:700;margin:15px 0;color:#485168}.login-card input{display:block;width:100%;margin-top:7px;border:1px solid #e2e5eb;border-radius:10px;padding:13px;outline:none;font:inherit}.login-card input:focus{border-color:#a79cfb;box-shadow:0 0 0 3px #7764ff13}.login-foot{text-align:center;font-size:10px;color:#9aa2b2;margin-top:20px}.login-foot a{color:var(--accent)}.login-glow{position:fixed;border-radius:50%;filter:blur(100px);opacity:.19}.glow-one{width:500px;height:500px;background:#6957ff;left:20%;top:10%}.glow-two{width:380px;height:380px;background:#28b0ff;right:5%;bottom:-10%}.mobile-menu{display:none}
@media(max-width:1050px){.stat-grid,.network-cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.rack-grid{grid-template-columns:1fr}.license-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.menu-open .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}.mobile-menu{display:block;border:0;background:#f2f3f7;border-radius:8px;padding:8px}.topbar{padding:0 18px}.content{padding:24px 17px}.stat-grid,.quick-grid,.network-cards,.license-grid,.contact-grid,.docs-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.login-card{padding:20px}.login-card-inner{padding:30px}.filter-row input{width:100%}.filter-row span{display:none}}
/* Shyer Portal brand icon */
.brand-mark {
overflow: hidden;
padding: 0 !important;
background: transparent !important;
}
.brand-mark img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Shyer logo uten bakgrunnsboks */
.sidebar .brand .brand-mark {
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.sidebar .brand .brand-mark img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
background: transparent !important;
}
/* Større Shyer logo på login */
.login-brand {
gap: 14px !important;
align-items: center !important;
}
.login-brand .brand-mark {
width: 64px !important;
height: 64px !important;
flex: 0 0 64px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.login-brand .brand-mark img {
display: block !important;
width: 64px !important;
height: 64px !important;
object-fit: contain !important;
background: transparent !important;
}
.login-brand strong {
font-size: 17px !important;
}
.login-brand span {
margin-top: 4px;
}
/* Professional sidebar SVG icons */
.sidebar .nav-link .ico {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: grid;
place-items: center;
color: #9ba9c8;
transition: color .18s ease;
}
.sidebar .nav-link .ico svg {
width: 18px;
height: 18px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.sidebar .nav-link:hover .ico {
color: #ffffff;
}
.sidebar .nav-link:hover .ico svg {
stroke-width: 1.9;
}
/* Dashboard SVG icons */
.stat-icon svg,
.quick-icon svg {
width: 20px;
height: 20px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.quick-icon svg {
width: 19px;
height: 19px;
}
/* ==================================================
Shyer Portal unified SVG icon system
================================================== */
.portal-svg-icon svg,
.object-icon svg,
.license-icon svg,
.category-icon svg,
.device-avatar svg,
.button-svg-icon svg {
width:20px;
height:20px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.object-icon svg,
.license-icon svg,
.category-icon svg {
width:21px;
height:21px;
}
.device-avatar.portal-svg-icon svg {
width:15px;
height:15px;
}
.button-svg-icon {
width:18px;
height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 18px;
}
.button-svg-icon svg {
width:17px;
height:17px;
}
/* License certificate icon */
.license-icon.portal-svg-icon {
color:#695cff;
}
/* ==================================================
Prosjekter
================================================== */
.project-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.project-card{
background:#fff;
border:1px solid #e8ebf2;
border-radius:16px;
padding:20px;
box-shadow:0 7px 30px #1f294008;
transition:.2s;
}
.project-card:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px #1f294012;
}
.project-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.project-folder{
width:44px;
height:44px;
border-radius:12px;
background:#f0edff;
color:var(--accent);
display:grid;
place-items:center;
}
.project-folder svg{
width:21px;
height:21px;
}
.project-badges,
.project-detail-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
.project-status,
.project-health,
.milestone-status,
.task-status{
display:inline-flex;
align-items:center;
border-radius:20px;
padding:5px 9px;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.status-proposed,
.status-planning{
background:#eef2ff;
color:#5363b7;
}
.status-active{
background:#e8f2ff;
color:#2870bd;
}
.status-on_hold{
background:#fff4dd;
color:#a56a00;
}
.status-completed{
background:#e8faf3;
color:#16885d;
}
.status-cancelled{
background:#f1f2f5;
color:#737b8c;
}
.health-on_track{
background:#e8faf3;
color:#16885d;
}
.health-at_risk{
background:#fff4dd;
color:#a56a00;
}
.health-off_track{
background:#fff0f0;
color:#b44747;
}
.project-number{
display:block;
color:var(--accent);
font-size:10px;
font-weight:800;
letter-spacing:.08em;
}
.project-card h3{
margin:6px 0 8px;
font-size:17px;
color:#222b3e;
}
.project-card>p{
color:#8991a4;
font-size:11px;
line-height:1.55;
min-height:34px;
}
.project-phase-line{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:20px;
font-size:10px;
color:#778096;
}
.project-phase-line b{
color:#343c50;
}
.project-progress{
height:7px;
background:#eef0f5;
border-radius:20px;
overflow:hidden;
margin-top:8px;
}
.project-progress>span{
display:block;
height:100%;
background:linear-gradient(90deg,var(--accent),#8c7cff);
border-radius:20px;
}
.project-card-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
border-top:1px solid #eef0f4;
margin-top:18px;
padding-top:15px;
}
.project-card-meta small,
.project-card-meta b{
display:block;
}
.project-card-meta small{
color:#9ca3b2;
font-size:9px;
}
.project-card-meta b{
margin-top:4px;
font-size:11px;
color:#485168;
}
.project-detail-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
margin:18px 0 25px;
}
.project-detail-head h1{
font-size:31px;
letter-spacing:-.04em;
margin:5px 0 7px;
}
.project-detail-head p{
color:#7a8396;
margin:0;
}
.project-phase-panel{
margin-bottom:20px;
}
.project-progress-number{
font-size:28px;
color:var(--accent);
}
.phase-track{
display:grid;
grid-template-columns:repeat(7,1fr);
position:relative;
margin:28px 0 24px;
}
.phase-track:before{
content:"";
position:absolute;
left:7%;
right:7%;
top:15px;
height:2px;
background:#e5e8ef;
}
.phase-step{
position:relative;
z-index:1;
text-align:center;
color:#a0a7b6;
font-size:9px;
}
.phase-dot{
width:31px;
height:31px;
border-radius:50%;
background:#f2f4f7;
border:2px solid #e4e7ed;
display:grid;
place-items:center;
margin:0 auto 9px;
font-size:9px;
font-weight:800;
}
.phase-step.done .phase-dot{
background:#e8faf3;
border-color:#49c998;
color:#16885d;
}
.phase-step.current .phase-dot{
background:var(--accent);
border-color:var(--accent);
color:#fff;
box-shadow:0 0 0 6px #6957ff14;
}
.phase-step.current span{
color:#30384b;
font-weight:700;
}
.phase-step small{
display:block;
color:var(--accent);
margin-top:4px;
font-size:8px;
font-weight:700;
}
.project-progress-large{
height:8px;
}
.project-summary-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
}
.project-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:18px;
}
.project-info-grid small,
.project-info-grid b{
display:block;
}
.project-info-grid small{
color:#9ca3b2;
font-size:9px;
}
.project-info-grid b{
color:#333c50;
font-size:12px;
margin-top:4px;
}
.project-date-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-bottom:20px;
}
.project-date-card{
background:#171c2b;
color:#fff;
border-radius:14px;
padding:17px;
}
.project-date-card small,
.project-date-card b{
display:block;
}
.project-date-card small{
color:#818aa1;
font-size:9px;
}
.project-date-card b{
margin-top:6px;
font-size:14px;
}
.project-section{
margin-bottom:20px;
}
.milestone-list{
display:flex;
flex-direction:column;
}
.milestone-row{
display:grid;
grid-template-columns:42px minmax(180px,1fr) auto 110px;
gap:13px;
align-items:center;
padding:14px 0;
border-top:1px solid #f0f2f5;
}
.milestone-row:first-child{
border-top:0;
}
.milestone-mark{
width:36px;
height:36px;
border-radius:10px;
background:#f1effd;
color:var(--accent);
display:grid;
place-items:center;
}
.milestone-mark svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.milestone-mark.overdue{
background:#fff0f0;
color:#b44747;
}
.milestone-main b,
.milestone-main small,
.milestone-date small,
.milestone-date b{
display:block;
}
.milestone-main b{
font-size:12px;
}
.milestone-main small{
color:#969dae;
font-size:9px;
margin-top:3px;
}
.milestone-date{
text-align:right;
}
.milestone-date small{
color:#9ca3b2;
font-size:8px;
}
.milestone-date b{
font-size:10px;
margin-top:3px;
}
.milestone-date span,
.overdue-label{
display:block;
color:#b44747;
font-size:8px;
font-weight:700;
margin-top:3px;
}
.milestone-planned{
background:#eef2ff;
color:#5363b7;
}
.milestone-at_risk{
background:#fff4dd;
color:#a56a00;
}
.milestone-reached{
background:#e8faf3;
color:#16885d;
}
.task-todo{
background:#eef2ff;
color:#5363b7;
}
.task-in_progress{
background:#e8f2ff;
color:#2870bd;
}
.task-blocked{
background:#fff0f0;
color:#b44747;
}
.task-done{
background:#e8faf3;
color:#16885d;
}
.task-cancelled{
background:#f1f2f5;
color:#737b8c;
}
.task-title b,
.task-title small{
display:block;
}
.task-title b{
color:#222b3e;
}
.task-title small{
color:#9ca3b2;
margin-top:3px;
font-size:9px;
}
.task-overdue{
background:#fffafa;
}
@media(max-width:1050px){
.project-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.project-summary-grid{
grid-template-columns:1fr;
}
.project-date-grid{
grid-template-columns:repeat(2,1fr);
}
.phase-track{
overflow-x:auto;
grid-template-columns:repeat(7,120px);
padding-bottom:8px;
}
}
@media(max-width:700px){
.project-grid{
grid-template-columns:1fr;
}
.project-detail-head{
flex-direction:column;
}
.project-detail-badges{
justify-content:flex-start;
}
.project-date-grid,
.project-info-grid{
grid-template-columns:1fr 1fr;
}
.milestone-row{
grid-template-columns:42px 1fr;
}
.milestone-status,
.milestone-date{
grid-column:2;
text-align:left;
}
}
/* Aktiv side i hovedmenyen */
.sidebar .nav-link.active{
background:linear-gradient(
135deg,
var(--accent),
#7c69ff
);
color:#fff;
box-shadow:0 7px 20px #6957ff33;
}
.sidebar .nav-link.active .ico{
color:#fff;
}
.sidebar .nav-link.active svg{
stroke:#fff;
}
/* ==================================================
Globalt portalsøk
================================================== */
.global-search{
position:relative;
width:min(480px,42vw);
margin-left:auto;
margin-right:22px;
}
.global-search-box{
height:42px;
display:flex;
align-items:center;
gap:10px;
background:#f6f7fa;
border:1px solid #e5e8ef;
border-radius:12px;
padding:0 10px 0 13px;
transition:.18s;
}
.global-search-box:focus-within{
background:#fff;
border-color:#b9b0fa;
box-shadow:0 0 0 4px #6957ff10;
}
.global-search-icon{
width:18px;
height:18px;
display:grid;
place-items:center;
color:#939bad;
flex:0 0 18px;
}
.global-search-icon svg,
.search-result-icon svg{
width:18px;
height:18px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.global-search input{
flex:1;
min-width:0;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:12px;
color:#2d3548;
}
.global-search input::placeholder{
color:#9ca3b2;
}
.global-search input::-webkit-search-cancel-button{
cursor:pointer;
}
.global-search-key{
border:1px solid #dde1e8;
background:#fff;
color:#9aa2b2;
border-radius:6px;
padding:3px 6px;
font-size:8px;
font-weight:700;
white-space:nowrap;
}
.global-search-results{
display:none;
position:absolute;
top:50px;
left:0;
right:0;
max-height:min(620px,70vh);
overflow:auto;
background:#fff;
border:1px solid #e5e8ef;
border-radius:15px;
box-shadow:0 20px 55px #1f294022;
z-index:100;
padding:7px;
}
.global-search-results.open{
display:block;
}
.search-group{
padding:10px 11px 6px;
color:#9ca3b2;
font-size:8px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.search-result{
display:flex;
align-items:center;
gap:11px;
border-radius:10px;
padding:9px 10px;
transition:.15s;
}
.search-result:hover{
background:#f6f5ff;
}
.search-result-icon{
width:35px;
height:35px;
border-radius:9px;
display:grid;
place-items:center;
background:#f0edff;
color:var(--accent);
flex:0 0 35px;
}
.search-result-copy{
flex:1;
min-width:0;
}
.search-result-copy b,
.search-result-copy small{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.search-result-copy b{
color:#2a3245;
font-size:11px;
}
.search-result-copy small{
color:#969dae;
font-size:9px;
margin-top:3px;
}
.search-result-arrow{
color:#b1b7c4;
font-size:13px;
margin-right:3px;
}
.search-result:hover .search-result-arrow{
color:var(--accent);
}
.search-message{
min-height:65px;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
color:#8d95a6;
font-size:10px;
}
.search-spinner{
width:14px;
height:14px;
border:2px solid #e3e5eb;
border-top-color:var(--accent);
border-radius:50%;
animation:portalSearchSpin .7s linear infinite;
}
@keyframes portalSearchSpin{
to{
transform:rotate(360deg);
}
}
.search-empty{
padding:25px 15px;
text-align:center;
}
.search-empty b,
.search-empty span{
display:block;
}
.search-empty b{
color:#434b5e;
font-size:11px;
}
.search-empty span{
color:#9ca3b2;
font-size:9px;
margin-top:5px;
}
@media(max-width:900px){
.global-search{
width:min(340px,45vw);
margin-right:12px;
}
.global-search-key{
display:none;
}
}
@media(max-width:650px){
.global-search{
width:auto;
flex:1;
margin:0 10px;
}
.global-search-results{
position:fixed;
top:70px;
left:10px;
right:10px;
max-height:70vh;
}
}
/* ============================================================
SHYER PORTAL GLOBAL SEARCH V2
============================================================ */
/*
* Sørg for at topbaren kan inneholde et stort søkefelt
*/
.topbar{
display:flex !important;
align-items:center !important;
min-height:72px !important;
gap:18px !important;
}
/*
* Selve søkeområdet
*/
.global-search{
position:relative !important;
flex:1 1 520px !important;
width:auto !important;
max-width:680px !important;
min-width:260px !important;
margin-left:auto !important;
margin-right:18px !important;
z-index:1000 !important;
}
/*
* Søkerammen
*/
.global-search-box{
width:100% !important;
height:46px !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
box-sizing:border-box !important;
padding:0 11px 0 15px !important;
background:#ffffff !important;
border:1px solid #e1e5ee !important;
border-radius:14px !important;
box-shadow:
0 1px 2px rgba(16,24,40,.02),
0 3px 10px rgba(16,24,40,.025) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
/*
* Aktivt søkefelt
*/
.global-search-box:focus-within{
border-color:var(--accent) !important;
box-shadow:
0 0 0 3px rgba(105,87,255,.10),
0 7px 22px rgba(31,41,64,.06) !important;
background:#fff !important;
}
/*
* Søkeikon
*/
.global-search-icon{
width:21px !important;
height:21px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 21px !important;
color:var(--accent) !important;
}
.global-search-icon svg{
width:20px !important;
height:20px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:2 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/*
* Input
*/
.global-search input{
display:block !important;
flex:1 1 auto !important;
width:100% !important;
min-width:0 !important;
height:42px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#172033 !important;
font-family:inherit !important;
font-size:14px !important;
font-weight:500 !important;
box-shadow:none !important;
appearance:none !important;
}
.global-search input:focus{
outline:none !important;
border:0 !important;
box-shadow:none !important;
}
.global-search input::placeholder{
color:#9aa2b1 !important;
opacity:1 !important;
}
/*
* Ctrl K badge
*/
.global-search-key{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
min-width:48px !important;
height:28px !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#f8f9fb !important;
border:1px solid #e1e4eb !important;
border-radius:8px !important;
color:#81899a !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
/*
* Resultatvindu
*/
.global-search-results{
display:none !important;
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
width:100% !important;
box-sizing:border-box !important;
max-height:min(650px,72vh) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:7px !important;
background:rgba(255,255,255,.98) !important;
border:1px solid #e1e5ec !important;
border-radius:15px !important;
box-shadow:
0 22px 60px rgba(27,37,57,.14),
0 4px 12px rgba(27,37,57,.05) !important;
z-index:99999 !important;
}
.global-search-results.open{
display:block !important;
}
/*
* Gruppeoverskrifter
*/
.search-group{
padding:12px 12px 6px !important;
color:#8d95a5 !important;
font-size:10px !important;
font-weight:750 !important;
line-height:1.2 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
/*
* Ett søkeresultat
*/
.search-result{
display:flex !important;
align-items:center !important;
width:100% !important;
box-sizing:border-box !important;
gap:12px !important;
padding:10px 11px !important;
border-radius:11px !important;
text-decoration:none !important;
transition:
background .14s ease,
transform .14s ease !important;
}
.search-result:hover{
background:#f4f2ff !important;
text-decoration:none !important;
}
/*
* Resultatikon
*/
.search-result-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
border-radius:10px !important;
background:#f0edff !important;
color:var(--accent) !important;
}
.search-result-icon svg{
width:19px !important;
height:19px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/*
* Resultattekst
*/
.search-result-copy{
display:block !important;
flex:1 1 auto !important;
min-width:0 !important;
}
.search-result-copy b{
display:block !important;
margin:0 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
color:#222b3e !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.35 !important;
}
.search-result-copy small{
display:block !important;
margin-top:3px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
color:#8e96a7 !important;
font-size:11px !important;
font-weight:450 !important;
line-height:1.35 !important;
}
/*
* Pil
*/
.search-result-arrow{
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 25px !important;
color:#a9b0bd !important;
font-size:17px !important;
transition:
color .14s ease,
transform .14s ease !important;
}
.search-result:hover .search-result-arrow{
color:var(--accent) !important;
transform:translateX(2px) !important;
}
/*
* Ingen treff
*/
.search-empty{
padding:30px 20px !important;
text-align:center !important;
}
.search-empty b{
display:block !important;
color:#30384b !important;
font-size:13px !important;
font-weight:700 !important;
}
.search-empty span{
display:block !important;
margin-top:5px !important;
color:#969eac !important;
font-size:11px !important;
}
/*
* Søker
*/
.search-message{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:76px !important;
gap:10px !important;
color:#81899a !important;
font-size:12px !important;
}
/*
* Spinner
*/
.search-spinner{
display:block !important;
width:15px !important;
height:15px !important;
box-sizing:border-box !important;
border:2px solid #e3e6ed !important;
border-top-color:var(--accent) !important;
border-radius:50% !important;
animation:portalSearchSpin .7s linear infinite !important;
}
/*
* Scrollbar i søkeresultat
*/
.global-search-results::-webkit-scrollbar{
width:7px !important;
}
.global-search-results::-webkit-scrollbar-track{
background:transparent !important;
}
.global-search-results::-webkit-scrollbar-thumb{
background:#d8dce5 !important;
border-radius:10px !important;
}
.global-search-results::-webkit-scrollbar-thumb:hover{
background:#c4c9d4 !important;
}
/*
* Tablet
*/
@media(max-width:1000px){
.global-search{
max-width:500px !important;
margin-right:12px !important;
}
}
/*
* Smal skjerm
*/
@media(max-width:760px){
.topbar{
gap:8px !important;
}
.global-search{
flex:1 1 auto !important;
width:auto !important;
min-width:150px !important;
margin-left:8px !important;
margin-right:8px !important;
}
.global-search-key{
display:none !important;
}
.global-search-results{
position:fixed !important;
top:70px !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-height:70vh !important;
}
}
/*
* Mobil
*/
@media(max-width:520px){
.global-search-box{
height:42px !important;
border-radius:11px !important;
}
.global-search input{
height:38px !important;
font-size:13px !important;
}
.global-search-icon{
width:18px !important;
flex-basis:18px !important;
}
.global-search-icon svg{
width:18px !important;
height:18px !important;
}
}
/* ============================================================
DASHBOARD ATTENTION
============================================================ */
.attention-section{
margin:18px 0 16px;
padding:18px;
background:#fff;
border:1px solid #e5e8ef;
border-radius:15px;
box-shadow:
0 3px 12px rgba(25,35,55,.025);
}
.attention-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:14px;
}
.attention-eyebrow{
display:block;
margin-bottom:4px;
color:var(--accent);
font-size:8px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.attention-header h3{
margin:0;
color:#1f283b;
font-size:15px;
font-weight:750;
}
.attention-header p{
margin:4px 0 0;
color:#959cab;
font-size:9px;
}
.attention-counter{
min-width:29px;
height:29px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
padding:0 8px;
border-radius:9px;
background:#f0edff;
color:var(--accent);
font-size:10px;
font-weight:800;
}
.attention-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:8px;
}
.attention-card{
display:flex;
align-items:center;
min-width:0;
gap:11px;
padding:10px 11px;
background:#fff;
border:1px solid #eceef3;
border-radius:11px;
text-decoration:none;
transition:
border-color .15s ease,
box-shadow .15s ease,
transform .15s ease;
}
.attention-card:hover{
transform:translateY(-1px);
border-color:#dadde6;
box-shadow:
0 6px 16px rgba(30,40,60,.05);
}
.attention-card-icon{
width:36px;
height:36px;
flex:0 0 36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
}
.attention-card-icon svg,
.attention-chevron svg,
.attention-good-icon svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.attention-card.critical{
border-color:#f3dfe2;
}
.attention-card.critical .attention-card-icon{
color:#db4d5c;
background:#fff0f2;
}
.attention-card.warning{
border-color:#f3e8d4;
}
.attention-card.warning .attention-card-icon{
color:#d38a21;
background:#fff6e7;
}
.attention-card.info .attention-card-icon{
color:var(--accent);
background:#f0edff;
}
.attention-card-copy{
min-width:0;
flex:1;
}
.attention-card-copy b,
.attention-card-copy small{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.attention-card-copy b{
color:#30384a;
font-size:10px;
font-weight:700;
}
.attention-card-copy small{
margin-top:3px;
color:#9299a8;
font-size:8px;
}
.attention-chevron{
width:20px;
height:20px;
flex:0 0 20px;
display:flex;
align-items:center;
justify-content:center;
color:#adb4c0;
transition:.15s;
}
.attention-chevron svg{
width:14px;
height:14px;
}
.attention-card:hover .attention-chevron{
color:var(--accent);
transform:translateX(2px);
}
.attention-good{
display:flex;
align-items:center;
gap:11px;
padding:11px 12px;
border:1px solid #dcefe5;
border-radius:11px;
background:#f7fcf9;
}
.attention-good-icon{
width:36px;
height:36px;
flex:0 0 36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
background:#e7f7ed;
color:#35a467;
}
.attention-good b,
.attention-good small{
display:block;
}
.attention-good b{
color:#315b43;
font-size:10px;
}
.attention-good small{
margin-top:3px;
color:#7d9989;
font-size:8px;
}
@media(max-width:850px){
.attention-grid{
grid-template-columns:1fr;
}
}
/* ============================================================
SITE OVERVIEW
============================================================ */
.site-page{
display:flex;
flex-direction:column;
gap:16px;
}
.site-breadcrumb{
display:flex;
align-items:center;
gap:7px;
color:#9aa1af;
font-size:9px;
}
.site-breadcrumb a{
color:#7c8495;
text-decoration:none;
}
.site-breadcrumb a:hover{
color:var(--accent);
}
.site-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 22px;
background:#fff;
border:1px solid #e5e8ef;
border-radius:15px;
}
.site-hero-main{
display:flex;
align-items:center;
gap:15px;
min-width:0;
}
.site-hero-icon{
width:48px;
height:48px;
flex:0 0 48px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:#f0edff;
border-radius:13px;
}
.site-hero-icon svg{
width:23px;
height:23px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.site-eyebrow,
.site-section-eyebrow{
display:block;
margin-bottom:4px;
color:var(--accent);
font-size:8px;
line-height:1;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.site-hero h1{
margin:0;
color:#172033;
font-size:20px;
line-height:1.15;
}
.site-hero p{
margin:5px 0 0;
color:#8c94a4;
font-size:9px;
}
.site-hero-action{
flex:0 0 auto;
display:flex;
align-items:center;
gap:14px;
padding:9px 12px;
color:#31394a;
background:#fff;
border:1px solid #e3e6ed;
border-radius:9px;
box-shadow:0 3px 10px rgba(30,40,60,.04);
font-size:9px;
font-weight:700;
text-decoration:none;
}
.site-hero-action span{
color:var(--accent);
}
.site-stat-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.site-stat{
display:flex;
align-items:center;
gap:11px;
padding:13px 14px;
color:inherit;
background:#fff;
border:1px solid #e6e8ef;
border-radius:12px;
text-decoration:none;
transition:.15s ease;
}
.site-stat:hover{
transform:translateY(-1px);
border-color:#d9dce5;
box-shadow:0 5px 15px rgba(30,40,60,.04);
}
.site-stat-icon{
width:35px;
height:35px;
flex:0 0 35px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:#f0edff;
border-radius:9px;
}
.site-stat-icon svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.site-stat small,
.site-stat b{
display:block;
}
.site-stat small{
margin-bottom:2px;
color:#9299a8;
font-size:8px;
}
.site-stat b{
color:#20283a;
font-size:17px;
}
.site-main-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.site-section{
min-width:0;
padding:16px;
background:#fff;
border:1px solid #e5e8ef;
border-radius:14px;
}
.site-section-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:12px;
}
.site-section-head h2{
margin:0;
color:#20283a;
font-size:14px;
}
.site-section-head > a{
color:#6e7687;
font-size:8px;
font-weight:650;
text-decoration:none;
}
.site-section-head > a:hover{
color:var(--accent);
}
.site-section-count{
min-width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
padding:0 7px;
color:var(--accent);
background:#f0edff;
border-radius:8px;
font-size:9px;
font-weight:800;
}
.site-network-list,
.site-device-list{
display:flex;
flex-direction:column;
}
.site-network-row,
.site-device-row{
min-width:0;
display:flex;
align-items:center;
gap:10px;
padding:9px 4px;
color:inherit;
border-bottom:1px solid #f0f1f4;
text-decoration:none;
}
.site-network-row:last-child,
.site-device-row:last-child{
border-bottom:0;
}
.site-network-row:hover .site-row-copy b,
.site-device-row:hover .site-row-copy b{
color:var(--accent);
}
.site-vlan-id{
width:34px;
height:30px;
flex:0 0 34px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:#f0edff;
border-radius:8px;
font-size:9px;
font-weight:800;
}
.site-device-icon{
width:31px;
height:31px;
flex:0 0 31px;
display:flex;
align-items:center;
justify-content:center;
color:#737d91;
background:#f5f6f9;
border-radius:8px;
}
.site-device-icon svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.site-row-copy{
min-width:0;
flex:1;
}
.site-row-copy b,
.site-row-copy small{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.site-row-copy b{
color:#30384a;
font-size:9px;
font-weight:700;
}
.site-row-copy small{
margin-top:3px;
color:#9aa1af;
font-size:7.5px;
}
.site-row-arrow{
flex:0 0 auto;
color:#b0b6c1;
font-size:10px;
}
.site-device-status{
flex:0 0 auto;
padding:4px 7px;
color:#278858;
background:#e9f8ef;
border-radius:999px;
font-size:7px;
font-weight:700;
}
.site-empty{
padding:18px 10px;
color:#9aa1af;
text-align:center;
font-size:9px;
}
.site-attention{
padding-bottom:14px;
}
.site-attention-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.site-alert{
min-width:0;
display:flex;
align-items:center;
gap:9px;
padding:9px 10px;
color:inherit;
border:1px solid #eceef3;
border-radius:10px;
text-decoration:none;
}
.site-alert-dot{
width:7px;
height:7px;
flex:0 0 7px;
border-radius:50%;
}
.site-alert-critical{
background:#fffafb;
border-color:#f2dfe2;
}
.site-alert-critical .site-alert-dot{
background:#dd5260;
}
.site-alert-warning{
background:#fffdf8;
border-color:#f2e5cf;
}
.site-alert-warning .site-alert-dot{
background:#d78d22;
}
.site-alert-info .site-alert-dot{
background:var(--accent);
}
.site-alert-copy{
min-width:0;
flex:1;
}
.site-alert-copy b,
.site-alert-copy small{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.site-alert-copy b{
color:#30384a;
font-size:9px;
}
.site-alert-copy small{
margin-top:2px;
color:#959cab;
font-size:7.5px;
}
.site-role-strip{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:13px 16px;
background:#fff;
border:1px solid #e5e8ef;
border-radius:12px;
}
.site-role-strip > div:first-child > b{
display:block;
color:#30384a;
font-size:9px;
}
.site-role-items{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:7px;
}
.site-role-items span{
padding:5px 8px;
color:#7c8494;
background:#f5f6f9;
border-radius:7px;
font-size:7.5px;
}
.site-role-items strong{
margin-right:3px;
color:#30384a;
}
.site-compact-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
.site-compact-card{
min-width:0;
display:flex;
align-items:center;
gap:8px;
padding:9px;
color:inherit;
background:#fafbfc;
border:1px solid #eff0f3;
border-radius:9px;
text-decoration:none;
}
.site-compact-card:hover{
border-color:#dedfe5;
}
.site-compact-card > span:nth-child(2){
min-width:0;
flex:1;
}
.site-compact-card b,
.site-compact-card small{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.site-compact-card b{
color:#30384a;
font-size:8.5px;
}
.site-compact-card small{
margin-top:2px;
color:#9aa1af;
font-size:7px;
}
.site-compact-icon{
width:29px;
height:29px;
flex:0 0 29px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:#f0edff;
border-radius:8px;
}
.site-compact-icon svg{
width:14px;
height:14px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.site-project-section{
margin-bottom:4px;
}
.site-project-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.site-project-card{
display:block;
padding:12px;
color:inherit;
background:#fafbfc;
border:1px solid #eceef2;
border-radius:10px;
text-decoration:none;
}
.site-project-card:hover{
border-color:#dcdfe6;
}
.site-project-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.site-project-top > div{
min-width:0;
}
.site-project-top small,
.site-project-top b{
display:block;
}
.site-project-top small{
margin-bottom:3px;
color:#999fad;
font-size:7px;
}
.site-project-top b{
overflow:hidden;
color:#30384a;
font-size:9.5px;
white-space:nowrap;
text-overflow:ellipsis;
}
.site-project-health{
flex:0 0 auto;
padding:4px 7px;
border-radius:999px;
font-size:7px;
font-weight:700;
}
.site-project-health.health-on_track{
color:#278858;
background:#e8f7ee;
}
.site-project-health.health-at_risk{
color:#bd7917;
background:#fff4df;
}
.site-project-health.health-off_track{
color:#c74855;
background:#ffebee;
}
.site-project-meta{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
color:#9299a8;
font-size:7.5px;
}
.site-project-progress{
margin-top:10px;
}
.site-project-progress > div:first-child{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:5px;
color:#9299a8;
font-size:7.5px;
}
.site-project-progress b{
color:#555e70;
}
.site-progress-track{
height:5px;
overflow:hidden;
background:#eceef3;
border-radius:999px;
}
.site-progress-track span{
display:block;
height:100%;
background:var(--accent);
border-radius:999px;
}
@media(max-width:900px){
.site-stat-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.site-main-grid{
grid-template-columns:1fr;
}
.site-project-grid,
.site-attention-grid{
grid-template-columns:1fr;
}
}
@media(max-width:560px){
.site-hero{
align-items:flex-start;
flex-direction:column;
}
.site-stat-grid{
grid-template-columns:1fr 1fr;
}
.site-compact-grid{
grid-template-columns:1fr;
}
.site-role-strip{
align-items:flex-start;
flex-direction:column;
}
.site-role-items{
justify-content:flex-start;
}
}
/* ============================================================
SIDEBAR ACTIVE COLOR FIX
Sørger for at tekst og SVG alltid følger active farge
============================================================ */
.sidebar .nav-link.active,
.sidebar .nav-link.active:visited,
.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:focus {
color: #ffffff !important;
}
.sidebar .nav-link.active .ico {
color: #ffffff !important;
}
.sidebar .nav-link.active .ico svg {
color: #ffffff !important;
stroke: currentColor !important;
}
.sidebar .nav-link.active .ico svg * {
stroke: currentColor !important;
}
/* ============================================================
SIDEBAR ACTIVE STATE
Samme utseende på alle aktive menypunkter
============================================================ */
.sidebar nav a.nav-link.active,
.sidebar .nav-link.active,
.sidebar a.nav-link.active:hover,
.sidebar a.nav-link.active:focus,
.sidebar a.nav-link.active:visited {
background: #725cff !important;
background-color: #725cff !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow:
0 7px 18px rgba(114, 92, 255, .18) !important;
}
.sidebar nav a.nav-link.active .ico,
.sidebar .nav-link.active .ico {
color: #ffffff !important;
}
.sidebar nav a.nav-link.active .ico svg,
.sidebar .nav-link.active .ico svg {
color: #ffffff !important;
stroke: #ffffff !important;
}
.sidebar nav a.nav-link.active .ico svg *,
.sidebar .nav-link.active .ico svg * {
stroke: #ffffff !important;
}
/* Active skal ikke få mørk hover bakgrunn */
.sidebar nav a.nav-link.active:hover,
.sidebar .nav-link.active:hover {
background: #725cff !important;
background-color: #725cff !important;
color: #ffffff !important;
}
/* ============================================================
SITE NETWORK V3
============================================================ */
.site-network-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
margin-bottom:14px;
}
.site-network-summary > div{
padding:8px 9px;
background:#f7f8fa;
border-radius:8px;
}
.site-network-summary small{
display:block;
margin-bottom:2px;
color:#969dac;
font-size:7px;
}
.site-network-summary strong{
display:block;
color:#30384a;
font-size:11px;
}
.site-network-subhead{
margin:7px 4px 3px;
color:#9aa1af;
font-size:7px;
font-weight:800;
letter-spacing:.11em;
text-transform:uppercase;
}
.site-wifi-heading{
margin-top:14px;
}
.site-wifi-list{
display:flex;
flex-direction:column;
}
.site-wifi-row{
min-width:0;
display:flex;
align-items:center;
gap:10px;
padding:9px 4px;
color:inherit;
border-bottom:1px solid #f0f1f4;
text-decoration:none;
}
.site-wifi-row:last-child{
border-bottom:0;
}
.site-wifi-row:hover .site-row-copy b{
color:var(--accent);
}
.site-wifi-icon{
width:34px;
height:30px;
flex:0 0 34px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:#f0edff;
border-radius:8px;
}
.site-wifi-icon svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.site-network-status{
flex:0 0 auto;
padding:4px 7px;
color:#278858;
background:#e9f8ef;
border-radius:999px;
font-size:7px;
font-weight:700;
}
/* SIDEBAR BRAND LOCK
Branding skal være identisk på alle portalsider.
De spesifikke selektorene hindrer lokale templates
fra å overstyre sidebar branding.
*/
.sidebar > .brand {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 0 10px !important;
margin-bottom: 35px !important;
visibility: visible !important;
opacity: 1 !important;
}
.sidebar > .brand > div:last-child {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
}
.sidebar > .brand > div:last-child > strong {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.sidebar > .brand > div:last-child > span {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 3px !important;
padding: 0 !important;
color: #8f97ad !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.sidebar > .brand > .brand-mark {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
display: grid !important;
place-items: center !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.sidebar > .brand > .brand-mark > img {
display: block !important;
width: 40px !important;
height: 40px !important;
object-fit: contain !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ==========================================================
SHYER PROFILE MENU
========================================================== */
.profile-menu {
position: relative;
flex: 0 0 auto;
}
.profile-menu-button {
appearance: none;
border: 0;
font: inherit;
cursor: pointer;
}
.profile-menu-button:hover {
background: #f7f7fb;
}
.profile-menu-button:focus-visible {
outline: 3px solid rgba(105, 87, 255, .16);
outline-offset: 2px;
}
.profile-menu-chevron {
width: 16px;
height: 16px;
margin-left: 7px;
fill: none;
stroke: #8993a5;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .18s ease;
}
.profile-menu.open .profile-menu-chevron {
transform: rotate(180deg);
}
.profile-dropdown {
position: absolute;
z-index: 1000;
top: calc(100% + 12px);
right: 0;
width: 285px;
padding: 8px;
border: 1px solid #e5e8ef;
border-radius: 16px;
background: #fff;
box-shadow:
0 18px 50px rgba(24, 34, 56, .16);
opacity: 0;
visibility: hidden;
transform: translateY(-7px);
transition:
opacity .15s ease,
transform .15s ease,
visibility .15s ease;
}
.profile-menu.open .profile-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.profile-dropdown-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
}
.profile-dropdown-head > span {
width: 39px;
height: 39px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 11px;
background: var(--accent);
color: #fff;
font-size: 14px;
font-weight: 800;
}
.profile-dropdown-head div {
min-width: 0;
}
.profile-dropdown-head b,
.profile-dropdown-head small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-dropdown-head b {
color: #20293b;
font-size: 13px;
}
.profile-dropdown-head small {
margin-top: 3px;
color: #8a94a7;
font-size: 11px;
}
.profile-dropdown-divider {
height: 1px;
margin: 5px 7px;
background: #edf0f4;
}
.profile-dropdown-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 11px;
border-radius: 10px;
color: #313b4f;
text-decoration: none;
transition:
background .12s ease,
color .12s ease;
}
.profile-dropdown-link:hover {
background: #f7f7fb;
color: var(--accent);
}
.profile-dropdown-link svg {
width: 19px;
height: 19px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.profile-dropdown-link span {
min-width: 0;
}
.profile-dropdown-link b,
.profile-dropdown-link small {
display: block;
}
.profile-dropdown-link b {
font-size: 12px;
font-weight: 700;
}
.profile-dropdown-link small {
margin-top: 2px;
color: #929bad;
font-size: 10px;
}
.profile-dropdown-link.logout-link {
color: #b42318;
}
.profile-dropdown-link.logout-link:hover {
background: #fff5f4;
color: #b42318;
}
@media (max-width: 700px) {
.profile-dropdown {
position: fixed;
top: 70px;
right: 12px;
left: 12px;
width: auto;
}
.profile-menu-button > div {
display: none;
}
}
/* ==========================================================
SHYER PROFILE MENU HARD FIX
Isolert fra øvrige globale portalregler
========================================================== */
.topbar .profile-menu {
position: relative !important;
display: block !important;
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
}
/* Knappen oppe til høyre */
.topbar .profile-menu > .profile-menu-button {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 7px 10px !important;
appearance: none !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: transparent !important;
box-shadow: none !important;
color: #192033 !important;
font-family: inherit !important;
text-align: left !important;
cursor: pointer !important;
}
.topbar .profile-menu > .profile-menu-button:hover {
background: #f7f7fb !important;
border-color: #eceef3 !important;
}
/* Avatar */
.topbar
.profile-menu
> .profile-menu-button
> span {
display: grid !important;
place-items: center !important;
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
background: #eeeafe !important;
color: var(--accent) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* Navn */
.topbar
.profile-menu
> .profile-menu-button
> div {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.topbar
.profile-menu
> .profile-menu-button
> div
> b {
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #20293b !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
.topbar
.profile-menu
> .profile-menu-button
> div
> small {
display: block !important;
margin: 2px 0 0 !important;
padding: 0 !important;
color: #98a0b1 !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* Liten pil */
.topbar
.profile-menu
> .profile-menu-button
> svg.profile-menu-chevron {
display: block !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
max-height: 14px !important;
margin: 0 0 0 2px !important;
padding: 0 !important;
overflow: visible !important;
fill: none !important;
stroke: #8d96a8 !important;
stroke-width: 2 !important;
transition: transform .16s ease !important;
}
.topbar
.profile-menu.open
> .profile-menu-button
> svg.profile-menu-chevron {
transform: rotate(180deg) !important;
}
/* Dropdown */
.topbar
.profile-menu
> .profile-dropdown {
position: absolute !important;
z-index: 99999 !important;
top: calc(100% + 10px) !important;
right: 0 !important;
left: auto !important;
display: block !important;
width: 285px !important;
min-width: 285px !important;
max-width: 285px !important;
height: auto !important;
margin: 0 !important;
padding: 8px !important;
overflow: hidden !important;
border: 1px solid #e5e8ef !important;
border-radius: 15px !important;
background: #ffffff !important;
box-shadow:
0 18px 50px rgba(24, 34, 56, .16),
0 3px 10px rgba(24, 34, 56, .06) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-6px) !important;
transition:
opacity .15s ease,
transform .15s ease,
visibility .15s ease !important;
}
.topbar
.profile-menu.open
> .profile-dropdown {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* Dropdown header */
.topbar
.profile-menu
.profile-dropdown-head {
display: flex !important;
align-items: center !important;
gap: 11px !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 11px !important;
}
.topbar
.profile-menu
.profile-dropdown-head
> span {
display: grid !important;
place-items: center !important;
flex: 0 0 38px !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 11px !important;
background: var(--accent) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.topbar
.profile-menu
.profile-dropdown-head
> div {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.topbar
.profile-menu
.profile-dropdown-head
b {
display: block !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: #20293b !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.topbar
.profile-menu
.profile-dropdown-head
small {
display: block !important;
margin: 3px 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: #929bad !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Separator */
.topbar
.profile-menu
.profile-dropdown-divider {
display: block !important;
width: auto !important;
height: 1px !important;
margin: 5px 7px !important;
padding: 0 !important;
background: #edf0f4 !important;
}
/* Menyvalg */
.topbar
.profile-menu
a.profile-dropdown-link {
display: flex !important;
align-items: center !important;
gap: 11px !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 10px 11px !important;
border: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: #313b4f !important;
text-decoration: none !important;
}
.topbar
.profile-menu
a.profile-dropdown-link:hover {
background: #f6f5ff !important;
color: var(--accent) !important;
}
/* Dette er den viktige SVG låsen */
.topbar
.profile-menu
a.profile-dropdown-link
> svg {
display: block !important;
flex: 0 0 19px !important;
width: 19px !important;
min-width: 19px !important;
max-width: 19px !important;
height: 19px !important;
min-height: 19px !important;
max-height: 19px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Teksten ved siden av ikon */
.topbar
.profile-menu
a.profile-dropdown-link
> span {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.topbar
.profile-menu
a.profile-dropdown-link
> span
> b {
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.topbar
.profile-menu
a.profile-dropdown-link
> span
> small {
display: block !important;
margin: 2px 0 0 !important;
padding: 0 !important;
color: #929bad !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
/* Logout */
.topbar
.profile-menu
a.profile-dropdown-link.logout-link {
color: #b42318 !important;
}
.topbar
.profile-menu
a.profile-dropdown-link.logout-link:hover {
background: #fff5f4 !important;
color: #b42318 !important;
}
/* Mobil */
@media (max-width: 700px) {
.topbar
.profile-menu
> .profile-menu-button
> div {
display: none !important;
}
.topbar
.profile-menu
> .profile-dropdown {
position: fixed !important;
top: 70px !important;
right: 12px !important;
left: auto !important;
width: min(285px, calc(100vw - 24px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 24px) !important;
}
}
/* ==========================================================
ADMIN MFA
========================================================== */
.admin-mfa-card {
margin-top: 20px;
padding: 22px;
border: 1px solid #e7e9ef;
border-radius: 16px;
background: #fff;
}
.admin-mfa-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.admin-mfa-toolbar h2 {
margin: 0;
font-size: 17px;
}
.admin-mfa-toolbar p {
margin: 4px 0 0;
color: #8c95a6;
font-size: 12px;
}
.admin-mfa-search {
width: 300px;
max-width: 100%;
padding: 10px 13px;
border: 1px solid #dfe3ea;
border-radius: 10px;
background: #fff;
font: inherit;
outline: none;
}
.admin-mfa-search:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(105,87,255,.10);
}
.admin-mfa-user {
display: grid;
grid-template-columns: 42px minmax(220px,1fr) 170px auto;
align-items: center;
gap: 14px;
padding: 12px 4px;
border-top: 1px solid #eef0f4;
}
.admin-mfa-avatar {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: #eeeafe;
color: var(--accent);
font-size: 13px;
font-weight: 800;
}
.admin-mfa-identity strong {
display: block;
color: #252e40;
font-size: 13px;
}
.admin-mfa-identity span {
display: block;
margin-top: 3px;
color: #9199a9;
font-size: 11px;
}
.mfa-pill {
display: inline-flex;
align-items: center;
padding: 5px 9px;
border-radius: 999px;
background: #f0f2f5;
color: #697386;
font-size: 10px;
font-weight: 700;
}
.mfa-pill-ok {
background: #ecfdf3;
color: #067647;
}
.mfa-pill-warn {
background: #fff8e6;
color: #9a6700;
}
.mfa-pill-danger {
background: #fff0ee;
color: #b42318;
}
.admin-mfa-reset-button {
padding: 8px 11px;
border: 1px solid #f0c7c2;
border-radius: 9px;
background: #fff;
color: #b42318;
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.admin-mfa-reset-button:hover {
background: #fff5f4;
}
.admin-mfa-success {
margin-top: 18px;
padding: 12px 15px;
border: 1px solid #abefc6;
border-radius: 11px;
background: #ecfdf3;
color: #067647;
font-size: 12px;
font-weight: 600;
}
.admin-mfa-audit-scroll {
overflow-x: auto;
}
.admin-mfa-audit {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.admin-mfa-audit th {
padding: 10px;
border-bottom: 1px solid #e8ebf0;
color: #7c8597;
text-align: left;
font-size: 10px;
text-transform: uppercase;
}
.admin-mfa-audit td {
padding: 11px 10px;
border-bottom: 1px solid #f0f1f4;
color: #394256;
}
.admin-mfa-empty {
padding: 20px 0;
color: #929aaa;
font-size: 12px;
}
.admin-mfa-modal-backdrop {
position: fixed;
z-index: 200000;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
background: rgba(15,23,42,.48);
backdrop-filter: blur(3px);
}
.admin-mfa-modal-backdrop[hidden] {
display: none !important;
}
.admin-mfa-modal {
width: 440px;
max-width: 100%;
padding: 26px;
border-radius: 17px;
background: #fff;
box-shadow: 0 25px 80px rgba(15,23,42,.25);
}
.admin-mfa-danger-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 15px;
border-radius: 12px;
background: #fff0ee;
color: #b42318;
font-size: 20px;
font-weight: 800;
}
.admin-mfa-modal h2 {
margin: 0 0 10px;
color: #20293b;
font-size: 19px;
}
.admin-mfa-modal p {
color: #4d576b;
font-size: 12px;
line-height: 1.6;
}
.admin-mfa-muted {
color: #8a93a5 !important;
}
.admin-mfa-modal label {
display: block;
margin: 18px 0 7px;
color: #424b5e;
font-size: 11px;
font-weight: 700;
}
.admin-mfa-modal select {
width: 100%;
padding: 10px 12px;
border: 1px solid #dfe3ea;
border-radius: 10px;
background: #fff;
font: inherit;
}
.admin-mfa-modal-actions {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 22px;
}
.admin-mfa-cancel,
.admin-mfa-confirm {
padding: 9px 13px;
border-radius: 9px;
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.admin-mfa-cancel {
border: 1px solid #dfe3ea;
background: #fff;
color: #4c566a;
}
.admin-mfa-confirm {
border: 1px solid #b42318;
background: #b42318;
color: #fff;
}
@media (max-width: 800px) {
.admin-mfa-toolbar {
align-items: stretch;
flex-direction: column;
}
.admin-mfa-search {
width: 100%;
}
.admin-mfa-user {
grid-template-columns: 42px 1fr;
}
.admin-mfa-status {
grid-column: 2;
}
.admin-mfa-user > div:last-child {
grid-column: 2;
}
}
/* Admin MFA profile card icon */
.profile-admin-icon {
display: grid !important;
place-items: center !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
overflow: hidden !important;
border-radius: 13px !important;
background: #f1efff !important;
}
.profile-admin-icon svg {
display: block !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
fill: none !important;
stroke: var(--accent) !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Profile admin section final layout */
.profile-admin-section {
width: 100% !important;
max-width: 1050px !important;
margin: 28px auto 0 !important;
}
.profile-admin-head {
margin: 0 0 12px !important;
}
.profile-admin-head h2 {
margin: 5px 0 4px !important;
}
.profile-admin-card {
box-sizing: border-box !important;
width: 100% !important;
min-height: 92px !important;
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 18px !important;
padding: 20px 22px !important;
border: 1px solid #e1e5ec !important;
border-radius: 16px !important;
background: #fff !important;
box-shadow:
0 10px 30px rgba(15,23,42,.035) !important;
}
.profile-admin-icon {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
}
.profile-admin-copy {
min-width: 0 !important;
}
.profile-admin-copy strong {
display: block !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
.profile-admin-copy span {
display: block !important;
margin-top: 4px !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
.profile-admin-card .profile-action {
justify-self: end !important;
margin: 0 !important;
white-space: nowrap !important;
}
@media (max-width: 700px) {
.profile-admin-section {
width: 100% !important;
}
.profile-admin-card {
grid-template-columns: 46px 1fr !important;
}
.profile-admin-card .profile-action {
grid-column: 2 !important;
justify-self: start !important;
}
}
/* MFA offer icons */
.method-icon {
display: grid !important;
place-items: center !important;
overflow: hidden !important;
}
.method-icon svg {
display: block !important;
width: 23px !important;
height: 23px !important;
min-width: 23px !important;
min-height: 23px !important;
max-width: 23px !important;
max-height: 23px !important;
fill: none !important;
stroke: #725cff !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Final centering for MFA icons */
.mfa-icon,
.choice-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
}
.mfa-icon svg,
.choice-icon svg {
display: block !important;
position: static !important;
margin: auto !important;
flex: 0 0 auto !important;
}