/**
 * Gestiq - Sistema de Gestão para Óticas
 * Arquivo: assets/css/gestiq.css
 * Descrição: Estilos globais — variáveis, layout base, login e componentes comuns
 */

/* ── Variáveis de design ───────────────────────────────────────────────────── */
:root {
  --gq-primary:        #5e5ce6;
  --gq-primary-dark:   #4a48c8;
  --gq-primary-light:  #eeeef9;
  --gq-secondary:      #6c757d;
  --gq-success:        #22c55e;
  --gq-warning:        #f59e0b;
  --gq-danger:         #ef4444;
  --gq-info:           #3b82f6;

  --gq-bg:             #f5f5fa;
  --gq-surface:        #ffffff;
  --gq-border:         #e2e8f0;
  --gq-border-radius:  12px;
  --gq-border-radius-sm: 8px;

  --gq-text:           #1e293b;
  --gq-text-muted:     #64748b;
  --gq-text-light:     #94a3b8;

  --gq-sidebar-width:  260px;
  --gq-sidebar-bg:     #1e1e2d;
  --gq-sidebar-text:   #a2a3b1;
  --gq-sidebar-active: #5e5ce6;

  --gq-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --gq-shadow:         0 4px 20px rgba(0,0,0,.08);
  --gq-shadow-lg:      0 10px 40px rgba(0,0,0,.12);

  --gq-font:           'Inter', system-ui, sans-serif;
  --gq-transition:     .2s ease;
}

/* ── Reset e base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--gq-font);
  background:  var(--gq-bg);
  color:       var(--gq-text);
  font-size:   14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════════════════════════ */

.gq-login-body {
  min-height: 100vh;
  background: var(--gq-bg);
  display:    flex;
  align-items: stretch;
}

.gq-login-wrapper {
  display:   flex;
  width:     100%;
  min-height: 100vh;
}

