*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
  background:var(--v9-bg);
  color:var(--v9-ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  font-size:14px;
}

button,
input,
select,
textarea{
  font:inherit;
}

/* ==========================================================
   APP SHELL
   ========================================================== */

#v9App{
  min-height:100vh;
  background:var(--v9-bg);
}

.v9-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--v9-sidebar-width) minmax(0,1fr);
  transition:grid-template-columns .2s ease;
}

.v9-shell.sidebar-expanded{
  grid-template-columns:var(--v9-sidebar-expanded) minmax(0,1fr);
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.v9-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  background:#fff;
  border-right:1px solid var(--v9-line);
  display:flex;
  flex-direction:column;
  overflow:visible;
  z-index:20;
}

.v9-sidebar-brand{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 10px;
  border-bottom:1px solid var(--v9-line-soft);
}

.v9-brand-mark{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--v9-navy);
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:var(--v9-shadow-sm);
}

.v9-brand-text{
  display:none;
}

.sidebar-expanded .v9-sidebar-brand{
  justify-content:flex-start;
  gap:10px;
  padding-left:16px;
}

.sidebar-expanded .v9-brand-text{
  display:grid;
  line-height:1.05;
}

.v9-brand-text strong{
  font-size:15px;
  letter-spacing:.03em;
  color:var(--v9-navy);
}

.v9-brand-text small{
  margin-top:3px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--v9-gold);
  font-weight:800;
}

.v9-nav-wrap{
  flex:1;
  overflow-y:auto;
  padding:10px 8px 18px;
  scrollbar-width:thin;
}

.v9-nav-group{
  margin:15px 0 6px;
  padding:0 8px;
  color:#9aa9b7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}

.sidebar-expanded .v9-nav-group{
  text-align:left;
}

.v9-nav{
  position:relative;
  width:100%;
  min-height:48px;
  border:0;
  background:transparent;
  color:#5f7589;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
  padding:8px 10px;
  margin:2px 0;
  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.v9-nav:hover{
  background:#f1f5f8;
  color:var(--v9-navy);
}

.v9-nav.active{
  background:#edf4f9;
  color:var(--v9-navy);
  font-weight:800;
}

.v9-nav.active::before{
  content:"";
  position:absolute;
  left:-8px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--v9-gold);
}

.v9-nav-icon{
  width:30px;
  min-width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  line-height:1;
  color:currentColor;
}

.v9-nav > span:last-child{
  display:none;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-expanded .v9-nav{
  justify-content:flex-start;
}

.sidebar-expanded .v9-nav > span:last-child{
  display:block;
}

/* Tooltip only when sidebar is compact */

.v9-nav::after{
  content:attr(data-route);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--v9-navy-dark);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:.14s ease;
  box-shadow:0 7px 20px rgba(5,35,57,.18);
  z-index:1000;
}

.v9-nav:hover::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

.sidebar-expanded .v9-nav::after{
  display:none;
}

/* ==========================================================
   MAIN AREA
   ========================================================== */

.v9-main{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.v9-topbar{
  min-height:66px;
  background:#fff;
  border-bottom:1px solid var(--v9-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 20px;
  position:sticky;
  top:0;
  z-index:15;
}

.v9-topbar-left,
.v9-topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.v9-sidebar-toggle{
  width:38px;
  height:38px;
  border:1px solid var(--v9-line);
  border-radius:9px;
  background:#fff;
  color:var(--v9-navy);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.v9-sidebar-toggle:hover{
  background:#f5f8fb;
}

.v9-product-title{
  display:grid;
  line-height:1.05;
}

.v9-product-title strong{
  font-size:15px;
  letter-spacing:.025em;
  color:var(--v9-navy);
}

.v9-product-title small{
  margin-top:3px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--v9-gold);
}

.v9-top-org{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:var(--v9-navy);
}

.v9-global-search{
  height:38px;
  min-width:220px;
  border:1px solid var(--v9-line);
  border-radius:9px;
  padding:0 12px;
  background:#f9fbfc;
  outline:none;
}

.v9-global-search:focus{
  border-color:#aec3d4;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,54,88,.06);
}

.v9-user{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.v9-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--v9-navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.v9-user-meta{
  display:grid;
  min-width:0;
}

.v9-user-meta strong{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.v9-user-meta small{
  font-size:10px;
  color:var(--v9-muted);
}

.v9-workspace{
  width:100%;
  padding:22px;
  min-width:0;
}

/* ==========================================================
   COMMON UI
   ========================================================== */

.v9-card{
  background:#fff;
  border:1px solid var(--v9-line);
  border-radius:var(--v9-radius);
  box-shadow:var(--v9-shadow-sm);
}

.v9-card-head{
  min-height:48px;
  padding:13px 15px;
  border-bottom:1px solid var(--v9-line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.v9-card-head h3{
  margin:0;
  font-size:14px;
  color:var(--v9-navy);
}

.v9-card-head small{
  color:var(--v9-muted);
}

.v9-card-body{
  padding:15px;
}

.v9-btn{
  min-height:36px;
  padding:0 13px;
  border:1px solid var(--v9-line);
  border-radius:8px;
  background:#fff;
  color:var(--v9-navy);
  font-weight:700;
  cursor:pointer;
}

.v9-btn:hover{
  background:#f7f9fb;
}

.v9-btn-primary{
  background:var(--v9-navy);
  color:#fff;
  border-color:var(--v9-navy);
}

.v9-btn-primary:hover{
  background:var(--v9-navy-dark);
}

.v9-btn-secondary{
  background:#fff;
}

.v9-empty{
  padding:28px;
  text-align:center;
  color:var(--v9-muted);
}

#v9Toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  background:var(--v9-navy-dark);
  color:#fff;
  padding:11px 14px;
  border-radius:9px;
  box-shadow:var(--v9-shadow);
}

[hidden]{
  display:none !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px){

  .v9-shell,
  .v9-shell.sidebar-expanded{
    grid-template-columns:64px minmax(0,1fr);
  }

  .v9-sidebar{
    width:64px;
  }

  .v9-sidebar-brand{
    padding:10px;
  }

  .v9-brand-mark{
    width:38px;
    height:38px;
  }

  .v9-brand-text,
  .sidebar-expanded .v9-brand-text{
    display:none;
  }

  .v9-nav{
    padding:7px;
  }

  .v9-nav > span:last-child,
  .sidebar-expanded .v9-nav > span:last-child{
    display:none;
  }

  .v9-nav-group{
    text-align:center;
  }

  .v9-global-search{
    display:none;
  }

  .v9-user-meta{
    display:none;
  }

  .v9-workspace{
    padding:14px;
  }
}

@media(max-width:620px){

  .v9-shell,
  .v9-shell.sidebar-expanded{
    display:block;
  }

  .v9-sidebar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:62px;
    border-right:0;
    border-top:1px solid var(--v9-line);
    flex-direction:row;
    background:#fff;
    z-index:50;
  }

  .v9-sidebar-brand,
  .v9-nav-group{
    display:none;
  }

  .v9-nav-wrap{
    width:100%;
    padding:4px;
    overflow-x:auto;
    display:flex;
    align-items:center;
  }

  .v9-nav{
    min-width:58px;
    width:auto;
    margin:0 2px;
  }

  .v9-nav.active::before{
    left:12px;
    right:12px;
    bottom:-4px;
    top:auto;
    width:auto;
    height:3px;
  }

  .v9-nav::after{
    display:none;
  }

  .v9-main{
    padding-bottom:64px;
  }

  .v9-topbar{
    padding:9px 12px;
  }

  .v9-sidebar-toggle{
    display:none;
  }

  .v9-product-title small{
    display:none;
  }

  .v9-workspace{
    padding:10px;
  }
}

/* ==========================================================
   SWESUND EKONOMI v9.7 - CHROME COMPLETION
   ========================================================== */

.v9-sidebar-footer{
  padding:10px 8px 14px;
  border-top:1px solid var(--v9-line-soft);
  display:grid;
  gap:8px;
}

.v9-sidebar-expand{
  width:42px;
  height:38px;
  justify-self:center;
  border:1px solid var(--v9-line);
  border-radius:9px;
  background:#fff;
  color:var(--v9-navy);
  font-size:17px;
  cursor:pointer;
}

.v9-sidebar-expand:hover{
  background:#f3f7fa;
}

.sidebar-expanded .v9-sidebar-expand{
  justify-self:end;
}

.v9-sidebar-company{
  min-height:44px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
}

.v9-sidebar-company-icon{
  width:34px;
  min-width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edf4f9;
  color:var(--v9-navy);
  font-weight:900;
}

.v9-sidebar-company-text{
  display:none;
  min-width:0;
}

.sidebar-expanded .v9-sidebar-company{
  justify-content:flex-start;
}

.sidebar-expanded .v9-sidebar-company-text{
  display:grid;
  min-width:0;
}

.v9-sidebar-company-text strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--v9-navy);
}

.v9-sidebar-company-text small{
  margin-top:2px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  color:var(--v9-muted);
}

.v9-topbar-center{
  flex:1;
  display:flex;
  justify-content:center;
  min-width:160px;
}

.v9-search{
  width:min(440px,100%);
  height:40px;
  border:1px solid var(--v9-line);
  border-radius:10px;
  display:flex;
  align-items:center;
  background:#f8fafc;
  padding:0 10px;
  transition:.15s ease;
}

.v9-search:focus-within{
  background:#fff;
  border-color:#b7c9d7;
  box-shadow:0 0 0 3px rgba(11,54,88,.05);
}

.v9-search-icon{
  color:#8aa0b2;
  margin-right:7px;
}

.v9-search .v9-global-search{
  min-width:0;
  width:100%;
  border:0;
  height:auto;
  padding:0;
  background:transparent;
  box-shadow:none;
}

.v9-search .v9-global-search:focus{
  border:0;
  box-shadow:none;
  background:transparent;
}

.v9-search kbd{
  border:1px solid var(--v9-line);
  border-radius:5px;
  padding:2px 5px;
  background:#fff;
  color:#8093a3;
  font-size:9px;
  white-space:nowrap;
}

.v9-context-divider{
  height:30px;
  width:1px;
  background:var(--v9-line);
}

.v9-company-context,
.v9-year-context{
  display:grid;
  line-height:1.15;
  min-width:0;
}

.v9-company-context small,
.v9-year-context small{
  font-size:9px;
  font-weight:800;
  color:#8ca0b1;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.v9-company-context strong,
.v9-year-context strong{
  margin-top:3px;
  font-size:11px;
  color:var(--v9-navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.v9-company-context{
  max-width:190px;
}

.v9-year-context{
  max-width:220px;
}

.v9-ai-button{
  height:38px;
  padding:0 12px;
  border:1px solid #d9c18a;
  border-radius:9px;
  background:#fffaf0;
  color:#805f20;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.v9-ai-button:hover{
  background:#f9efd8;
}

.v9-guardian-status{
  display:flex;
  align-items:center;
  gap:7px;
}

.v9-guardian-status > div{
  display:grid;
  line-height:1.1;
}

.v9-guardian-status small{
  font-size:9px;
  color:#8da0b0;
}

.v9-guardian-status strong{
  font-size:10px;
  color:var(--v9-navy);
}

.v9-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--v9-success);
  box-shadow:0 0 0 3px var(--v9-success-soft);
}

.v9-logout{
  height:36px;
  padding:0 10px;
  border:1px solid var(--v9-line);
  border-radius:8px;
  background:#fff;
  color:#61778a;
  font-weight:700;
  font-size:10px;
  cursor:pointer;
}

.v9-logout:hover{
  color:var(--v9-danger);
  border-color:#ecc3c3;
}

/* LOGIN */

.v9-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 0%,#edf4f9 0,transparent 35%),
    #f5f7fa;
}

.v9-login-card{
  width:min(420px,100%);
  background:#fff;
  border:1px solid var(--v9-line);
  border-radius:18px;
  padding:30px;
  box-shadow:0 22px 60px rgba(7,39,62,.10);
}

.v9-login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

.v9-login-brand > div:last-child{
  display:grid;
  line-height:1.1;
}

.v9-login-brand strong{
  color:var(--v9-navy);
  letter-spacing:.025em;
}

.v9-login-brand small{
  margin-top:4px;
  color:var(--v9-gold);
  font-size:10px;
  font-weight:800;
}

.v9-login-eyebrow{
  margin-bottom:5px;
  color:#8ba0b2;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.v9-login-card h1{
  margin:0 0 22px;
  color:var(--v9-navy);
  font-size:25px;
}

.v9-login-form{
  display:grid;
  gap:14px;
}

.v9-login-form label{
  display:grid;
  gap:6px;
  color:#536d82;
  font-size:11px;
  font-weight:700;
}

.v9-login-form input{
  height:42px;
  border:1px solid var(--v9-line);
  border-radius:9px;
  padding:0 11px;
  outline:none;
}

.v9-login-form input:focus{
  border-color:#aec2d2;
  box-shadow:0 0 0 3px rgba(11,54,88,.05);
}

.v9-btn-block{
  width:100%;
}

#v9GoogleLogin{
  margin-top:10px;
}

.v9-error{
  margin-top:10px;
  min-height:18px;
  color:var(--v9-danger);
  font-size:11px;
}

@media(max-width:1200px){

  .v9-product-title{
    display:none;
  }

  .v9-context-divider{
    display:none;
  }

  .v9-company-context{
    max-width:150px;
  }

  .v9-year-context{
    max-width:170px;
  }

  .v9-ai-button span{
    display:none;
  }
}

@media(max-width:900px){

  .v9-year-context,
  .v9-guardian-status{
    display:none;
  }

  .v9-sidebar-footer{
    padding-left:5px;
    padding-right:5px;
  }

  .v9-sidebar-company{
    display:none;
  }
}

@media(max-width:620px){

  .v9-sidebar-footer{
    display:none;
  }

  .v9-company-context{
    display:none;
  }

  .v9-topbar-center{
    justify-content:flex-start;
  }

  .v9-ai-button{
    padding:0 10px;
  }

  .v9-logout{
    display:none;
  }
}


.v9-brand-logo{
  background:transparent;
  box-shadow:none;
  padding:3px;
}

.v9-brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.v9-sidebar .v9-brand-logo{
  width:50px;
  height:50px;
}

.v9-login-brand .v9-brand-logo{
  width:64px;
  height:64px;
}


/* SWESUND EKONOMI - Sidebar text color */
.v9-nav > span:last-child,
.v9-nav-group{
  color:var(--v9-gold);
}


/* SWESUND EKONOMI - sidebar brand gold on white */
.v9-nav > span:last-child{
  color:#C88A12 !important;
}

.v9-nav-group{
  color:#B77908 !important;
}

.v9-nav.active > span:last-child{
  color:#A86F00 !important;
  font-weight:800;
}


/* ==========================================================
   TENANT CONTEXT HARDENING v1
   ========================================================== */

.v9-company-context{
  min-width:220px;
}

.v9-company-context small{
  display:block;
  margin-bottom:3px;
}

.v9-company-select{
  width:100%;
  max-width:300px;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.v9-company-select:disabled{
  cursor:default;
  opacity:.85;
}

@media(max-width:900px){
  .v9-company-context{
    min-width:150px;
  }

  .v9-company-select{
    max-width:190px;
  }
}

/* ==========================================================
   V9 TOPBAR STABILITY POLISH
   ========================================================== */

.v9-topbar{
  min-height:68px;
  display:grid;
  grid-template-columns:
    minmax(350px,auto)
    minmax(240px,1fr)
    auto;
  align-items:center;
  column-gap:22px;
  row-gap:10px;
  padding:10px 18px;
}

.v9-topbar-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:18px;
}

.v9-topbar-center{
  min-width:0;
  width:100%;
  display:flex;
  justify-content:center;
}

.v9-topbar-right{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  white-space:nowrap;
}

/* ----------------------------------------------------------
   Företag + räkenskapsår
   ---------------------------------------------------------- */

.v9-company-context{
  min-width:210px;
  max-width:260px;
}

.v9-company-select{
  width:100%;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.v9-year-context{
  min-width:150px;
  max-width:180px;
}

.v9-company-context small,
.v9-year-context small{
  line-height:1;
}

.v9-year-context strong{
  margin-top:4px;
}

/* ----------------------------------------------------------
   Search
   ---------------------------------------------------------- */

.v9-topbar-center .v9-search{
  width:min(520px,100%);
  min-width:220px;
}

.v9-global-search{
  min-width:0;
  width:100%;
}

/* ----------------------------------------------------------
   Right controls
   ---------------------------------------------------------- */

.v9-ai-button{
  height:40px;
  flex:0 0 auto;
  padding:0 13px;
}

.v9-guardian-status{
  flex:0 0 auto;
  min-width:max-content;
}

.v9-user{
  flex:0 0 auto;
  min-width:0;
}

.v9-avatar{
  flex:0 0 36px;
}

.v9-user-meta{
  min-width:0;
  max-width:150px;
}

.v9-user-meta strong{
  max-width:150px;
}

.v9-logout{
  height:40px;
  flex:0 0 auto;
  padding:0 12px;
}

/* ----------------------------------------------------------
   Medium desktop / laptop
   Search moves to second row instead of squeezing everything
   ---------------------------------------------------------- */

@media(max-width:1180px){

  .v9-topbar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left right"
      "search search";
    column-gap:16px;
    row-gap:8px;
    padding:10px 14px;
  }

  .v9-topbar-left{
    grid-area:left;
  }

  .v9-topbar-center{
    grid-area:search;
    justify-content:stretch;
  }

  .v9-topbar-right{
    grid-area:right;
  }

  .v9-topbar-center .v9-search{
    width:100%;
    max-width:none;
  }
}

/* ----------------------------------------------------------
   Compact laptop / tablet
   ---------------------------------------------------------- */

@media(max-width:980px){

  .v9-topbar-left{
    gap:12px;
  }

  .v9-company-context{
    min-width:170px;
    max-width:210px;
  }

  .v9-company-select{
    max-width:210px;
  }

  .v9-year-context{
    min-width:135px;
  }

  .v9-topbar-right{
    gap:10px;
  }

  .v9-ai-button span{
    display:none;
  }

  .v9-user-meta{
    display:none;
  }
}

/* ----------------------------------------------------------
   Small tablet
   ---------------------------------------------------------- */

@media(max-width:760px){

  .v9-topbar{
    grid-template-columns:1fr auto;
  }

  .v9-year-context{
    display:none;
  }

  .v9-company-context{
    min-width:150px;
    max-width:190px;
  }

  .v9-company-select{
    max-width:190px;
  }

  .v9-guardian-status{
    display:none;
  }

  .v9-topbar-right{
    gap:8px;
  }
}

/* ==========================================================
   SWESUND EKONOMI MOBILE PWA POLISH V1
   ========================================================== */

@media(max-width:620px){

  html,
  body{
    overscroll-behavior-y:none;
  }

  .v9-main{
    padding-bottom:
      calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .v9-sidebar{
    height:
      calc(68px + env(safe-area-inset-bottom, 0px));
    padding-bottom:
      env(safe-area-inset-bottom, 0px);
    box-shadow:
      0 -8px 24px rgba(7,39,62,.08);
  }

  .v9-nav-wrap{
    gap:2px;
    padding:5px 6px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .v9-nav-wrap::-webkit-scrollbar{
    display:none;
  }

  .v9-nav{
    flex:0 0 64px;
    min-width:64px;
    height:56px;
    margin:0;
    padding:5px 4px;
    border-radius:12px;
    justify-content:center;
    scroll-snap-align:center;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .v9-nav-icon{
    width:40px;
    min-width:40px;
    height:40px;
    font-size:26px;
    border-radius:11px;
  }

  .v9-nav.active{
    background:#edf4f9;
  }

  .v9-nav.active::before{
    left:18px;
    right:18px;
    bottom:-5px;
    height:3px;
    border-radius:3px 3px 0 0;
  }

  .v9-topbar{
    min-height:58px;
    padding:
      calc(8px + env(safe-area-inset-top, 0px))
      10px
      8px;
    gap:8px;
  }

  .v9-topbar-left,
  .v9-topbar-right{
    gap:7px;
  }

  .v9-avatar{
    width:34px;
    height:34px;
    min-width:34px;
  }

  .v9-ai-button{
    min-width:40px;
    height:40px;
    padding:0 10px;
    border-radius:11px;
  }

  .v9-workspace{
    padding:12px 10px 18px;
  }

  .v9-card{
    border-radius:14px;
  }

  button,
  select,
  input{
    touch-action:manipulation;
  }
}

@media(max-width:390px){

  .v9-nav{
    flex-basis:60px;
    min-width:60px;
  }

  .v9-workspace{
    padding-left:8px;
    padding-right:8px;
  }
}


/* ==========================================================
   SWESUND MOBILE NAV SVG V2
   ========================================================== */

@media(max-width:620px){

  .v9-sidebar{
    height:calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .v9-main{
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .v9-nav-wrap{
    padding:5px 6px;
    gap:2px;
    align-items:stretch;
  }

  .v9-nav{
    min-width:72px;
    min-height:62px;
    padding:5px 4px;
    gap:3px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .v9-nav-icon{
    width:38px;
    min-width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
  }

  .v9-nav-icon svg{
    width:25px;
    height:25px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .v9-nav > .v9-nav-text,
  .sidebar-expanded .v9-nav > .v9-nav-text{
    display:block;
    max-width:68px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    line-height:1.05;
    font-weight:700;
    text-align:center;
    color:#607487;
  }

  .v9-nav.active .v9-nav-icon{
    background:#e8f0f7;
    color:#123f63;
  }

  .v9-nav.active .v9-nav-text{
    color:#123f63;
  }

  .v9-nav.active::before{
    left:18px;
    right:18px;
    bottom:-5px;
  }
}

/* ==========================================================
   SWESUND NAV SVG BASE
   ========================================================== */

.v9-nav-icon svg{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ==========================================================
   SWESUND MOBILE NAV FINAL PIXEL
   ========================================================== */

@media(max-width:620px){

  .v9-sidebar{
    height:calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .v9-main{
    padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .v9-nav-wrap{
    padding:5px 4px;
    gap:1px;
    align-items:stretch;
  }

  .v9-nav{
    min-width:70px;
    min-height:64px;
    padding:4px 3px;
    gap:3px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .v9-sidebar .v9-nav .v9-nav-icon{
    width:36px;
    min-width:36px;
    height:36px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#173f5e;
  }

  .v9-sidebar .v9-nav .v9-nav-icon svg{
    width:24px;
    height:24px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .v9-sidebar .v9-nav > span.v9-nav-text:last-child,
  .v9-shell.sidebar-expanded .v9-sidebar .v9-nav > span.v9-nav-text:last-child{
    display:block !important;
    max-width:68px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    line-height:1.1;
    font-weight:700;
    text-align:center;
    color:#65798a !important;
  }

  .v9-sidebar .v9-nav.active{
    background:transparent;
  }

  .v9-sidebar .v9-nav.active .v9-nav-icon{
    background:#e8f0f7;
    color:#123f63;
  }

  .v9-sidebar .v9-nav.active > span.v9-nav-text:last-child{
    color:#123f63 !important;
    font-weight:800;
  }

  .v9-sidebar .v9-nav.active::before{
    left:17px;
    right:17px;
    bottom:-5px;
    height:3px;
    border-radius:3px 3px 0 0;
  }
}