/*=========================================================
  GOOGLE FONT
=========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=========================================================
  CSS VARIABLES
=========================================================*/

:root{

    /* Colors */

    --primary:#5B8DEF;
    --primary-light:#7AA6FF;
    --secondary:#6C63FF;

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    --white:#ffffff;

    --bg-dark:#071321;
    --bg-light:#0F172A;

    --glass:rgba(255,255,255,.10);
    --glass-border:rgba(255,255,255,.18);

    --text:#F8FAFC;
    --text-light:#CBD5E1;
    --text-muted:#94A3B8;

    --shadow:
        0 12px 35px rgba(0,0,0,.25);

    --shadow-hover:
        0 18px 45px rgba(0,0,0,.35);

    --radius:22px;

    --transition:.35s ease;

}

/*=========================================================
  RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

*::before,
*::after{
    box-sizing:border-box;
}

    /* Navigation */
    header {
            background: linear-gradient(135deg,
    #020617 0%,
    #0f172a 35%,
    #1e293b 70%,
    #2563eb 100%);
      color: white;
      padding: 15px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.5rem;
    }

    header nav a {
      color: white;
      text-decoration: none;
      margin-left: 20px;
      font-weight: bold;
    }

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    color:var(--text);

    background:
        linear-gradient(
            135deg,
            #071321 0%,
            #111827 40%,
            #172554 100%
        );

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/*=========================================================
  GLOBAL
=========================================================*/

img{

    max-width:100%;
    display:block;

}

button,
input{

    font-family:inherit;
    border:none;
    outline:none;

}

button{

    cursor:pointer;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}

/*=========================================================
  BACKGROUND BLURS
=========================================================*/

.background-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(130px);

    z-index:-1;

    opacity:.65;

}

.blur-one{

    width:380px;
    height:380px;

    background:#4F46E5;

    top:-120px;
    left:-120px;

}

.blur-two{

    width:340px;
    height:340px;

    background:#0EA5E9;

    right:-100px;
    top:220px;

}

.blur-three{

    width:420px;
    height:420px;

    background:#9333EA;

    bottom:-160px;
    left:35%;

}

/*=========================================================
  SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0F172A;

}

::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.18);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.35);

}
/*=========================================================
  DASHBOARD LAYOUT
=========================================================*/

.dashboard{

    width:min(1800px,95%);

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:30px;

}

/*=========================================================
  REUSABLE GLASSMORPHISM
=========================================================*/

.glass{

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.glass:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}

/*=========================================================
  MAIN DASHBOARD BODY
=========================================================*/

.dashboard-body{

    display:grid;
    grid-template-columns:300px minmax(0,1fr) 320px;
    gap:30px;

    align-items:start;

}

/*=========================================================
  COMMON CARD STYLING
=========================================================*/

.left-sidebar,
.planner-section,
.right-sidebar,
.bottom-section{

    width:100%;

}

.planner-header,
.analytics-card,
.tips-card,
.ai-card{

    padding:24px;

}

/*=========================================================
  SECTION HEADINGS
=========================================================*/

h1{

    font-size:2rem;

    font-weight:700;

    color:var(--text);

}

h2{

    font-size:1.45rem;

    font-weight:600;

    color:var(--text);

}

h3{

    font-size:1rem;

    font-weight:600;

    color:var(--text);

}

h4{

    font-size:.95rem;

    font-weight:600;

}

p{

    color:var(--text-light);

    line-height:1.7;

    font-size:.95rem;

}

/*=========================================================
  SMALL LABELS
=========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(91,141,239,.18);

    color:#DDEAFE;

    font-size:.75rem;

    font-weight:600;

}

/*=========================================================
  ICON BUTTON
=========================================================*/

.icon-btn{

    width:52px;

    height:52px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:var(--text);

    font-size:1.2rem;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.icon-btn:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-4px);

}

/*=========================================================
  SPACING UTILITIES
=========================================================*/

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}

.text-center{

    text-align:center;

}

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}
/*=========================================================
  TOP NAVIGATION BAR
=========================================================*/

.top-navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:30px;

    padding:22px 30px;

}

/*=========================================================
  LEFT NAVIGATION
=========================================================*/

.nav-left{

    display:flex;
    align-items:center;
    flex:1;

}

.logo{

    display:flex;
    align-items:center;
    gap:18px;

}

.logo-icon{

    width:70px;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:2rem;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
        0 10px 30px rgba(91,141,239,.35);

}

.logo-text h1{

    font-size:1.8rem;
    font-weight:700;
    color:var(--text);

    margin-bottom:4px;

}

.logo-text p{

    max-width:600px;

    color:var(--text-light);

    font-size:.92rem;

    line-height:1.6;

}

/*=========================================================
  RIGHT NAVIGATION
=========================================================*/

.nav-right{

    display:flex;
    align-items:center;

    gap:18px;

}

/*=========================================================
  SEARCH BAR
=========================================================*/

.search-box{

    width:340px;
    height:55px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 18px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    transition:var(--transition);

}

.search-box:hover{

    background:rgba(255,255,255,.12);

}

.search-box:focus-within{

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(91,141,239,.18);

}