/* ── Painel esquerdo (branding) ─────────────────────────────────────────── */
.gq-login-brand {
  flex: 1;
  background: linear-gradient(135deg, var(--gq-sidebar-bg) 0%, #2d2d44 100%);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    3rem;
  position:   relative;
  overflow:   hidden;
}

.gq-login-brand::before {
  content:  '';
  position: absolute;
  top:     -120px;
  right:   -120px;
  width:    400px;
  height:   400px;
  background: rgba(94, 92, 230, .15);
  border-radius: 50%;
}

.gq-login-brand::after {
  content:  '';
  position: absolute;
  bottom:  -80px;
  left:    -80px;
  width:    300px;
  height:   300px;
  background: rgba(94, 92, 230, .10);
  border-radius: 50%;
}

.gq-brand-inner {
  position: relative;
  z-index:  1;
  max-width: 420px;
  width:    100%;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.gq-logo {
  display:         flex;
  align-items:     center;
  gap:             .6rem;
  text-decoration: none;
}

.gq-logo-icon {
  font-size:  2rem;
  color:      var(--gq-primary);
  filter: drop-shadow(0 0 12px rgba(94,92,230,.5));
}

.gq-logo-text {
  font-size:   1.6rem;
  font-weight: 700;
  color:       #fff;
  letter-spacing: -.5px;
}

/* ── Card de stats ────────────────────────────────────────────────────── */
.gq-stats-card {
  background:    rgba(255,255,255,.07);
  border:        1px solid rgba(255,255,255,.10);
  border-radius: var(--gq-border-radius);
  padding:       1.5rem;
  backdrop-filter: blur(10px);
  display:       flex;
  flex-direction: column;
  gap:           1rem;
}

.gq-stat-item {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.gq-stat-item i {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.gq-stat-value {
  font-size:   1.2rem;
  font-weight: 700;
  color:       #fff;
}

.gq-stat-label {
  font-size: .78rem;
  color:     var(--gq-sidebar-text);
}

.gq-stat-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
}

/* ── Testimonial ──────────────────────────────────────────────────────── */
.gq-testimonial {
  margin: 0;
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--gq-primary);
  background: rgba(94,92,230,.08);
  border-radius: 0 var(--gq-border-radius-sm) var(--gq-border-radius-sm) 0;
}

.gq-testimonial p {
  color:       rgba(255,255,255,.85);
  font-size:   .9rem;
  font-style:  italic;
  margin-bottom: .4rem;
}

.gq-testimonial footer {
  font-size:   .78rem;
  color:       var(--gq-sidebar-text);
  font-style:  normal;
}

/* ── Painel direito (formulário) ────────────────────────────────────── */
.gq-login-form-panel {
  width:       460px;
  flex-shrink: 0;
  background:  var(--gq-surface);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     2.5rem;
  box-shadow:  var(--gq-shadow-lg);
}

@media (max-width: 991.98px) {
  .gq-login-form-panel {
    width: 100%;
    box-shadow: none;
  }
}

.gq-login-form-inner {
  width: 100%;
  max-width: 380px;
}

.gq-form-title {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--gq-text);
  margin-bottom: .4rem;
  letter-spacing: -.5px;
}

.gq-form-subtitle {
  color:        var(--gq-text-muted);
  margin-bottom: 2rem;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.gq-label {
  font-weight: 500;
  font-size:   .85rem;
  color:       var(--gq-text);
  margin-bottom: .4rem;
}

.gq-input-group .input-group-text.gq-input-icon {
  background:  #f8fafc;
  border:      1px solid var(--gq-border);
  border-right: none;
  color:       var(--gq-text-muted);
  padding:     .55rem .8rem;
}

.gq-input {
  border:     1px solid var(--gq-border);
  border-left: none;
  padding:    .55rem .9rem;
  font-size:  .9rem;
  transition: border-color var(--gq-transition), box-shadow var(--gq-transition);
  background: #f8fafc;
}

.gq-input:focus {
  border-color: var(--gq-primary);
  box-shadow:   0 0 0 3px rgba(94,92,230,.15);
  background:   #fff;
  outline:      none;
}

.gq-btn-toggle-pwd {
  border:     1px solid var(--gq-border);
  border-left: none;
  background: #f8fafc;
  color:      var(--gq-text-muted);
  padding:    .55rem .8rem;
  transition: color var(--gq-transition);
}

.gq-btn-toggle-pwd:hover { color: var(--gq-primary); }

/* ── Checkbox ─────────────────────────────────────────────────────── */
.gq-check .form-check-input:checked {
  background-color: var(--gq-primary);
  border-color:     var(--gq-primary);
}

/* ── Botão primário ──────────────────────────────────────────────── */
.gq-btn-primary {
  background:    var(--gq-primary);
  border:        none;
  color:         #fff;
  padding:       .7rem 1.5rem;
  font-weight:   600;
  font-size:     .9rem;
  border-radius: var(--gq-border-radius-sm);
  transition:    background var(--gq-transition), transform var(--gq-transition),
                 box-shadow var(--gq-transition);
}

.gq-btn-primary:hover {
  background:  var(--gq-primary-dark);
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(94,92,230,.35);
}

.gq-btn-primary:active { transform: translateY(0); }

/* ── Links e rodapé ──────────────────────────────────────────────── */
.gq-link-small {
  font-size:   .82rem;
  color:       var(--gq-primary);
  text-decoration: none;
  font-weight: 500;
  transition:  color var(--gq-transition);
}

.gq-link-small:hover { color: var(--gq-primary-dark); }

.gq-login-footer {
  font-size: .78rem;
  color:     var(--gq-text-light);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL (sidebar + conteúdo)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.gq-sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      var(--gq-sidebar-width);
  height:     100vh;
  background: var(--gq-sidebar-bg);
  display:    flex;
  flex-direction: column;
  z-index:    1040;
  transition: transform var(--gq-transition);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Sidebar logo */
.gq-sidebar-logo {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  padding:     1.5rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  flex-shrink: 0;
}

.gq-sidebar-logo .gq-logo-text {
  font-size:   1.3rem;
  font-weight: 700;
}

/* Nav section label */
.gq-nav-section {
  font-size:     .68rem;
  font-weight:   600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:         rgba(255,255,255,.3);
  padding:       1.2rem 1.2rem .4rem;
}

/* Nav item */
.gq-nav-item {
  list-style: none;
}

.gq-nav-link {
  display:       flex;
  align-items:   center;
  gap:           .7rem;
  padding:       .65rem 1.2rem;
  color:         var(--gq-sidebar-text);
  text-decoration: none;
  font-size:     .875rem;
  font-weight:   500;
  border-radius: var(--gq-border-radius-sm);
  margin:        .1rem .6rem;
  transition:    all var(--gq-transition);
  position:      relative;
}

.gq-nav-link i {
  font-size:  1.1rem;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
}

.gq-nav-link:hover {
  background: rgba(255,255,255,.06);
  color:      #fff;
}

.gq-nav-link.active {
  background: var(--gq-primary);
  color:      #fff;
  box-shadow: 0 4px 15px rgba(94,92,230,.4);
}

/* Badge de notificação */
.gq-nav-badge {
  margin-left:   auto;
  font-size:     .65rem;
  padding:       .15rem .45rem;
  border-radius: 20px;
  background:    var(--gq-danger);
  color:         #fff;
  font-weight:   700;
}

/* Submenu */
.gq-nav-submenu {
  list-style:  none;
  padding:     0;
  margin:      0;
  overflow:    hidden;
  max-height:  0;
  transition:  max-height .3s ease;
}

.gq-nav-submenu.open {
  max-height: 500px;
}

.gq-nav-submenu .gq-nav-link {
  padding-left: 3rem;
  font-size:    .83rem;
  font-weight:  400;
}

/* Sidebar footer (usuário) */
.gq-sidebar-user {
  margin-top:   auto;
  padding:      1rem 1.2rem;
  border-top:   1px solid rgba(255,255,255,.06);
  display:      flex;
  align-items:  center;
  gap:          .7rem;
}

.gq-sidebar-user .gq-avatar {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    var(--gq-primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     .85rem;
  flex-shrink:   0;
}

.gq-sidebar-user .gq-user-name {
  font-size:   .83rem;
  font-weight: 600;
  color:       #fff;
  line-height: 1.3;
}

.gq-sidebar-user .gq-user-role {
  font-size: .72rem;
  color:     var(--gq-sidebar-text);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.gq-topbar {
  position:   fixed;
  top:        0;
  left:       var(--gq-sidebar-width);
  right:      0;
  height:     64px;
  background: var(--gq-surface);
  border-bottom: 1px solid var(--gq-border);
  display:    flex;
  align-items: center;
  padding:    0 1.5rem;
  gap:        1rem;
  z-index:    1030;
  box-shadow: var(--gq-shadow-sm);
}

.gq-topbar-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--gq-text);
  flex:        1;
}

.gq-topbar-action {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    transparent;
  border:        1px solid var(--gq-border);
  color:         var(--gq-text-muted);
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    all var(--gq-transition);
  text-decoration: none;
  font-size:     1rem;
  position:      relative;
}

.gq-topbar-action:hover {
  background:   var(--gq-primary-light);
  color:        var(--gq-primary);
  border-color: var(--gq-primary);
}

/* Badge de notificação no ícone */
.gq-topbar-action .gq-badge-dot {
  position:      absolute;
  top:           4px;
  right:         4px;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--gq-danger);
  border:        2px solid var(--gq-surface);
}

/* Dropdown do usuário na topbar */
.gq-user-dropdown .dropdown-toggle {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  background:    transparent;
  border:        1px solid var(--gq-border);
  border-radius: 30px;
  padding:       .3rem .7rem .3rem .3rem;
  cursor:        pointer;
  transition:    all var(--gq-transition);
  text-decoration: none;
}

.gq-user-dropdown .dropdown-toggle:hover {
  border-color: var(--gq-primary);
  background:   var(--gq-primary-light);
}

.gq-user-dropdown .gq-avatar-sm {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  background:    var(--gq-primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     .75rem;
  flex-shrink:   0;
  overflow:      hidden;
}

.gq-user-dropdown .gq-avatar-sm img {
  width: 100%; height: 100%; object-fit: cover;
}

.gq-user-dropdown .gq-user-info-name {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--gq-text);
  line-height: 1.2;
}

.gq-user-dropdown .gq-user-info-role {
  font-size: .72rem;
  color:     var(--gq-text-muted);
}

.gq-user-dropdown .dropdown-menu {
  border:        1px solid var(--gq-border);
  border-radius: var(--gq-border-radius);
  box-shadow:    var(--gq-shadow);
  padding:       .5rem;
  min-width:     200px;
}

.gq-user-dropdown .dropdown-item {
  border-radius: var(--gq-border-radius-sm);
  font-size:     .85rem;
  padding:       .5rem .75rem;
  color:         var(--gq-text);
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  transition:    background var(--gq-transition);
}

.gq-user-dropdown .dropdown-item:hover    { background: var(--gq-primary-light); color: var(--gq-primary); }
.gq-user-dropdown .dropdown-item.text-danger:hover { background: #fef2f2; }

/* ══════════════════════════════════════════════════════════════════════════════
   ÁREA DE CONTEÚDO PRINCIPAL
══════════════════════════════════════════════════════════════════════════════ */

.gq-main {
  margin-left: var(--gq-sidebar-width);
  margin-top:  64px;
  min-height:  calc(100vh - 64px);
  padding:     1.75rem;
  transition:  margin-left var(--gq-transition);
}

/* Page header */
.gq-page-header {
  display:       flex;
  align-items:   flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap:     wrap;
  gap:           1rem;
}

.gq-page-title {
  font-size:   1.35rem;
  font-weight: 700;
  color:       var(--gq-text);
  margin:      0;
  letter-spacing: -.3px;
}

.gq-page-subtitle {
  font-size:   .85rem;
  color:       var(--gq-text-muted);
  margin-top:  .2rem;
}

/* Breadcrumb */
.gq-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   .8rem;
  color:       var(--gq-text-muted);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.gq-breadcrumb li + li::before {
  content: '/';
  color:   var(--gq-border);
  margin-right: .4rem;
}

.gq-breadcrumb a {
  color:           var(--gq-text-muted);
  text-decoration: none;
  transition:      color var(--gq-transition);
}

.gq-breadcrumb a:hover { color: var(--gq-primary); }

.gq-breadcrumb li.active { color: var(--gq-text); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════════════════ */

.gq-card {
  background:    var(--gq-surface);
  border:        1px solid var(--gq-border);
  border-radius: var(--gq-border-radius);
  box-shadow:    var(--gq-shadow-sm);
  overflow:      hidden;
  transition:    box-shadow var(--gq-transition);
}

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

.gq-card-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       1rem 1.25rem;
  border-bottom: 1px solid var(--gq-border);
  gap:           .75rem;
}

.gq-card-title {
  font-size:   .95rem;
  font-weight: 600;
  color:       var(--gq-text);
  margin:      0;
}

.gq-card-body   { padding: 1.25rem; }
.gq-card-footer {
  padding: 1.25rem 1.5rem; /* Padding padrão */
  border-top: 1px solid #EFF2F5; /* Borda superior */
  background-color: #FFFFFF; /* Fundo branco */
}

/* Responsividade para o rodapé */
@media (max-width: 767.98px) {
  .gq-card-footer {
    flex-direction: column; /* Empilha os itens em telas pequenas */
    align-items: center;
  }
  .gq-card-footer > div,
  .gq-card-footer > nav {
    margin-bottom: 0.5rem; /* Espaçamento entre os itens empilhados */
  }
}

/* ── KPI / Stat cards ─────────────────────────────────────────────────────── */
.gq-kpi-card {
  background:    var(--gq-surface);
  border:        1px solid var(--gq-border);
  border-radius: var(--gq-border-radius);
  padding:       1.25rem;
  box-shadow:    var(--gq-shadow-sm);
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  transition:    all var(--gq-transition);
  position:      relative;
  overflow:      hidden;
}

.gq-kpi-card::before {
  content:       '';
  position:      absolute;
  top:           0; left: 0; right: 0;
  height:        3px;
  background:    var(--gq-kpi-color, var(--gq-primary));
  border-radius: var(--gq-border-radius) var(--gq-border-radius) 0 0;
}

.gq-kpi-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--gq-shadow);
}

.gq-kpi-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--gq-border-radius-sm);
  background:    color-mix(in srgb, var(--gq-kpi-color, var(--gq-primary)) 12%, transparent);
  color:         var(--gq-kpi-color, var(--gq-primary));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.4rem;
  flex-shrink:   0;
}

.gq-kpi-info { flex: 1; min-width: 0; }

.gq-kpi-value {
  font-size:   1.55rem;
  font-weight: 700;
  color:       var(--gq-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.gq-kpi-label {
  font-size:   .8rem;
  color:       var(--gq-text-muted);
  margin-top:  .2rem;
}

.gq-kpi-trend {
  font-size:   .75rem;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         .2rem;
  margin-top:  .3rem;
}

.gq-kpi-trend.up   { color: var(--gq-success); }
.gq-kpi-trend.down { color: var(--gq-danger); }

/* Variantes de cor para KPI */
.gq-kpi--primary  { --gq-kpi-color: var(--gq-primary); }
.gq-kpi--success  { --gq-kpi-color: var(--gq-success); }
.gq-kpi--warning  { --gq-kpi-color: var(--gq-warning); }
.gq-kpi--danger   { --gq-kpi-color: var(--gq-danger);  }
.gq-kpi--info     { --gq-kpi-color: var(--gq-info);    }

/* ══════════════════════════════════════════════════════════════════════════════
   TABELAS
══════════════════════════════════════════════════════════════════════════════ */

.gq-table-wrapper {
  overflow-x: auto;
  border-radius: var(--gq-border-radius);
}

.gq-table {
  width:       100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size:   .875rem;
}

.gq-table thead th {
  background:    #f8fafc;
  color:         var(--gq-text-muted);
  font-size:     .72rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding:       .75rem 1rem;
  border-bottom: 2px solid var(--gq-border);
  white-space:   nowrap;
  position:      sticky;
  top:           0;
  z-index:       1;
}

.gq-table thead th:first-child { border-radius: var(--gq-border-radius) 0 0 0; }
.gq-table thead th:last-child  { border-radius: 0 var(--gq-border-radius) 0 0; }

.gq-table tbody td {
  padding:     .75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color:       var(--gq-text);
  vertical-align: middle;
}

.gq-table tbody tr:last-child td { border-bottom: none; }

.gq-table tbody tr {
  transition: background var(--gq-transition);
}

.gq-table tbody tr:hover td { background: #f8fafc; }

/* Coluna de ações */
.gq-table .gq-col-actions {
  white-space: nowrap;
  text-align:  right;
  width:       1%;
}

/* ── Botões de ação nas tabelas ──────────────────────────────────────────── */
.gq-btn-action {
  width:         30px;
  height:        30px;
  border-radius: var(--gq-border-radius-sm);
  border:        1px solid var(--gq-border);
  background:    transparent;
  color:         var(--gq-text-muted);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-size:     .85rem;
  cursor:        pointer;
  transition:    all var(--gq-transition);
  text-decoration: none;
}

.gq-btn-action:hover            { background: var(--gq-primary-light); color: var(--gq-primary); border-color: var(--gq-primary); }
.gq-btn-action.edit:hover       { background: #fef9ee; color: var(--gq-warning); border-color: var(--gq-warning); }
.gq-btn-action.delete:hover     { background: #fef2f2; color: var(--gq-danger);  border-color: var(--gq-danger);  }
.gq-btn-action.success:hover    { background: #f0fdf4; color: var(--gq-success); border-color: var(--gq-success); }

/* ══════════════════════════════════════════════════════════════════════════════
   BADGES / STATUS
══════════════════════════════════════════════════════════════════════════════ */

.gq-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  padding:       .25rem .65rem;
  border-radius: 20px;
  font-size:     .72rem;
  font-weight:   600;
  white-space:   nowrap;
}

.gq-badge-primary  { background: var(--gq-primary-light);  color: var(--gq-primary); }
.gq-badge-success  { background: #f0fdf4; color: #16a34a; }
.gq-badge-warning  { background: #fffbeb; color: #d97706; }
.gq-badge-danger   { background: #fef2f2; color: #dc2626; }
.gq-badge-info     { background: #eff6ff; color: #2563eb; }
.gq-badge-secondary{ background: #f1f5f9; color: #475569; }

/* Status OS */
.gq-badge-os-aguardando  { background: #fff7ed; color: #c2410c; }
.gq-badge-os-producao    { background: #fefce8; color: #a16207; }
.gq-badge-os-pronto      { background: #f0fdf4; color: #15803d; }
.gq-badge-os-entregue    { background: #f0f9ff; color: #0369a1; }

/* Status pagamento */
.gq-badge-parcial  { background: #fffbeb; color: #b45309; }
.gq-badge-quitado  { background: #f0fdf4; color: #15803d; }
.gq-badge-cancelado{ background: #fef2f2; color: #b91c1c; }

/* ══════════════════════════════════════════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════════════════════════════════════════ */

.gq-form-label {
  font-size:   .83rem;
  font-weight: 500;
  color:       var(--gq-text);
  margin-bottom: .35rem;
}

.gq-form-control {
  font-size:     .875rem;
  border:        1px solid var(--gq-border);
  border-radius: var(--gq-border-radius-sm);
  padding:       .5rem .75rem;
  color:         var(--gq-text);
  background:    #fff;
  transition:    border-color var(--gq-transition), box-shadow var(--gq-transition);
  width:         100%;
}

.gq-form-control:focus {
  border-color: var(--gq-primary);
  box-shadow:   0 0 0 3px rgba(94,92,230,.12);
  outline:      none;
}

.gq-form-control.is-invalid {
  border-color: var(--gq-danger);
}

.gq-form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.gq-invalid-feedback {
  font-size: .78rem;
  color:     var(--gq-danger);
  margin-top: .25rem;
}

/* Grupos com ícone */
.gq-input-group-icon {
  position: relative;
}

.gq-input-group-icon i {
  position:  absolute;
  left:      .75rem;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--gq-text-muted);
  font-size: .9rem;
  pointer-events: none;
}

.gq-input-group-icon .gq-form-control {
  padding-left: 2.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOTÕES PRINCIPAIS
══════════════════════════════════════════════════════════════════════════════ */

.gq-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           .4rem;
  padding:       .5rem 1.1rem;
  font-size:     .875rem;
  font-weight:   500;
  border-radius: var(--gq-border-radius-sm);
  border:        1px solid transparent;
  cursor:        pointer;
  text-decoration: none;
  transition:    all var(--gq-transition);
  white-space:   nowrap;
  line-height:   1.5;
}

.gq-btn:disabled {
  opacity: .6;
  cursor:  not-allowed;
  pointer-events: none;
}

.gq-btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.gq-btn-lg { padding: .65rem 1.4rem; font-size: .95rem; }

.gq-btn-primary {
  background: var(--gq-primary);
  color:      #fff;
}
.gq-btn-primary:hover {
  background: var(--gq-primary-dark);
  color:      #fff;
  box-shadow: 0 4px 15px rgba(94,92,230,.35);
  transform:  translateY(-1px);
}

.gq-btn-secondary {
  background:   #f1f5f9;
  color:        var(--gq-text);
  border-color: var(--gq-border);
}
.gq-btn-secondary:hover { background: #e2e8f0; color: var(--gq-text); }

.gq-btn-success {
  background: var(--gq-success); color: #fff;
}
.gq-btn-success:hover { background: #16a34a; color: #fff; }

.gq-btn-danger {
  background: var(--gq-danger); color: #fff;
}
.gq-btn-danger:hover { background: #dc2626; color: #fff; }

.gq-btn-warning {
  background: var(--gq-warning); color: #fff;
}
.gq-btn-warning:hover { background: #d97706; color: #fff; }

.gq-btn-outline-primary {
  background:   transparent;
  color:        var(--gq-primary);
  border-color: var(--gq-primary);
}
.gq-btn-outline-primary:hover {
  background: var(--gq-primary);
  color:      #fff;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAIS
══════════════════════════════════════════════════════════════════════════════ */

.gq-modal .modal-content {
  border:        none;
  border-radius: var(--gq-border-radius);
  box-shadow:    var(--gq-shadow-lg);
}

.gq-modal .modal-header {
  border-bottom: 1px solid var(--gq-border);
  padding:       1rem 1.25rem;
}

.gq-modal .modal-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--gq-text);
}

.gq-modal .modal-footer {
  border-top: 1px solid var(--gq-border);
  padding:    .9rem 1.25rem;
}

.gq-modal .btn-close { opacity: .5; }
.gq-modal .btn-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   TOAST / ALERTAS FLUTUANTES
══════════════════════════════════════════════════════════════════════════════ */

.gq-toast-container {
  position:   fixed;
  top:        80px;
  right:      1.5rem;
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
  max-width:  360px;
  width:      100%;
}

.gq-toast {
  background:    var(--gq-surface);
  border:        1px solid var(--gq-border);
  border-radius: var(--gq-border-radius);
  box-shadow:    var(--gq-shadow);
  padding:       .85rem 1rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  animation:     gqToastIn .25s ease;
  border-left:   4px solid var(--gq-toast-color, var(--gq-primary));
}

.gq-toast.success { --gq-toast-color: var(--gq-success); }
.gq-toast.error   { --gq-toast-color: var(--gq-danger);  }
.gq-toast.warning { --gq-toast-color: var(--gq-warning); }
.gq-toast.info    { --gq-toast-color: var(--gq-info);    }

.gq-toast-icon {
  color:      var(--gq-toast-color, var(--gq-primary));
  font-size:  1.1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

.gq-toast-body  { flex: 1; }
.gq-toast-title { font-size: .85rem; font-weight: 600; color: var(--gq-text); }
.gq-toast-msg   { font-size: .8rem;  color: var(--gq-text-muted); margin-top: .1rem; }

.gq-toast-close {
  background: none; border: none; color: var(--gq-text-muted);
  cursor: pointer; padding: 0; font-size: .9rem; flex-shrink: 0;
  transition: color var(--gq-transition);
}
.gq-toast-close:hover { color: var(--gq-text); }

@keyframes gqToastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGINAÇÃO
══════════════════════════════════════════════════════════════════════════════ */

.gq-pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5rem; /* Espaçamento entre os itens da paginação */
}

.gq-page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gq-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; /* Largura mínima para os botões */
  height: 38px; /* Altura para os botões */
  padding: 0 12px; /* Padding horizontal */
  font-size: 0.9rem;
  font-weight: 500;
  color: #6C757D; /* Cor do texto padrão */
  text-decoration: none;
  border-radius: 0.42rem; /* Arredondamento das bordas */
  transition: all 0.2s ease-in-out;
  background-color: transparent; /* Fundo transparente padrão */
  border: 1px solid transparent; /* Borda transparente padrão */
}

.gq-page-link:hover:not(.disabled) {
  color: #009EF7; /* Cor do texto no hover */
  background-color: #F3F6F9; /* Fundo no hover */
}

.gq-page-item.active .gq-page-link {
  color: #FFFFFF; /* Cor do texto da página ativa */
  background-color: #009EF7; /* Fundo da página ativa (cor primária) */
  border-color: #009EF7; /* Borda da página ativa */
}

.gq-page-item.disabled .gq-page-link {
  color: #A1A5B7; /* Cor do texto desabilitado */
  pointer-events: none; /* Desabilita cliques */
  opacity: 0.6; /* Opacidade para indicar desabilitado */
}

/* Estilo para o seletor de itens por página */
.gq-form-select-sm {
  height: calc(1.8rem + 2px); /* Altura menor para o select */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR RESPONSIVA (mobile)
══════════════════════════════════════════════════════════════════════════════ */

.gq-sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    1039;
  backdrop-filter: blur(2px);
}

@media (max-width: 1399.98px) {
  .gq-sidebar {
    transform: translateX(-100%);
  }

  .gq-sidebar.open {
    transform: translateX(0);
  }

  .gq-sidebar-overlay.open {
    display: block;
  }

  .gq-topbar {
    left: 0;
  }

  .gq-main {
    margin-left: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS
══════════════════════════════════════════════════════════════════════════════ */

.gq-divider {
  height:     1px;
  background: var(--gq-border);
  margin:     1rem 0;
}

.gq-text-primary { color: var(--gq-primary)   !important; }
.gq-text-success { color: var(--gq-success)   !important; }
.gq-text-warning { color: var(--gq-warning)   !important; }
.gq-text-danger  { color: var(--gq-danger)    !important; }
.gq-text-muted   { color: var(--gq-text-muted)!important; }

.gq-fw-500 { font-weight: 500 !important; }
.gq-fw-600 { font-weight: 600 !important; }
.gq-fw-700 { font-weight: 700 !important; }

/* Scroll customizado global */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Estilos para o Typeahead/Sugestões */
.gq-typeahead-container {
  position: relative;
}

.gq-typeahead-suggestions {
  position: absolute;
  z-index: 1000; /* Garante que fique acima de outros elementos */
  background-color: var(--gq-surface);
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-border-radius);
  box-shadow: var(--gq-shadow-sm);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gq-typeahead-suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--gq-text);
}

.gq-typeahead-suggestions li:hover,
.gq-typeahead-suggestions li.active {
  background-color: var(--gq-primary-light);
  color: var(--gq-primary);
}

.ms-30 {
  margin-left: 9rem !important;
}