/* design3-preview.css */
/* TIROLWORK DESIGN 3 - PREVIEW ONLY */
:root{
 --b:#ec0024!important;
 --n:#090c10!important;
 --bg:#f3f5f8!important;
 --l:#e1e5eb!important;
}

body{
 background:#f3f5f8!important;
 color:#101722!important;
}

#app.app{
 background:#090c10!important;
 grid-template-columns:248px minmax(0,1fr)!important;
}

#app .side{
 background:linear-gradient(180deg,#11151b,#06080b)!important;
 color:#fff!important;
 border-right:1px solid #282c34!important;
 box-shadow:5px 0 25px #00000018!important;
}

#app .side .brand{
 color:#fff!important;
 font-weight:900!important;
 letter-spacing:-1px!important;
}

#app .side .brand span{
 color:#ff173b!important;
}

#app .side .nav{
 color:#e0e3e9!important;
 background:transparent!important;
 border-radius:8px!important;
 margin:5px 0!important;
 font-weight:600!important;
 transition:.2s ease!important;
}

#app .side .nav:hover{
 background:#242a32!important;
 color:#fff!important;
}

#app .side .nav.on{
 background:linear-gradient(90deg,#ff1740,#d90020)!important;
 color:#fff!important;
 box-shadow:0 5px 18px #ff002333!important;
}

#app .main{
 background:linear-gradient(135deg,#f5f6f8,#fff)!important;
 color:#101722!important;
 max-width:none!important;
 min-width:0!important;
 padding:28px!important;
}

#app .main h1{
 color:#080b10!important;
 font-weight:900!important;
 letter-spacing:-1px!important;
}

#app .main h2{
 color:#111722!important;
 font-weight:800!important;
}

#app .muted{
 color:#626d7e!important;
}

#app .card,
#app .cand,
#app .box{
 background:#fff!important;
 border:1px solid #e2e6ed!important;
 border-radius:15px!important;
 box-shadow:0 6px 22px #1018280a!important;
 color:#121923!important;
}

#app .col{
 background:#f5f7fa!important;
 border:1px solid #e2e6ed!important;
 border-radius:13px!important;
}

#app .cards{
 gap:16px!important;
}

#app .stat b{
 color:#080b10!important;
 font-size:34px!important;
 font-weight:900!important;
}

#app .btn.primary,
#app button.primary,
#app .primary{
 background:linear-gradient(135deg,#ff173b,#df0024)!important;
 color:white!important;
 border:0!important;
 border-radius:10px!important;
 font-weight:800!important;
 box-shadow:0 6px 17px #ee00252b!important;
}

#app .btn.soft,
#app .soft{
 background:#f1f3f6!important;
 color:#101722!important;
 border:1px solid #dce1e9!important;
}

#app .btn.danger,
#app .danger{
 color:#d50022!important;
 background:#fff5f6!important;
}

#app input,
#app select,
#app textarea{
 background:#fff!important;
 color:#111827!important;
 border:1px solid #d9dfe8!important;
 border-radius:9px!important;
}

#app input:focus,
#app select:focus,
#app textarea:focus{
 outline:2px solid #ff174055!important;
 border-color:#e60026!important;
}

#app .toolbar{
 gap:12px!important;
 margin:18px 0!important;
}

#app .list .row{
 border-color:#e7eaf0!important;
}

#app .page > .top{
 background:#fff!important;
 border:1px solid #e5e8ee!important;
 border-radius:16px!important;
 padding:22px!important;
 margin-bottom:18px!important;
 box-shadow:0 5px 20px #10182809!important;
}

#app #dashboard > .top{
 background:
 linear-gradient(115deg,#fff 50%,#eef0f4 75%,#dbdfe6)!important;
}

#app .cand .btn{
 font-weight:700!important;
}

@media(max-width:900px){
 #app.app{
  grid-template-columns:1fr!important;
 }
 #app .main{
  padding:18px!important;
 }
 #app .side{
  background:#090c10!important;
 }
}

