/* useorg design system — enterprise light. One source of truth for app chrome.
   Layouts (app/admin/auth) link this, then add their own structural CSS. */

:root {
    /* surfaces */
    --bg: #f6f7f9;          /* app background */
    --surface: #ffffff;     /* cards, content */
    --bg-2: #f1f3f5;        /* subtle hover/panel */
    --panel: #ffffff;
    --field: #ffffff;

    /* text */
    --ink: #111827;         /* gray-900 */
    --ink-soft: #4b5563;    /* gray-600 */
    --dim: #9aa3af;         /* gray-400/500 */

    /* lines */
    --line: #e5e7eb;        /* gray-200 */
    --line-2: #f3f4f6;

    /* accent (corporate blue) */
    --accent: #2563eb;
    --accent-deep: #1d4ed8;
    --accent-ink: #ffffff;
    --accent-soft: #eff6ff;
    --accent-border: #bfdbfe;
    /* legacy alias — many inline styles still use var(--acid) */
    --acid: var(--accent);
    --acid-glow: rgba(37, 99, 235, .12);

    /* status */
    --ok: #047857;  --ok-soft: #ecfdf5;  --ok-border: #a7f3d0;
    --amber: #b45309; --amber-soft: #fffbeb; --amber-border: #fde68a;
    --err: #dc2626; --err-soft: #fef2f2; --err-border: #fecaca;

    /* type — clean, professional, not techy */
    --fd: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --fb: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --fm: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb);
       line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }

/* ---- typography ---- */
h1 { font-family: var(--fd); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; margin: 0; color: var(--ink); }
h2 { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin: 1.9rem 0 .8rem; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin: 0 0 7px; }
.sub { color: var(--ink-soft); font-size: .875rem; }
.empty { color: var(--dim); font-size: .9rem; padding: 1.5rem 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--bg-2); padding: .1em .35em; border-radius: 4px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px;
             padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }

/* ---- buttons ---- */
.btn { font-family: var(--fb); font-size: .875rem; font-weight: 500; padding: .5rem .85rem;
       border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px;
       cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1.2;
       transition: background .12s, border-color .12s, color .12s; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--bg-2); border-color: #d1d5db; text-decoration: none; }
.btn.acid, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.acid:hover, .btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger:hover { border-color: var(--err); color: var(--err); background: var(--err-soft); }

/* full-width form primary (auth screens) */
button.primary { font-family: var(--fb); padding: .6rem 1rem; border: 1px solid var(--accent); border-radius: 6px;
                 background: var(--accent); color: #fff; font-size: .9rem; font-weight: 600; cursor: pointer;
                 width: 100%; transition: background .12s; }
button.primary:hover { background: var(--accent-deep); }
button.secondary, .btn-secondary { font-family: var(--fb); padding: .5rem .8rem; border: 1px solid var(--line);
                 background: var(--surface); color: var(--ink); border-radius: 6px; font-size: .85rem; cursor: pointer;
                 transition: background .12s, border-color .12s; }
button.secondary:hover, .btn-secondary:hover { background: var(--bg-2); border-color: #d1d5db; }
button.linkish { border: 0; background: none; color: var(--dim); font-size: .8rem; cursor: pointer; padding: .2rem; }
button.linkish:hover { color: var(--err); }

/* ---- tags / pills ---- */
.tag, .pill { font-family: var(--fb); font-size: .7rem; font-weight: 500; letter-spacing: .01em;
              padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line);
              color: var(--ink-soft); background: var(--surface); display: inline-block; text-transform: capitalize; }
.tag.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); font-weight: 600; }
.tag.warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.pill.current { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-border); font-weight: 600; }

/* license chips (members) */
button.lic { font-family: var(--fb); font-size: .72rem; font-weight: 500; padding: .3rem .6rem; border: 1px solid var(--line);
             background: var(--surface); color: var(--ink-soft); border-radius: 6px; cursor: pointer; transition: .12s; }
button.lic:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.lic.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.lic:disabled { opacity: .4; cursor: not-allowed; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th { text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
           color: var(--dim); padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
tbody td { padding: .7rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
tbody tr:hover { background: var(--bg-2); }
td .sub, .sub { color: var(--dim); font-size: .78rem; }

/* ---- forms ---- */
label { display: block; font-family: var(--fb); font-size: .8rem; font-weight: 500; color: var(--ink-soft);
        letter-spacing: 0; text-transform: none; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px;
    background: var(--field); color: var(--ink); font-family: var(--fb); font-size: .9rem; }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.err { color: var(--err); font-family: var(--fb); font-size: .78rem; letter-spacing: 0; text-transform: none; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 16px; box-shadow: var(--shadow); }
.stat .k { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.stat .v { font-family: var(--fd); font-weight: 600; font-size: 1.7rem; margin-top: 6px; color: var(--ink); letter-spacing: -.01em; }
.stat .v.acid { color: var(--accent); }

/* ---- banners ---- */
.status { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-border);
          border-radius: 6px; padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1rem; }
.errbox { background: var(--err-soft); color: var(--err); border: 1px solid var(--err-border);
          border-radius: 6px; padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1rem; }

/* ---- lists / rows (auth screens) ---- */
.list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
            border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem; background: var(--surface); font-size: .9rem; }
.row-item:hover { border-color: #d1d5db; }
.row-item .meta { color: var(--dim); font-size: .78rem; font-family: var(--fb); display: block; margin-top: 2px; }

.search { max-width: 340px; margin-bottom: 18px; }
.field-row { display: flex; gap: .5rem; align-items: flex-end; }
.field-row label { flex: 1; }
.invite-link { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: .7rem;
               font-family: ui-monospace, monospace; font-size: .78rem; word-break: break-all; margin-bottom: 1rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }