/* ==================================================================
   Painel Oficina — shared tokens, base rules, icons and buttons.
   Loaded before styles.css by the app (index.html) and, on its own,
   by the help page (ajuda.html) and the auth pages (login.html,
   forgot.html, reset.html) so every page shares the same fonts,
   colors and buttons and follows the same light/dark theme choice.
   ================================================================== */

@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

:root {
    color-scheme: light;
    --font-ui: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    --bg-primary: #f3f4f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-tertiary: #f6f7f9;
    --bg-hover: #eceef2;
    --bg-input: #ffffff;
    --bg-overlay: rgba(15, 18, 26, 0.5);

    --text-primary: #161b26;
    --text-secondary: #525b6b;
    --text-tertiary: #8a93a3;

    --border-color: #e0e3e9;
    --border-light: #eceef2;
    --border-strong: #cfd4dc;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-soft: #eaf1ff;
    --accent-soft-text: #1d4ed8;
    --accent-green: #15803d;
    --green-soft: #e8f6ed;
    --accent-red: #dc2626;
    --red-soft: #fdecec;
    --accent-yellow: #d97706;
    --amber-soft: #fff4e0;
    --accent-info: #0e7490;
    --accent-warning-bg: #fff7e6;
    --accent-info-bg: #eef4ff;

    --shadow: rgba(16, 24, 40, 0.08);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.2);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --control-h: 38px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #0d1015;
    --bg-secondary: #151920;
    --bg-card: #151920;
    --bg-tertiary: #1a1f27;
    --bg-hover: #222833;
    --bg-input: #10141a;
    --bg-overlay: rgba(0, 0, 0, 0.62);

    --text-primary: #e7eaf0;
    --text-secondary: #a3acba;
    --text-tertiary: #717b8b;

    --border-color: #262c37;
    --border-light: #1f252e;
    --border-strong: #353d4a;

    --accent-blue: #5b8def;
    --accent-blue-hover: #7aa3f3;
    --accent-soft: #1a2640;
    --accent-soft-text: #9dbcf7;
    --accent-green: #4ade80;
    --green-soft: #13261b;
    --accent-red: #f87171;
    --red-soft: #2c1618;
    --accent-yellow: #fbbf24;
    --amber-soft: #2b2212;
    --accent-info: #38bdf8;
    --accent-warning-bg: #2a2313;
    --accent-info-bg: #16213a;

    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --focus-ring: 0 0 0 3px rgba(91, 141, 239, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.45;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- icons */
.icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

/* ---------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--control-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn .icon {
    width: 17px;
    height: 17px;
}

.btn-primary {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-blue-hover);
}

[data-theme="dark"] .btn-primary {
    color: #0b1220;
}

.btn-secondary {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.btn-success {
    background: var(--accent-green);
    color: #fff;
}

.btn-success:hover:not(:disabled) {
    filter: brightness(1.08);
}

[data-theme="dark"] .btn-success {
    color: #07140c;
}

.btn-danger {
    background: var(--accent-red);
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    filter: brightness(1.08);
}

[data-theme="dark"] .btn-danger {
    color: #1c0707;
}

.btn-warning {
    background: var(--amber-soft);
    color: var(--accent-yellow);
    border-color: color-mix(in srgb, var(--accent-yellow) 30%, transparent);
}

.btn-info {
    background: var(--accent-soft);
    color: var(--accent-soft-text);
}

.btn-info:hover:not(:disabled),
.btn-warning:hover:not(:disabled) {
    filter: brightness(0.97);
}

/* Distinct, deliberately cautious style for "Gerar Nota de Serviço": a red
   outline on a white background (regardless of theme) so it never reads as
   a routine action, plus the confirmation modal's confirm button. */
.btn-danger-outline {
    background: #fff;
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--accent-red);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-sm {
    height: 32px;
    padding: 0 11px;
    font-size: 13px;
    border-radius: 8px;
    gap: 6px;
}

.btn-sm .icon {
    width: 15px;
    height: 15px;
}