/* ============================================================
   MISSOES.CSS — Estilos dedicados para MISSOES.html
   Independente do site.css
============================================================ */

/* RESET E BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    background: #f0f2f5;
    color: #374151;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   LAYOUT SHELL
============================================================ */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ============================================================
   SIDEBAR
============================================================ */
.sidebar {
    width: 220px;
    background: #2c3e50;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
.sb-logo { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; ; text-align: center; }
.sb-logo-text { font-size: 15px; font-weight: 600; color: #fff; }
.sb-logo-sub { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }

.sb-nav { padding: 10px 8px; flex-shrink: 0; }
.sb-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    margin-bottom: 1px; text-decoration: none;
    border: none; background: none; width: 100%;
}
.sb-item.active { background: rgba(255,255,255,0.12); }
.sb-item:hover:not(.active) { background: rgba(255,255,255,0.06); }
.sb-item i { font-size: 13px; color: rgba(255,255,255,0.45); width: 16px; text-align: center; }
.sb-item.active i { color: rgba(255,255,255,0.9); }
.sb-item-lbl { font-size: 12px; color: rgba(255,255,255,0.45); flex: 1; }
.sb-item.active .sb-item-lbl { color: rgba(255,255,255,0.95); font-weight: 500; }
.sb-badge {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
    font-size: 10px; padding: 1px 7px; border-radius: 8px;
}

.sb-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 4px 8px; flex-shrink: 0; }

