/* ==========================================================================
   WidersApps — bespoke brand UI. Hand-crafted, served statically (no build).
   Brand: fresh green + white + ink, rounded cards, soft shadows, airy space.
   Works LTR and RTL (the layout sets dir); element-scoped so views need little markup.
   ========================================================================== */

:root {
    --brand: #3faE6b;
    --brand-600: #2f9658;
    --brand-700: #24784a;
    --brand-050: #ecf7f0;
    --brand-100: #d7eede;

    --ink: #14241b;
    --ink-2: #3f4d45;
    --muted: #717e76;

    --bg: #f4f7f5;
    --card: #ffffff;
    --line: #e7ece9;

    --danger: #db5048;
    --danger-bg: #fcebea;

    --radius: 16px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(20, 36, 27, .06);
    --shadow-card: 0 1px 3px rgba(20, 36, 27, .05), 0 8px 24px -16px rgba(20, 36, 27, .22);
    --shadow-pop: 0 24px 60px -22px rgba(20, 36, 27, .35);

    --font: "Poppins", "Tajawal", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .9rem; }

/* ---- Brand mark -------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__mark path { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.brand__word { font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--ink); font-size: .92rem; }
.brand--lg .brand__mark { width: 46px; height: 46px; }
.brand--lg .brand__word { font-size: 1.05rem; }

/* ==========================================================================
   AUTH — login / register / two-factor
   ========================================================================== */
.widers-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.25rem;
    background:
        radial-gradient(900px 480px at 85% -10%, var(--brand-050), transparent 60%),
        radial-gradient(700px 420px at 0% 110%, #eef4ff, transparent 55%),
        var(--bg);
}
.widers-auth__card {
    width: 100%;
    max-width: 410px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-pop);
    padding: 2.1rem 2rem 1.9rem;
}
.widers-auth .brand { margin-bottom: 1.4rem; }
.widers-auth h1 { font-size: 1.45rem; }
.widers-auth__sub { color: var(--muted); margin: 0 0 1.5rem; font-size: .94rem; }

/* ==========================================================================
   APP SHELL — workspace + platform admin
   ========================================================================== */
.widers-shell { min-height: 100vh; display: flex; flex-direction: column; }
.widers-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 1.4rem;
    padding: .85rem 1.6rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}
.widers-topbar nav { display: flex; align-items: center; gap: .35rem; flex: 1; }
.widers-topbar nav a {
    color: var(--ink-2); font-weight: 500; font-size: .92rem;
    padding: .45rem .8rem; border-radius: 9px; transition: .15s;
}
.widers-topbar nav a:hover { background: var(--brand-050); color: var(--brand-700); }
.widers-topbar nav a.is-active { background: var(--brand-050); color: var(--brand-700); }
.widers-topbar form { margin: 0; }
.widers-main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 2rem 1.6rem 3rem; }

/* ---- Cards ------------------------------------------------------------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.card--hero {
    background: linear-gradient(135deg, var(--brand), var(--brand-600));
    color: #fff; border: none;
}
.card--hero h1, .card--hero h2 { color: #fff; }
.card--hero p { color: rgba(255, 255, 255, .9); margin: 0; }

/* ---- Buttons ----------------------------------------------------------- */
button, .btn {
    font-family: inherit; font-size: .95rem; font-weight: 550;
    background: var(--brand); color: #fff;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: .62rem 1.15rem; cursor: pointer; transition: .15s;
    box-shadow: 0 1px 2px rgba(36, 120, 74, .25);
}
button:hover, .btn:hover { background: var(--brand-600); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.btn--ghost, .btn--ghost {
    background: #fff; color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm);
}
button.btn--ghost:hover { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); }
button.btn--danger { background: var(--danger); box-shadow: none; }
button.btn--danger:hover { background: #c4403a; }

/* ---- Forms ------------------------------------------------------------- */
form label {
    display: block; margin-bottom: .9rem;
    font-size: .86rem; font-weight: 550; color: var(--ink-2);
}
form label > input,
form label > select,
form label > textarea { margin-top: .38rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], select, textarea {
    width: 100%; font-family: inherit; font-size: .95rem; color: var(--ink);
    background: #fbfdfc; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .62rem .8rem; transition: .15s; font-weight: 450;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    background: #fff; box-shadow: 0 0 0 4px var(--brand-050);
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input[type="checkbox"] { width: auto; margin-inline-end: .4rem; accent-color: var(--brand); transform: translateY(2px); }
form label:has(> input[type="checkbox"]) { font-weight: 500; color: var(--ink-2); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 0 0 .9rem; }
legend { font-size: .82rem; font-weight: 600; color: var(--muted); padding: 0 .4rem; text-transform: uppercase; letter-spacing: .04em; }
fieldset > div { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
fieldset > div > strong { min-width: 92px; color: var(--ink-2); text-transform: capitalize; font-weight: 600; }
fieldset label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
fieldset label > input { width: 110px; margin: 0; }

.widers-auth form button[type="submit"],
form > button[type="submit"] { width: 100%; margin-top: .4rem; padding: .72rem; font-size: .98rem; }

.error, ul.errors { color: var(--danger); background: var(--danger-bg); border: 1px solid #f4cfcd; border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: .87rem; margin: 0 0 1rem; list-style: none; }
ul.errors li { margin: .1rem 0; }

/* ---- Tables ------------------------------------------------------------ */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
thead th { text-align: start; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #fafcfb; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafdfb; }
tbody td button { padding: .34rem .72rem; font-size: .82rem; background: #fff; color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm); }
tbody td button:hover { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); transform: none; }
tbody td button:first-child { margin-inline-end: .35rem; }

/* polish forms that sit under a table (the manager screens) */
table + form { margin-top: .5rem; max-width: 640px; }