.search-icon{

    font-size:1rem;

    color:var(--text-light);

}

.search-box input{

    flex:1;

    background:transparent;

    color:var(--text);

    font-size:.95rem;

}

.search-box input::placeholder{

    color:var(--text-muted);

}

/*=========================================================
  USER PROFILE
=========================================================*/

.user-profile{

    display:flex;
    align-items:center;

    gap:14px;

    padding:10px 18px;

    border-radius:20px;

    cursor:pointer;

}

.user-profile:hover{

    transform:translateY(-4px);

}

.avatar{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:1.4rem;

    background:linear-gradient(
        135deg,
        var(--primary-light),
        var(--secondary)
    );

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);

}

.user-details{

    display:flex;
    flex-direction:column;

}

.user-details h4{

    font-size:.95rem;

    color:var(--text);

    margin-bottom:2px;

}

.user-details span{

    font-size:.78rem;

    color:var(--text-muted);

}

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

@media (max-width:1100px){

    .top-navbar{

        flex-direction:column;
        align-items:flex-start;

    }

    .nav-right{

        width:100%;

        justify-content:space-between;

        flex-wrap:wrap;

    }

    .search-box{

        width:100%;

    }

}

@media (max-width:650px){

    .logo{

        flex-direction:column;
        align-items:flex-start;

    }

    .logo-text h1{

        font-size:1.4rem;

    }

    .user-profile{

        width:100%;

    }

}
/*=========================================================
  LEFT SIDEBAR
=========================================================*/

.left-sidebar{

    padding:28px;

    display:flex;
    flex-direction:column;

    gap:24px;

    height:fit-content;

    position:sticky;
    top:30px;

}

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

.sidebar-header{

    display:flex;
    flex-direction:column;

    gap:8px;

}

.sidebar-header h2{

    font-size:1.45rem;
    font-weight:700;

    color:var(--text);

}

.sidebar-header p{

    color:var(--text-light);

    font-size:.9rem;

    line-height:1.6;

}

/*=========================================================
  APPLIANCE LIBRARY
=========================================================*/

.appliance-library{

    display:flex;
    flex-direction:column;

    gap:16px;

}

/*=========================================================
  APPLIANCE CARD
=========================================================*/

.appliance-card{

    display:flex;
    align-items:center;

    gap:16px;

    padding:16px 18px;

    border-radius:20px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    cursor:grab;

    transition:var(--transition);

}

.appliance-card:hover{

    transform:translateY(-6px) scale(1.02);

    background:rgba(255,255,255,.12);

    border-color:rgba(255,255,255,.22);

    box-shadow:0 16px 35px rgba(0,0,0,.25);

}

.appliance-card:active{

    cursor:grabbing;

}

/*=========================================================
  ICON
=========================================================*/

.appliance-icon{

    width:60px;
    height:60px;

    border-radius:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:1.7rem;

    background:linear-gradient(
        135deg,
        rgba(91,141,239,.35),
        rgba(108,99,255,.35)
    );

    flex-shrink:0;

}

/*=========================================================
  APPLIANCE INFO
=========================================================*/

.appliance-info{

    flex:1;

    display:flex;
    flex-direction:column;

    gap:8px;

}

.appliance-info h4{

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

}

.appliance-info .badge{

    width:fit-content;

}

/*=========================================================
  DRAG INDICATOR
=========================================================*/

.drag-indicator{

    font-size:1.2rem;

    color:var(--text-muted);

    letter-spacing:2px;

    transition:var(--transition);

}

.appliance-card:hover .drag-indicator{

    color:var(--primary-light);

    transform:translateX(4px);

}

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

@media (min-width:1025px) and (max-width:1200px){

    .left-sidebar{
        position:static;
    }

}

@media (max-width:768px){

    .left-sidebar{

        padding:22px;

    }

    .appliance-card{

        padding:14px;

        gap:14px;

    }

    .appliance-icon{

        width:52px;
        height:52px;

        font-size:1.4rem;

    }

}

@media (max-width:500px){

    .sidebar-header h2{

        font-size:1.2rem;

    }

    .appliance-card{

        flex-wrap:wrap;

    }

    .drag-indicator{

        margin-left:auto;

    }

}
/*=========================================================
  CENTER PLANNER
=========================================================*/

.planner-section{

    display:flex;
    flex-direction:column;

    gap:24px;

}

/*=========================================================
  PLANNER HEADER
=========================================================*/

.planner-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    padding:28px 32px;

}

.planner-header h2{

    font-size:1.7rem;

    margin-bottom:8px;

}

.planner-header p{

    max-width:650px;

    color:var(--text-light);

}

/*=========================================================
  STATUS BADGE
=========================================================*/

.planner-status{

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(34,197,94,.12);

    border:1px solid rgba(34,197,94,.25);

    color:#9AF0B8;

    font-weight:600;

}

.status-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--success);

    box-shadow:0 0 12px var(--success);

}

/*=========================================================
  HOME LAYOUT
=========================================================*/

.home-layout{

    padding:28px;

    display:grid;

    grid-template-columns:repeat(4,1fr);
    /* grid-template-rows: repeat(8,2fr); */

    gap:20px;

}

