/* ═══════════════════════════════════════════════════════════════════════════
   MEO · Gestão de Trabalhos
   main.css — Design system, variables, base styles, layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    /* Colours */
    --c-bg:           #f0f2f5;
    --c-surface:      #ffffff;
    --c-surface-2:    #f7f8fa;
    --c-border:       #e2e6ea;
    --c-text:         #1a2332;
    --c-text-muted:   #6b7280;
    --c-primary:      #1a56db;
    --c-primary-dark: #1341b8;
    --c-primary-light:#eff4ff;
    --c-danger:       #e02424;
    --c-danger-light: #fdf2f2;
    --c-success:      #0e9f6e;
    --c-success-light:#f3faf7;
    --c-warning:      #c27803;
    --c-warning-light:#fdf6b2;
    --c-info:         #0891b2;
    --c-info-light:   #e0f7fa;

    /* Topbar */
    --topbar-bg:      #1a2332;
    --topbar-text:    #e8ecf1;
    --topbar-h:       56px;

    /* Sidebar */
    --sidebar-w:      240px;
    --sidebar-bg:     #111827;
    --sidebar-text:   #9ca3af;
    --sidebar-hover:  #1f2937;
    --sidebar-active: #1a56db;

    /* Priorities */
    --p1: #9ca3af;
    --p2: #34d399;
    --p3: #fbbf24;
    --p4: #f97316;
    --p5: #ef4444;

    /* Estado */
    --estado-aberto:    #1a56db;
    --estado-em-curso:  #c27803;
    --estado-executado: #0e9f6e;
    --estado-terminado: #6b7280;
    --estado-cancelado: #e02424;

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Radius */
    --r-sm:  4px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-full:9999px;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

    /* Typography */
    --font:      system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --fs-xs:  .75rem;
    --fs-sm:  .875rem;
    --fs-base:1rem;
    --fs-lg:  1.125rem;
    --fs-xl:  1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;

    /* Transitions */
    --transition: 200ms ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:         #0f1117;
        --c-surface:    #1a1f2e;
        --c-surface-2:  #222736;
        --c-border:     #2d3448;
        --c-text:       #e8ecf1;
        --c-text-muted: #9ca3af;
        --c-primary-light: #1e3a8a;
        --c-danger-light:  #3b0f0f;
        --c-success-light: #064e3b;
        --c-warning-light: #452a01;
        --c-info-light:    #0a3d4a;
    }
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100dvh;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }

/* ── Layout: App ──────────────────────────────────────────────────────────── */
.layout-app {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-columns: 0 1fr; /* sidebar hidden on mobile */
    min-height: 100dvh;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    background: var(--topbar-bg);
    color: var(--topbar-text);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.topbar__menu-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: var(--sp-2);
    color: var(--topbar-text);
}
.topbar__menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: var(--transition);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--topbar-text);
    font-weight: 700;
    font-size: var(--fs-lg);
    text-decoration: none;
}

.topbar__brand-text { letter-spacing: .05em; }

.topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.topbar__user {
    font-size: var(--fs-sm);
    color: var(--topbar-text);
    display: none; /* hidden on mobile, shown on desktop */
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100dvh - var(--topbar-h));
    background: var(--sidebar-bg);
    overflow-y: auto;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--transition);
    padding: var(--sp-4) 0;
}

.sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0,0,0,.5);
    z-index: 80;
}

.sidebar-overlay.is-visible { display: block; }

.sidebar__nav {
    list-style: none;
    padding: 0 var(--sp-3);
}

.sidebar__section {
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sidebar-text);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    color: var(--sidebar-text);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    min-height: 44px; /* touch target */
}

.sidebar__link:hover {
    background: var(--sidebar-hover);
    color: white;
    text-decoration: none;
}

.sidebar__link--active {
    background: var(--sidebar-active);
    color: white;
}

.sidebar__icon { font-size: 1rem; width: 20px; text-align: center; }

/* ── Main content ─────────────────────────────────────────────────────────── */
.main-content {
    grid-column: 2;
    padding: var(--sp-4);
    overflow-x: hidden;
    max-width: 100%;
}

/* ── Desktop layout ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .layout-app {
        grid-template-columns: var(--sidebar-w) 1fr;
    }

    .topbar__menu-btn { display: none; }
    .topbar__user { display: flex; align-items: center; gap: var(--sp-2); }

    .sidebar {
        position: sticky;
        top: var(--topbar-h);
        transform: none;
        height: calc(100dvh - var(--topbar-h));
    }

    .main-content {
        padding: var(--sp-6);
    }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.card__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

/* ── Work items (Trabalhos) ───────────────────────────────────────────────── */
.trabalho-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    border-left: 4px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.trabalho-card:hover { box-shadow: var(--shadow-md); }

