:root{
    --bg: #f3f6fb;
    --bg-soft: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f9fbfd;

    --text: #0f172a;
    --text-soft: #475569;
    --text-faint: #64748b;

    --line: #dbe4ee;
    --line-strong: #c9d6e4;

    --brand: #0f766e;
    --brand-strong: #0b5f59;
    --brand-soft: #ecfdf5;

    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 14px 38px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);

    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;

    --badge-gray-bg: #eef2f7;
    --badge-gray-text: #334155;

    --badge-blue-bg: #eaf2ff;
    --badge-blue-text: #1d4ed8;

    --badge-teal-bg: #e7fffb;
    --badge-teal-text: #0f766e;

    --badge-green-bg: #ebfbef;
    --badge-green-text: #15803d;

    --badge-red-bg: #fff1f2;
    --badge-red-text: #be123c;

    --badge-amber-bg: #fff8e8;
    --badge-amber-text: #b45309;

    --focus: 0 0 0 4px rgba(15, 118, 110, 0.12);

    --content-width: 1320px;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html{
    scroll-behavior:smooth;
}

html, body{
    margin:0;
    padding:0;
    min-height:100%;
    background:
        radial-gradient(circle at top left, rgba(15,118,110,.045), transparent 28%),
        linear-gradient(180deg, #f6f8fc 0%, #f2f5fa 100%);
    color:var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
}

body[dir="rtl"]{
    text-align:right;
}

a{
    color:inherit;
}

button,
input,
select{
    font:inherit;
}

.site-shell{
    width:min(var(--content-width), calc(100% - 24px));
    margin:0 auto;
    padding:18px 0 28px;
}

/* =========================
   LOGIN
========================= */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 0;
}

.login-card{
    width:min(100%, 460px);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border:1px solid rgba(219,228,238,.9);
    border-radius:28px;
    box-shadow:var(--shadow-lg);
    padding:30px;
    position:relative;
    overflow:hidden;
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg, var(--brand) 0%, #10b981 100%);
}

.brand{
    color:var(--brand);
    font-size:14px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.login-card h1{
    margin:0 0 10px;
    font-size:31px;
    line-height:1.05;
    letter-spacing:-.03em;
}

.muted{
    color:var(--text-faint);
    font-size:14px;
    line-height:1.55;
}

.alert-error{
    background:#fef2f2;
    color:#991b1b;
    border:1px solid #fecaca;
    border-radius:16px;
    padding:13px 14px;
    margin:16px 0 0;
    font-size:14px;
    font-weight:700;
}

.login-form{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.login-form label{
    font-size:13px;
    font-weight:900;
    color:var(--text-soft);
    letter-spacing:.02em;
}

.login-form input{
    width:100%;
    height:54px;
    border:1px solid var(--line);
    border-radius:16px;
    padding:0 16px;
    background:#fff;
    color:var(--text);
    font-size:16px;
    font-weight:700;
    outline:none;
    transition:.18s ease;
}

.login-form input::placeholder{
    color:#94a3b8;
    font-weight:600;
}

.login-form input:focus{
    border-color:#8dcac5;
    box-shadow:var(--focus);
}

.login-form button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:52px;
    border:none;
    border-radius:16px;
    background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:0 12px 24px rgba(15,118,110,.18);
}

.login-form button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(15,118,110,.22);
}

.login-form button:active{
    transform:translateY(0);
}

/* =========================
   TOPBAR
========================= */
.topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(10px);
    border:1px solid rgba(219,228,238,.85);
    border-radius:24px;
    box-shadow:var(--shadow-sm);
    padding:18px 18px 16px;
}

.topbar-main{
    min-width:0;
}

.brand-sm{
    color:var(--brand);
    font-size:12px;
    font-weight:900;
    margin-bottom:8px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.topbar-main h1{
    margin:0 0 6px;
    font-size:clamp(24px, 4vw, 34px);
    line-height:1.05;
    font-weight:950;
    letter-spacing:-.04em;
    word-break:break-word;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    flex-shrink:0;
}

.lang-switcher{
    display:flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:4px;
    box-shadow:var(--shadow-sm);
}

.lang-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:86px;
    height:40px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    color:var(--text-soft);
    font-size:14px;
    font-weight:900;
    transition:.18s ease;
}

.lang-btn:hover{
    background:#f3f7fa;
}

.lang-btn.active{
    background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
    color:#fff;
    box-shadow:0 8px 16px rgba(15,118,110,.18);
}