/*=========================================================
  ROOM CARD
=========================================================*/

.room{

    min-height:250px;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;

    gap:14px;

    padding:18px;

    border-radius:20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.12);

    transition:var(--transition);

}

.room:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.09);

    border-color:rgba(255,255,255,.25);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

/*=========================================================
  ROOM HEADER
=========================================================*/

.room-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;

}

.room-header h3{

    font-size:1rem;

    font-weight:600;

    color:var(--text);

}

/*=========================================================
  DROP ZONES
=========================================================*/

.drop-zone{

    flex:1;

    min-height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:2px dashed rgba(255,255,255,.20);

    border-radius:14px;

    color:var(--text-muted);

    font-size:.82rem;

    transition:var(--transition);

    background:rgba(255,255,255,.03);

}

.drop-zone:hover{

    border-color:var(--primary);

    color:var(--primary-light);

    background:rgba(91,141,239,.08);

}

/*=========================================================
  ROOM COLORS
=========================================================*/

.living-room{

    border-top:4px solid #38BDF8;

}

.kitchen{

    border-top:4px solid #F97316;

}

.bedroom{

    border-top:4px solid #A855F7;

}

.bathroom{

    border-top:4px solid #14B8A6;

}

.dining-room{

    border-top:4px solid #EAB308;

}

.study-room{

    border-top:4px solid #6366F1;

}

.garage{

    border-top:4px solid #64748B;

}

.roof{

    border-top:4px solid #22C55E;

}

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

@media (max-width:1400px){

    .home-layout{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:900px){

    .planner-header{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media (max-width:768px){

    .home-layout{

        grid-template-columns:1fr;

    }

}

@media (max-width:500px){

    .planner-header{

        padding:22px;

    }

    .home-layout{

        padding:20px;

    }

    .room{

        min-height:220px;

    }

}
.placed-appliance{

display:flex;

flex-direction:column;

gap:10px;

align-items:center;

text-align:center;

padding:10px;

}

.hours-box{

display:flex;

align-items:center;

gap:10px;

}

.hours-box button{

width:30px;

height:30px;

cursor:pointer;

border:none;

border-radius:6px;

}

.remove-btn{

padding:8px 14px;

cursor:pointer;

border:none;

border-radius:8px;

background:#ff4d4d;

color:white;

}
footer {
    background: linear-gradient(135deg,
    #020617 0%,
    #0f172a 35%,
    #1e293b 70%,
    #2563eb 100%);
      color: white;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }
.sidebar{
    max-height:500px;
    overflow-y:auto;
    overflow-x:hidden;
}

@media(max-width:992px){

    .sidebar{
        max-height:none;
        overflow:visible;
    }

}
/* ==========================================
   MOBILE FIXED LEFT SIDEBAR
========================================== */

@media (max-width:767px){

body{
    overflow-x:hidden;
}

/* Fixed Sidebar */

.left-sidebar{

    position:fixed;

    top:0;
    left:0;

    width:120px;

    height:100vh;

    overflow-y:auto;

    padding:10px;

    z-index:1000;

    border-radius:0;

    background:#0f172a;

    border-right:1px solid rgba(255,255,255,.15);

    box-shadow:none !important;

}

/* Sidebar inner */

.sidebar{

    max-height:none;

    overflow:visible;
}

/* Main content starts after sidebar */

.dashboard{

    margin-left:130px;

    width:calc(100% - 130px);

    padding:10px;
}

/* Everything stacks normally */

.dashboard-body{

    display:flex;

    flex-direction:column;

    gap:15px;

}

/* Planner */

.home-layout{

    grid-template-columns:1fr;

    padding:12px;

}

/* Rooms */

.room{

    min-height:auto;

}

/* Right analytics */

.right-sidebar{
    display:flex;
    flex-direction:column;
    gap:20px;

    position:sticky;
    top:30px;

    align-self:start;
}

/* Appliance cards */

.appliance-card{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:8px;

    gap:5px;

}

.appliance-icon{

    width:40px;

    height:40px;

    font-size:20px;

}

.appliance-info h4{

    font-size:11px;

}

.badge{

    font-size:10px;

}

.drag-indicator{

    display:none;

}

/* Remove hover animation */

.left-sidebar:hover{

    transform:none;

}

}
/* tablet responsive */
/* ==========================================
   TABLET FIXED LEFT SIDEBAR
   768px - 1199px
========================================== */

@media (min-width:768px) and (max-width:1199px){

body{
    overflow-x:hidden;
}

.left-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:clamp(180px, 24vw, 230px);
    height:100vh;
    overflow-y:auto;
    padding:18px;
    z-index:1000;
    border-radius:0;
    background:#0f172a;
    border-right:1px solid rgba(255,255,255,.15);
}

.dashboard{
    width:auto;
    margin:30px 20px 30px calc(clamp(180px,24vw,230px) + 20px);
    padding:0;
}

.dashboard-body{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.home-layout{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.right-sidebar{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}
.planner-section{
    min-width:0;
}
}
html,
body{
    height:auto;
    overflow-y:auto;
}
footer{
    width:100%;
    margin-top:40px;
    clear:both;
}