/* VoIPStarr Data Portaal 1.6.3
   Final customer-facing visual layer. Loaded after legacy/mobile styles. */
:root{
  --v160-navy:#0b3654;
  --v160-blue:#0b74b7;
  --v160-blue-dark:#075985;
  --v160-cyan:#26a7c7;
  --v160-bg:#f2f6f9;
  --v160-card:#ffffff;
  --v160-border:#dbe5eb;
  --v160-text:#102a43;
  --v160-muted:#60758a;
  --v160-success:#14845f;
  --v160-danger:#b42318;
  --v160-shadow:0 12px 32px rgba(16,42,67,.07);
}
html,body{min-height:100%;background:var(--v160-bg)!important;color:var(--v160-text)!important}
body{font-family:Arial,Helvetica,sans-serif!important}

/* Desktop shell */
.page-shell{display:flex!important;min-height:100vh!important;background:var(--v160-bg)!important}
.page-shell>.sidebar{
  position:fixed!important;inset:0 auto 0 0!important;width:270px!important;height:100vh!important;
  display:flex!important;flex-direction:column!important;gap:18px!important;
  padding:22px 18px 18px!important;overflow-y:auto!important;overflow-x:hidden!important;
  background:#fff!important;border-right:1px solid var(--v160-border)!important;
  box-shadow:8px 0 30px rgba(16,42,67,.045)!important;z-index:50!important;
}
.page-shell>.sidebar>.logo{
  display:block!important;width:190px!important;max-width:190px!important;height:auto!important;max-height:68px!important;
  margin:2px auto 8px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;object-fit:contain!important;
}
.page-shell>.sidebar .nav{display:grid!important;gap:7px!important;margin:0!important}
.page-shell>.sidebar .nav a{
  min-height:48px!important;padding:0 15px!important;border:1px solid transparent!important;border-radius:13px!important;
  color:#29465f!important;background:transparent!important;box-shadow:none!important;font-size:15px!important;font-weight:700!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease!important;
}
.page-shell>.sidebar .nav a:hover{background:#f0f6fa!important;border-color:#dce8ee!important;color:var(--v160-blue-dark)!important;transform:translateX(2px)!important}
.page-shell>.sidebar .nav a.active{
  background:linear-gradient(135deg,var(--v160-blue-dark),var(--v160-blue))!important;
  border-color:transparent!important;color:#fff!important;box-shadow:0 10px 24px rgba(11,116,183,.19)!important;
}
.page-shell>.sidebar .nav-ic{width:20px!important;height:20px!important;flex:0 0 20px!important;background-size:20px 20px!important}
.page-shell>.sidebar .side-user{
  margin-top:auto!important;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;
  padding:12px!important;border:1px solid var(--v160-border)!important;border-radius:16px!important;
  background:#f7fafc!important;color:var(--v160-text)!important;box-shadow:none!important;
}
.page-shell>.sidebar .avatar-upload-form{margin:0!important;grid-row:auto!important}
.page-shell>.sidebar .side-avatar,.page-shell>.sidebar .avatar-button{
  width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;margin:0!important;
  border:1px solid #cfe0e8!important;background:#e9f3f8!important;box-shadow:none!important;
}
.page-shell>.sidebar .side-user .small{color:var(--v160-muted)!important;font-size:11px!important}
.page-shell>.sidebar .side-user .user-name{font-size:15px!important;line-height:1.2!important;color:var(--v160-text)!important;overflow-wrap:anywhere!important}
.page-shell>.sidebar .admin-as-customer{display:none!important}
.page-shell>.sidebar .side-actions{display:grid!important;gap:8px!important;margin:0!important}
.page-shell>.sidebar .side-actions .btn{
  height:42px!important;border-radius:12px!important;background:#fff!important;border:1px solid var(--v160-border)!important;
  color:#29465f!important;box-shadow:none!important;font-size:14px!important;
}
.page-shell>.sidebar .side-actions .btn:hover{background:#f1f6f9!important;color:var(--v160-blue-dark)!important}
.page-shell>.sidebar .portal-version{margin:3px 0 0!important;padding:0!important;border:0!important;background:transparent!important;color:#8799a9!important;font-size:10px!important}

.main,.settings-main{
  margin-left:270px!important;width:calc(100% - 270px)!important;min-width:0!important;max-width:none!important;min-height:100vh!important;
  padding:28px 30px 38px!important;background:var(--v160-bg)!important;
}
.settings-main{padding:0!important}
.settings-wrap{max-width:1240px!important;width:100%!important;margin:0 auto!important;padding:28px 30px 40px!important}

/* Header / hero */
.main>.hero-card,.settings-hero{
  position:relative!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  min-height:118px!important;margin:0 0 20px!important;padding:24px 28px!important;border:0!important;border-radius:20px!important;
  background:linear-gradient(120deg,#0b456b 0%,#0b74b7 62%,#27a7c6 100%)!important;
  color:#fff!important;box-shadow:0 14px 32px rgba(11,82,126,.16)!important;
}
.main>.hero-card:after,.settings-hero:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-130px;border-radius:50%;background:rgba(255,255,255,.11);pointer-events:none}
.main>.hero-card .hero-greeting,.main>.hero-card h1,.settings-hero .hero-greeting,.settings-hero h1,.settings-hero p{position:relative;z-index:1;color:#fff!important;text-shadow:none!important}
.main>.hero-card .hero-greeting,.settings-hero .hero-greeting{font-size:28px!important;line-height:1.15!important;letter-spacing:-.02em!important}
.settings-hero h1{font-size:25px!important;margin:5px 0 5px!important}
.settings-hero p{font-size:14px!important;line-height:1.55!important;margin:0!important;opacity:.92}
.main>.hero-card .top-actions{position:relative;z-index:2!important}
.main>.hero-card .btn,.main>.hero-card select{
  background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.82)!important;color:#16425f!important;box-shadow:none!important;
}

/* Dashboard cards */
.cards{gap:16px!important}
.dashboard-layout>.cards .stat-card,.main>.cards .stat-card{
  min-height:132px!important;padding:20px!important;border:1px solid var(--v160-border)!important;border-radius:18px!important;
  background:#fff!important;box-shadow:var(--v160-shadow)!important;overflow:hidden!important;
}
.dashboard-layout>.cards .stat-card:before,.main>.cards .stat-card:before{left:0!important;right:0!important;top:0!important;bottom:auto!important;width:auto!important;height:4px!important;background:var(--v160-blue)!important}
.dashboard-layout>.cards .stat-card:nth-child(2):before,.main>.cards .stat-card:nth-child(2):before{background:#1c9a70!important}
.dashboard-layout>.cards .stat-card:nth-child(3):before,.main>.cards .stat-card:nth-child(3):before{background:#7568d9!important}
.dashboard-layout>.cards .stat-card:nth-child(4):before,.main>.cards .stat-card:nth-child(4):before{background:#d58b26!important}
.stat-label{color:var(--v160-muted)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.stat-value{margin-top:11px!important;color:#103c5b!important;font-size:30px!important;line-height:1.05!important}
.stat-sub{color:#7b8f9f!important}
.card,.table-wrap{
  border:1px solid var(--v160-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--v160-shadow)!important;
}
.card{padding:20px!important}
.card-header h3{font-size:18px!important;color:#173f59!important}
.table-wrap{overflow:hidden!important}
.table-wrap th{background:#edf4f7!important;color:#526b7d!important;font-size:11px!important;letter-spacing:.045em!important}
.table-wrap td{color:#203a50!important}
.table-wrap tbody tr:nth-child(even){background:#fbfdfe!important}
.table-wrap tbody tr:hover{background:#f0f7fa!important}
.btn{border-radius:12px!important;box-shadow:none!important}
.btn.primary,.login-btn{background:var(--v160-blue)!important;border-color:var(--v160-blue)!important;color:#fff!important;box-shadow:none!important}
.btn.primary:hover,.login-btn:hover{background:var(--v160-blue-dark)!important}
.search-box{border-color:var(--v160-border)!important;box-shadow:none!important}

/* Settings */
.settings-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
.settings-card{
  min-width:0!important;padding:24px!important;border:1px solid var(--v160-border)!important;border-top:1px solid var(--v160-border)!important;
  border-radius:18px!important;background:#fff!important;box-shadow:var(--v160-shadow)!important;
}
.settings-card.full{grid-column:1/-1!important}
.settings-card h3{margin:2px 0 5px!important;color:#173f59!important;font-size:20px!important;line-height:1.25!important}
.settings-card .small{color:var(--v160-muted)!important;line-height:1.55!important}
.settings-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.settings-kicker{font-size:11px;line-height:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v160-blue)!important}
.settings-status{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:800}
.settings-status.is-on{background:#e8f7f1;color:var(--v160-success);border:1px solid #bfe7d7}
.settings-status.is-off{background:#f2f4f6;color:#64748b;border:1px solid #dde3e8}
.settings-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin-top:18px!important}
.settings-form>.full,.settings-form>.setting-toggle-row,.settings-form>.security-email-line,.settings-form>.settings-actions{grid-column:1/-1!important}
.settings-form .field{margin:0!important}
.settings-form .field label{font-weight:700!important;color:#526b7d!important}
.settings-card input[type=text],.settings-card input[type=email],.settings-card input[type=password],.settings-card select{
  height:48px!important;border:1px solid #cfdde5!important;border-radius:12px!important;background:#fff!important;color:var(--v160-text)!important;
}
.settings-card input:focus,.settings-card select:focus{border-color:#4aa5cf!important;box-shadow:0 0 0 3px rgba(36,146,194,.12)!important}
.settings-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:2px!important}
.setting-toggle-row{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
  padding:15px 16px!important;border:1px solid #d8e4ea!important;border-radius:14px!important;background:#f8fbfc!important;cursor:pointer!important;
}
.setting-toggle-row>span:first-child{display:grid!important;gap:3px!important}
.setting-toggle-row strong{font-size:14px!important;color:#173f59!important}
.setting-toggle-row small{font-size:12px!important;line-height:1.45!important;color:var(--v160-muted)!important}
.setting-switch{position:relative!important;display:block!important;width:48px!important;height:28px!important;flex:0 0 48px!important}
.setting-switch input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.setting-switch i{position:absolute!important;inset:0!important;border-radius:999px!important;background:#cbd5dc!important;transition:.18s ease!important;box-shadow:inset 0 0 0 1px rgba(16,42,67,.08)!important}
.setting-switch i:after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(16,42,67,.22);transition:.18s ease}
.setting-switch input:checked+i{background:#1488bd!important}
.setting-switch input:checked+i:after{transform:translateX(20px)!important}
.twofa-choice-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;margin-top:8px!important}
.twofa-choice{
  display:flex!important;align-items:flex-start!important;gap:11px!important;min-height:92px!important;padding:14px!important;
  border:1px solid #d8e4ea!important;border-radius:13px!important;background:#fff!important;cursor:pointer!important;
}
.twofa-choice:hover{border-color:#8fc5dc!important;background:#f7fbfd!important}
.twofa-choice input{width:17px!important;height:17px!important;min-width:17px!important;margin:2px 0 0!important;accent-color:var(--v160-blue)!important}
.twofa-choice span{display:grid!important;gap:5px!important}
.twofa-choice strong{font-size:14px!important;color:#173f59!important}
.twofa-choice small{font-size:12px!important;line-height:1.45!important;color:var(--v160-muted)!important}
.twofa-choice:has(input:checked){border-color:#4da7cf!important;background:#edf8fc!important;box-shadow:0 0 0 2px rgba(36,146,194,.10)!important}
#twofaMethods{transition:opacity .15s ease!important}
#twofaMethods.is-disabled{opacity:.45!important;filter:grayscale(.2)!important}
.security-email-line{display:flex!important;justify-content:space-between!important;gap:16px!important;padding:13px 15px!important;border-radius:12px!important;background:#f4f8fa!important;border:1px solid #dce7ec!important;font-size:13px!important}
.security-email-line span{color:var(--v160-muted)!important}.security-email-line strong{color:#173f59!important;overflow-wrap:anywhere!important}
.helper-line{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:16px!important}
.helper-pill{padding:8px 11px!important;border-radius:999px!important;background:#edf7fb!important;border:1px solid #cce6f0!important;color:#176489!important;font-size:12px!important;font-weight:700!important}
.flash{margin:0 0 16px!important}.flash-item{border-radius:12px!important;background:#eaf6fb!important;border-color:#c9e6f1!important;color:#0b638d!important}

/* Login / activation / 2FA */
.login-shell{grid-template-columns:minmax(390px,460px) 1fr!important;background:#edf3f7!important}
.login-left{padding:44px!important;background:#fff!important}
.login-card{max-width:340px!important}
.login-logo{width:210px!important;max-width:100%!important;height:auto!important;margin:0 0 34px!important;padding:0!important;background:transparent!important}
.login-title{font-size:38px!important;color:#173f59!important}
.login-sub{color:var(--v160-muted)!important}
.login-right{background:linear-gradient(135deg,#e8f2f7,#d9eaf2)!important}
.login-security-panel{background:linear-gradient(135deg,#0b456b,#0b74b7)!important}
.auth-page{background:#edf3f7!important}.auth-card-simple{border:1px solid var(--v160-border)!important;box-shadow:var(--v160-shadow)!important}

/* Responsive */
@media(max-width:1150px){
  .page-shell{display:block!important}
  .page-shell>.sidebar{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:14px 16px!important;border-right:0!important;border-bottom:1px solid var(--v160-border)!important;box-shadow:none!important;gap:10px!important}
  .page-shell>.sidebar>.logo{width:160px!important;max-width:160px!important;margin:0 auto 4px!important}
  .page-shell>.sidebar .nav{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .page-shell>.sidebar .nav a{justify-content:center!important;padding:0 10px!important}
  .page-shell>.sidebar .side-user,.page-shell>.sidebar .side-actions{display:none!important}
  .main,.settings-main{margin-left:0!important;width:100%!important;min-height:auto!important}
  .main{padding:20px 18px 28px!important}.settings-wrap{padding:20px 18px 30px!important}
}
@media(max-width:900px){
  .settings-grid{grid-template-columns:1fr!important}.settings-card.full{grid-column:auto!important}
  .settings-form{grid-template-columns:1fr!important}.settings-form>*{grid-column:auto!important}
  .twofa-choice-grid{grid-template-columns:1fr!important}
  .main>.hero-card,.settings-hero{align-items:flex-start!important;flex-direction:column!important;min-height:0!important;padding:22px!important}
  .main>.hero-card .hero-greeting,.settings-hero .hero-greeting{font-size:24px!important}
}
@media(max-width:640px){
  .page-shell>.sidebar .nav{grid-template-columns:1fr!important}
  .page-shell>.sidebar .nav a{justify-content:flex-start!important}
  .main{padding:16px 12px 24px!important}.settings-wrap{padding:16px 12px 24px!important}
  .dashboard-layout>.cards,.main>.cards{grid-template-columns:1fr!important}
  .settings-card{padding:18px!important}
  .setting-toggle-row{align-items:flex-start!important}
  .security-email-line{flex-direction:column!important;gap:5px!important}
  .settings-actions .btn{width:100%!important}
  .login-shell{grid-template-columns:1fr!important}.login-left{padding:28px 20px!important}.login-right{display:none!important}
}

/* v1.6.1: settings page uses the exact same available width as the dashboard. */
.settings-wrap{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:28px 30px 38px!important;
}
.report-toggle-monthly{margin-top:14px!important}
.report-email-field{margin-top:12px!important}
@media(max-width:1024px){
  .settings-wrap{padding:18px 16px 28px!important}
}

/* v1.6.2 – compacte dashboardtegels */
.dashboard-layout>.cards .stat-card,.main>.cards .stat-card{
  min-height:96px!important;
  padding:15px 18px!important;
}
.dashboard-layout>.cards .stat-card:before,.main>.cards .stat-card:before{
  height:3px!important;
}
.stat-label{
  font-size:12px!important;
  line-height:17px!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.stat-value{
  margin-top:5px!important;
  font-size:28px!important;
  line-height:1.05!important;
}
.stat-sub{
  margin-top:4px!important;
  font-size:11px!important;
  line-height:16px!important;
}
@media (max-width:900px){
  .dashboard-layout>.cards .stat-card,.main>.cards .stat-card{min-height:88px!important;padding:14px!important}
  .stat-value{font-size:25px!important}
}