/* ===================================================================
   HYLINE Production Hub — Shared stylesheet
   -------------------------------------------------------------------
   Replaces the ~300 lines of inline <style> copy-pasted across every
   PHP page. Drop a single <link rel="stylesheet" href="assets/hyline.css">
   in your <head> (already handled by includes/header.php).
   =================================================================== */

/* --------------------  1. DESIGN TOKENS  ------------------------- */
:root {
    --hyline-blue:    #0a2647;
    --hyline-blue-2:  #153a63;
    --hyline-red:     #d93025;
    --accent:         #3498db;
    --accent-dark:    #2c80b4;
    --ok:             #27ae60;
    --warn:           #f39c12;
    --bg:             #f4f7f6;
    --card:           #ffffff;
    --border:         #f0f2f5;
    --border-soft:    #f5f5f5;
    --text:           #333333;
    --text-muted:     #888888;
    --text-faint:     #aaaaaa;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* --------------------  2. BASE  ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; }

h3 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    color: var(--hyline-blue);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 15px;
    margin-top: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--hyline-blue); }

hr { border: 0; border-top: 1px solid var(--border-soft); margin: 10px 0; }

/* --------------------  3. NAVBAR  -------------------------------- */
.navbar {
    background: var(--card);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    cursor: pointer;
}
.logo-img  { height: 40px; }
.logo-text { border-left: 2px solid #eee; padding-left: 15px; }
.logo-text h1 {
    font-size: 18px;
    color: var(--hyline-blue);
    font-weight: 800;
    letter-spacing: -0.5px;
}
.logo-text span {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-info {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}
.btn-pass { background: var(--border); color: var(--hyline-blue); }
.btn-sair { background: #fff1f0; color: var(--hyline-red); border: 1px solid #ffd8d6; }
.btn-pass:hover { background: var(--hyline-blue); color: #fff; }
.btn-sair:hover { background: var(--hyline-red); color: #fff; }

/* --------------------  4. LAYOUT  -------------------------------- */
.main-layout {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
}
.main-layout.with-workspace { grid-template-columns: 400px 1fr; }

.card {
    background: var(--card);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
}
.card + .card { margin-top: 20px; }

/* --------------------  5. DEPARTMENT GRID  ---------------------- */
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.btn-dept {
    padding: 20px 10px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 800;
    color: #555;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border-radius: var(--radius-md);
    min-height: 100px;
}
.btn-dept:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    color: var(--hyline-blue);
}
.btn-dept.active {
    background: var(--hyline-blue);
    color: #fff !important;
    border-color: var(--hyline-blue);
}
.btn-dept.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------  6. SIDE NAV LINKS  ----------------------- */
.btn-mapa {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 40px;
    text-align: center;
    color: var(--accent) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    background: var(--card);
    margin-bottom: 10px;
    justify-content: center;
    transition: 0.3s;
}
.btn-mapa:hover { background: var(--accent); color: #fff !important; }

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    border-top: 1px solid var(--border-soft);
    padding-top: 20px;
}
.link-item {
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}
.link-item:hover {
    color: var(--hyline-blue);
    padding-left: 5px;
}

/* --------------------  7. WORKSPACE ITEMS  ---------------------- */
.item-pendente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 5px solid var(--hyline-blue);
    margin-bottom: 10px;
    border-radius: var(--radius-md);
}
.alerta-gargalo {
    animation: blink-alert 2s infinite;
    border-left: 5px solid var(--hyline-red) !important;
}
@keyframes blink-alert {
    50% { background-color: #fff0f0; }
}

/* --------------------  8. FORMS & BUTTONS  ---------------------- */
label {
    display: block;
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    margin-left: 5px;
}

select,
input,
textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border);
    margin-bottom: 15px;
    font-size: 14px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    outline: none;
    background: #fdfdfd;
    transition: border-color 0.2s, background 0.2s;
}
select:focus,
input:focus,
textarea:focus {
    border-color: var(--accent);
    background: #fff;
}

.btn-submit {
    width: 100%;
    padding: 18px;
    background: var(--hyline-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: 0.3s;
    letter-spacing: 1px;
    font-size: 13px;
}
.btn-submit:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.btn-pause {
    background: var(--warn);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.btn-finish {
    background: var(--hyline-red);
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-md);
}

/* --------------------  9. MESSAGES  ----------------------------- */
.erro-msg,
.alert-error {
    background: #fff0f0;
    color: var(--hyline-red);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid #ffdada;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ok-msg,
.alert-ok {
    background: #eafbf1;
    color: var(--ok);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid #c8f0da;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --------------------  10. LOGIN CARD  -------------------------- */
body.login-body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-card {
    background: var(--card);
    padding: 50px 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.login-card .input-group { margin-bottom: 25px; text-align: left; }
.login-card .input-wrapper { position: relative; display: flex; align-items: center; }
.login-card .input-wrapper i {
    position: absolute;
    left: 15px;
    color: #ccc;
    font-size: 14px;
}
.login-card input {
    padding-left: 45px;
    border-radius: var(--radius-sm);
}

.btn-login {
    width: 100%;
    padding: 18px;
    background: var(--hyline-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    letter-spacing: 1px;
}
.btn-login:hover {
    background: var(--hyline-blue-2);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 38, 71, 0.2);
}

.footer-info {
    font-size: 10px;
    color: #ccc;
    margin-top: 40px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --------------------  11. TABLES  ------------------------------ */
table.hyline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
table.hyline-table th,
table.hyline-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
table.hyline-table th {
    background: #fafbfc;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
table.hyline-table tr:last-child td { border-bottom: none; }

/* --------------------  12. ANIMATIONS  -------------------------- */
.slide-container {
    animation: slideIn 0.5s ease forwards;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------  13. UTILITIES  --------------------------- */
.text-muted { color: var(--text-muted); }
.text-red   { color: var(--hyline-red); }
.text-ok    { color: var(--ok); }
.text-warn  { color: var(--warn); }
.small      { font-size: 11px; }
.mono       { font-family: ui-monospace, Consolas, monospace; }

/* --------------------  14. RESPONSIVE  -------------------------- */
@media (max-width: 900px) {
    .main-layout,
    .main-layout.with-workspace { grid-template-columns: 1fr; }
    .navbar { padding: 15px 20px; }
    .dept-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .navbar { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .nav-actions { gap: 12px; }
    .dept-grid { grid-template-columns: 1fr; }
    .card { padding: 20px; border-radius: var(--radius-md); }
}
