/* =========================================================
   ETEMI ALEM — ADMIN PANEL
   PREMIUM CORPORATE / INDUSTRIAL UI v2
   Responsive • Clean • Professional • No framework
   ========================================================= */

:root{
    --navy:#071824;
    --navy-2:#0c2436;
    --navy-3:#12364e;
    --blue:#176fe5;
    --blue-2:#3f9bff;
    --blue-soft:#eaf3ff;

    --bg:#f3f6f8;
    --surface:#ffffff;
    --surface-2:#f8fafb;

    --text:#142a38;
    --text-2:#334b59;
    --muted:#738490;
    --muted-2:#93a0aa;

    --line:#dce5ea;
    --line-soft:#edf1f3;

    --green:#16815b;
    --green-bg:#eaf7f1;
    --red:#c44348;
    --red-bg:#fff0f0;
    --orange:#b87919;
    --orange-bg:#fff6e5;

    --shadow-xs:0 2px 10px rgba(7,24,36,.04);
    --shadow-sm:0 8px 28px rgba(7,24,36,.06);
    --shadow:0 18px 50px rgba(7,24,36,.08);
    --shadow-lg:0 28px 75px rgba(7,24,36,.13);

    --radius:10px;
    --radius-lg:14px;
    --sidebar:268px;
    --header:82px;

    --display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --ease:cubic-bezier(.2,.7,.2,1);
}

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    font-size:14px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

button,
a,
input,
select,
textarea{
    -webkit-tap-highlight-color:transparent;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

::selection{
    background:rgba(23,111,229,.17);
    color:var(--navy);
}

:focus-visible{
    outline:3px solid rgba(23,111,229,.25);
    outline-offset:2px;
}

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

.admin-shell{
    min-height:100vh;
    display:flex;
}

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

.sidebar{
    width:var(--sidebar);
    background:
        radial-gradient(circle at 80% 5%,rgba(63,155,255,.12),transparent 28%),
        linear-gradient(180deg,#061521 0%,#091d2c 58%,#071824 100%);
    color:#fff;
    position:fixed;
    inset:0 auto 0 0;
    padding:22px 14px 18px;
    z-index:100;
    overflow-y:auto;
    border-right:1px solid rgba(255,255,255,.045);
    box-shadow:8px 0 35px rgba(2,13,22,.08);
}

.admin-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:5px 12px 25px;
    margin-bottom:7px;
}

.admin-brand .brand-mark{
    width:43px;
    height:43px;
    flex:0 0 43px;
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-size:12px;
    font-weight:900;
    letter-spacing:-.4px;
    box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.admin-brand b{
    display:block;
    font:850 15px/1 var(--display);
    letter-spacing:1px;
}

.admin-brand small{
    display:block;
    color:#7891a1;
    font-size:7px;
    letter-spacing:3px;
    margin-top:5px;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
}

.sidebar nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:45px;
    padding:10px 13px;
    margin:3px 0;
    border:1px solid transparent;
    border-radius:8px;
    color:#9badb9;
    font-size:12px;
    font-weight:750;
    transition:.2s var(--ease);
}

.sidebar nav a::before{
    content:"";
    width:3px;
    height:18px;
    position:absolute;
    left:-1px;
    top:50%;
    transform:translateY(-50%) scaleY(0);
    border-radius:0 3px 3px 0;
    background:var(--blue-2);
    transition:.2s var(--ease);
}

.sidebar nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.055);
}

.sidebar nav a.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(23,111,229,.20),rgba(23,111,229,.08));
    border-color:rgba(63,155,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.sidebar nav a.active::before{
    transform:translateY(-50%) scaleY(1);
}

.nav-sep{
    height:1px;
    background:rgba(255,255,255,.075);
    margin:20px 11px;
}

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

.admin-main{
    margin-left:var(--sidebar);
    width:calc(100% - var(--sidebar));
    min-width:0;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.admin-top{
    height:var(--header);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:0 38px;
    position:sticky;
    top:0;
    z-index:50;
}

.admin-top > div:first-child{
    min-width:0;
}

.admin-kicker{
    display:block;
    font-size:8px;
    line-height:1;
    letter-spacing:2.1px;
    font-weight:900;
    color:var(--blue);
    text-transform:uppercase;
}

.admin-top h1{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:850 24px/1.15 var(--display);
    color:var(--navy);
    margin:5px 0 0;
    letter-spacing:-.55px;
}

.avatar{
    width:41px;
    height:41px;
    flex:0 0 41px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--blue-soft);
    color:#163b58;
    border:1px solid #d7e7f5;
    font:850 12px var(--display);
}

.side-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    background:#f2f6f8;
    color:var(--navy);
    padding:9px;
    border-radius:8px;
    cursor:pointer;
}

.side-toggle:hover{
    background:#e9f0f4;
}

/* =========================================================
   CONTENT
   ========================================================= */

.admin-content{
    padding:34px 38px 55px;
    max-width:1700px;
    margin:0 auto;
}

/* =========================================================
   ALERTS
   ========================================================= */

.admin-alert{
    padding:13px 16px;
    border:1px solid #d8e7f3;
    border-radius:9px;
    background:#eef6fd;
    color:#24577e;
    margin-bottom:20px;
    font-size:12px;
    box-shadow:var(--shadow-xs);
}

.admin-alert.success{
    border-color:#cfe9dc;
    background:var(--green-bg);
    color:#17684a;
}

.admin-alert.error{
    border-color:#f0d0d0;
    background:var(--red-bg);
    color:#9d3036;
}

/* =========================================================
   STATS
   ========================================================= */

.stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
    margin-bottom:22px;
}

.stat{
    position:relative;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    padding:23px 24px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:.25s var(--ease);
}

.stat::after{
    content:"";
    position:absolute;
    right:-30px;
    bottom:-35px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(23,111,229,.055);
}

.stat:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:#cfdce4;
}

.stat small{
    position:relative;
    z-index:1;
    display:block;
    text-transform:uppercase;
    letter-spacing:1.45px;
    color:var(--muted);
    font-size:8px;
    font-weight:900;
}

.stat strong{
    position:relative;
    z-index:1;
    display:block;
    font:850 36px/1 var(--display);
    margin-top:13px;
    color:var(--navy);
    letter-spacing:-1.2px;
}

/* =========================================================
   CARDS
   ========================================================= */

.admin-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    margin-bottom:22px;
}

.admin-card-head{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 23px;
    border-bottom:1px solid var(--line);
    background:#fff;
}

.admin-card-head h2{
    color:var(--navy);
    font:850 17px/1.2 var(--display);
    margin:0;
    letter-spacing:-.3px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
    min-height:40px;
    border:1px solid transparent;
    border-radius:7px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:10px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    transition:.2s var(--ease);
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    background:var(--blue);
    color:#fff;
    box-shadow:0 8px 20px rgba(23,111,229,.17);
}

.btn-primary:hover{
    background:#0d5fca;
    box-shadow:0 11px 25px rgba(23,111,229,.22);
}

.btn-secondary{
    background:#f5f7f9;
    border-color:#dbe4e9;
    color:#334955;
}

.btn-secondary:hover{
    background:#eaf0f4;
}

.btn-danger{
    background:var(--red-bg);
    color:#a73238;
    border-color:#f0d0d0;
}

.btn-danger:hover{
    background:#ffe4e4;
}

.btn-small{
    min-height:32px;
    padding:0 10px;
    font-size:9px;
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

/* =========================================================
   TABLE
   ========================================================= */

.table-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

.data-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

.data-table th{
    padding:12px 16px;
    background:#f7f9fa;
    border-bottom:1px solid var(--line);
    text-align:left;
    color:#788994;
    font-size:8px;
    line-height:1.3;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-weight:900;
    white-space:nowrap;
}

.data-table td{
    padding:13px 16px;
    border-top:1px solid var(--line-soft);
    vertical-align:middle;
    color:#344b58;
    font-size:11px;
}

.data-table tbody tr{
    transition:.15s;
}

.data-table tbody tr:hover{
    background:#fbfcfd;
}

.thumb{
    width:68px;
    height:50px;
    object-fit:cover;
    background:#e9eef2;
    border:1px solid #e0e7eb;
    border-radius:7px;
}

/* =========================================================
   BADGES / STATUS
   ========================================================= */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    font-size:8px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
}

.badge::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor;
}

.badge.on{
    background:var(--green-bg);
    color:#19704e;
}

.badge.off{
    background:#f0f3f5;
    color:#74818b;
}

.actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

/* =========================================================
   RECENT LIST
   ========================================================= */

.recent-list{
    padding:0 23px;
}

.recent-row{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid var(--line-soft);
}

.recent-row:last-child{
    border-bottom:0;
}

.recent-row img,
.recent-row .thumb{
    width:58px;
    height:44px;
    object-fit:cover;
    border-radius:6px;
}

.recent-row b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--navy);
    font-size:12px;
    font-weight:800;
}

.recent-row span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:2px;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:19px;
    padding:26px;
}

.field{
    min-width:0;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    display:block;
    color:#304551;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-bottom:7px;
}

.field input,
.field select,
.field textarea{
    width:100%;
    border:1px solid #d5dfe5;
    background:#fbfcfd;
    border-radius:7px;
    padding:11px 12px;
    outline:none;
    color:var(--text);
    font-size:12px;
    line-height:1.5;
    transition:.2s var(--ease);
}

.field input{
    min-height:43px;
}

.field select{
    min-height:43px;
    cursor:pointer;
}

.field textarea{
    min-height:155px;
    resize:vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover{
    border-color:#bdcbd4;
    background:#fff;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#6ea8e9;
    box-shadow:0 0 0 4px rgba(23,111,229,.07);
    background:#fff;
}

.field input[type="checkbox"]{
    width:auto;
    min-height:auto;
    vertical-align:middle;
    accent-color:var(--blue);
    cursor:pointer;
}

.hint{
    font-size:9px;
    line-height:1.5;
    color:#8796a1;
    margin-top:6px;
}

.preview{
    display:block;
    width:100%;
    max-width:450px;
    max-height:260px;
    object-fit:contain;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#edf2f5;
}

.current-file{
    font-size:9px;
    color:#527083;
    margin-bottom:7px;
}

/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    padding:17px 26px;
    border-top:1px solid var(--line);
    background:#fafcfd;
}

/* =========================================================
   TOOLBAR / SEARCH
   ========================================================= */

.admin-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:19px;
    flex-wrap:wrap;
}

.admin-search{
    display:flex;
    min-height:40px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
    box-shadow:var(--shadow-xs);
}

.admin-search input{
    width:300px;
    min-width:0;
    border:0;
    outline:0;
    padding:9px 12px;
    background:transparent;
    color:var(--text);
    font-size:11px;
}

.admin-search input::placeholder{
    color:#9aa7af;
}

.admin-search button{
    min-width:42px;
    border:0;
    background:var(--navy);
    color:#fff;
    padding:0 14px;
    font-size:10px;
    font-weight:850;
    cursor:pointer;
}

.admin-search button:hover{
    background:var(--navy-3);
}

/* =========================================================
   UPLOAD
   ========================================================= */

