/* ============================================================
   AXEL CONSTRUTORA — Sistema de Gestão
   Arquivo: assets/css/app.css
   ============================================================ */

/* ============================================================
   VARIÁVEIS DE TEMA
   ============================================================ */
:root {
  --ax-primary:        #1a5276;
  --ax-primary-dark:   #154360;
  --ax-primary-light:  #2980b9;
  --ax-accent:         #e67e22;
  --ax-accent-dark:    #ca6f1e;
  --ax-sidebar-bg:     #0d2137;
  --ax-sidebar-width:  260px;
  --ax-topbar-height:  60px;
  --ax-sidebar-text:   #b2bec3;
  --ax-sidebar-hover:  rgba(255,255,255,.07);
  --ax-sidebar-active: rgba(255,255,255,.13);
  --ax-body-bg:        #f0f3f6;
  --ax-card-shadow:    0 2px 8px rgba(0,0,0,.08);
  --ax-radius:         .5rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background:  var(--ax-body-bg);
  color:       #2c3e50;
  font-size:   .9rem;
  overflow-x:  hidden;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ============================================================
   LAYOUT ADMINISTRATIVO
   ============================================================ */
.ax-wrapper {
  display:   flex;
  min-height: 100vh;
}

/* --------- SIDEBAR --------- */
.ax-sidebar {
  width:      var(--ax-sidebar-width);
  min-height: 100vh;
  background: var(--ax-sidebar-bg);
  position:   fixed;
  top:        0;
  left:       0;
  bottom:     0;
  z-index:    1000;
  display:    flex;
  flex-direction: column;
  transition: width .25s ease, transform .25s ease;
  overflow-x: hidden;
}

.ax-sidebar-brand {
  display:         flex;
  align-items:     center;
  gap:             .75rem;
  padding:         1rem 1.25rem;
  min-height:      var(--ax-topbar-height);
  border-bottom:   1px solid rgba(255,255,255,.07);
  text-decoration: none;
}

.ax-sidebar-brand .brand-logo {
  width:           38px;
  height:          38px;
  border-radius:   8px;
  background:      var(--ax-accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1rem;
  color:           #fff;
  flex-shrink:     0;
}

.ax-sidebar-brand .brand-text {
  color:       #fff;
  font-weight: 600;
  font-size:   .92rem;
  line-height: 1.2;
}

.ax-sidebar-brand .brand-text small {
  display:    block;
  font-size:  .72rem;
  font-weight: 400;
  color:      var(--ax-sidebar-text);
}

.ax-sidebar-nav {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    .5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

.ax-nav-section {
  padding:     .6rem 1.1rem .25rem;
  font-size:   .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:       rgba(255,255,255,.3);
}

.ax-nav-item {
  position: relative;
}

.ax-nav-link {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  padding:     .6rem 1.25rem;
  color:       var(--ax-sidebar-text);
  font-size:   .875rem;
  transition:  background .15s, color .15s;
  cursor:      pointer;
  white-space: nowrap;
}

.ax-nav-link:hover {
  background: var(--ax-sidebar-hover);
  color:      #fff;
}

.ax-nav-link.active {
  background: var(--ax-sidebar-active);
  color:      #fff;
  border-left: 3px solid var(--ax-accent);
}

.ax-nav-link .nav-icon {
  font-size:  1rem;
  flex-shrink: 0;
  width:      1.2rem;
  text-align: center;
}

.ax-nav-link .nav-arrow {
  margin-left: auto;
  font-size:   .75rem;
  transition:  transform .2s;
}

.ax-nav-link[aria-expanded="true"] .nav-arrow {
  transform: rotate(90deg);
}

/* Sub-itens do menu */
.ax-nav-sub {
  background: rgba(0,0,0,.15);
}

.ax-nav-sub .ax-nav-link {
  padding-left: 3rem;
  font-size:    .845rem;
}

.ax-sidebar-footer {
  padding:       .75rem 1rem;
  border-top:    1px solid rgba(255,255,255,.07);
  font-size:     .8rem;
  color:         rgba(255,255,255,.3);
  text-align:    center;
}

/* --------- TOPBAR --------- */
.ax-topbar {
  height:      var(--ax-topbar-height);
  background:  #fff;
  border-bottom: 1px solid #e8ecef;
  display:     flex;
  align-items: center;
  padding:     0 1.5rem;
  gap:         1rem;
  position:    sticky;
  top:         0;
  z-index:     900;
  box-shadow:  0 1px 4px rgba(0,0,0,.05);
}

.ax-topbar .topbar-toggle {
  background: none;
  border:     none;
  font-size:  1.25rem;
  color:      #555;
  cursor:     pointer;
  padding:    .25rem .5rem;
  border-radius: var(--ax-radius);
}

.ax-topbar .topbar-toggle:hover {
  background: var(--ax-body-bg);
}

.ax-topbar .topbar-title {
  font-size:   .95rem;
  font-weight: 500;
  color:       #333;
}

.ax-topbar .topbar-right {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         .75rem;
}

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

/* --------- CONTEÚDO PRINCIPAL --------- */
.ax-main {
  margin-left: var(--ax-sidebar-width);
  flex:        1;
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
  transition:  margin-left .25s ease;
}

.ax-content {
  padding: 1.5rem;
  flex:    1;
}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* Cards */
.ax-card {
  background:    #fff;
  border-radius: var(--ax-radius);
  box-shadow:    var(--ax-card-shadow);
  border:        1px solid #e8ecef;
}

.ax-card-header {
  padding:       1rem 1.25rem;
  border-bottom: 1px solid #e8ecef;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
}

.ax-card-header h5, .ax-card-header h6 {
  margin:      0;
  font-weight: 600;
}

.ax-card-body {
  padding: 1.25rem;
}

/* Page Header */
.ax-page-header {
  display:       flex;
  align-items:   center;
  margin-bottom: 1.25rem;
  gap:           1rem;
}

.ax-page-header h4 {
  margin:      0;
  font-weight: 600;
  font-size:   1.15rem;
  color:       var(--ax-primary-dark);
}

.ax-page-header .actions {
  margin-left: auto;
}

/* Breadcrumb */
.ax-breadcrumb {
  font-size:     .8rem;
  margin-bottom: .5rem;
  color:         #888;
}

.ax-breadcrumb a { color: var(--ax-primary-light); }

/* Stat cards */
.ax-stat-card {
  background:    #fff;
  border-radius: var(--ax-radius);
  padding:       1.25rem;
  box-shadow:    var(--ax-card-shadow);
  display:       flex;
  align-items:   center;
  gap:           1rem;
  border:        1px solid #e8ecef;
  border-left:   4px solid var(--ax-primary);
}

.ax-stat-card .stat-icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--ax-radius);
  background:      rgba(26,82,118,.1);
  color:           var(--ax-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  flex-shrink:     0;
}

.ax-stat-card .stat-value {
  font-size:   1.6rem;
  font-weight: 700;
  line-height: 1;
  color:       var(--ax-primary-dark);
}

.ax-stat-card .stat-label {
  font-size: .8rem;
  color:     #888;
  margin-top: .2rem;
}

/* Tabelas */
.ax-table {
  width:          100%;
  border-collapse: collapse;
  font-size:      .875rem;
}

.ax-table th {
  background:     #f7f9fb;
  padding:        .7rem 1rem;
  font-weight:    600;
  font-size:      .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          #555;
  border-bottom:  2px solid #e8ecef;
  white-space:    nowrap;
}

.ax-table td {
  padding:       .7rem 1rem;
  border-bottom: 1px solid #f0f2f4;
  vertical-align: middle;
}

.ax-table tbody tr:hover {
  background: #f9fafc;
}

.ax-table .actions-col {
  white-space: nowrap;
  width:       1px;
}

/* Badges */
.ax-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  padding:       .2rem .55rem;
  border-radius: 20px;
  font-size:     .73rem;
  font-weight:   600;
}

.ax-badge-success  { background: #d4edda; color: #155724; }
.ax-badge-danger   { background: #f8d7da; color: #721c24; }
.ax-badge-warning  { background: #fff3cd; color: #856404; }
.ax-badge-info     { background: #d1ecf1; color: #0c5460; }
.ax-badge-primary  { background: #cfe2ff; color: #084298; }
.ax-badge-secondary{ background: #e2e3e5; color: #383d41; }

/* Botões customizados */
.btn-ax-primary {
  background: var(--ax-primary);
  color:      #fff;
  border:     none;
}
.btn-ax-primary:hover {
  background: var(--ax-primary-dark);
  color:      #fff;
}

.btn-ax-accent {
  background: var(--ax-accent);
  color:      #fff;
  border:     none;
}
.btn-ax-accent:hover {
  background: var(--ax-accent-dark);
  color:      #fff;
}

/* Formulários */
.ax-form-section {
  border-top:  1px solid #e8ecef;
  padding-top: 1rem;
  margin-top:  1rem;
}

.ax-form-section-title {
  font-size:     .78rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:         #888;
  margin-bottom: .75rem;
}

/* Permissões Matrix */
.perm-table th, .perm-table td {
  text-align:  center;
  white-space: nowrap;
}

.perm-table td:first-child {
  text-align: left;
  white-space: normal;
}

.perm-group-header {
  background:  #f0f3f6 !important;
  font-weight: 600;
  color:       var(--ax-primary-dark);
}

.perm-subgroup-header {
  background: #f8f9fa !important;
  padding-left: 1.5rem !important;
}

.perm-page-row {
  padding-left: 2.5rem !important;
  font-size: .83rem;
  color: #555;
}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.ax-pagination {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  flex-wrap:   wrap;
  font-size:   .85rem;
}

.ax-pagination a,
.ax-pagination span {
  padding:       .35rem .7rem;
  border-radius: var(--ax-radius);
  border:        1px solid #dee2e6;
  color:         var(--ax-primary);
  background:    #fff;
  line-height:   1.5;
}

.ax-pagination a:hover { background: #e9ecef; }
.ax-pagination .current { background: var(--ax-primary); color: #fff; border-color: var(--ax-primary); }
.ax-pagination .disabled { color: #aaa; pointer-events: none; }

/* ============================================================
   LAYOUT AUTH (LOGIN)
   ============================================================ */
.ax-login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ax-sidebar-bg) 0%, var(--ax-primary) 100%);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    1rem;
}

.ax-login-card {
  background:    #fff;
  border-radius: 1rem;
  padding:       2.5rem;
  width:         100%;
  max-width:     420px;
  box-shadow:    0 20px 60px rgba(0,0,0,.3);
}

.ax-login-logo {
  width:           64px;
  height:          64px;
  background:      var(--ax-accent);
  border-radius:   16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.6rem;
  font-weight:     700;
  color:           #fff;
  margin:          0 auto 1.5rem;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 991.98px) {
  .ax-sidebar {
    transform: translateX(calc(-1 * var(--ax-sidebar-width)));
  }
  .ax-sidebar.open {
    transform: translateX(0);
  }
  .ax-main {
    margin-left: 0 !important;
  }
  .ax-sidebar-overlay {
    display:    block;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    z-index:    999;
  }
}

@media (min-width: 992px) {
  .ax-sidebar-overlay { display: none !important; }
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.text-primary-ax { color: var(--ax-primary) !important; }
.bg-sidebar      { background: var(--ax-sidebar-bg) !important; }
.cursor-pointer  { cursor: pointer; }
.font-monospace  { font-family: monospace; }
.gap-2           { gap: .5rem; }

/* Transição suave em elementos interativos */
.btn, .form-control, .form-select, .ax-nav-link {
  transition: all .15s ease;
}