.logout-btn,
.filter-clear-btn,
.expand-btn,
.file-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.18s ease;
}

.logout-btn{
    min-width:112px;
    height:44px;
    padding:0 16px;
    border:none;
    border-radius:14px;
    background:#0f172a;
    color:#fff;
    font-weight:900;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
}

.logout-btn:hover{
    background:#111f38;
    transform:translateY(-1px);
}

/* =========================
   STATS
========================= */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:16px;
}

.stat-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,251,253,.98) 100%);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow-sm);
    padding:16px 16px 15px;
}

.stat-card::after{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg, var(--brand) 0%, #22c55e 100%);
    opacity:.9;
}

.stat-label{
    color:var(--text-faint);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:8px;
}

.stat-value{
    font-size:clamp(28px, 4vw, 36px);
    line-height:1;
    font-weight:950;
    letter-spacing:-.04em;
}

/* =========================
   TABS
========================= */
.tabs-bar{
    position:sticky;
    top:8px;
    z-index:30;
    display:flex;
    gap:8px;
    padding:6px 0 14px;
    margin-bottom:2px;
    background:linear-gradient(180deg, rgba(243,246,251,.96) 0%, rgba(243,246,251,.88) 100%);
    backdrop-filter:blur(10px);
}

.tab-btn{
    height:46px;
    padding:0 18px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text-soft);
    border-radius:14px;
    cursor:pointer;
    font-weight:900;
    box-shadow:var(--shadow-sm);
    white-space:nowrap;
    transition:.18s ease;
}

.tab-btn:hover{
    background:#f8fbfd;
    color:var(--text);
}

.tab-btn.active{
    background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
    color:#fff;
    border-color:transparent;
    box-shadow:0 12px 24px rgba(15,118,110,.18);
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:block;
}

/* =========================
   CARDS / PANELS
========================= */
.overview-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.overview-block,
.section,
.portal-card,
.empty-state{
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow-sm);
}

.overview-block,
.section{
    padding:16px;
}

.section{
    margin-bottom:18px;
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.section-head h2{
    margin:0;
    font-size:20px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.03em;
}

.mini-list{
    display:grid;
    gap:10px;
}

.mini-card{
    border:1px solid var(--line);
    border-radius:18px;
    padding:13px 13px 12px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:0 3px 10px rgba(15,23,42,.03);
}

.mini-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.mini-top strong{
    font-size:15px;
    font-weight:900;
    line-height:1.3;
}

.mini-meta{
    display:grid;
    gap:6px;
    color:var(--text-faint);
    font-size:14px;
    line-height:1.5;
}

.filters-bar{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:10px;
    margin-bottom:14px;
}

.filter-input,
.filter-select{
    width:100%;
    height:50px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    padding:0 15px;
    font-size:15px;
    font-weight:700;
    color:var(--text);
    outline:none;
    transition:.18s ease;
}

.filter-input::placeholder{
    color:#94a3b8;
    font-weight:600;
}

.filter-input:focus,
.filter-select:focus{
    border-color:#8dcac5;
    box-shadow:var(--focus);
}

.filter-clear-btn{
    height:50px;
    padding:0 16px;
    border:none;
    border-radius:16px;
    background:#0f172a;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.filter-clear-btn:hover{
    background:#111f38;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:14px;
}

.portal-card{
    padding:18px;
    position:relative;
    overflow:hidden;
}

.portal-card::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, rgba(15,118,110,.9) 0%, rgba(34,197,94,.8) 100%);
    opacity:.75;
}

.project-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.card-title{
    font-size:19px;
    font-weight:950;
    line-height:1.22;
    letter-spacing:-.03em;
    margin-bottom:8px;
    word-break:break-word;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
    letter-spacing:.01em;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}

.badge.created,
.badge.scheduled{
    background:var(--badge-gray-bg);
    color:var(--badge-gray-text);
}

.badge.in-progress,
.badge.received{
    background:var(--badge-blue-bg);
    color:var(--badge-blue-text);
}

.badge.departed,
.badge.shipped,
.badge.released{
    background:var(--badge-teal-bg);
    color:var(--badge-teal-text);
}

.badge.arrived,
.badge.delivered{
    background:var(--badge-green-bg);
    color:var(--badge-green-text);
}

.badge.cancelled{
    background:var(--badge-red-bg);
    color:var(--badge-red-text);
}