@media(max-width:520px){
 #app .main{
  padding:14px!important;
 }
 #app .cards{
  gap:10px!important;
 }
 #app .page > .top{
  padding:16px!important;
 }
 #app .main h1{
  font-size:29px!important;
 }
}


/* inline-style */

/* DESIGN 3 - DARK PREMIUM PREVIEW */

html body #app#app.app > aside.side{
 background:#090b0f!important;
 background-image:linear-gradient(180deg,#12161d,#06080b)!important;
 color:#fff!important;
 border-right:1px solid #292d35!important;
 box-shadow:6px 0 25px #0002!important;
}

html body #app#app.app > aside.side .brand{
 color:white!important;
 font-weight:900!important;
}

html body #app#app.app > aside.side .brand span{
 color:#ff1237!important;
}

html body #app#app.app > aside.side .nav,
html body #app#app.app > aside.side .tw-tarif-link{
 background:transparent!important;
 color:#e7e9ee!important;
 border-radius:9px!important;
}

html body #app#app.app > aside.side .nav.on{
 background:linear-gradient(90deg,#ff163b,#c90022)!important;
 color:#fff!important;
 box-shadow:0 5px 15px #e0003033!important;
}

html body #app#app.app > aside.side .nav:hover,
html body #app#app.app > aside.side .tw-tarif-link:hover{
 background:#262b35!important;
 color:#fff!important;
}

html body #app#app #v22MobileHeader{
 background:#090b0f!important;
 background-image:none!important;
 border-bottom:1px solid #292d35!important;
 color:white!important;
}

html body #app#app #v22MobileHeader .v22-logo-tirol{
 color:#fff!important;
}

html body #app#app #v22MobileHeader .v22-logo-work{
 color:#ff173b!important;
}

html body #app#app #v22MenuBtn{
 background:#1b2029!important;
 color:white!important;
 border:1px solid #343944!important;
}

html body #app#app .main{
 background:#eef1f5!important;
}

html body #app#app .main .card{
 background:#fff!important;
 border:1px solid #dce1e9!important;
 box-shadow:0 8px 22px #10182812!important;
}

html body #app#app .main #dashboard > .top{
 background:linear-gradient(110deg,#11151b 0%,#20232b 65%,#671529 100%)!important;
 border:1px solid #343943!important;
 box-shadow:0 12px 30px #10182825!important;
}

html body #app#app .main #dashboard > .top h1,
html body #app#app .main #dashboard > .top .muted{
 color:#fff!important;
}

html body #app#app .main .btn.primary{
 background:#e5092d!important;
 color:white!important;
 box-shadow:0 5px 15px #d9002933!important;
}

html body #app#app .main h1{
 font-weight:900!important;
}

@media(max-width:900px){
 html body #app#app.app > aside.side{
  background:#090b0f!important;
  background-image:none!important;
 }
 html body #app#app .main #dashboard > .top{
  background:linear-gradient(130deg,#12151c,#45101d)!important;
 }
}


/* inline-style */

html body #app#app.app > aside.side{
 padding:18px 12px!important;
}

html body #app#app.app > aside.side .nav,
html body #app#app.app > aside.side .tw-tarif-link{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 text-align:left!important;
 gap:12px!important;
 padding:11px 13px!important;
 margin:3px 0!important;
 min-height:44px!important;
 font-size:14px!important;
 font-weight:600!important;
 line-height:1.3!important;
 letter-spacing:0!important;
}

html body #app#app.app > aside.side .nav::before{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:22px;
 flex-shrink:0;
 font-size:19px;
 font-weight:400;
}

.nav[data-p="dashboard"]::before{content:"⌂"}
.nav[data-p="stellen"]::before{content:"▣"}
.nav[data-p="bewerber"]::before{content:"♙"}
.nav[data-p="eingestellte"]::before{content:"✓"}
.nav[data-p="ehemalige"]::before{content:"◷"}
.nav[data-p="interviews"]::before{content:"▤"}
.nav[data-p="dokumente"]::before{content:"▧"}
.nav[data-p="einstellungen"]::before{content:"⚙"}
.nav[data-p="administration"]::before{content:"⚙"}
.nav[data-click="logout"]::before{content:"↪"}

