@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --black: #05050a;
    --deep: #12091f;
    --purple: #4d1a7f;
    --lilac: #7d4db4;
    --muted: #bdb7c7;
    --white: #fff;
    --glass: rgba(255,255,255,.08);
    --stroke: rgba(255,255,255,.16);
    --danger: #ff5d78;
    --success: #48d597;
    --warning: #f6bd60;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Tajawal, Arial, sans-serif;
    background:
        radial-gradient(circle at 20% 10%, rgba(125,77,180,.55), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(77,26,127,.6), transparent 35%),
        linear-gradient(135deg, #05050a, #12091f 55%, #090710);
    color: var(--white);
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.bg-orb { position: fixed; border-radius: 999px; filter: blur(10px); opacity: .55; pointer-events:none; }
.orb-1 { width: 380px; height: 380px; background: rgba(125,77,180,.22); right: -80px; top: 80px; }
.orb-2 { width: 480px; height: 480px; background: rgba(77,26,127,.25); left: -160px; bottom: -120px; }
.bg-grid {
    position: fixed; inset: 0; pointer-events:none; opacity:.18;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black, transparent 75%);
}
.glass {
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    border: 1px solid var(--stroke);
    box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.center-wrap {
    min-height: calc(100vh - 45px);
    display: grid;
    place-items: center;
    padding: 42px 18px;
}
.login-card {
    width: min(510px, 100%);
    border-radius: 32px;
    padding: 34px;
    text-align: center;
    position: relative;
}
.logo-mark {
    font-weight: 900;
    letter-spacing: .04em;
    color: white;
    text-shadow: 0 0 28px rgba(125,77,180,.75);
}
.logo-mark.big { font-size: 46px; margin-bottom: 4px; }
.portal-title { font-size: 22px; font-weight: 800; }
.portal-subtitle { color: #d8c9f1; margin-bottom: 18px; }
.icon-badge {
    width: 58px; height: 58px; margin: 10px auto;
    display: grid; place-items:center; border-radius: 20px;
    background: rgba(125,77,180,.26); border: 1px solid rgba(255,255,255,.18);
}
h1 { margin: 8px 0 6px; font-size: 30px; }
h2 { margin: 0 0 14px; }
.muted { color: var(--muted); line-height: 1.7; }
.login-form, .form-grid { display: grid; gap: 12px; text-align: right; margin-top: 20px; }
label { color:#eee; font-weight:700; }
input, select {
    width: 100%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(4,4,10,.38);
    color: white;
    border-radius: 18px;
    padding: 15px 16px;
    outline: none;
    font-family: inherit;
    font-size: 16px;
}
input::placeholder { color: rgba(255,255,255,.52); }
.primary-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    cursor: pointer;
    border-radius: 18px;
    padding: 15px 22px;
    font-weight: 800;
    font-family: inherit;
    font-size: 16px;
    color: white;
    background: linear-gradient(135deg, #8c5bd3, #4d1a7f);
    box-shadow: 0 12px 34px rgba(125,77,180,.45);
}
.primary-btn.small { padding: 10px 16px; border-radius: 14px; font-size: 14px; }
.ghost-btn, .logout-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #efeafa;
    font-weight: 700;
}
.logout-btn { color: #ffd7df; }
.security-note { color: #cac1d7; font-size: 14px; }
.notice {
    padding: 12px 14px; border-radius: 16px; margin: 12px 0;
    border:1px solid rgba(255,255,255,.15); line-height:1.7;
}
.notice.error { background: rgba(255,93,120,.12); color:#ffd6de; }
.notice.warning { background: rgba(246,189,96,.12); color:#ffe7bd; }
.notice.success { background: rgba(72,213,151,.12); color:#caffea; }
.otp-input { text-align:center; letter-spacing: 12px; font-size: 28px; direction:ltr; }
.topbar {
    margin: 22px auto 10px;
    width: min(1180px, calc(100% - 32px));
    border-radius: 24px;
    display:flex; justify-content:space-between; align-items:center;
    padding: 16px 20px;
}
.brand { display:flex; align-items:center; gap:14px; }
.brand-title { font-weight:900; font-size:20px; }
.brand-subtitle { color:#d8c9f1; font-size:14px; }
.topbar-user { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.portal-wrap { width:min(1180px, calc(100% - 32px)); margin: 22px auto 45px; }
.hero {
    text-align:center; border-radius: 34px; padding: 28px 22px; margin-bottom: 20px;
}
.hero h1 { font-size: 34px; }
.tiles-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.tile {
    border-radius: 26px; padding: 22px; min-height: 190px;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
    transition:.2s ease;
}
.tile.active { background: linear-gradient(145deg, rgba(125,77,180,.42), rgba(255,255,255,.08)); }
.tile.disabled { opacity:.58; filter: grayscale(.1); }
.tile-icon { font-size: 34px; line-height:1; opacity:.95; }
.tile h2 { font-size: 22px; margin: 10px 0 4px; }
.tile p { color:#d5cce1; margin:0 0 14px; min-height:42px; }
.soon-badge {
    display:inline-flex; padding: 8px 12px; border-radius: 999px;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
    color:#ded7e7; font-weight:800;
}
.soon-badge.on { color:#fff; background: rgba(125,77,180,.26); }
.status-strip {
    margin-top: 18px; border-radius: 22px; padding: 14px 18px;
    display:flex; justify-content:space-between; gap:12px; color:#d5cce1; flex-wrap:wrap;
}
.admin-layout { display:grid; grid-template-columns: 1fr 280px; gap:18px; width:min(1280px, calc(100% - 32px)); margin: 22px auto 45px; }
.admin-sidebar { border-radius:28px; padding:22px; height:max-content; }
.side-title { font-size:24px; font-weight:900; margin-bottom:18px; }
.side-link { display:block; padding:13px 14px; border-radius:16px; margin-bottom:8px; color:#ddd3e9; }
.side-link.active { background:rgba(125,77,180,.32); color:#fff; }
.admin-main { display:grid; gap:16px; }
.admin-hero, .employee-form, .table-card { border-radius:28px; padding:22px; }
.employee-form { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; align-items:end; }
.employee-form h2 { grid-column: 1/-1; }
.check { display:flex; gap:8px; align-items:center; }
.check input { width:auto; }
table { width:100%; border-collapse: collapse; }
th,td { padding: 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:right; white-space:nowrap; }
th { color:#e9ddff; }
.pill { padding:6px 10px; border-radius:999px; font-weight:800; }
.pill.active { background:rgba(72,213,151,.16); color:#caffea; }
.pill.suspended { background:rgba(255,93,120,.16); color:#ffd6de; }
.pill.pending { background:rgba(246,189,96,.16); color:#ffe7bd; }
.footer-note { text-align:center; color:#b7abc9; padding: 16px; position:relative; }
@media (max-width: 980px) {
    .tiles-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-layout { grid-template-columns:1fr; }
    .employee-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .tiles-grid, .employee-form { grid-template-columns: 1fr; }
    .topbar { align-items:flex-start; flex-direction:column; }
    h1,.hero h1 { font-size:26px; }
}

/* ERP Core v0.2 */
.erp-shell { width:min(1280px, calc(100% - 32px)); margin: 22px auto 45px; display:grid; grid-template-columns: 1fr 290px; gap:18px; }
.erp-sidebar { border-radius:28px; padding:22px; height:max-content; position: sticky; top: 20px; }
.erp-main { display:grid; gap:16px; min-width:0; }
.erp-nav-title { font-size:22px; font-weight:900; margin-bottom:14px; }
.erp-nav-link { display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:16px; margin-bottom:8px; color:#ddd3e9; border:1px solid transparent; }
.erp-nav-link:hover, .erp-nav-link.active { background:rgba(125,77,180,.30); border-color:rgba(255,255,255,.12); color:#fff; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.kpi-card { border-radius:24px; padding:18px; min-height:118px; }
.kpi-label { color:#d8c9f1; font-weight:800; }
.kpi-value { font-size:34px; font-weight:900; margin:8px 0; direction:ltr; text-align:right; }
.kpi-sub { color:#bdb7c7; font-size:14px; }
.action-row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.toolbar { border-radius:24px; padding:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar form { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.toolbar input, .toolbar select { max-width:260px; }
.data-card { border-radius:28px; padding:20px; overflow:auto; }
.form-card { border-radius:28px; padding:22px; }
.form-card .form-grid { grid-template-columns: repeat(3, 1fr); }
.form-card .form-grid .full { grid-column:1/-1; }
textarea { width:100%; min-height:110px; border:1px solid rgba(255,255,255,.18); background:rgba(4,4,10,.38); color:white; border-radius:18px; padding:15px 16px; outline:none; font-family:inherit; font-size:16px; resize:vertical; }
.badge { display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:800; background:rgba(255,255,255,.08); color:#eee; border:1px solid rgba(255,255,255,.12); }
.badge.new,.badge.open { color:#d9c7ff; background:rgba(125,77,180,.18); }
.badge.won,.badge.active { color:#caffea; background:rgba(72,213,151,.16); }
.badge.lost,.badge.suspended { color:#ffd6de; background:rgba(255,93,120,.16); }
.badge.pending,.badge.follow { color:#ffe7bd; background:rgba(246,189,96,.16); }
.inline-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.link-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:8px 10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#fff; font-weight:800; }
.empty-state { border-radius:24px; padding:28px; text-align:center; color:#d5cce1; }
.currency { direction:ltr; text-align:right; display:inline-block; }
@media (max-width: 1050px) { .erp-shell { grid-template-columns:1fr; } .erp-sidebar { position:relative; top:auto; } .kpi-grid { grid-template-columns: repeat(2,1fr); } .form-card .form-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 650px) { .kpi-grid,.form-card .form-grid { grid-template-columns:1fr; } .toolbar input,.toolbar select { max-width:100%; } }


/* =========================
   YAZ ERP UI Hotfix v0.3
   Improves page organization, spacing, RTL forms and dashboard layout.
   ========================= */
html { scroll-behavior: smooth; }
body { direction: rtl; }
body::before {
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, rgba(255,255,255,.04), transparent 38%, rgba(125,77,180,.08)),
        radial-gradient(circle at 70% 10%, rgba(155,98,224,.20), transparent 28%);
    z-index: -1;
}
.topbar {
    width: min(1180px, calc(100% - 36px));
    margin: 18px auto 10px;
    min-height: 76px;
}
.brand { flex-direction: row-reverse; }
.brand .logo-mark { font-size: 26px; min-width: 58px; text-align:center; }
.topbar-user { justify-content:flex-start; }

.erp-shell {
    width: min(1240px, calc(100% - 36px)) !important;
    margin: 18px auto 46px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.erp-main {
    order: 2;
    display: grid;
    gap: 16px;
    min-width: 0;
}
.erp-sidebar {
    order: 1;
    width: 100%;
    border-radius: 26px;
    padding: 14px;
    position: relative !important;
    top: auto !important;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.erp-nav-title {
    margin: 0 0 0 8px;
    white-space: nowrap;
    font-size: 20px;
    padding: 0 10px;
}
.erp-nav-link {
    margin: 0;
    white-space: nowrap;
    min-height: 46px;
}
.hero {
    padding: 34px 28px;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}
.hero::after {
    content:"";
    position:absolute;
    inset:auto -10% -65% -10%;
    height:120px;
    background: radial-gradient(ellipse at center, rgba(141,84,211,.34), transparent 66%);
    pointer-events:none;
}
.hero h1 { margin-top: 0; }
.kpi-grid {
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
.kpi-card {
    border-radius: 24px;
    padding: 20px;
    min-height: 132px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid rgba(255,255,255,.14);
}
.kpi-label { font-size: 15px; color:#efe8ff; }
.kpi-value { font-size: 31px; line-height:1.1; text-align:right; }
.kpi-sub { color:#c8bdd7; }
.erp-grid.tiles-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 16px;
}
.erp-grid .tile {
    min-height: 170px;
    padding: 20px;
    align-items:flex-start;
    text-align:right;
}
.erp-grid .tile h2 { font-size: 21px; }
.erp-grid .tile p { font-size: 15px; line-height:1.7; }
.form-card, .data-card, .toolbar { border:1px solid rgba(255,255,255,.14); }
.form-card h2, .data-card h2 { margin-top:0; }
.form-card form.form-grid {
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px !important;
    align-items:start;
}
.form-card form.form-grid > * { min-width:0; }
.form-card form.form-grid textarea.full,
.form-card form.form-grid .full { grid-column: 1 / -1 !important; }
.form-card form.form-grid button[type="submit"] {
    grid-column: 1 / -1;
    width: min(260px, 100%);
    justify-self: start;
}
input, select, textarea {
    min-height: 52px;
    background: rgba(9,8,18,.58);
    color:#fff !important;
    border-color: rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
select option { color:#111; background:#fff; }
input:focus, select:focus, textarea:focus {
    border-color: rgba(164,105,235,.75);
    box-shadow: 0 0 0 4px rgba(125,77,180,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.toolbar {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 16px;
}
.toolbar form {
    display:flex !important;
    flex-direction: row;
    align-items:center;
    gap:10px;
    width:100%;
}
.toolbar input, .toolbar select { max-width: 320px; }
.data-card { overflow:hidden; }
.data-card table {
    table-layout: auto;
    width:100%;
    min-width: 780px;
}
.data-card { overflow-x:auto; }
th, td { vertical-align: middle; }
.action-row { margin-bottom: 12px; }
.badge, .pill { white-space: nowrap; }
.primary-btn, .ghost-btn, .link-btn, .logout-btn { transition:.18s ease; }
.primary-btn:hover, .ghost-btn:hover, .link-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.footer-note { opacity:.82; }

@media (max-width: 1100px) {
    .kpi-grid, .erp-grid.tiles-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .form-card form.form-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
    .erp-shell, .topbar { width: min(100% - 22px, 1240px) !important; }
    .kpi-grid, .erp-grid.tiles-grid, .form-card form.form-grid { grid-template-columns: 1fr !important; }
    .toolbar form { flex-direction:column; align-items:stretch; }
    .toolbar input, .toolbar select { max-width: 100%; }
}