@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#f5f5f7;
    font-family:'Urbanist', sans-serif;
    color:#111827;
    overflow-x:hidden;
}

a{
    color:inherit;
}

.main-nav{
    flex:1;
}

.sidebar-bottom{
    padding-top:18px;
}

.sidebar{
    position:fixed;
    display:flex;
    flex-direction:column;
    top:0;
    left:0;
    bottom:0;
    width:270px;
    background:#ffffff;
    border-right:1px solid #ebedf2;
    border-radius:0;
    padding:18px 14px;
    z-index:1000;
    overflow:hidden;
}

.sidebar-logo{
    height:72px;
    display:flex;
    align-items:center;
    padding:0 18px;
    margin-bottom:34px;
}

.sidebar-logo img{
    width:200px !important;
    max-width:200px !important;
    height:auto !important;
    object-fit:contain;
    display:block;
}

.sidebar-nav{
    gap:8px;
}
.nav-item svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 18px;
}
.nav-item{
    height:44px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 13px;
    border-radius:3px;
    color:#8f96a3;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.nav-item svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    opacity:.72;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 20px;
}

.nav-item:hover{
    background:transparent;
    color:#ffffff;
}

.nav-item.active{
    background:#ffffff;
    color:#111827;
    box-shadow:
        0 1px 2px rgba(16,24,40,.04),
        0 1px 3px rgba(16,24,40,.08);
    position:relative;
}

.nav-item.active::before{
    content:"";
    position:absolute;
    left:220px;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2563ff;
    box-shadow:
        0 0 0 0 rgba(0,15,255,.7);
    animation:pulseDot 2s infinite;
}

@keyframes pulseDot{

    0%{
        box-shadow:
            0 0 0 0 rgba(0,15,255,.7);
    }

    70%{
        box-shadow:
            0 0 0 10px rgba(0,15,255,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(0,15,255,0);
    }

}

.nav-alert-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b30;
    margin-left:auto;
    position:relative;
    animation:pulseAlert 1.6s infinite;
}