/* GRUPOS COLLAPSE */
.sb-group { flex-shrink: 0; overflow: hidden; }
.sb-group-hdr {
    display: flex; align-items: center; padding: 8px 10px 4px 18px;
    cursor: pointer; user-select: none;
}
.sb-group-lbl {
    font-size: 10px; color: rgba(255,255,255,0.28);
    text-transform: uppercase; letter-spacing: 0.07em; flex: 1;
}
.sb-group-hdr:hover .sb-group-lbl { color: rgba(255,255,255,0.5); }
.sb-toggle-btn {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sb-toggle-btn:hover { background: rgba(255,255,255,0.1); }
.sb-toggle-btn i { font-size: 9px; color: rgba(255,255,255,0.4); transition: transform 0.2s; }
.sb-group.collapsed .sb-toggle-btn i { transform: rotate(-90deg); }
.sb-group-items { overflow: hidden; transition: max-height 0.25s ease; }
.sb-group.collapsed .sb-group-items { max-height: 0 !important; }

/* UO items */
.sb-uo {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px; cursor: pointer; margin: 1px 8px;
}
.sb-uo.sel { background: rgba(255,255,255,0.1); }
.sb-uo:hover:not(.sel) { background: rgba(255,255,255,0.05); }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); flex-shrink: 0; }
.sb-uo.sel .sb-dot { background: #4da3e8; }
.sb-uo-txt { font-size: 11px; color: rgba(255,255,255,0.4); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-uo.sel .sb-uo-txt { color: rgba(255,255,255,0.92); font-weight: 500; }
.sb-uo-n { font-size: 10px; color: rgba(255,255,255,0.22); flex-shrink: 0; }
.sb-uo.sel .sb-uo-n { color: rgba(255,255,255,0.5); }

/* Estado items */
.sb-est {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px; cursor: pointer; margin: 1px 8px;
}
.sb-est.sel { background: rgba(255,255,255,0.1); }
.sb-est:hover:not(.sel) { background: rgba(255,255,255,0.05); }
.sb-edot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.sb-est-txt { font-size: 11px; color: rgba(255,255,255,0.4); flex: 1; }
.sb-est.sel .sb-est-txt { color: rgba(255,255,255,0.92); font-weight: 500; }
.sb-est-n { font-size: 10px; color: rgba(255,255,255,0.22); flex-shrink: 0; }
.sb-est.sel .sb-est-n { color: rgba(255,255,255,0.5); }

/* Bottom buttons */
.sb-bottom { margin-top: auto; padding: 8px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.sb-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    width: 100%; background: none; border: none; font-family: inherit;
}
.sb-btn:hover { background: rgba(255,255,255,0.06); }
.sb-btn i { font-size: 12px; color: rgba(255,255,255,0.38); width: 14px; text-align: center; }
.sb-btn span { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ============================================================
   MAIN AREA
============================================================ */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }

/* TOPBAR */
.topbar {
    background: #fff; padding: 11px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.topbar-title { font-size: 14px; font-weight: 600; color: #111827; flex: 1; white-space: nowrap; }
.srch {
    display: flex; align-items: center; gap: 6px;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 5px 10px;
    flex: 1; min-width: 160px; max-width: 400px;
}
.srch input { border: none; background: none; outline: none; font-size: 12px; color: #374151; width: 100%; font-family: inherit; }
.srch i { font-size: 12px; color: #9ca3af; flex-shrink: 0; }
.yr-sel {
    font-size: 12px; color: #374151; background: #f3f4f6;
    border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 5px 10px; cursor: pointer; outline: none; font-family: inherit;
}
.btn-nova {
    font-size: 12px; font-weight: 600; background: #2c3e50; color: #fff;
    border: none; border-radius: 6px; padding: 7px 14px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: inherit;
}
.btn-nova:hover { background: #3d5166; }
#net-badge {
    font-size: 11px; padding: 5px 10px; border-radius: 6px;
    background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280;
    cursor: pointer; display: flex; align-items: center; gap: 4px;
    white-space: nowrap; font-family: inherit;
}
#net-badge.connected { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }

/* STAT CARDS */
.stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; padding: 14px 20px 0; flex-shrink: 0; }
.stat {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 11px 14px; position: relative; overflow: hidden;
}
.stat-lbl { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
.stat-val { font-size: 22px; font-weight: 500; color: #111827; line-height: 1.1; }
.stat-sub { font-size: 10px; color: #9ca3af; margin-top: 2px; }
.stat-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.stat-global .stat-bar { background: #e5e7eb; }
.stat-apr    .stat-bar { background: #60a5fa; }
.stat-plan   .stat-bar { background: #fbbf24; }
.stat-real   .stat-bar { background: #4ade80; }

/* CONTENT */
.content-area { flex: 1; overflow-y: auto; overflow-x: auto; padding: 14px 20px 20px; }

/* ============================================================
   TABELA DE MISSOES — ajuste as variaveis abaixo à mão
   Cada variavel controla uma coluna ou espaçamento.
   Os dados ficam centrados verticalmente (align-items:center).
============================================================ */

/* --- LARGURAS DAS COLUNAS (px) --- */
:root {
    /* -------------------------------------------------------
       LARGURAS — mínimos calculados para o conteúdo real
       (alterar só estes valores, não tocar no resto)
    ------------------------------------------------------- */
--col-seq:      28px;
    --col-id:       175px;
    --col-chefe:    145px;
    --col-missao:   1fr;
    --col-local:    100px;
    --col-saida:    70px;
    --col-chegada:  70px;
    --col-dias:     28px;
    --col-pax:      28px;
    --col-ff:       38px;
    --col-edoc:     32px;
    --col-total:    88px;
    --col-estado:   82px;
    --col-del:      28px;

    /* --- ESPAÇAMENTOS --- */
    --tbl-gap:       10px;   /* espaço entre colunas                       */
    --tbl-pad-h:    12px;   /* padding lateral (esquerda e direita)       */
    --tbl-row-h:    20px;   /* altura de cada linha de dados              */
    --tbl-head-h:   20px;   /* altura do cabeçalho                        */

    /* --- TIPOGRAFIA --- */
    --tbl-head-size:  9px;  /* texto do cabeçalho                         */
    --tbl-cell-size: 11px;  /* texto das células                          */
    --tbl-id-size:   12px;  /* ID (monospace)                             */
    --tbl-miss-size: 9px;  /* nome da missao                             */
}

/* --- ESTRUTURA (não alterar) --- */
.tbl-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}
.tbl-head {
    display: grid;
    grid-template-columns:
var(--col-seq) 
        var(--col-id) 
        var(--col-chefe) 
        var(--col-missao) 
        var(--col-local) 
        var(--col-saida) 
        var(--col-chegada) 
        var(--col-dias) 
        var(--col-pax) 
        var(--col-ff) 
        var(--col-edoc)
        var(--col-total) 
        var(--col-estado) 
        var(--col-del);
    grid-template-rows: var(--tbl-head-h);
    grid-auto-rows: 0;
    grid-auto-flow: column;
    padding: 0 var(--tbl-pad-h);
    gap: var(--tbl-gap);
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
}
.tbl-head > * {
    min-width: auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--tbl-head-size);
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
/* Colunas do cabeçalho alinhadas à esquerda */
/*.tbl-head span:nth-child(1),   /* #      */
/*.tbl-head span:nth-child(2),   /* ID     */
/*.tbl-head span:nth-child(3),   /* Chefe  */
.tbl-head span:nth-child(4),   /* Missao */
.tbl-head span:nth-child(5) {  /* Local  */
    text-align: left;
}

.tbl-row {
    display: grid;
    grid-template-columns:
        var(--col-seq)
        var(--col-id)
        var(--col-chefe)
        var(--col-missao)
        var(--col-local)
        var(--col-saida)
        var(--col-chegada)
        var(--col-dias)
        var(--col-pax)
        var(--col-ff)
        var(--col-total)
        var(--col-estado)
        var(--col-del);
    grid-template-rows: var(--tbl-row-h);
    grid-auto-rows: 0;
    grid-auto-flow: column;
    padding: 0 var(--tbl-pad-h);
    gap: var(--tbl-gap);
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.1s;
}
*.tbl-row > * {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--tbl-cell-size);
    /* centrado verticalmente pelo align-items:center do grid */
	
	
	
	
	
	
	
}
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: #f9fafb; }
.tbl-empty { padding: 50px; text-align: center; color: #9ca3af; font-size: 13px; }
.tbl-foot {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 8px var(--tbl-pad-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tbl-foot span  { font-size: 11px; color: #6b7280; }
.tbl-foot strong { font-size: 11px; font-weight: 600; color: #111827; }

/* --- ALINHAMENTO DAS CÉLULAS (center por defeito via grid) --- */
.t-seq   { font-size: var(--tbl-id-size);   color: #9ca3af; text-align: left; }
.t-id    { font-size: var(--tbl-id-size);   color: #4da3e8; font-family: monospace; text-align: left; }
.t-chefe { font-size: var(--tbl-cell-size); color: #374151; text-align: left; }  
.t-miss  { font-size: var(--tbl-miss-size); color: #111827; font-weight: 600; text-align: left; }
.t-localzona { font-size: var(--tbl-cell-size); color: #374151; text-align: left; }
.t-date  { font-size: var(--tbl-cell-size); color: #6b7280; text-align: center; }
.t-days  { font-size: var(--tbl-cell-size); color: #374151; text-align: center; }
.t-ff    { font-size: var(--tbl-cell-size); color: #374151; text-align: center; }
.t-cost  { font-size: var(--tbl-cell-size); color: #2c3e50; font-weight: 600; text-align: right; }
.t-act   { display: flex; align-items: center; justify-content: center; opacity: 0.15; flex-shrink: 0; }
.tbl-row:hover .t-act { opacity: 0.6; }

/* PILLS — estado centrado */
.pill {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* CALENDARIO */
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-nav-btn {
    background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 5px 12px; cursor: pointer; font-size: 12px; color: #374151; font-family: inherit;
}
.cal-nav-btn:hover { background: #e5e7eb; }
#cal-titulo { font-size: 14px; font-weight: 500; color: #111827; }
#cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cal-day-hdr { text-align: center; font-size: 10px; font-weight: 600; color: #9ca3af; padding: 4px 0; }
.cal-cell { min-height: 72px; background: #f8f9fa; border-radius: 4px; padding: 3px 5px; }
.cal-cell.cm { background: #fff; border: 1px solid #e9ecef; }
.cal-cell.today { border: 2px solid #2c3e50 !important; }
.cal-day-num { font-size: 11px; font-weight: 500; margin-bottom: 2px; color: #374151; }
.mbar {
    border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #fff;
    margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; display: block;
}
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: #6b7280; flex-wrap: wrap; }
.cal-legend span { display: flex; align-items: center; gap: 4px; }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ============================================================
   MODAIS - BASE
============================================================ */
.m-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); z-index: 9999;
    overflow-y: auto; padding: 30px 20px;
    align-items: flex-start; justify-content: center;
}
.m-modal-overlay.mopen { display: flex; }
.m-modal-box {
    background: #fff; border-radius: 10px; overflow: hidden;
    width: 95%; max-width: 920px; margin: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* MODAL HEADER */
.m-modal-head {
    background: #2c3e50; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.m-modal-head-title { font-size: 14px; font-weight: 500; color: #fff; }
.m-modal-head-id { font-size: 10px; color: rgba(255,255,255,0.45); font-family: monospace; }

/* MODAL TABS */
.m-modal-tabs { display: flex; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.m-tab {
    padding: 10px 18px; font-size: 12px; color: #6b7280; cursor: pointer;
    border: none; border-bottom: 2px solid transparent;
    background: none; font-family: inherit; font-weight: 500;
}
.m-tab:hover { color: #374151; }
.m-tab.active { color: #2c3e50; border-bottom-color: #2c3e50; background: #fff; }

/* TAB PANELS */
.m-tab-panel { display: none; }
.m-tab-panel.active { display: block; }

/* MODAL FOOTER */
.m-modal-foot {
    padding: 12px 20px; border-top: 1px solid #e5e7eb;
    display: flex; justify-content: space-between; align-items: center;
    background: #f9fafb;
}

/* ============================================================
   FORM ELEMENTS (dentro dos modais)
============================================================ */
.m-grid { display: grid; gap: 16px; padding: 16px 20px; }
.m-grid-2 { grid-template-columns: 1fr 1fr; }
.m-col { display: flex; flex-direction: column; gap: 10px; }
.m-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.m-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }

.m-field { display: flex; flex-direction: column; gap: 4px; }
.m-label {
    font-size: 0.85em; font-weight: bold; color: #495057;
}
.m-input, .m-select, .m-textarea {
    width: 100%; border: 1.5px solid #eee; border-radius: 10px;
    padding: 10px; font-size: 0.9em; color: #374151;
    background: #fff; outline: none; font-family: inherit;
    transition: border-color 0.15s;
}
.m-input:focus, .m-select:focus, .m-textarea:focus {
    border-color: #1971c2;
    box-shadow: none;
}
.m-input.ro, .m-textarea.ro { background: #f8f9fa; color: #6b7280; cursor: default; }
.m-input.auto-calc { background: #f8f9fa; color: #6b7280; }
.m-select { cursor: pointer; }
.m-textarea { resize: vertical; line-height: 1.5; min-height: 72px; }

/* PRIO BADGE */
.prio-badge-box {
    width: 38px; height: 34px; flex-shrink: 0;
    background: #2c3e50; color: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}

/* CHECKBOXES ROW */
.m-chk-row { 
    display: flex; 
    flex-wrap: nowrap; /* Força tudo a ficar na mesma linha */
    justify-content: space-between; /* Distribui o espaço uniformemente entre eles */
    gap: 8px; /* Espaçamento mínimo de segurança */
    padding-top: 10px; 
    width: 100%;
}

.m-chk-row label { 
    display: flex; 
    align-items: center; 
    gap: 4px; /* Espaço entre o quadrado (checkbox) e o texto */
    cursor: pointer; 
    font-size: 11px; /* Ligeiramente mais pequeno para caberem os 5 itens */
    color: #374151; 
    white-space: nowrap; /* Impede que o próprio nome da opção quebre a meio */
}

/* SECTION TITLE inside modal */
.m-sec-title {
    font-size: 11px; font-weight: 600; color: #374151;
    padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px;
}

/* CUSTO TABLE inside custos tab */
.custo-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.custo-table td { padding: 7px 0; border-bottom: 1px solid #f3f4f6; }
.custo-table tr:last-child td { border-bottom: none; }
.custo-table .custo-lbl { font-size: 12px; color: #6b7280; }
.custo-table .custo-val { text-align: right; }
.custo-input {
    width: 100px; text-align: right; border: 1px solid #e5e7eb;
    border-radius: 4px; padding: 4px 6px; font-size: 11px;
    font-family: inherit; outline: none;
}
.custo-input:focus { border-color: #2c3e50; }
.custo-input.auto { background: #f8f9fa; color: #6b7280; }
.custo-total-row td { font-weight: 700; color: #2c3e50; padding-top: 10px; font-size: 13px; }

/* MODAL BUTTONS */
.btn-guardar {
    font-size: 12px; font-weight: 600; background: #2c3e50; color: #fff;
    border: none; border-radius: 6px; padding: 8px 20px; cursor: pointer; font-family: inherit;
}
.btn-guardar:hover { background: #3d5166; }
.btn-cancelar {
    font-size: 12px; color: #6b7280; background: none;
    border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 14px;
    cursor: pointer; font-family: inherit;
}
.btn-cancelar:hover { background: #f3f4f6; }
.btn-pdf-modal {
    font-size: 12px; color: #6b7280; background: none;
    border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 14px;
    cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.btn-pdf-modal:hover { background: #f3f4f6; }


.btn-pdf {
    font-size: 12px;
    font-weight: 500;
    background: #d97706; /* Laranja elegante */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    display: flex; /* Para alinhar o ícone perfeitamente */
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background 0.2s;
}

.btn-pdf:hover {
    background: #b45309; /* Cor mais escura ao passar o rato */
}





/* ============================================================
   MODAL REFERENCIAS
============================================================ */
.ref-modal-box { max-width: 720px; }
.ref-body { overflow-y: auto; padding: 16px 20px; max-height: 70vh; }
.ref-vig {
    display: flex; align-items: center; gap: 10px;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 6px; padding: 9px 14px; margin-bottom: 14px;
}
.ref-vig-lbl { font-size: 11px; color: #1e40af; font-weight: 600; }
.ref-vig-input {
    border: 1px solid #bfdbfe; border-radius: 4px;
    padding: 4px 8px; font-size: 12px; color: #1e40af;
    font-weight: 600; width: 75px; outline: none; text-align: center; font-family: inherit;
}
.ref-sec {
    font-size: 11px; font-weight: 600; color: #374151;
    padding: 8px 0 6px; border-bottom: 1px solid #e5e7eb; margin-bottom: 6px;
}
.ref-tbl { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.ref-tbl th {
    font-size: 10px; color: #9ca3af; text-align: right;
    padding: 4px 6px; font-weight: 600;
}
.ref-tbl th:first-child { text-align: left; }
.ref-tbl td { padding: 5px 6px; border-bottom: 1px solid #f3f4f6; font-size: 11px; color: #374151; }
.ref-tbl tr:last-child td { border-bottom: none; }
.ref-input {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 4px;
    padding: 4px 7px; font-size: 11px; text-align: right;
    outline: none; font-family: inherit;
}
.ref-input:focus { border-color: #2c3e50; }
.ref-ff-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.ref-ff-cod {
    width: 70px; border: 1px solid #e5e7eb; border-radius: 4px;
    padding: 5px 7px; font-size: 11px; outline: none; font-family: inherit;
}
.ref-ff-desc {
    flex: 1; border: 1px solid #e5e7eb; border-radius: 4px;
    padding: 5px 7px; font-size: 11px; outline: none; font-family: inherit;
}
.ref-ff-del { background: none; border: none; color: #d1d5db; cursor: pointer; font-size: 16px; padding: 0 4px; }
.ref-ff-del:hover { color: #9ca3af; }
.btn-add-ff {
    font-size: 11px; color: #6b7280; background: none;
    border: 1px dashed #d1d5db; border-radius: 5px;
    padding: 5px 12px; cursor: pointer; width: 100%; margin-top: 4px;
    font-family: inherit;
}
.btn-add-ff:hover { background: #f9fafb; }

/* ============================================================
   CONFIRM MODAL
============================================================ */
.confirm-box { max-width: 440px; }
.confirm-msg { font-size: 13px; color: #374151; line-height: 1.6; margin: 16px 0; }
.confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }
.btn-confirm-yes {
    background: #2c3e50; color: #fff; border: none;
    border-radius: 6px; padding: 8px 20px; cursor: pointer;
    font-size: 13px; font-weight: 500; font-family: inherit;
}
.btn-confirm-no {
    background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 8px 16px; cursor: pointer;
    font-size: 13px; font-family: inherit;
}

/* ============================================================
   NET BANNERS
============================================================ */
#net-status-banner {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
    padding: 8px 20px; font-size: 12px; font-weight: 600; text-align: center;
    align-items: center; justify-content: center; gap: 8px;
}
#autosave-indicator {
    display: none; position: fixed; bottom: 16px; right: 20px; z-index: 9998;
    background: rgba(40,40,40,0.85); color: #fff; padding: 6px 14px;
    border-radius: 20px; font-size: 11px; font-weight: 600;
    gap: 6px; align-items: center; pointer-events: none; transition: opacity 0.4s;
}

.t-seq { font-size: 10px; color: #9ca3af; text-align: center; }
/*.t-id { font-size: 10px; color: #4da3e8; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.t-miss { font-size: 12px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */ 

.t-id, .t-chefe, .t-miss {
    font-weight: 400 !important; /* Força a remoção do negrito */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-id {
    font-family: monospace;
    font-size: 10.5px;
    color: #4da3e8;
    overflow: visible; /* Garante que o ID apareça todo */
}

.t-chefe {
    font-size: 11.5px;
    color: #374151;
}

.t-miss {
    font-size: 11.5px;
    color: #111827;
}

/* Restante do estilo da tabela para manter a consistência */
.tbl-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow-x: auto; overflow-y: hidden; }
.tbl-head { background: #f9fafb; border-bottom: 1px solid #e5e7eb; height: 40px; }
.tbl-head span { font-size: 9px; color: #9ca3af; font-weight: 700; text-transform: uppercase; }
.tbl-row { height: 36px; border-bottom: 1px solid #f3f4f6; }
.tbl-row:hover { background: #f9fafb; }





.t-localzona-main { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-localzona-sub { display: block; font-size: 9px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-date { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-days { font-size: 11px; color: #374151; text-align: center; white-space: nowrap; overflow: hidden; }
.t-ff { font-size: 11px; color: #374151; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-cost { font-size: 11px; font-weight: 600; color: #2c3e50; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tbl-row:hover .t-act { opacity: 0.55; }


/* ============================================================
   FORÇAR TAMANHO FIXO DO MODAL (ESTABILIDADE VISUAL)
============================================================ */
.m-modal-box {
    /* Define uma altura fixa baseada no tamanho do ecrã, com limites */
    height: 85vh !important; 
    max-height: 750px !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
}

.m-tab-panel {
    display: none; /* Esconde os painéis inativos */
}

.m-tab-panel.active {
    display: block !important;
    flex: 1 !important; /* Faz o separador esticar e ocupar todo o espaço vazio */
    overflow-y: auto !important; /* Adiciona barra de scroll se o conteúdo for muito longo */
}

.m-modal-foot {
    margin-top: auto !important; /* Garante que os botões (Guardar/Cancelar) ficam sempre colados ao fundo */
}

/* ============================================================
   CORREÇÕES: MODAIS PEQUENOS (REFERÊNCIAS E CONFIRMAÇÃO)
============================================================ */
/* 1. Remover a altura forçada para que a janela se ajuste ao conteúdo */
.ref-modal-box {
    height: auto !important;
    min-height: auto !important;
}

/* 2. Adicionar margem lateral ao conteúdo (sem afetar o cabeçalho/rodapé) */
#refModal .ref-modal-box > div:not(.m-modal-head):not(.m-modal-foot) {
    padding-left: 20px;
    padding-right: 20px;
}

/* 3. Dar um espaço extra ("respiro") antes do rodapé */
#refModal .ref-modal-box > div:nth-last-child(2) {
    margin-bottom: 20px; 
}

/* 4. Corrigir as margens da janela de confirmação (eliminar, etc.) */
#confirmModal .ref-modal-box {
    padding: 24px;
}


/* Cores para as barras do calendário por Unidade Orgânica */
.uo-ch-sdti { background-color: #1971c2 !important; }
.uo-sc-confianca { background-color: #e67700 !important; }
.uo-st-acreditacoes { background-color: #2b8a3e !important; }
.uo-st-certificacoes { background-color: #5f3dc4 !important; }
.uo-si-infraestruturas { background-color: #c92a2a !important; }
.uo-se-espaco { background-color: #0b7285 !important; }
.uo-ssbe      { background-color: #0b7285 !important; }
.uo-sdti-se   { background-color: #0b7285 !important; }
.uo-outro { background-color: #495057 !important; }

/* Garantir que as barras têm visibilidade e ocupam espaço */
.mbar {
    min-height: 18px;
    line-height: 16px;
    margin-bottom: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-weight: 500;
}