/* =========================================================
   COMMODYT v16 — Layout definitivo fiel ao modelo
   ========================================================= */

:root {
  --navy:       #06264a;
  --navy-deep:  #0b1e36;
  --navy-soft:  #0d3260;
  --gold:       #c79848;
  --gold-light: #daa84e;
  --gold-deep:  #a07020;
  --green:      #1a9e6e;
  --green-bg:   #d1ede2;
  --green-text: #0c7a50;
  --red:        #dc3545;
  --red-bg:     #fdecea;
  --amber:      #e0a843;
  --amber-bg:   #fff8e6;
  --amber-text: #8a5e0a;
  --blue-kpi:   #1565c0;
  --bg:         #f4f7fc;
  --surface:    #ffffff;
  --border:     #dde3ee;
  --border-soft:#e8ecf3;
  --text:       #10213d;
  --text-mid:   #334569;
  --muted:      #6b7a99;
  --shadow-sm:  0 1px 4px rgba(16,33,61,.07);
  --shadow:     0 3px 12px rgba(16,33,61,.10);
  --shadow-lg:  0 8px 28px rgba(16,33,61,.14);
  --sidebar-w:  245px;
  --footer-h:   46px;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-xs:  6px;
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

body.auth-locked { overflow: hidden; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--border-soft); }
::-webkit-scrollbar-thumb { background: #c0c8d8; border-radius: 99px; }

/* =========================================================
   AUTH OVERLAY
   ========================================================= */
.auth-overlay {
  align-items: center;
  background: rgba(0, 10, 28, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  bottom: 0; left: 0; right: 0; top: 0;
  display: none;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 300;
}
body.auth-locked .auth-overlay { display: flex; }
body.auth-locked .app-wrapper  { filter: blur(4px); pointer-events: none; user-select: none; }

.auth-box {
  animation: authIn 260ms cubic-bezier(.4,0,.2,1) both;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,10,30,.45);
  padding: 30px 34px 34px;
  width: min(440px, 100%);
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.auth-logo-area { display: flex; justify-content: center; margin-bottom: 26px; }
.auth-logo-svg  { height: 60px; width: 100%; max-width: 270px; }

.auth-tabs {
  background: var(--bg);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
  padding: 3px;
}
.auth-tab {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  height: 36px;
  transition: background var(--transition), color var(--transition);
}
.auth-tab.active { background: var(--navy-deep); color: #fff; }

.auth-form { display: grid; gap: 15px; }

/* =========================================================
   FIELD GROUP
   ========================================================= */
.field-group { display: grid; gap: 6px; }
.field-group label {
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.field-group input,
.field-group select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  height: 42px;
  outline: none;
  padding: 0 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field-group input::placeholder { color: #b8c2d8; font-weight: 400; }
.field-group input:hover, .field-group select:hover { border-color: #b0bcd4; }
.field-group input:focus, .field-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,152,72,.15);
}

/* =========================================================
   BOTÕES GLOBAIS
   ========================================================= */
.btn-primary {
  align-items: center;
  background: var(--navy-deep);
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: 0 3px 12px rgba(11,30,54,.25);
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  height: 44px;
  justify-content: center;
  transition: opacity var(--transition), transform var(--transition);
  width: 100%;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.btn-primary-sm {
  align-items: center;
  background: var(--navy-deep);
  border: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  height: 36px;
  justify-content: center;
  padding: 0 16px;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary-sm:hover { opacity: .85; transform: translateY(-1px); }

.btn-secondary-sm {
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-mid);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  height: 36px;
  justify-content: center;
  padding: 0 16px;
  transition: background var(--transition), border-color var(--transition);
}
.btn-secondary-sm:hover { background: var(--border-soft); border-color: #c8d4e8; }

.btn-danger-sm {
  align-items: center;
  background: var(--red-bg);
  border: 1.5px solid #f5c6c5;
  border-radius: var(--radius-xs);
  color: var(--red);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  height: 36px;
  justify-content: center;
  padding: 0 16px;
  transition: background var(--transition);
}
.btn-danger-sm:hover { background: #fbd8d7; }

/* Header action buttons */
.btn-action {
  align-items: center;
  border: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  height: 38px;
  justify-content: center;
  padding: 0 18px;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-action:hover  { opacity: .90; transform: translateY(-1px); }
.btn-action.navy   {
  background: var(--navy-deep);
  box-shadow: 0 3px 10px rgba(11,30,54,.28);
}
.btn-action.gold   {
  background: linear-gradient(140deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 3px 10px rgba(199,152,72,.32);
}
.btn-action.navy:hover { box-shadow: 0 5px 16px rgba(11,30,54,.36); }
.btn-action.gold:hover { box-shadow: 0 5px 16px rgba(199,152,72,.42); }

/* =========================================================
   APP WRAPPER
   ========================================================= */
.app-wrapper {
  display: flex;
  min-height: 100vh;
  padding-bottom: var(--footer-h);
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  background: var(--navy-deep);
  bottom: var(--footer-h);
  color: #fff;
  display: flex;
  flex-direction: column;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  transition: width 220ms cubic-bezier(.4,0,.2,1);
  width: var(--sidebar-w);
  z-index: 60;
}

/* Collapsed state */
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .nav-text,
.sidebar.collapsed .profile-info,
.sidebar.collapsed .profile-chevron  { display: none !important; }
.sidebar.collapsed .sidebar-brand     { padding: 0 10px; }
.sidebar.collapsed .sidebar-brand svg { max-width: 40px; }
.sidebar.collapsed .sidebar-brand .brand-text { display: none; }
.sidebar.collapsed .nav-item          { justify-content: center; padding: 0; min-height: 52px; }
.sidebar.collapsed .profile-avatar   { margin: auto; }

/* Brand */
.sidebar-brand {
  align-items: center;
  background: var(--surface);
  border-bottom: 3px solid var(--gold);
  display: flex;
  flex-shrink: 0;
  gap: 0;
  height: 66px;
  justify-content: center;
  overflow: hidden;
  padding: 10px 16px;
  transition: padding var(--transition);
}
.sidebar-logo {
  display: block;
  flex-shrink: 0;
  height: 42px;
  width: 100%;
  max-width: 195px;
  transition: max-width var(--transition);
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px 6px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: rgba(255,255,255,.7);
  display: flex;
  gap: 12px;
  margin-bottom: 3px;
  min-height: 56px;
  padding: 0 14px;
  position: relative;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  width: 100%;
}
.nav-item:hover:not(.active) {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-item.active {
  background: rgba(199,152,72,.18);
  border-left-color: var(--gold-light);
  color: #fff;
}

.nav-icon {
  align-items: center;
  color: rgba(255,255,255,.6);
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  transition: color var(--transition);
  width: 30px;
}
.nav-item.active .nav-icon { color: var(--gold-light); }
.nav-icon svg { height: 19px; width: 19px; }

.nav-text { overflow: hidden; }
.nav-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
}
.nav-text small {
  color: rgba(255,255,255,.45);
  display: block;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-item.active .nav-text small { color: rgba(255,255,255,.65); }

/* Sidebar Profile (footer) */
.sidebar-profile {
  align-items: center;
  background: rgba(0,0,0,.20);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  position: relative;
}
.profile-avatar {
  align-items: center;
  background: rgba(199,152,72,.25);
  border: 2px solid rgba(199,152,72,.5);
  border-radius: 50%;
  color: var(--gold-light);
  display: flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.profile-info { flex: 1; min-width: 0; overflow: hidden; }
.profile-name {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-role {
  color: rgba(255,255,255,.50);
  display: block;
  font-size: 11px;
  white-space: nowrap;
}
.profile-chevron {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: rgba(255,255,255,.55);
  display: flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  transition: color var(--transition), background var(--transition), transform var(--transition);
  width: 28px;
}
.profile-chevron:hover { background: rgba(255,255,255,.1); color: #fff; }
.profile-chevron.open { transform: rotate(180deg); color: var(--gold-light); }

/* Profile Dropdown */
.profile-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  bottom: calc(100% + 6px);
  box-shadow: var(--shadow-lg);
  left: 10px;
  min-width: 190px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  z-index: 200;
  animation: dropUp 160ms ease both;
}
@keyframes dropUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dropdown-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 11px 14px;
  transition: background var(--transition);
  width: 100%;
}
.dropdown-item:hover { background: var(--red-bg); color: var(--red); }
.dropdown-item svg { color: var(--red); flex-shrink: 0; }

/* =========================================================
   MAIN CONTENT
   ========================================================= */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--footer-h));
  overflow-x: hidden;
  transition: margin-left 220ms cubic-bezier(.4,0,.2,1);
}
.app-wrapper.sidebar-collapsed .main-content { margin-left: 64px; }

/* =========================================================
   PAGE SECTIONS
   ========================================================= */
.page-section { display: none; padding: 26px 28px 28px; }
.page-section.active { display: block !important; } /* !important sobrepõe .hidden */
.section-body { margin-top: 20px; }

/* =========================================================
   PAGE HEADER
   ========================================================= */
.page-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}
.header-left {
  align-items: center;
  display: flex;
  gap: 14px;
}
.sidebar-toggle {
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-mid);
  display: flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  width: 38px;
}
.sidebar-toggle:hover { background: var(--bg); border-color: #c0ccdf; }

.page-header h1 {
  color: var(--navy);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.15;
  margin: 0 0 3px;
}
.page-header p { color: var(--muted); font-size: 13px; }
.header-actions { align-items: center; display: flex; gap: 8px; flex-shrink: 0; }

/* =========================================================
   METRICS ROW
   ========================================================= */
.metrics-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr) 155px;
  margin-top: 22px;
}

.metric-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 16px;
  min-height: 88px;
  padding: 16px 20px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.metric-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.metric-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  height: 50px;
  justify-content: center;
  width: 50px;
}
.metric-icon svg { height: 22px; width: 22px; stroke-width: 2; }
.metric-icon.blue  { background: linear-gradient(135deg, #2286e8, #0b5bbd); }
.metric-icon.green { background: linear-gradient(135deg, #20c997, #0e8a60); }
.metric-icon.amber { background: linear-gradient(135deg, #e0a843, #a07020); }

.metric-body strong {
  color: var(--text);
  display: block;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.metric-body span {
  color: var(--text-mid);
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 2px;
}
.metric-body small { color: var(--muted); font-size: 11px; }

/* Filter card */
.filter-card {
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 12px 16px;
}
.filter-card:hover { box-shadow: var(--shadow); }
.filter-icon { color: var(--navy-deep); }
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--navy-deep);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  padding: 0;
  width: 100%;
}
.filter-chevron { color: var(--muted); margin-top: 2px; }

/* =========================================================
   CLIENTS LAYOUT
   ========================================================= */
.clients-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 275px 1fr;
  margin-top: 18px;
}

/* ---- Form Panel ---- */
.form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px 24px;
}
.form-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
}
.form-panel-title { align-items: center; display: flex; gap: 8px; }
.fp-icon {
  align-items: center;
  background: var(--bg);
  border-radius: var(--radius-xs);
  color: var(--navy);
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.form-panel h2 {
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}
.btn-clear {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-clear:hover { background: var(--red-bg); border-color: #f5c6c5; color: var(--red); }

#clientForm { display: grid; gap: 14px; }

/* Select wrapper */
.select-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  height: 42px;
  outline: none;
  padding: 0 36px 0 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.select-wrapper select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,152,72,.15);
}
.select-wrapper select:hover { border-color: #b0bcd4; }
.select-chevron {
  color: var(--muted);
  pointer-events: none;
  position: absolute;
  right: 10px;
}

.btn-save {
  align-items: center;
  background: var(--navy-deep);
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 14px rgba(11,30,54,.24);
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  height: 46px;
  justify-content: center;
  margin-top: 6px;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  width: 100%;
}
.btn-save:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,30,54,.32); }

/* ---- Table Panel ---- */
.table-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  padding: 11px 16px;
}
.search-wrap {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  display: flex;
  flex: 1;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,152,72,.12);
}
.search-icon { color: var(--muted); flex-shrink: 0; }
.search-wrap input {
  border: 0;
  color: var(--text);
  flex: 1;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 0;
  background: transparent;
}
.search-wrap input::placeholder { color: #b8c2d8; }
.toolbar-select { flex-shrink: 0; min-width: 175px; }
.toolbar-select select {
  font-size: 13px;
  height: 36px;
  padding: 0 32px 0 10px;
}

/* ---- Table ---- */
.table-wrap { overflow-x: auto; flex: 1; }
table { border-collapse: collapse; min-width: 600px; width: 100%; }
th, td {
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
th {
  background: #f6f8fc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  height: 38px;
  letter-spacing: .6px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}
td { color: var(--text-mid); height: 52px; }
tbody tr { transition: background var(--transition); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f3f6fb; }

th:nth-child(1), td:nth-child(1) { padding-left: 16px; width: 62px; }
th:nth-child(3), td:nth-child(3) { width: 130px; }
th:nth-child(4), td:nth-child(4) { width: 148px; }
th:nth-child(5), td:nth-child(5) { width: 160px; }
.col-actions                     { text-align: center; width: 88px; }
td:last-child                    { text-align: center; }

.table-footer {
  align-items: center;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  min-height: 50px;
  padding: 8px 16px;
}

/* Activity badge (green pill) */
.activity-badge {
  background: var(--green-bg);
  border-radius: 20px;
  color: var(--green-text);
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Protocol badges */
.proto-missing {
  background: var(--red-bg);
  border-radius: 4px;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}
.proto-not-found {
  background: var(--amber-bg);
  border-radius: 4px;
  color: var(--amber-text);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Row action buttons */
.row-actions { display: flex; gap: 6px; justify-content: center; }
.btn-row-edit, .btn-row-del, .btn-row-attach {
  align-items: center;
  border: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  display: flex;
  height: 30px;
  justify-content: center;
  transition: opacity var(--transition), transform var(--transition);
  width: 30px;
}
.btn-row-edit:hover, .btn-row-del:hover, .btn-row-attach:hover { opacity: .85; transform: scale(1.1); }
.btn-row-edit { background: var(--navy-deep); }
.btn-row-attach { background: var(--green); }
.btn-row-del  { background: var(--red); }
.btn-row-edit svg, .btn-row-del svg, .btn-row-attach svg { height: 14px; width: 14px; }
.btn-row-edit.confirming, .btn-row-del.confirming, .btn-row-attach.confirming {
  font-size: 11px; font-weight: 900; width: auto; padding: 0 8px;
}

.empty-row td {
  color: var(--muted);
  height: 100px;
  text-align: center;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.page-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-mid);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 6px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.page-btn:hover:not(:disabled):not(.active) { background: var(--bg); border-color: #c0cce0; }
.page-btn.active { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.page-btn:disabled { color: #c8d4e4; cursor: default; pointer-events: none; }
.page-info { color: var(--muted); font-size: 12px; margin-left: auto; }

/* =========================================================
   INLINE FORM CARD (Atividades / Admin)
   ========================================================= */
.inline-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  padding: 20px 22px;
}
.inline-form-card h3 {
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 16px;
}
.inline-form-actions { display: flex; gap: 8px; margin-top: 14px; }

.admin-user-form {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  align-items: end;
}
.admin-check-field {
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  display: flex;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}
.admin-check-field input { accent-color: var(--navy); height: 15px; width: 15px; flex-shrink: 0; }
.admin-check-field label { color: var(--text-mid); font-size: 13px; font-weight: 600; cursor: pointer; }

/* User role badge */
.user-role {
  background: var(--bg);
  border-radius: 20px;
  color: var(--navy);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  text-transform: uppercase;
}
.user-role.admin { background: var(--green-bg); color: var(--green-text); }

/* =========================================================
   DATA GRID (Atividades)
   ========================================================= */
.data-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.activity-item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 16px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.activity-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.activity-item-info strong { color: var(--navy); display: block; font-size: 14px; font-weight: 700; }
.activity-item-info small  { color: var(--muted); font-size: 12px; margin-top: 2px; display: block; }
.activity-item-del {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  width: 30px;
}
.activity-item-del:hover { background: var(--red-bg); border-color: #f5c6c5; color: var(--red); }
.activity-item-del svg { height: 14px; width: 14px; }

/* =========================================================
   INFO BANNER
   ========================================================= */
.info-banner {
  align-items: center;
  border-radius: var(--radius-sm);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 16px;
}
.amber-banner {
  background: var(--amber-bg);
  border: 1px solid #e8c862;
  color: var(--amber-text);
}
.amber-banner svg { color: var(--amber); flex-shrink: 0; }

/* =========================================================
   RELATÓRIOS
   ========================================================= */
.relatorio-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: 26px;
}
.relatorio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 18px 20px;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.relatorio-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.relatorio-card .rc-num {
  color: var(--navy);
  display: block;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}
.relatorio-card .rc-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.relatorio-table-section h3 {
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
}

/* =========================================================
   CONFIGURAÇÕES
   ========================================================= */
.settings-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 20px;
  transition: box-shadow var(--transition);
}
.settings-card:hover { box-shadow: var(--shadow); }
.danger-card { border-color: #f5c6c5; border-top: 3px solid var(--red); }
.settings-card-header {
  align-items: center;
  color: var(--navy);
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.settings-card-header h3 { font-size: 15px; font-weight: 800; margin: 0; }
.settings-card-header svg { color: var(--navy); flex-shrink: 0; }
.settings-field { margin-bottom: 13px; }
.settings-field label {
  color: var(--text-mid);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.settings-field input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  height: 40px;
  outline: none;
  padding: 0 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.settings-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,152,72,.12);
}
.settings-field input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.settings-desc { color: var(--muted); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }

/* =========================================================
   FOOTER
   ========================================================= */
.app-footer {
  align-items: center;
  background: var(--navy-deep);
  border-top: 2px solid var(--gold-deep);
  bottom: 0;
  color: rgba(255,255,255,.65);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  height: var(--footer-h);
  justify-content: center;
  left: 0;
  letter-spacing: .5px;
  position: fixed;
  right: 0;
  text-transform: uppercase;
  z-index: 40;
}
.app-footer strong { color: var(--gold-light); font-weight: 800; margin: 0 4px; }
.app-footer #footerEmpresa { margin: 0 3px; color: rgba(255,255,255,.85); }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  background: var(--navy-deep);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-xs);
  bottom: calc(var(--footer-h) + 16px);
  box-shadow: var(--shadow-lg);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  left: 50%;
  max-width: 350px;
  min-width: 200px;
  opacity: 0;
  padding: 12px 18px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translate(-50%, 14px);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   UTILITIES
   ========================================================= */
.hidden { display: none !important; }

/* =========================================================
   LOGO: Auth e Sidebar
   ========================================================= */
/* Auth logo: imagem real do logotipo original */
.auth-logo-img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.auth-logo-svg-wrap {
  align-items: center;
  justify-content: center;
  width: 100%;
}
.auth-logo-svg { height: 64px; width: 100%; max-width: 300px; }

/* Sidebar logo: imagem real, fundo claro (sidebar-brand tem bg branco) */
.sidebar-logo-img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.sidebar-logo { display: block; height: 42px; width: 100%; max-width: 195px; }

/* =========================================================
   TEMA ESCURO
   ========================================================= */
body.theme-dark {
  --bg:          #0f1723;
  --surface:     #1a2537;
  --border:      #2c3e57;
  --border-soft: #243044;
  --text:        #ffffff;
  --text-mid:    #f3f6ff;
  --muted:       #dbe4f4;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.35);
  --shadow:      0 3px 12px rgba(0,0,0,.45);
  --shadow-lg:   0 8px 28px rgba(0,0,0,.60);
}
body.theme-dark tbody tr:hover { background: #1e2d42; }
body.theme-dark th { background: #192231; }
body.theme-dark .auth-box { background: #1a2537; color: var(--text); }
body.theme-dark .auth-tab { color: var(--muted); }
body.theme-dark .field-group input,
body.theme-dark .field-group select,
body.theme-dark .select-wrapper select,
body.theme-dark .settings-field input { background: #0f1723; border-color: var(--border); color: var(--text); }
body.theme-dark .field-group input::placeholder { color: #445566; }
body.theme-dark .search-wrap input { color: var(--text); }
body.theme-dark .search-wrap { background: #0f1723; }
body.theme-dark .btn-secondary-sm { background: var(--bg); border-color: var(--border); color: var(--text-mid); }
body.theme-dark .settings-card,
body.theme-dark .metric-card,
body.theme-dark .form-panel,
body.theme-dark .table-panel,
body.theme-dark .inline-form-card,
body.theme-dark .relatorio-card { background: var(--surface); border-color: var(--border); }
body.theme-dark .page-btn { background: var(--surface); border-color: var(--border); color: var(--text-mid); }
body.theme-dark .profile-dropdown { background: var(--surface); border-color: var(--border); }
body.theme-dark .dropdown-item { color: var(--text); }

/* =========================================================
   TEMA: TOGGLE BOTÕES
   ========================================================= */
.theme-toggle-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.theme-btn {
  align-items: center;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-mid);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  transition: all var(--transition);
}
.theme-btn:hover { border-color: var(--gold); color: var(--navy); }
.theme-btn.active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

/* =========================================================
   ADMIN TABS
   ========================================================= */
.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-soft);
  padding-bottom: 0;
}
.admin-tab-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 700;
  gap: 8px;
  height: 42px;
  margin-bottom: -2px;
  padding: 0 18px;
  transition: color var(--transition), border-color var(--transition);
}
.admin-tab-btn:hover { color: var(--navy); }
.admin-tab-btn.active { border-bottom-color: var(--gold); color: var(--navy); }
.admin-tab-btn svg { flex-shrink: 0; }

.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block !important; } /* !important sobrepõe .hidden */

/* =========================================================
   LOGO PREVIEW AREA (Admin)
   ========================================================= */
.logo-preview-area {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.logo-preview-box {
  align-items: center;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 100px;
  padding: 16px 20px;
  width: 240px;
}
.logo-preview-box.dark-bg  { background: var(--navy-deep); }
.logo-preview-box.light-bg { background: #fff; border: 1.5px solid var(--border); }
.preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.logo-preview-box.dark-bg  .preview-label { color: rgba(255,255,255,.5); }
.logo-preview-box.light-bg .preview-label { color: var(--muted); }
.preview-logo-img {
  height: 48px;
  max-width: 200px;
  object-fit: contain;
}

/* =========================================================
   FOOTER PREVIEW
   ========================================================= */
.footer-preview {
  background: var(--navy-deep);
  border-radius: var(--radius-xs);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 14px 20px;
  text-align: center;
  text-transform: uppercase;
}
.footer-preview strong { color: var(--gold-light); font-weight: 800; margin: 0 4px; }

/* =========================================================
   PROTOCOLO FORM GRID
   ========================================================= */
.proto-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.5fr 1fr;
}
@media (max-width: 600px) {
  .proto-form-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ATIVIDADE: botão editar no card
   ========================================================= */
.activity-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.activity-item-edit {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  width: 30px;
}
.activity-item-edit:hover { background: var(--bg); border-color: var(--navy); color: var(--navy); }
.activity-item-edit svg { height: 14px; width: 14px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
  .metrics-row { grid-template-columns: 1fr 1fr 1fr; }
  .filter-card { display: none; }
}

@media (max-width: 980px) {
  :root { --sidebar-w: 210px; }
  .metrics-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .clients-layout { grid-template-columns: 1fr; }
  .form-panel { order: 2; }
  .table-panel { order: 1; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 150;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; }
  .page-section { padding: 16px 14px 20px; }
  .metrics-row { grid-template-columns: 1fr; }
  .admin-user-form { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .table-toolbar { flex-wrap: wrap; }
  .logo-preview-area { flex-direction: column; }
  .logo-preview-box { width: 100%; }
  .admin-tabs { gap: 2px; }
  .admin-tab-btn { font-size: 12px; padding: 0 10px; }
}

/* =========================================================
   LOGO UPLOAD — upload de arquivo local
   ========================================================= */
.logo-upload-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.logo-file-input {
  display: none;
}
.logo-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-xs);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-file-label:hover { background: var(--navy-soft); }
.logo-file-label svg { stroke: #fff; stroke-width: 2; fill: none; flex-shrink: 0; }
.logo-file-name {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* empty-state */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  grid-column: 1 / -1;
}

/* =========================================================
   CLIENTE ANEXOS
   ========================================================= */
.modal-backdrop {
  align-items: center;
  background: rgba(8, 20, 38, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 260;
}
.modal-backdrop.hidden { display: none; }
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  width: min(720px, 100%);
}
.modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px 20px;
}
.modal-header h2 {
  color: var(--navy);
  font-size: 18px;
  margin: 0 0 4px;
}
.modal-header p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.modal-close {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--navy);
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.attachments-upload {
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  padding: 16px 20px;
}
.attachment-file-input { display: none; }
.attachment-file-label {
  align-items: center;
  background: var(--navy);
  border-radius: var(--radius-xs);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  padding: 9px 13px;
}
.attachment-file-name {
  color: var(--muted);
  flex: 1;
  font-size: 12px;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachments-list {
  display: grid;
  gap: 10px;
  max-height: 52vh;
  overflow: auto;
  padding: 16px 20px 20px;
}
.attachment-item {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}
.attachment-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.attachment-info strong {
  color: var(--navy);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-info span {
  color: var(--muted);
  font-size: 11px;
}
.attachment-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.attachments-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 13px;
  padding: 26px;
  text-align: center;
}

.client-docs-field {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.client-doc-upload {
  align-items: center;
  display: flex;
  gap: 8px;
}
.client-doc-input { display: none; }
.client-doc-label {
  align-items: center;
  background: var(--navy);
  border-radius: var(--radius-xs);
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-height: 36px;
  padding: 8px 11px;
}
.client-doc-label svg,
.attachments-upload .btn-primary-sm,
.attachments-upload .btn-primary-sm svg { color: #fff !important; stroke: #fff !important; }

.contract-status {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 78px;
  padding: 5px 10px;
}
.contract-status.pending { background: var(--amber-bg); color: var(--amber-text); }
.contract-status.ok { background: var(--green-bg); color: var(--green-text); }
.client-doc-file-name {
  color: var(--muted);
  flex: 1;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-doc-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.client-doc-item {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px;
}
.client-doc-item.pending { border-style: dashed; }
.client-doc-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.client-doc-info strong {
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-doc-info span {
  color: var(--muted);
  font-size: 10px;
}
.client-doc-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.client-doc-remove {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  display: flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.client-doc-remove svg { height: 13px; width: 13px; }
.client-doc-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 11px;
  padding: 10px;
  text-align: center;
}
.font-color-field {
  border-top: 1px solid var(--border-soft);
  margin-top: 14px;
  padding-top: 14px;
}
.font-color-control {
  align-items: center;
  display: flex;
  gap: 8px;
}
.font-color-control input[type="color"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  height: 36px;
  padding: 3px;
  width: 44px;
}
.font-color-control input[type="text"] {
  max-width: 92px;
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .attachments-upload {
    align-items: stretch;
    flex-direction: column;
  }
  .attachment-file-label,
  .attachments-upload .btn-primary-sm {
    justify-content: center;
    width: 100%;
  }
  .attachment-item {
    align-items: stretch;
    flex-direction: column;
  }
}