<style>
/* ======================= BASE ======================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}
body.dash-body{
    background:#58616a;
    color:#fff;
    overflow-x:hidden;
}
.layout{
    display:flex;
    min-height:100vh;
}

/* ======================= SIDEBAR ======================= */
/* Slide-in left menu – Amazon Flex look */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:280px;                         /* ოდნავ ვიწრო, როგორც ორიგინალში */
    background:#000;                     /* ქვედა ნაწილი შავი */
    display:flex;
    flex-direction:column;
    transform:translateX(-100%);         /* ნაგულისხმევად დამალული */
    transition:transform .3s ease;
    z-index:1000;
    border-right:1px solid #20252b;      /* მარჯვენა მუქი ზოლი */
}
.sidebar.open{
    transform:translateX(0);
}

/* X ღილაკი */
.sidebar-close{
    position:absolute;
    top:12px;
    left:12px;
    background:none;
    border:none;
    color:#fff;
    font-size:26px;
    cursor:pointer;
    z-index:1100;
}

/* ზედა ლურჯი header */
.sidebar-header{
    width:100%;
    background:#005b74;
    padding-top:60px;                    /* avatar ცოტა დაბლა ჩამოსდეს */
    padding-bottom:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.18);
}
.avatar-wrapper{
    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid #fff;
    margin-bottom:10px;
}
.avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.sidebar-name{
    font-size:15px;
    font-weight:bold;
    margin-bottom:2px;
}
.sidebar-role{
    font-size:12px;
    color:#d0e6f0;
}

/* „Change avatar“ ზოლი */
.avatar-form{
    background:#004f6b;
    border-bottom:1px solid rgba(0,0,0,0.55);
}
.avatar-upload-label{
    display:block;
    padding:10px 20px;                   /* მაღალი ზოლი, როგორც სქრინზე */
    font-size:12px;
    color:#e5f4ff;
    cursor:pointer;
}
.avatar-upload-label input{
    display:none;
}

/* მენიუს შავი ნაწილი */
.sidebar-nav{
    flex:1;
    overflow-y:auto;
    background:#000;
}
.sidebar-nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
.sidebar-nav li a{
    display:block;
    padding:16px 20px;                   /* ზოლის სიმაღლე Flex-ისებურად */
    font-size:14px;
    color:#f5f5f5;
    background:#000;
    border-bottom:1px solid #1a1a1a;
}
.sidebar-nav li a:hover{
    background:#151515;
}
.sidebar-nav li.active a{
    background:#0078d4;
    color:#fff;
}

/* Driver Support */
.sidebar-nav li.support a{
    background:#002435;
    color:#36baff;
    border-top:1px solid #111;
}

/* Emergency Help */
.sidebar-nav li.emergency a{
    background:#000;
    color:#ff5a6a;
    border-top:1px solid #111;
}

/* scroll bar */
.sidebar-nav::-webkit-scrollbar{
    width:6px;
}
.sidebar-nav::-webkit-scrollbar-track{
    background:#000;
}
.sidebar-nav::-webkit-scrollbar-thumb{
    background:#444;
    border-radius:3px;
}

/* ======================= MAIN HEADER ======================= */
.main-content{
    flex:1;
    margin-left:0;
}
.it-header{
    background:#0e4e68;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.menu-icon i{
    font-size:22px;
    cursor:pointer;
}
.it-header-title{
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
}
.it-header-icons i{
    margin-left:16px;
    font-size:18px;
}

/* ======================= TABS ======================= */
.it-tabs{
    background:#333032;
    display:flex;
    justify-content:space-around;
    border-bottom:1px solid #555;
}
.it-tab{
    flex:1;
    text-align:center;
    padding:14px 0;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:13px;
    font-weight:bold;
    color:#cfd8dc;
    cursor:pointer;
}
.it-tab.active{
    color:#fff;
    border-bottom:3px solid #fff;
}

/* ======================= SEARCH ======================= */
.it-search-container{
    background:#111;
    padding:8px 10px;
}
.it-search-box{
    background:#333;
    border-radius:4px;
    padding:8px 12px;
    display:flex;
    align-items:center;
}
.it-search-box input{
    border:none;
    background:none;
    color:#fff;
    margin-left:8px;
    width:100%;
    outline:none;
}

/* ======================= ITINERARY (Timeline) ======================= */
.it-itinerary-list{
    padding:20px 0 60px;
    max-width:900px;
    margin:0 auto;
    position:relative;
}
.it-itinerary-list::before{
    content:"";
    position:absolute;
    left:70px;
    top:20px;
    bottom:20px;
    width:2px;
    background:#d0d0d0;
}

.it-stop-item{
    display:flex;
    align-items:flex-start;
    margin-bottom:35px;
    position:relative;
    z-index:1;
}
.it-stop-indicator{
    width:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.it-circle{
    width:26px;
    height:26px;
    border-radius:50%;
    border:2px solid #fff;
    background:#58616a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:bold;
}
.it-stop-item.completed .it-circle{
    background:#888;
    border-color:#888;
}
.it-stop-item.active .it-circle{
    background:#4caf50;
    border-color:#4caf50;
}

.it-stop-content{
    flex:1;
    margin-left:25px;
}

.it-completed-text{
    font-size:14px;
    color:#f5f5f5;
}
.it-completed-address{
    font-size:13px;
    color:#e0e0e0;
}

/* ======================= Route Black Cards ======================= */
.it-info-card{
    background:#000;
    padding:16px 18px;
    border-radius:3px;
    border-top:1px solid #333;
    margin-top:6px;
    width:100%;            /* დიდი შავი ბლოკები */
}
.it-status-header{
    display:flex;
    align-items:center;
    font-weight:bold;
    margin-bottom:6px;
}
.it-status-header.green{color:#4caf50;}
.it-status-header.blue{color:#2196f3;}
.it-status-header i{margin-right:6px;}
.it-order-id{
    font-weight:bold;
    margin-bottom:4px;
}
.it-address{
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:4px;
}
.it-package-count{
    color:#ccc;
    font-size:13px;
}
</style>