html body #app#app.app > aside.side .nav.on{
 background:linear-gradient(90deg,#ef1234,#be0021)!important;
 color:white!important;
 border-radius:8px!important;
}

@media(max-width:900px){
 html body #app#app.app > aside.side{
  width:min(80vw,300px)!important;
  max-width:300px!important;
  max-height:calc(100dvh - 70px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  padding:12px!important;
 }
}


/* design3-v8.css */
/* TIROLWORK DESIGN 3 - V8 PREVIEW POLISH */

html body #app#app .main{
 background:#eef0f4!important;
 color:#10141c!important;
}

html body #app#app .main .page > .top{
 padding:20px 24px!important;
 border-radius:15px!important;
 border:1px solid #dfe3e9!important;
 box-shadow:0 6px 20px #11182710!important;
 margin-bottom:18px!important;
}

html body #app#app .main .page > .top h1{
 font-size:clamp(27px,3vw,36px)!important;
 line-height:1.15!important;
 letter-spacing:-.8px!important;
}

html body #app#app .main .muted{
 color:#566173!important;
 line-height:1.5!important;
}

html body #app#app .main .card,
html body #app#app .main .cand{
 background:#fff!important;
 border:1px solid #dfe4ec!important;
 border-radius:14px!important;
 box-shadow:0 5px 18px #1118270d!important;
}

html body #app#app .main .card h3{
 color:#121820!important;
 font-weight:850!important;
}

html body #app#app .main .col{
 background:#f4f6f9!important;
 border:1px solid #e0e5ed!important;
 border-radius:12px!important;
}

html body #app#app .main .btn{
 min-height:40px!important;
 font-weight:750!important;
 transition:background .2s,box-shadow .2s!important;
}

html body #app#app .main .btn.primary{
 background:#e5092d!important;
 color:white!important;
 border-radius:9px!important;
 box-shadow:0 5px 14px #e5092d24!important;
}

html body #app#app .main .btn.soft{
 background:#edf0f4!important;
 color:#151b25!important;
 border:1px solid #dce1e8!important;
}

html body #app#app .main .btn.danger{
 background:#fff3f4!important;
 color:#c50025!important;
}

html body #app#app .main input,
html body #app#app .main select,
html body #app#app .main textarea{
 color:#141a23!important;
 background:#fff!important;
 border:1px solid #d7dde6!important;
 border-radius:9px!important;
}

html body #app#app .main .list .row{
 padding:14px 0!important;
 border-color:#e5e9ef!important;
}

html body #app#app .main #dashboard > .top{
 background:linear-gradient(115deg,#11151c,#25202a 70%,#611324)!important;
 border:1px solid #30343b!important;
}

html body #app#app .main #dashboard > .top h1,
html body #app#app .main #dashboard > .top .muted{
 color:white!important;
}

html body #app#app .main .stat b{
 font-size:32px!important;
 color:#11151c!important;
}

@media(max-width:900px){

 html body #app#app .main{
  padding:14px!important;
 }

 html body #app#app .main .page > .top{
  padding:18px!important;
  gap:15px!important;
 }

 html body #app#app .main .page > .top h1{
  font-size:29px!important;
 }

 html body #app#app .main .page > .top .btn{
  width:100%!important;
  min-height:46px!important;
 }

 html body #app#app .main .card{
  padding:16px!important;
 }

 html body #app#app .main .cand{
  padding:13px!important;
 }

 html body #app#app .main .cards{
  gap:10px!important;
 }

 html body #app#app .main .col{
  min-height:70px!important;
  padding:12px!important;
 }

 html body #app#app .main input,
 html body #app#app .main select{
  min-height:44px!important;
 }

 html body #app#app .main .stat b{
  font-size:30px!important;
 }

}


/* design3-v9.css */

/* TIROLWORK DESIGN 3 - V9 */

@media(min-width:901px){

html body #app#app .main{
 padding:28px!important;
 background:#f0f2f5!important;
}

.design3-topbar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 margin:-28px -28px 24px;
 padding:16px 28px;
 min-height:64px;
 background:linear-gradient(110deg,#101217,#202029);
 color:white;
 border-bottom:2px solid #d9092b;
}