.gallery-upload{
    border:1px dashed #b9c9d4;
    background:linear-gradient(180deg,#fafcfd,#f6f9fa);
    padding:19px;
    border-radius:9px;
    transition:.2s;
}

.gallery-upload:hover{
    border-color:#82afd6;
    background:#f7fbff;
}

.gallery-upload strong{
    display:block;
    color:var(--navy);
    font-size:11px;
}

.gallery-upload p{
    color:var(--muted);
    font-size:9px;
    line-height:1.5;
    margin:4px 0 11px;
}

.gallery-upload input{
    max-width:100%;
    font-size:10px;
}

.gallery-current{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:15px;
}

.gallery-current label{
    position:relative;
    display:block;
    cursor:pointer;
}

.gallery-current img{
    width:100%;
    height:100px;
    object-fit:cover;
    border:1px solid var(--line);
    border-radius:7px;
    transition:.2s;
}

.gallery-current label:hover img{
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.gallery-current input{
    position:absolute!important;
    left:7px;
    top:7px;
    z-index:2;
    width:auto!important;
    accent-color:var(--blue);
}

/* =========================================================
   STATUS TOGGLE
   ========================================================= */

.status-toggle{
    border:0;
    cursor:pointer;
    padding:5px 9px;
    border-radius:999px;
    font-size:8px;
    line-height:1;
    font-weight:900;
    transition:.2s;
}

.status-toggle:hover{
    transform:translateY(-1px);
}

.status-toggle.on{
    background:var(--green-bg);
    color:#176c4a;
}

.status-toggle.off{
    background:#f0f3f5;
    color:#74828c;
}

/* =========================================================
   EMPTY / INFO STATES
   ========================================================= */

.admin-empty{
    padding:55px 25px;
    text-align:center;
    color:var(--muted);
}

.admin-empty strong{
    display:block;
    color:var(--navy);
    font:800 18px var(--display);
    margin-bottom:6px;
}

/* =========================================================
   DESKTOP LARGE
   ========================================================= */

@media (min-width:1441px){
    :root{
        --sidebar:280px;
    }

    .admin-content{
        padding:38px 48px 65px;
    }

    .admin-top{
        padding:0 48px;
    }

    .stat{
        padding:26px;
    }

    .stat strong{
        font-size:39px;
    }
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width:1180px){
    :root{
        --sidebar:245px;
    }

    .admin-content{
        padding:30px 28px 50px;
    }

    .admin-top{
        padding:0 28px;
    }

    .sidebar nav a{
        font-size:11.5px;
    }

    .admin-search input{
        width:250px;
    }

    .gallery-current{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){
    :root{
        --header:74px;
    }

    .sidebar{
        width:260px;
        transform:translateX(-105%);
        transition:transform .25s var(--ease);
        box-shadow:20px 0 55px rgba(0,0,0,.18);
    }

    .sidebar.open{
        transform:translateX(0);
    }

    .admin-main{
        margin-left:0;
        width:100%;
    }

    .side-toggle{
        display:grid;
        place-items:center;
    }

    .admin-top{
        height:var(--header);
        padding:0 20px;
    }

    .admin-top h1{
        font-size:21px;
    }

    .admin-content{
        padding:25px 20px 45px;
    }

    .gallery-current{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:620px){
    body{
        font-size:13px;
    }

    .admin-top{
        gap:12px;
        padding:0 15px;
    }

    .admin-top h1{
        font-size:18px;
    }

    .admin-kicker{
        font-size:7px;
        letter-spacing:1.6px;
    }

    .avatar{
        width:37px;
        height:37px;
        flex-basis:37px;
        font-size:10px;
    }

    .side-toggle{
        width:39px;
        height:39px;
    }

    .admin-content{
        padding:20px 14px 38px;
    }

    .stats{
        grid-template-columns:1fr;
        gap:11px;
    }

    .stat{
        padding:20px;
    }

    .stat strong{
        font-size:32px;
    }

    .admin-card{
        border-radius:10px;
        margin-bottom:17px;
    }

    .admin-card-head{
        min-height:auto;
        align-items:flex-start;
        flex-direction:column;
        padding:17px;
        gap:12px;
    }

    .admin-card-head .btn{
        width:100%;
    }

    .form-grid{
        grid-template-columns:1fr;
        padding:19px;
        gap:16px;
    }

    .field.full{
        grid-column:auto;
    }

    .form-actions{
        padding:15px;
        justify-content:stretch;
    }

    .form-actions .btn{
        flex:1;
    }

    .admin-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-toolbar > *{
        width:100%;
    }

    .admin-toolbar .btn{
        width:100%;
    }

    .admin-search{
        width:100%;
    }

    .admin-search input{
        width:100%;
    }

    .gallery-current{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .gallery-current img{
        height:110px;
    }

    .recent-list{
        padding:0 17px;
    }

    .recent-row{
        grid-template-columns:50px minmax(0,1fr);
        gap:11px;
    }

    .recent-row img,
    .recent-row .thumb{
        width:50px;
        height:40px;
    }

    .recent-row .actions{
        grid-column:2;
    }

    .data-table{
        min-width:780px;
    }

    .data-table th,
    .data-table td{
        padding-left:12px;
        padding-right:12px;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:390px){
    .admin-content{
        padding-left:11px;
        padding-right:11px;
    }

    .admin-top{
        padding-left:11px;
        padding-right:11px;
    }

    .admin-top h1{
        font-size:16px;
    }

    .admin-kicker{
        display:none;
    }

    .avatar{
        display:none;
    }

    .stat strong{
        font-size:29px;
    }

    .form-grid{
        padding:15px;
    }

    .gallery-current{
        gap:7px;
    }

    .gallery-current img{
        height:95px;
    }

    .btn{
        min-height:39px;
        padding-left:11px;
        padding-right:11px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition:none!important;
    }
}