/* ============================================================================
 * AITC brand layer — Refined Operational
 * Profissional, sobrio, denso. Linear/Stripe vibes. DM Sans + DM Mono.
 * Carregado depois do Tailwind CDN.
 * ========================================================================== */

:root {
    --brand-500: #02B7B7;
    --brand-600: #019C9C;
    --brand-700: #017F7F;
    --accent-500: #ED7250;
    --accent-600: #D55A38;

    --ink-50:  #F8FAFC;
    --ink-100: #F1F5F9;
    --ink-200: #E2E8F0;
    --ink-300: #CBD5E1;
    --ink-400: #94A3B8;
    --ink-500: #64748B;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1E293B;
    --ink-900: #0F172A;

    --bg:        #FFFFFF;
    --app-bg:    #F6F8FA;
    --surface:   #FFFFFF;
    --surface-2: #F8FAFC;
    --line:      #E2E8F0;
    --line-soft: #F1F5F9;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .07);
    --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .14), 0 3px 8px -3px rgba(15, 23, 42, .07);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-feature-settings: "ss01", "cv01";
    background: var(--app-bg);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Numeros tabulares onde precisa (aplicado direto via classe ou util) */
.tnum, .font-mono { font-variant-numeric: tabular-nums; }
.font-mono { font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Headings — sem italic decorativo, sem serif */
h1, h2, h3 { letter-spacing: -0.018em; }

/* Background do app — solid, sem textura */
.brand-canvas { background: var(--bg); }

/* ============================================================================
 * INPUTS — defesa em profundidade contra @tailwindcss/forms (com !important
 * pra ganhar de regras do plugin, que tem (0,1,0) a (0,2,0))
 * ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea {
    border-radius: 10px !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
    color: var(--ink-900);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4 !important;
    padding: 0.55rem 0.875rem !important;
    height: auto;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
textarea {
    line-height: 1.5 !important;
    padding: 0.6rem 0.875rem !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--ink-300) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px rgba(2, 183, 183, 0.18) !important;
    outline: 2px solid transparent !important;
    outline-offset: 0 !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--ink-50) !important;
    color: var(--ink-500) !important;
    cursor: not-allowed;
}

input[type="checkbox"] {
    border-radius: 4px !important;
    border: 1px solid var(--ink-300);
    color: var(--brand-500);
}
input[type="radio"] {
    border-radius: 999px !important;
    border: 1px solid var(--ink-300);
    color: var(--brand-500);
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(2, 183, 183, 0.18);
    outline: none;
}

/* ============================================================================
 * BOTOES — solid teal sem rotate, lift discreto
 * ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 500;
    padding: .55rem 1rem;
    border-radius: 8px;
    line-height: 1;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
    cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2, 183, 183, 0.20); }

.btn-primary {
    background: var(--brand-500);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(2, 183, 183, 0.20);
}
.btn-primary:hover  { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 10px -2px rgba(2, 183, 183, 0.30); }
.btn-primary:active { background: var(--brand-700); transform: translateY(0); }

.btn-secondary {
    background: var(--surface);
    color: var(--ink-800);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.btn-secondary:hover  { background: var(--ink-50); border-color: var(--ink-300); }
.btn-secondary:active { background: var(--ink-100); }

.btn-ghost {
    background: transparent;
    color: var(--ink-700);
}
.btn-ghost:hover  { background: var(--ink-100); color: var(--ink-900); }
.btn-ghost:active { background: var(--ink-200); }

.btn-danger {
    background: var(--surface);
    color: var(--accent-600);
    border: 1px solid var(--line);
}
.btn-danger:hover { background: #FDEFEC; border-color: var(--accent-300, #F2937A); color: var(--accent-700); }

/* CTA destacado pro celular (e botões "principais" no admin) */
.cta-primary {
    background: var(--brand-500);
    color: #fff;
    border-radius: 12px;
    padding: 0.95rem 1.4rem;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 20px -8px rgba(2, 183, 183, .50);
    transition: background-color .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
}
.cta-primary:hover  { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 28px -10px rgba(2, 183, 183, .55); }
.cta-primary:active { background: var(--brand-700); transform: translateY(0); }

/* Acoes em icones (admin tables) */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--ink-500);
    transition: background-color .12s var(--ease-out), color .12s var(--ease-out);
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-800); }
.icon-btn.icon-btn-danger:hover { background: #FDEFEC; color: var(--accent-600); }

/* ============================================================================
 * CARDS — superfice + borda sutil + sombra discreta
 * ========================================================================== */
.surface {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
a.surface:hover, button.surface:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.surface-soft {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* ============================================================================
 * BADGES — pill discreto, sem brilho excessivo
 * ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.badge-brand   { background: var(--brand-50, #E6F8F8); color: var(--brand-700); }
.badge-accent  { background: #FDEFEC; color: var(--accent-700); }
.badge-success { background: #DCFCE7; color: #166534; }
.badge-muted   { background: var(--ink-100); color: var(--ink-700); }
.badge-warn    { background: #FEF3C7; color: #92400E; }

/* ============================================================================
 * TABELA — operacional, densa, profissional
 * ========================================================================== */
table.aits {
    width: 100%; border-collapse: separate; border-spacing: 0;
}
table.aits thead th {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
table.aits thead th:first-child { padding-left: 20px; }
table.aits thead th:last-child  { padding-right: 20px; }
table.aits tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
    color: var(--ink-700);
}
table.aits tbody td:first-child { padding-left: 20px; }
table.aits tbody td:last-child  { padding-right: 20px; }
table.aits tbody tr:last-child td { border-bottom: 0; }
table.aits tbody tr { transition: background-color .12s var(--ease-out); }
table.aits tbody tr:hover { background: var(--ink-50); }

/* ============================================================================
 * SIGNATURE — preview inline + overlay full-screen pra coleta
 * ========================================================================== */

/* Overlay full-screen pra coleta de assinatura
 * default oculto via display:none. Visivel APENAS com .is-open. */
.sig-overlay {
    display: none;
}
.sig-overlay.is-open {
    position: fixed; inset: 0;
    background: var(--surface);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: sigOverlayIn .2s var(--ease-out);
}
@keyframes sigOverlayIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sig-overlay-header {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    text-align: center;
}
.sig-overlay-title {
    font-size: 13px; font-weight: 600;
    color: var(--ink-900);
    letter-spacing: 0.01em;
}
.sig-overlay-sub {
    font-size: 11px; color: var(--ink-500);
    margin-top: 2px;
    text-transform: uppercase; letter-spacing: 0.08em;
}

.sig-overlay-canvas-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #fff;
    overflow: hidden;
    /* linha pontilhada de "assine na linha" */
    background-image: linear-gradient(to right, var(--ink-200) 50%, transparent 50%);
    background-position: 0 70%;
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

/* Prompt "rotate device" — aparece se mobile + portrait, esconde canvas */
.sig-overlay-rotate {
    display: none;
}
@media (orientation: portrait) and (pointer: coarse) {
    .sig-overlay.is-open .sig-overlay-rotate {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        position: absolute; inset: 0;
        background: var(--surface);
        z-index: 5;
        padding: 24px;
        text-align: center;
        gap: 16px;
    }
    .sig-overlay-rotate svg {
        color: var(--brand-500);
        animation: rotateHint 2s ease-in-out infinite;
    }
    .sig-overlay-rotate-title {
        font-size: 16px; font-weight: 600;
        color: var(--ink-900);
    }
    .sig-overlay-rotate-sub {
        font-size: 13px; color: var(--ink-500);
        max-width: 280px;
    }
    @keyframes rotateHint {
        0%, 100% { transform: rotate(0deg); }
        50%      { transform: rotate(90deg); }
    }
}
.sig-overlay-canvas-wrap canvas {
    display: block;
    width: 100%; height: 100%;
    touch-action: none;
    cursor: crosshair;
}
.sig-overlay-x-mark {
    position: absolute;
    left: 24px; top: calc(70% - 18px);
    font-size: 28px;
    color: var(--ink-300);
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.sig-overlay-actions {
    flex-shrink: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.sig-overlay-actions .btn { padding: 0.85rem 1.25rem; font-size: 15px; }
.sig-overlay-actions .btn-primary { flex: 1; max-width: 240px; }

/* Bloqueia scroll do body quando overlay aberto */
body.sig-overlay-open { overflow: hidden; }

/* ============================================================================
 * UTILITY — required mark, focus ring acessivel, page transitions
 * ========================================================================== */
.req-mark {
    color: var(--accent-500);
    font-weight: 600;
    margin-left: 2px;
}

:where(input, select, textarea, button, a):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 183, 183, 0.20);
    border-radius: inherit;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

button:disabled, input:disabled, select:disabled, textarea:disabled {
    cursor: not-allowed;
}

/* Scrollbar discreta */
@supports (scrollbar-color: red red) {
    * { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

.fade-in { animation: fadeIn .22s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile tap targets */
@media (max-width: 640px) {
    .btn { padding: .7rem 1rem; font-size: 15px; }
    input, select, textarea { font-size: 16px !important; }
}