.design3-topbrand{
 font-size:20px;
 font-weight:900;
}

.design3-topbrand span,
.design3-topbrand strong{
 color:#ff183c;
}

.design3-slogan{
 color:#d5d9e1;
 font-size:14px;
}

.design3-topright{
 color:#f2f3f6;
 font-size:13px;
 font-weight:700;
}

html body #app#app .main #dashboard > .top{
 position:relative!important;
 overflow:hidden!important;
 min-height:145px!important;
 padding:28px 32px!important;
 background:linear-gradient(110deg,#12151c,#35121f)!important;
}

html body #app#app .main #dashboard > .top::after{
 content:"";
 position:absolute;
 right:0;
 top:0;
 width:48%;
 height:100%;
 background:url('/design3-alps.svg') right bottom/cover no-repeat;
 opacity:.85;
 pointer-events:none;
}

html body #app#app .main #dashboard > .top > *{
 position:relative;
 z-index:1;
}

html body #app#app .main #dashboard > .top h1{
 font-size:34px!important;
 color:white!important;
}

html body #app#app .main .cards{
 gap:16px!important;
 margin:20px 0!important;
}

html body #app#app .main .stat{
 min-height:130px!important;
 padding:20px!important;
 border-top:3px solid #e5092d!important;
}

html body #app#app .main .stat b{
 display:block!important;
 margin-top:14px!important;
 font-size:36px!important;
}

html body #app#app .main .card{
 border:1px solid #dfe3e9!important;
 box-shadow:0 8px 24px #10182810!important;
}

html body #app#app .main .grid{
 gap:16px!important;
}

html body #app#app .main .grid > .card{
 min-height:180px!important;
}

html body #app#app .main .list .row{
 padding:15px 0!important;
}

html body #app#app .main .page > .top:not(#dashboard .top){
 background:#fff!important;
}

}

@media(max-width:900px){
 .design3-topbar{
  display:none!important;
 }
}


/* design3-v10.css */
/* TIROLWORK PREMIUM DESIGN 3 - V10 */

@media(min-width:901px){

#app .design3-topbrand{
 display:none!important;
}

#app .design3-topbar{
 background:#0b0d12!important;
 border-bottom:2px solid #e5092d!important;
 padding:17px 30px!important;
}

#app .design3-slogan{
 color:#fff!important;
 font-size:15px!important;
 font-weight:600!important;
}

#app .main{
 background:#edf0f4!important;
}

#app .main .page:not(#dashboard)>.top{
 background:#fff!important;
 border:1px solid #dce1e8!important;
 padding:25px 30px!important;
 border-radius:16px!important;
}

#app .main .page h1{
 color:#10141c!important;
 font-weight:900!important;
}

#app .main #dashboard>.top h1{
 color:#fff!important;
}

#app .main .card{
 background:#fff!important;
 border:1px solid #dce1e8!important;
 box-shadow:0 8px 25px #14182412!important;
}

#app .main .cards .stat{
 min-height:145px!important;
 border-top:0!important;
 border-left:3px solid #e5092d!important;
 padding:22px!important;
}

#app .main .stat b{
 font-size:38px!important;
 font-weight:900!important;
 color:#10141c!important;
}

#app .main .muted{
 color:#515b6b!important;
}

#app .main #jobs .row,
#app .main #interviews .row{
 padding:18px!important;
 margin:10px 0!important;
 border:1px solid #e0e4eb!important;
 border-radius:12px!important;
 background:#fff!important;
 display:flex!important;
 align-items:center!important;
 gap:12px!important;
 flex-wrap:wrap!important;
}

#app .main .pipeline .col{
 background:#f3f5f8!important;
 border:1px solid #dce1e8!important;
 border-radius:12px!important;
 padding:12px!important;
}

#app .main .pipeline .cand{
 background:white!important;
 border:1px solid #dce1e8!important;
 box-shadow:0 4px 14px #14182412!important;
}

#app .main .btn.soft{
 background:#e9edf2!important;
 color:#121820!important;
}