.meta-list{
    display:grid;
    gap:8px;
    font-size:14px;
    line-height:1.58;
    color:var(--text-soft);
}

.meta-list strong{
    color:var(--text);
    font-weight:900;
}

.meta-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 14px;
}

.expand-btn{
    min-width:126px;
    height:42px;
    padding:0 14px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    border-radius:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
}

.expand-btn:hover{
    background:#f8fbfd;
}

.expand-panel{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line);
}

.subsection{
    margin-top:18px;
}

.subsection:first-child{
    margin-top:0;
}

.subsection h3{
    margin:0 0 10px;
    font-size:16px;
    line-height:1.2;
    font-weight:950;
    letter-spacing:-.02em;
}

.nested-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
    margin-top:10px;
}

.nested-card{
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:0 4px 12px rgba(15,23,42,.035);
}

.nested-title{
    font-size:15px;
    font-weight:950;
    line-height:1.35;
    margin-bottom:8px;
    word-break:break-word;
}

.files-block{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed var(--line-strong);
}

.files-title{
    font-size:12px;
    font-weight:950;
    color:var(--text-faint);
    text-transform:uppercase;
    letter-spacing:.07em;
    margin-bottom:8px;
}

.file-list{
    display:grid;
    gap:8px;
}

.file-link{
    min-height:44px;
    padding:11px 12px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    color:var(--text);
    font-weight:900;
    text-align:center;
    box-shadow:0 2px 8px rgba(15,23,42,.03);
}

.file-link:hover{
    background:#f8fbfd;
    border-color:#c6d4e2;
    transform:translateY(-1px);
}

.empty-state{
    padding:20px;
    color:var(--text-faint);
    font-weight:800;
    line-height:1.5;
}

.empty-inline{
    color:var(--text-faint);
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    padding:8px 0 2px;
}

.hidden{
    display:none !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
    .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .overview-grid{
        grid-template-columns:1fr;
    }

    .filters-bar{
        grid-template-columns:1fr 1fr;
    }

    .meta-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .site-shell{
        width:min(100% - 16px, var(--content-width));
        padding:10px 0 22px;
    }

    .topbar{
        flex-direction:column;
        gap:12px;
        padding:16px;
        border-radius:20px;
    }

    .topbar-main h1{
        font-size:26px;
    }

    .topbar-actions{
        width:100%;
        justify-content:space-between;
    }

    .lang-switcher{
        width:100%;
        flex:1 1 auto;
    }

    .lang-btn{
        flex:1 1 auto;
        min-width:0;
    }

    .logout-btn{
        width:100%;
        height:46px;
    }

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

    .stat-card{
        padding:14px;
        border-radius:18px;
    }

    .stat-label{
        font-size:11px;
    }

    .stat-value{
        font-size:28px;
    }

    .tabs-bar{
        overflow:auto;
        padding:6px 0 12px;
    }

    .tab-btn{
        flex:0 0 auto;
        min-width:120px;
        height:44px;
    }

    .overview-block,
    .section,
    .portal-card,
    .empty-state{
        border-radius:20px;
    }

    .section,
    .overview-block,
    .portal-card{
        padding:14px;
    }

    .section-head h2{
        font-size:18px;
    }

    .filters-bar{
        grid-template-columns:1fr;
    }

    .filter-input,
    .filter-select,
    .filter-clear-btn{
        width:100%;
        height:48px;
    }

    .card-grid{
        grid-template-columns:1fr;
    }

    .nested-grid{
        grid-template-columns:1fr;
    }

    .project-head,
    .mini-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .expand-btn{
        width:100%;
        height:44px;
    }

    .badge{
        min-height:38px;
        font-size:14px;
        padding:9px 14px;
    }

    .card-title{
        font-size:17px;
    }

    .meta-list{
        font-size:15px;
    }

    .file-link{
        width:100%;
        min-height:46px;
    }

    .mini-card,
    .nested-card{
        border-radius:16px;
    }
}

@media (max-width: 420px){
    .site-shell{
        width:min(100% - 12px, var(--content-width));
    }

    .login-card{
        padding:24px 18px;
        border-radius:22px;
    }

    .login-card h1{
        font-size:28px;
    }

    .topbar-main h1{
        font-size:23px;
    }

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

    .stat-value{
        font-size:24px;
    }

    .card-title{
        font-size:16px;
    }

    .meta-list{
        font-size:14px;
    }
}