/* Priority border colours */
.priority-1 { border-left-color: var(--p1); }
.priority-2 { border-left-color: var(--p2); }
.priority-3 { border-left-color: var(--p3); }
.priority-4 { border-left-color: var(--p4); }
.priority-5 { border-left-color: var(--p5); }

.trabalho-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.trabalho-card__ot {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-primary);
}

.trabalho-card__local { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-role          { background: #374151; color: #9ca3af; }
.badge-priority-1    { background: #e5e7eb; color: #6b7280; }
.badge-priority-2    { background: #d1fae5; color: #065f46; }
.badge-priority-3    { background: #fef3c7; color: #92400e; }
.badge-priority-4    { background: #ffedd5; color: #9a3412; }
.badge-priority-5    { background: #fee2e2; color: #991b1b; }
.estado-aberto       { background: var(--c-primary-light); color: var(--c-primary); }
.estado-em-curso     { background: var(--c-warning-light); color: var(--c-warning); }
.estado-executado    { background: var(--c-success-light); color: var(--c-success); }
.estado-terminado    { background: #f3f4f6; color: #6b7280; }
.estado-cancelado    { background: var(--c-danger-light); color: var(--c-danger); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    border: 1px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
    min-height: 44px;
    white-space: nowrap;
}

.btn-primary   { background: var(--c-primary); color: white; }
.btn-primary:hover { background: var(--c-primary-dark); color: white; text-decoration: none; }
.btn-danger    { background: var(--c-danger); color: white; }
.btn-danger:hover { background: #b91c1c; text-decoration: none; }
.btn-success   { background: var(--c-success); color: white; }
.btn-outline   { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.btn-outline:hover { background: var(--c-surface-2); }
.btn-ghost     { background: transparent; color: var(--topbar-text); border: none; }
.btn-ghost:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.btn-sm        { padding: 6px var(--sp-3); min-height: 36px; font-size: var(--fs-sm); }
.btn-lg        { padding: 14px var(--sp-6); font-size: var(--fs-base); min-height: 52px; }
.btn-block     { width: 100%; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }

.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: var(--sp-2);
    color: var(--c-text);
}

.form-label .required::after { content: ' *'; color: var(--c-danger); }

.form-control {
    display: block;
    width: 100%;
    padding: 10px var(--sp-3);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--transition), box-shadow var(--transition);
    min-height: 44px;
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.form-control::placeholder { color: var(--c-text-muted); }
.form-control:disabled { background: var(--c-surface-2); opacity: .7; cursor: not-allowed; }

textarea.form-control { resize: vertical; min-height: 120px; }

.form-group--inline {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.input-password-wrapper {
    position: relative;
}

.input-password-wrapper .form-control {
    padding-right: 44px;
}

.input-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px;
    background: none;
    border: none;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}

.input-password-toggle:hover { color: var(--c-text); }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--c-primary);
}

/* ── Alerts / Flash ───────────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
}

.alert-error   { background: var(--c-danger-light);  color: var(--c-danger);  border-color: #fecaca; }
.alert-success { background: var(--c-success-light); color: var(--c-success); border-color: #a7f3d0; }
.alert-warning { background: var(--c-warning-light); color: var(--c-warning); border-color: #fde68a; }
.alert-info    { background: var(--c-info-light);    color: var(--c-info);    border-color: #a5f3fc; }

.alert__close {
    background: none;
    border: none;
    font-size: var(--fs-lg);
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.alert__close:hover { opacity: 1; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-2);
    border-bottom: 2px solid var(--c-border);
    font-weight: 600;
    white-space: nowrap;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

.table tr:hover td { background: var(--c-surface-2); }
.table tr:last-child td { border-bottom: none; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-text);
}

/* ── Stats grid ───────────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    text-align: center;
}

.stat-card__value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
}

.stat-card__label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-top: var(--sp-2);
}

/* ── Logout form ──────────────────────────────────────────────────────────── */
.logout-form { display: inline; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-muted  { color: var(--c-text-muted); }
.text-sm     { font-size: var(--fs-sm); }
.text-xs     { font-size: var(--fs-xs); }
.font-mono   { font-family: var(--font-mono); }
.mt-4        { margin-top: var(--sp-4); }
.mb-4        { margin-bottom: var(--sp-4); }
.gap-2       { gap: var(--sp-2); }
.d-flex      { display: flex; }
.align-center{ align-items: center; }
.flex-wrap   { flex-wrap: wrap; }