#app .main .btn.primary{
 background:#e5092d!important;
 color:white!important;
 box-shadow:0 6px 18px #e5092d35!important;
}

#app .main .grid>.card{
 padding:24px!important;
 min-height:190px!important;
}

}


/* design3-v11.css */

@media(min-width:901px){

#app #dashboard .cards{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:16px!important;
}

#app #dashboard .cards>.stat{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:center!important;
 position:relative!important;
 min-width:0!important;
 min-height:145px!important;
 padding:24px!important;
 background:#fff!important;
 border:1px solid #dce1e8!important;
 border-top:3px solid #e5092d!important;
 border-radius:15px!important;
 box-shadow:0 8px 25px #10182812!important;
 color:#18202c!important;
 text-align:left!important;
 overflow:visible!important;
}

#app #dashboard .cards>.stat::before,
#app #dashboard .cards>.stat::after{
 content:none!important;
 display:none!important;
}

#app #dashboard .tw-stat-label{
 display:block!important;
 width:100%!important;
 font-size:16px!important;
 font-weight:750!important;
 line-height:1.5!important;
 color:#273244!important;
 opacity:1!important;
 visibility:visible!important;
 white-space:normal!important;
 text-indent:0!important;
}

#app #dashboard .cards>.stat b{
 display:block!important;
 margin-top:12px!important;
 font-size:40px!important;
 line-height:1.1!important;
 font-weight:900!important;
 color:#10141c!important;
}

#app #dashboard .grid>.card{
 background:#fff!important;
 border:1px solid #dce1e8!important;
 padding:24px!important;
 border-radius:15px!important;
 box-shadow:0 6px 20px #10182810!important;
}

}

@media(max-width:900px){
#app #dashboard .tw-stat-label{
 display:block!important;
}
}


/* design3-v13.css */

@media(min-width:901px){

html body #app#app #dashboard .cards>.stat{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:center!important;
 min-height:170px!important;
 padding:22px!important;
 overflow:visible!important;
 border:1px solid #dce1e8!important;
 border-radius:15px!important;
 background:#fff!important;
 box-shadow:0 8px 24px #10182812!important;
}

html body #app#app #dashboard .cards>.stat::before,
html body #app#app #dashboard .cards>.stat::after{
 content:none!important;
 display:none!important;
}

html body #app#app #dashboard .tw-stat-icon{
 display:grid!important;
 place-items:center!important;
 width:42px!important;
 height:42px!important;
 flex:0 0 42px!important;
 margin-bottom:12px!important;
 background:#fff0f2!important;
 color:#db1233!important;
 border-radius:11px!important;
 font-size:23px!important;
}

html body #app#app #dashboard .tw-stat-label{
 display:block!important;
 position:static!important;
 transform:none!important;
 width:100%!important;
 font-size:16px!important;
 font-weight:750!important;
 line-height:1.5!important;
 color:#263244!important;
 text-indent:0!important;
 white-space:normal!important;
 overflow:visible!important;
}

html body #app#app #dashboard .stat b{
 display:block!important;
 margin-top:8px!important;
 font-size:39px!important;
 color:#10141c!important;
}
}

@media(max-width:900px){
 #app #dashboard .tw-stat-icon{
  display:none!important;
 }
}


/* design3-v14.css */
/* TIROLWORK DESIGN 3 V14 */

/* Stronger contrast */
#app #stellen,
#app #bewerber,
#app #interviews{
 color:#11151d!important;
}

#app #stellen .muted,
#app #bewerber .muted,
#app #interviews .muted{
 color:#566173!important;
}

/* Dark secondary action buttons */
#app #stellen .btn.soft,
#app #bewerber .btn.soft,
#app #interviews .btn.soft{
 background:#191e28!important;
 color:#fff!important;
 border:1px solid #292f3a!important;
 box-shadow:0 3px 10px #00000016!important;
}

/* Delete buttons */
#app #stellen .btn.danger,
#app #bewerber .btn.danger,
#app #interviews .btn.danger{
 background:#fff0f2!important;
 color:#b91c31!important;
 border:1px solid #f7dce1!important;
}

