/* ==========================================
   layout.css - Variáveis Globais e Reset
   ========================================== */
:root {
    /* Identidade Visual */
    --color-primary: #10b981;
    --color-primary-hover: #059669;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-bg: #fee2e2;
    --color-danger-border-hover: #fca5a5;

    /* Tons de Cinza / Superfícies */
    --bg-main: #f4f5f7;
    --bg-surface: #ffffff;
    --row-bg-hover: #f5faf8;
    --bg-surface-hover: #f8f9fa;
    --text-primary: #1e1e1e;
    --text-secondary: #757575;
    --text-muted: #B3B3B3;
    --border-light: #e5e7eb;
    --border-secondary-hover: #c0c4cc;
    
    /* Box Model e Tipografia */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 6px rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
    --font-main: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif;

    /* Badges de status ou tipo */
    --badge-blue-bg: #e8f2fe;
    --badge-blue-text: #2684ff;
    --badge-purple-bg:#f5edff;
    --badge-purple-text: #9747ff;
    --badge-yellow-bg: #f9f1dc;
    --badge-yellow-text: #e7b402;
    --badge-orange-bg: #ffe9e3;
    --badge-orange-text: #ff8307;
    --badge-red-bg: #fee2e2;
    --badge-red-text: #dc2626;
    --badge-green-bg: #dbf2e4;
    --badge-green-text: #00b947;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-main);
}

/* --- CLASSES UTILITÁRIAS GLOBAIS --- */
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

/* --- ÍCONES --- */

.icon-edit {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--text-primary);
    mask-image: url('../img/icons/square-pen.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
}

.icon-plus {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentcolor;
    mask-image: url('../img/icons/plus.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
}