/* ═══════════════════════════════════════════════════════════════════
   DVN-SaaS Common Base Styles
   Served by Gateway at /common-static/css/base.css

   Requires tokens.css to be loaded first for CSS variable definitions.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html { font-size: 16px; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-dim); text-decoration: underline; }

/* ── Buttons ── */
.btn {
    padding: 4px 12px; border: none; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 12px; font-weight: 600; transition: opacity var(--transition);
}
.btn:hover { opacity: .85; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); color: var(--text-inverse); }
.btn-success { background: var(--success); color: var(--text-inverse); }
.btn-danger  { background: var(--danger);  color: var(--text-inverse); }
.btn-warning { background: var(--warning); color: var(--text-inverse); }
.btn-gray    { background: var(--text-muted); color: var(--text-inverse); }
.btn-blue    { background: var(--accent); color: var(--text-inverse); }

/* ── Badges ── */
.badge {
    display: inline-block; border-radius: 12px; padding: 2px 9px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-green  { background: #d5f5e3; color: #1e8449; }
.badge-gray   { background: var(--bg-subtle); color: var(--text-muted); }
.badge-orange { background: #fdebd0; color: #d35400; }
.badge-blue   { background: #d6eaf8; color: #1a5276; }
.badge-red    { background: #fadbd8; color: #922b21; }
.badge-purple { background: #f3e8fd; color: #6c2eb9; }
.badge-teal   { background: #d1f2eb; color: #0e6655; }

/* ── Tables ── */
table.base-table {
    width: 100%; border-collapse: collapse; background: var(--bg);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 4px var(--shadow-sm);
}
table.base-table th {
    background: var(--primary); color: var(--text-inverse); padding: 9px 12px;
    font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
}
table.base-table td {
    padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.base-table tr:last-child td { border-bottom: none; }
table.base-table tr:hover td { background: var(--bg-subtle); }

/* ── Cards ── */
.card {
    background: var(--bg); border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px var(--shadow-sm);
}

/* ── Header bar ── */
.page-header {
    background: var(--primary); color: var(--text-inverse); padding: 12px 24px;
    display: flex; align-items: center; gap: 16px;
}
.page-header h1 { margin: 0; font-size: 18px; font-weight: 600; }
.page-header a  { color: var(--text-muted); font-size: 13px; }
.page-header a:hover { color: var(--text-inverse); }

/* ── Modal ── */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: rgba(15, 23, 42, 0.5);
    z-index: 1000; align-items: center; justify-content: center;
}
.modal {
    background: var(--bg); border-radius: var(--radius); padding: 24px 28px;
    width: 560px; max-width: 95vw; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 8px 32px var(--shadow-lg);
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.modal-header h3 { margin: 0; font-size: 16px; color: var(--text); }
.modal-close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--text-muted);
}
.modal-close:hover { color: var(--text); }
.modal-body { margin-bottom: 16px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Form ── */
.form-row { margin-bottom: 14px; }
.form-row label {
    display: block; font-weight: 600; font-size: 13px;
    color: var(--text-muted); margin-bottom: 4px;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row select,
.form-row textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 14px; box-sizing: border-box;
    background: var(--bg); color: var(--text);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* ── Toast ── */
#toast {
    position: fixed; bottom: 24px; right: 24px; padding: 10px 18px;
    border-radius: var(--radius); font-size: 13px; font-weight: 600;
    background: var(--success); color: var(--text-inverse);
    box-shadow: 0 3px 10px var(--shadow-md);
    visibility: hidden; opacity: 0; transition: opacity var(--transition); z-index: 2000;
}
#toast.show { visibility: visible; opacity: 1; }
#toast.err  { background: var(--danger); }