/* Stronger page cards */
#app #stellen .card,
#app #bewerber .card,
#app #interviews .card{
 background:#fff!important;
 border:1px solid #d8dee8!important;
 border-radius:15px!important;
 box-shadow:0 8px 24px #10182810!important;
}

/* Jobs */
#app #jobs .row{
 padding:18px!important;
 margin:12px 0!important;
 background:#fff!important;
 border:1px solid #dce2eb!important;
 border-radius:13px!important;
 box-shadow:0 4px 15px #1018280c!important;
 flex-wrap:wrap!important;
 gap:12px!important;
}

#app #jobs .row b,
#app #jobs .row strong{
 color:#11151d!important;
 font-weight:800!important;
}

/* Candidate pipeline */
#app #bewerber .col{
 background:#f0f2f6!important;
 border:1px solid #dce2eb!important;
 border-radius:13px!important;
}

#app #bewerber .cand{
 background:#fff!important;
 border:1px solid #dce2eb!important;
 border-radius:12px!important;
 padding:15px!important;
 box-shadow:0 5px 17px #10182812!important;
}

#app #bewerber .cand b,
#app #bewerber .cand strong{
 color:#10151e!important;
 font-weight:850!important;
}

/* Interview cards */
#app #interviews .list .row{
 padding:20px!important;
 margin:12px 0!important;
 border:1px solid #dce2eb!important;
 background:#fff!important;
 border-radius:13px!important;
 box-shadow:0 5px 18px #10182810!important;
 flex-wrap:wrap!important;
 gap:12px!important;
}

/* Desktop layout */
@media(min-width:901px){

 #app #bewerber .pipeline{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(165px,1fr))!important;
  gap:12px!important;
  overflow-x:auto!important;
 }

 #app #stellen .page h1,
 #app #bewerber .page h1,
 #app #interviews .page h1{
  font-weight:900!important;
 }

 #app #jobs .row:hover,
 #app #interviews .list .row:hover{
  border-color:#d91f28!important;
  box-shadow:0 8px 24px #10182818!important;
 }

}

/* Preserve mobile layout */
@media(max-width:900px){

 #app #bewerber .pipeline{
  grid-template-columns:1fr!important;
 }

 #app #stellen .btn,
 #app #bewerber .btn,
 #app #interviews .btn{
  min-height:44px!important;
 }

}


/* design3-v15.css */

@media(min-width:901px){

html body #app#app .main{
 background:#e9edf2!important;
}

html body #app#app .main .page>.top{
 border-left:4px solid #df1836!important;
}

html body #app#app .main .page h1{
 font-size:32px!important;
 font-weight:900!important;
}

html body #app#app .main .card,
html body #app#app .main .cand{
 background:#fff!important;
 border:1px solid #d4dbe5!important;
 box-shadow:0 8px 25px #10182815!important;
}

html body #app#app .main .muted{
 color:#475467!important;
}

html body #app#app #jobs .row,
html body #app#app #interviews .row{
 padding:22px!important;
 font-size:15px!important;
 border:1px solid #d4dbe5!important;
 border-radius:12px!important;
 background:#fff!important;
}

html body #app#app #bewerber .pipeline{
 grid-template-columns:repeat(5,minmax(190px,1fr))!important;
 max-width:100%!important;
 overflow-x:auto!important;
}

html body #app#app #bewerber .col{
 background:#e9edf2!important;
 border:1px solid #d4dbe5!important;
 min-height:270px!important;
}

html body #app#app #bewerber .cand{
 padding:16px!important;
 font-size:14px!important;
}

html body #app#app #stellen .btn.soft,
html body #app#app #bewerber .btn.soft,
html body #app#app #interviews .btn.soft{
 background:#202630!important;
 color:white!important;
 border:0!important;
}

html body #app#app .main .btn.primary{
 background:#d91f32!important;
 color:white!important;
}

html body #app#app .main input,
html body #app#app .main select{
 font-size:15px!important;
}

}

@media(max-width:900px){
 html body #app#app #bewerber .pipeline{
  grid-template-columns:1fr!important;
 }
}