@keyframes pulseAlert{

    0%{
        box-shadow:0 0 0 0 rgba(255,59,48,.7);
    }

    70%{
        box-shadow:0 0 0 10px rgba(255,59,48,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,59,48,0);
    }

}
.nav-parent{
    justify-content:space-between;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.chevron{
    width:16px !important;
    height:16px !important;
    transition:transform .25s ease;
}

.nav-group.open .chevron{
    transform:rotate(90deg);
}

.submenu{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    margin-left:32px;
    transition:
        grid-template-rows .35s ease,
        opacity .25s ease,
        margin .35s ease;
}

.submenu > div{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.nav-group.open .submenu{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:8px;
    margin-bottom:10px;
}

.moon-btn{
    width:42px;
    height:42px;
    border-radius:3px;
    background:#f3f5f9;
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
}

.moon-btn img{
    width:18px;
    height:18px;
    object-fit:contain;
}
.moon-btn:hover{
    background:#000fff;
    color:#ffffff;
}

.moon-btn svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.submenu{
    max-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-left:32px;
    transition:max-height .28s ease, margin-top .28s ease, margin-bottom .28s ease;
}

.nav-group.open .submenu{
    max-height:90px;
    margin-top:8px;
    margin-bottom:10px;
}

.submenu a{
    color:#7f8794;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    padding:3px 0;
}

.submenu a:hover{
    color:#fff;
}

.nav-section{
    margin:26px 0 10px;
    padding:0 14px;
   color:#8b90a0;
    opacity:1;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.nav-section:first-child{
    margin-top:0;
}

.nav-item{
    height:44px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-radius: 20px;
    color:#5d6472;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.18s ease;
}

.nav-item:hover{
    color:#111827;
    background:#eceef3;
}



.dashboard-topbar{
    left:270px;
    top:0;
    right:0;
    height:84px;
    border-radius:0;
    border-top:none;
    border-right:none;
}

.content{
    margin-left:270px !important;
    padding:112px 28px 40px !important;
}
/* TOPBAR */

.dashboard-topbar {
    position: fixed;
    height: 78px;
    background: #ffffff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    z-index: 900;
}
.dashboard-topbar h2{
    margin:0;
    font-size:24px;
    font-weight:800;
    color:#10131a;
}

.dashboard-topbar p{
    margin:3px 0 0;
    color:#7c8494;
    font-size:13px;
    font-weight:500;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.sleep-btn{
    height:40px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f5f9;
    color:#111827;
    border-radius:3px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.sleep-btn:hover{
    background:#000fff;
    color:#ffffff;
}

.profile-box{
    height:52px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 14px 6px 6px;
    background:#f6f8fc;
    border-radius:20px;
    border:none;
    cursor:pointer;
    font-family:'Urbanist', sans-serif;
    transition:.2s ease;
}

.profile-box:hover{
    background:#eef1f6;
}

.profile-avatar{
    width:40px;
    height:40px;
    background:#000fff;
    color:#ffffff;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    overflow:hidden;
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.profile-info{
    text-align:left;
}

.profile-box strong{
    display:block;
    font-size:13px;
    color:#111827;
}

.profile-box span{
    display:block;
    font-size:11px;
    color:#7c8494;
}

.profile-arrow{
    width:16px;
    height:16px;
    stroke:#7c8494;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .25s ease;
    margin-left:2px;
}

.profile-menu.open + .profile-arrow{
    transform:rotate(180deg);
}

.profile-arrow.rotate{
    transform:rotate(180deg);
}
/* MAIN CONTENT */

.content{
    margin-left:285px;
    padding:122px 26px 40px;
    min-height:100vh;
}

.content > .topbar{
    margin-bottom:28px;
}

.content > .topbar h1{
    margin:0;
    font-size:38px;
    font-weight:850;
    color:#111827;
}

.content > .topbar p{
    margin:6px 0 0;
    color:#667085;
    font-size:15px;
}

/* LOGIN */

.login-page{
    width:100%;
    height:100vh;
    background:#f5f7ff;
}

.login-wrapper{
    width:100%;
    height:100vh;
    background:white;
    display:grid;
    grid-template-columns:1.4fr .8fr;
}

.login-left{
    position:relative;
    background:
        linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),
        url('../images/login-bg.jpg');
    background-size:cover;
    background-position:center;
    padding:90px 70px;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.login-left > *{
    position:relative;
    z-index:2;
}

.login-star{
    font-size:70px;
    font-weight:800;
}

.login-left h2{
    font-size:72px;
    line-height:1;
    max-width:900px;
    font-weight:500;
    letter-spacing:-3px;
}

.login-left p{
    font-size:18px;
    opacity:.95;
    margin-bottom:25px;
    font-weight:500;
}

.login-right{
    padding:80px 90px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#ffffff;
}

.login-logo{
    width:190px;
    margin-bottom:0;
}

.login-right h1{
    font-size:72px;
    font-weight:500;
    letter-spacing:-3px;
    margin-bottom:12px;
    line-height:1;
}

.login-right p{
    color:#667085;
    margin-bottom:40px;
    font-size:18px;
    font-weight:500;
}

.login-right label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
    font-size:14px;
}

.login-right input{
    width:100%;
    height:48px;
    padding:0 16px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    margin-bottom:18px;
    font-family:'Urbanist', sans-serif;
    font-size:15px;
    font-weight:500;
    outline:none;
    transition:.2s;
    background:white;
}

.login-right input:focus{
    border-color:#000fff;
    box-shadow:0 0 0 4px rgba(0,15,255,.08);
}

.login-right form{
    width:100%;
}

.login-right button{
    width:100%;
    height:48px;
    border:none;
    border-radius:3px;
    background:#000fff;
    color:white;
    font-family:'Urbanist', sans-serif;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(0,15,255,.12);
}

/* BUTTONS */

.add-btn,
.add-product-btn{
    height:42px;
    padding:0 18px;
    border:none;
    border-radius:3px;
    background:#000fff;
    color:white;
    font-family:'Urbanist', sans-serif;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.add-btn:hover,
.add-product-btn:hover{
    background:#000bd1;
}

.save-btn,
.save-product-btn{
    height:50px;
    padding:0 24px;
    border:none;
    border-radius:20px;
    background:#000fff;
    color:white;
    font-family:'Urbanist', sans-serif;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

/* CUSTOMERS */
/* CUSTOMERS */

.clients-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.clients-search{
    width:360px;
    height:46px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
}

.clients-search svg{
    width:18px;
    height:18px;
    stroke:#98a2b3;
    fill:none;
    stroke-width:2;
}

.clients-search input{
    width:100%;
    border:none;
    outline:none;
    font-family:'Urbanist', sans-serif;
    font-size:14px;
    background:transparent;
}

.add-client-btn{
    height:42px;
    padding:0 18px;
    border-radius:20px;
    background:#000fff;
    color:#ffffff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.add-client-btn:hover{
    background:#000bd1;
}


.add-client-btn{
    height:42px;
    padding:0 18px;
    border:none;
    border-radius:20px;
    background:#000fff;
    color:#ffffff;
    font-family:'Urbanist', sans-serif;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.28);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    z-index:2500;
}

.drawer-overlay.open{
    opacity:1;
    visibility:visible;
}

.client-drawer{
    position:fixed;
    top:0;
    right:0;
    width:460px;
    height:100vh;
    background:#ffffff;
    z-index:3000;
    transform:translateX(100%);
    transition:transform .32s ease;
    padding:28px;
    box-shadow:-20px 0 50px rgba(15,23,42,.12);
}

.client-drawer.open{
    transform:translateX(0);
}

.drawer-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:28px;
}

.drawer-head h3{
    margin:0;
    font-size:24px;
}

.drawer-head p{
    margin:4px 0 0;
    color:#98a2b3;
}

.drawer-head button{
    width:36px;
    height:36px;
    border:none;
    border-radius:20px;
    background:#f5f7fb;
    cursor:pointer;
    font-size:22px;
}

.drawer-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.drawer-form .form-group{
    margin:0;
}

.drawer-form input,
.drawer-form select{
    width:100%;
    height:44px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    padding:0 12px;
    font-family:'Urbanist', sans-serif;
}


.clients-table{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    overflow:hidden;
}

.clients-head,
.client-row{
    display:grid;
    grid-template-columns:34px 1.4fr 1fr 1.3fr 1fr 120px 100px;
    align-items:center;
    column-gap:16px;
}

.clients-head{
    height:52px;
    padding:0 18px;
    color:#98a2b3;
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    border-bottom:1px solid #edf0f5;
}

.client-item{
    border-bottom:1px solid #edf0f5;
}

.client-item:last-child{
    border-bottom:none;
}

.client-row{
    min-height:72px;
    padding:0 18px;
    font-size:14px;
    color:#4b5563;
}

.client-item.open .client-row{
    background:#f8fbff;
}

.client-select,
.clients-head > div:first-child{
    display:flex;
    align-items:center;
    justify-content:center;
}

.client-checkbox,
#selectAllClients{
    width:16px;
    height:16px;
    accent-color:#000fff;
    cursor:pointer;
}

.client-name{
    display:flex;
    align-items:center;
    gap:12px;
}

.client-avatar{
    width:38px;
    height:38px;
    border-radius:20px;
    background:#eef2ff;
    color:#000fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:850;
    overflow:hidden;
}

.client-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.client-name strong{
    display:block;
    font-size:14px;
    color:#111827;
}

.client-name span{
    display:block;
    font-size:12px;
    color:#98a2b3;
    margin-top:2px;
}

.client-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:26px;
    padding:0 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:800;
}

.client-status.hosting{
    background:#eef2ff;
    color:#3047ff;
}

.client-status.verkauf{
    background:#ecfdf3;
    color:#027a48;
}

.client-status.sonstiges{
    background:#f3f4f6;
    color:#4b5563;
}

.client-status.administrator{
    background:#fef3f2;
    color:#d92d20;
}

.client-status.mitarbeiter{
    background:#fff7ed;
    color:#ea580c;
}

.client-status.hosting-asien{
    background:#eef2ff;
    color:#3047ff;
}

.client-status.hosting-usa{
    background:#eff6ff;
    color:#0369a1;
}

.client-actions{
    display:flex;
    gap:8px;
}

.icon-btn{
    width:32px;
    height:32px;
    border:none;
    border-radius:3px;
    background:#f5f7fb;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#667085;
    cursor:pointer;
}

.icon-btn:hover{
    background:#eef2ff;
    color:#000fff;
}

.icon-btn.delete:hover{
    background:#fef2f2;
    color:#dc2626;
}

.icon-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
}

.client-details{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
    background:#ffffff;
}

.client-item.open .client-details{
    grid-template-rows:1fr;
}

.client-details-inner{
    overflow:hidden;
    padding:0 24px;
}

.client-item.open .client-details-inner{
    padding-top:20px;
    padding-bottom:22px;
}

.client-edit-form{
    width:100%;
}

.client-edit-top{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

.client-avatar-card{
    width:120px;
    min-width:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.client-avatar-card img,
.client-avatar-card span{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#eef2ff;
    color:#3047ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    font-weight:800;
    object-fit:cover;
}

.client-avatar-card input{
    width:100%;
    font-size:12px;
}

.client-edit-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:end;
}

.client-edit-grid .form-group{
    margin:0;
}

.client-edit-grid label{
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:800;
    color:#98a2b3;
}

.client-edit-grid input,
.client-edit-grid select{
    width:100%;
    height:42px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    padding:0 12px;
    background:#ffffff;
    font-family:'Urbanist', sans-serif;
    outline:none;
}

.client-edit-grid input:focus,
.client-edit-grid select:focus{
    border-color:#000fff;
    box-shadow:0 0 0 4px rgba(0,15,255,.06);
}


.custom-file-upload{
    height:36px;
    padding:0 14px;
    border-radius:20px;
    background:#f5f7fb;
    color:#111827;
    font-size:12px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:1px solid #edf0f5;
}

.custom-file-upload:hover{
    background:#eef2ff;
    color:#000fff;
}

.custom-file-upload input{
    display:none;
}



.save-client-btn{
    width:160px;
    height:42px;
    border:none;
    border-radius:3px;
    background:#000fff;
    color:#ffffff;
    font-family:'Urbanist', sans-serif;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.save-client-btn:hover{
    background:#000bd1;
}
/* PRODUCTS LIST */

.product-grid{
    margin-top:0px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    overflow:hidden;
}

.product-header,
.product-row{
    display:grid;
    grid-template-columns:90px 1.8fr 1fr 160px 130px;
    align-items:center;
    column-gap:24px;
}

.product-header{
    padding:16px 24px;
    border-bottom:1px solid #edf0f5;
    color:#98a2b3;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.product-row{
    padding:16px 24px;
    border-bottom:1px solid #edf0f5;
    min-height:88px;
}

.product-row:last-child{
    border-bottom:none;
}

.product-image{
    width:58px;
    height:58px;
    object-fit:contain;
}

.product-main span{
    display:block;
    color:#98a2b3;
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
}

.product-main h2{
    margin:0;
    font-size:17px;
    font-weight:800;
}

.product-specs{
    display:flex;
    gap:28px;
}

.product-specs div{
    display:flex;
    flex-direction:column;
}

.product-specs strong{
    font-size:15px;
    font-weight:800;
}

.product-specs span{
    color:#98a2b3;
    font-size:11px;
    margin-top:2px;
}

.product-price{
    font-size:17px;
    font-weight:850;
}

.product-edit{
    height:36px;
    border:none;
    border-radius:3px;
    background:#000fff;
    color:white;
    font-family:'Urbanist', sans-serif;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.product-actions{
    display:flex;
    gap:8px;
}

.product-item{
    border-bottom:1px solid #edf0f5;
}

.product-details{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
    background:#ffffff;
}

.product-item.open .product-details{
    grid-template-rows:1fr;
}

.product-details-inner{
    overflow:hidden;
    padding:0 24px;
}

.product-item.open .product-details-inner{
    padding-top:20px;
    padding-bottom:24px;
}

.product-inline-form{
    background:#f8fafc;
    border:1px solid #edf0f5;
    border-radius:20px;
    padding:22px;
}

.product-edit-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.small-textarea{
    width:100%;
    min-height:120px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    padding:12px;
    font-family:'Urbanist', sans-serif;
    resize:vertical;
}

.product-checks{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin:18px 0;
}

.product-checks label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}

.product-form-section{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:18px;
    padding:20px;
    margin-bottom:18px;
}

.product-form-section h3{
    margin:0 0 16px;
    font-size:15px;
    color:#111827;
}

.product-inline-form{
    background:#f8fafc;
    border:1px solid #edf0f5;
    border-radius:20px;
    padding:22px;
}

.product-edit-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

/* EDIT FORMS */

.edit-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.edit-box{
    background:white;
    padding:28px;
    border-radius:3px;
    border:1px solid #edf0f5;
}

.edit-box h3{
    margin:0 0 22px;
    font-size:18px;
    font-weight:850;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:800;
}

.form-group input{
    width:100%;
    height:48px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    padding:0 14px;
    font-family:'Urbanist', sans-serif;
    outline:none;
}

.big-textarea{
    width:100%;
    height:240px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    padding:14px;
    resize:vertical;
    font-family:'Urbanist', sans-serif;
    outline:none;
}

.form-group input:focus,
.big-textarea:focus,
.search-input:focus,
.input-group input:focus{
    border-color:#000fff;
    box-shadow:0 0 0 4px rgba(0,15,255,.06);
}

.checkbox-grid{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    margin-top:24px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:3px;
    padding:18px 22px;
}

.checkbox-grid label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}

/* RESPONSIVE */

@media(max-width:1100px){
    .edit-grid,
    .customer-layout{
        grid-template-columns:1fr;
    }

    .product-header,
    .product-row{
        grid-template-columns:70px 1.5fr 1fr 120px 110px;
        column-gap:14px;
    }
}

.profile-dropdown{
    position:relative;
}

.profile-box{
    height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 12px 5px 5px;
    background:#f6f8fc;
    border-radius:20px;
    border:none;
    cursor:pointer;
    font-family:'Urbanist', sans-serif;
}

.profile-menu{
    position:absolute;
    top:58px;
    right:0;
    width:240px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:3px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.2s ease;
    box-shadow:
        0 12px 32px rgba(15,23,42,.08);
    z-index:3000;
}

.profile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.profile-menu a{
    height:40px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border-radius:3px;
    color:#111827;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

.profile-menu a:hover{
    background:#f5f7fb;
}

.profile-divider{
    height:1px;
    background:#edf0f5;
    margin:6px 0;
}

.logout-link{
    color:#d92d20 !important;
}

.avatar-preview{
    width:110px;
    height:110px;
    border-radius:50%;
    overflow:hidden;
    background:#f3f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.avatar-preview span{
    font-size:32px;
    font-weight:800;
    color:#111827;
}

.profile-page{
    max-width:900px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.profile-card{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:3px;
    padding:24px;
}

.profile-card h3{
    margin-bottom:20px;
}

.content{
    overflow-x:hidden;
}

.client-add-card{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    padding:28px;
}

.request-head,
.request-row{
    display:grid;
    grid-template-columns:1fr 1.3fr 1fr 1.2fr 100px 140px;
    align-items:center;
    column-gap:16px;
}

.request-head{
    height:52px;
    padding:0 18px;
    color:#98a2b3;
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    border-bottom:1px solid #edf0f5;
}

.request-item{
    border-bottom:1px solid #edf0f5;
    cursor:pointer;
}

.request-row{
    min-height:72px;
    padding:0 18px;
    font-size:14px;
    color:#4b5563;
}

.request-item.unread .request-row{
    background:#fff7ed;
}

.request-details{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
}

.request-item.open .request-details{
    grid-template-rows:1fr;
}

.request-details-inner{
    overflow:hidden;
    padding:0 24px;
}

.request-item.open .request-details-inner{
    padding-top:18px;
    padding-bottom:22px;
}

.request-details-inner p{
    margin:0;
    color:#111827;
    line-height:1.6;
}


.notification-dropdown{
    position:relative;
}

.notification-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:20px;
    background:#f5f7fb;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111827;
    cursor:pointer;
    position:relative;
}

.notification-btn:hover{
    background:#eef2ff;
    color:#000fff;
}

.notification-btn svg{
    width:19px;
    height:19px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notification-dot{
    position:absolute;
    top:8px;
    right:8px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b30;
    animation:pulseAlert 1.6s infinite;
}

.notification-menu{
    position:absolute;
    top:56px;
    right:0;
    width:320px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    padding:10px;
    box-shadow:0 16px 40px rgba(15,23,42,.10);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.2s ease;
    z-index:3000;
}

.notification-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.notification-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px 12px;
    border-bottom:1px solid #edf0f5;
    margin-bottom:6px;
}

.notification-head strong{
    font-size:14px;
    color:#111827;
}

.notification-head span{
    font-size:12px;
    color:#98a2b3;
    font-weight:800;
}

.notification-item{
    min-height:58px;
    padding:10px 12px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    gap:12px;
}

.notification-item:hover{
    background:#f8fbff;
}

.notification-item strong{
    display:block;
    font-size:13px;
    color:#111827;
}

.notification-item p{
    margin:3px 0 0;
    font-size:12px;
    color:#7c8494;
}

.mini-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b30;
    flex:0 0 8px;
}

.notification-empty{
    padding:18px 12px;
    color:#98a2b3;
    font-size:13px;
    text-align:center;
}

/* REQUESTS / ANFRAGEN */

.requests-table{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:20px;
    overflow:hidden;
}

.requests-head,
.requests-row{
    display:grid;
    grid-template-columns:1.4fr 1fr 1.3fr 130px 150px 100px;
    align-items:center;
    column-gap:16px;
}

.requests-head{
    height:52px;
    padding:0 18px;
    color:#98a2b3;
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    border-bottom:1px solid #edf0f5;
}

.request-item{
    border-bottom:1px solid #edf0f5;
}

.request-item:last-child{
    border-bottom:none;
}

.requests-row{
    min-height:76px;
    padding:0 18px;
    font-size:14px;
    color:#4b5563;
}

.request-item.open .requests-row{
    background:#f8fbff;
}

.request-person{
    display:flex;
    align-items:center;
    gap:12px;
}

.request-avatar{
    width:38px;
    height:38px;
    border-radius:20px;
    background:#eef2ff;
    color:#000fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:850;
}

.request-person strong,
.request-contact strong{
    display:block;
    color:#111827;
    font-size:14px;
}

.request-person span,
.request-contact span{
    display:block;
    color:#98a2b3;
    font-size:12px;
    margin-top:2px;
}

.request-topic{
    display:inline-flex;
    height:28px;
    padding:0 12px;
    border-radius:20px;
    background:#f3f4f6;
    color:#4b5563;
    align-items:center;
    font-size:12px;
    font-weight:800;
}

.request-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:28px;
    padding:0 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:800;
}

.request-status.neu{
    background:#eef2ff;
    color:#3047ff;
}

.request-status.kontaktiert{
    background:#ecfdf3;
    color:#027a48;
}

.request-status.angebot-gesendet{
    background:#fff7ed;
    color:#ea580c;
}

.request-status.gewonnen{
    background:#dcfce7;
    color:#15803d;
}

.request-status.verloren{
    background:#fef3f2;
    color:#d92d20;
}

.request-status.spam{
    background:#f3f4f6;
    color:#4b5563;
}

.request-details{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
    background:#ffffff;
}

.request-item.open .request-details{
    grid-template-rows:1fr;
}

.request-details-inner{
    overflow:hidden;
    padding:0 24px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:22px;
}

.request-item.open .request-details-inner{
    padding-top:20px;
    padding-bottom:22px;
}

.request-message-card,
.request-actions-card{
    background:#f8fafc;
    border:1px solid #edf0f5;
    border-radius:20px;
    padding:20px;
}

.request-message-card span,
.request-status-form label{
    display:block;
    color:#98a2b3;
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    margin-bottom:10px;
}

.request-message-card p{
    margin:0;
    color:#111827;
    font-size:14px;
    line-height:1.65;
}

.request-status-form{
    display:grid;
    grid-template-columns:1fr 150px;
    gap:12px;
    align-items:end;
}

.request-status-form label{
    grid-column:1 / -1;
    margin-bottom:-4px;
}

.request-status-form select{
    width:100%;
    height:42px;
    border:1px solid #d0d5dd;
    border-radius:3px;
    padding:0 12px;
    background:#ffffff;
    font-family:'Urbanist', sans-serif;
    outline:none;
}

.request-action-row{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

.request-action-btn{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:20px;
    background:#f5f7fb;
    color:#111827;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Urbanist', sans-serif;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.request-action-btn:hover{
    background:#eef2ff;
    color:#000fff;
}

.request-action-btn.primary{
    background:#000fff;
    color:#ffffff;
}

.request-action-btn.primary:hover{
    background:#000bd1;
}


.request-status-select{
    width:100%;
    height:44px;
    border:none;
    border-radius:16px;
    padding:0 14px;
    background:#ffffff;
    color:#111827;
    font-family:'Urbanist', sans-serif;
    font-size:13px;
    font-weight:800;
    outline:none;
    cursor:pointer;
    border:1px solid #e5e7eb;
    transition:.2s ease;
}

.request-status-select:hover{
    border-color:#c7d2fe;
    background:#f8fbff;
}

.request-status-select:focus{
    border-color:#000fff;
    box-shadow:0 0 0 4px rgba(0,15,255,.08);
}

.delete-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
    z-index:5000;
}

.delete-modal-overlay.open{
    opacity:1;
    visibility:visible;
}

.delete-modal{
    width:420px;
    background:#ffffff;
    border-radius:24px;
    padding:28px;
    text-align:center;
    box-shadow:0 24px 70px rgba(15,23,42,.18);
    transform:translateY(10px) scale(.98);
    transition:.22s ease;
}

.delete-modal-overlay.open .delete-modal{
    transform:translateY(0) scale(1);
}

.delete-modal-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#fef3f2;
    color:#d92d20;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:900;
    margin:0 auto 18px;
}

.delete-modal h3{
    margin:0 0 8px;
    color:#111827;
    font-size:22px;
}

.delete-modal p{
    margin:0;
    color:#7c8494;
    font-size:14px;
    line-height:1.5;
}

.delete-modal-actions{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.delete-modal-actions button,
.delete-modal-actions a{
    flex:1;
    height:44px;
    border-radius:20px;
    border:none;
    font-family:'Urbanist', sans-serif;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

#cancelDelete{
    background:#f5f7fb;
    color:#111827;
}

#confirmDelete{
    background:#d92d20;
    color:#ffffff;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:24px;
}

.dash-card{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:24px;
    padding:24px;
    min-height:170px;
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateY(14px);
    transition:.45s ease;
}

.dash-card.show{
    opacity:1;
    transform:translateY(0);
}

.dash-card.big{
    grid-column:span 1;
}

.dash-card span{
    color:#98a2b3;
    font-size:13px;
    font-weight:850;
}

.dash-card h2{
    margin:14px 0 4px;
    font-size:42px;
    color:#111827;
}

.dash-card p{
    color:#7c8494;
    font-size:13px;
    margin:0;
}

.dash-card.blue{
    background:#000fff;
}

.dash-card.blue span,
.dash-card.blue p,
.dash-card.blue h2{
    color:#ffffff;
}

.mini-bars{
    position:absolute;
    right:22px;
    bottom:22px;
    height:72px;
    display:flex;
    align-items:flex-end;
    gap:7px;
}

.mini-bars i{
    width:9px;
    border-radius:20px;
    background:#000fff;
    animation:barGrow .8s ease;
}

@keyframes barGrow{
    from{height:0}
}

.pulse-ring{
    position:absolute;
    right:-30px;
    bottom:-30px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    animation:pulseSoft 2s infinite;
}

@keyframes pulseSoft{
    0%{transform:scale(.9)}
    50%{transform:scale(1.08)}
    100%{transform:scale(.9)}
}

.dashboard-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.dash-panel{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:24px;
    padding:20px;
}

.dash-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.dash-panel-head h3{
    margin:0;
    color:#111827;
}

.dash-panel-head a{
    color:#000fff;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.dash-list-item{
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:12px;
    min-height:64px;
    text-decoration:none;
    border-bottom:1px solid #f1f3f7;
}

.dash-list-item:last-child{
    border-bottom:none;
}

.dash-avatar{
    width:38px;
    height:38px;
    border-radius:20px;
    background:#eef2ff;
    color:#000fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:850;
}

.dash-list-item strong{
    display:block;
    color:#111827;
    font-size:14px;
}

.dash-list-item span{
    color:#98a2b3;
    font-size:12px;
}

.dash-list-item em{
    font-style:normal;
    font-size:12px;
    font-weight:800;
    color:#000fff;
}


.finance-card{
    grid-column:span 2;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:24px;
    padding:24px;
    box-shadow:0 12px 35px rgba(15,23,42,.04);
}

.finance-head h3{
    margin:0 0 18px;
    color:#111827;
    font-size:22px;
}

.finance-success{
    height:112px;
    background:#f6f4f4;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#008f7a;
    margin-bottom:22px;
}

.finance-check{
    width:24px;
    height:24px;
    border:2px solid #00a58d;
    color:#00a58d;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
}

.finance-success strong{
    color:#008f7a;
    font-size:14px;
}

.finance-row{
    min-height:64px;
    display:grid;
    grid-template-columns:1fr auto 20px;
    align-items:center;
    border-bottom:1px solid #edf0f5;
    gap:18px;
}

.finance-row div{
    display:flex;
    align-items:center;
    gap:12px;
}

.finance-count{
    min-width:34px;
    height:24px;
    border-radius:20px;
    background:#f1f3f7;
    color:#667085;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:13px;
}

.finance-row strong{
    color:#111827;
    font-size:15px;
}

.finance-row b{
    color:#111827;
    font-size:17px;
}

.finance-row > span:last-child{
    color:#111827;
    font-size:24px;
}

.finance-footer{
    height:58px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}

.finance-footer a{
    color:#000fff;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
}