/* ============================================================
   PMG Domain Portal — style.css
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:        #f0f2f5;
  --color-surface:   #ffffff;
  --color-border:    #e2e8f0;
  --color-primary:   #2563eb;
  --color-primary-h: #1d4ed8;
  --color-success:   #16a34a;
  --color-warning:   #d97706;
  --color-danger:    #dc2626;
  --color-muted:     #64748b;
  --color-text:      #1e293b;
  --color-header-bg: #1e293b;
  --color-header-fg: #f8fafc;
  --radius:          6px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,.10);
  --font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { font-size: 15px; }
body {
  font-family: var(--font);
  background:  var(--color-bg);
  color:       var(--color-text);
  line-height: 1.6;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
  background: var(--color-header-bg);
  color:      var(--color-header-fg);
  box-shadow: var(--shadow-md);
  position:   sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width:   1200px;
  margin:      0 auto;
  padding:     0 1.25rem;
  height:      60px;
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1rem; white-space:nowrap; color:var(--color-header-fg); }
.brand-icon { width:22px; height:22px; flex-shrink:0; }
.main-nav { display:flex; gap:.25rem; flex:1; }
.main-nav a { color:#94a3b8; padding:.35rem .8rem; border-radius:var(--radius); font-size:.875rem; transition:background .15s,color .15s; }
.main-nav a:hover, .main-nav a.active { color:var(--color-header-fg); background:rgba(255,255,255,.1); text-decoration:none; }
.main-nav a.active { font-weight:600; }
.header-user { display:flex; align-items:center; gap:.75rem; margin-left:auto; flex-shrink:0; }
.domain-badge { background:rgba(37,99,235,.4); color:#bfdbfe; border-radius:99px; padding:.15rem .7rem; font-size:.78rem; font-weight:600; }
.user-name { font-size:.8rem; color:#94a3b8; display:none; }
@media(min-width:700px){ .user-name { display:inline; } }
.logout-form { display:inline; }
.btn-logout { background:transparent; border:1px solid rgba(255,255,255,.25); color:#cbd5e1; padding:.3rem .8rem; border-radius:var(--radius); font-size:.8rem; cursor:pointer; transition:border-color .15s,color .15s; }
.btn-logout:hover { border-color:#fff; color:#fff; }

/* Main / Footer */
.main-content { max-width:1200px; width:100%; margin:0 auto; padding:1.5rem 1.25rem; flex:1; }
.site-footer { background:var(--color-header-bg); color:#64748b; text-align:center; padding:.75rem 1rem; font-size:.78rem; }

/* Page header */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.page-title { font-size:1.5rem; font-weight:700; }
.page-sub { color:var(--color-muted); font-size:.875rem; margin-top:.2rem; }
.page-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem 1rem; border-radius:var(--radius); border:none; font-size:.875rem; font-weight:500; cursor:pointer; text-decoration:none !important; transition:filter .15s; white-space:nowrap; }
.btn:hover { filter:brightness(.9); }
.btn-primary   { background:var(--color-primary); color:#fff; }
.btn-secondary { background:#e2e8f0; color:var(--color-text); }
.btn-success   { background:var(--color-success); color:#fff; }
.btn-danger    { background:var(--color-danger);  color:#fff; }
.btn-block     { width:100%; justify-content:center; }
.btn-sm  { padding:.3rem .7rem;   font-size:.8rem; }
.btn-xs  { padding:.18rem .55rem; font-size:.75rem; }
.btn-group { display:inline-flex; gap:.25rem; flex-wrap:wrap; }
.inline-form { display:inline; }

/* Alerts */
.alert { padding:.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem; font-size:.9rem; border:1px solid transparent; }
.alert-success { background:#f0fdf4; color:var(--color-success); border-color:#bbf7d0; }
.alert-danger  { background:#fef2f2; color:var(--color-danger);  border-color:#fecaca; }
.alert-warning { background:#fffbeb; color:var(--color-warning); border-color:#fde68a; }
.alert-info    { background:#eff6ff; color:var(--color-primary); border-color:#bfdbfe; }

/* Cards */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:.85rem 1.1rem; border-bottom:1px solid var(--color-border); background:#f8fafc; }
.card-header h3 { font-size:.95rem; font-weight:600; }
.card-body { padding:1.1rem; }
.card-body.p-0 { padding:0; }
.mt-4 { margin-top:1.25rem; }
.mb-4 { margin-bottom:1.25rem; }

/* Stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.stat-grid--compact .stat-card { padding:.75rem 1rem; }
.stat-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1rem 1.1rem; display:flex; align-items:center; gap:.85rem; position:relative; border-left:4px solid var(--color-border); }
.stat-card--quarantine { border-left-color:var(--color-warning); }
.stat-card--today      { border-left-color:var(--color-primary); }
.stat-card--blocked    { border-left-color:var(--color-danger); }
.stat-card--clean      { border-left-color:var(--color-success); }
.stat-icon  { font-size:1.75rem; line-height:1; }
.stat-value { font-size:1.6rem; font-weight:700; line-height:1; }
.stat-label { font-size:.78rem; color:var(--color-muted); margin-top:.15rem; }
.stat-link  { position:absolute; bottom:.5rem; right:.75rem; font-size:.75rem; color:var(--color-muted); }

/* Tables */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:.85rem; }
.table th { background:#f8fafc; padding:.6rem .85rem; text-align:left; font-size:.78rem; font-weight:600; color:var(--color-muted); white-space:nowrap; border-bottom:2px solid var(--color-border); }
.table td { padding:.6rem .85rem; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.table-hover tbody tr:hover { background:#f8fafc; }
.table tbody tr:last-child td { border-bottom:none; }
.nowrap    { white-space:nowrap; }
.text-center { text-align:center; }
.text-muted  { color:var(--color-muted); }
.td-email    { max-width:200px; word-break:break-all; }

/* Badges */
.badge { display:inline-block; padding:.15rem .5rem; border-radius:99px; font-size:.72rem; font-weight:600; white-space:nowrap; }
.badge-success { background:#dcfce7; color:var(--color-success); }
.badge-warning { background:#fef3c7; color:var(--color-warning); }
.badge-danger  { background:#fee2e2; color:var(--color-danger); }
.dir-badge { padding:.1rem .45rem; border-radius:3px; font-size:.72rem; font-weight:700; }
.dir-in  { background:#eff6ff; color:var(--color-primary); }
.dir-out { background:#f0fdf4; color:var(--color-success); }

/* Forms */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
.form-control { width:100%; padding:.5rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius); font-size:.9rem; font-family:var(--font); color:var(--color-text); background:var(--color-surface); outline:none; transition:border-color .15s,box-shadow .15s; }
.form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.search-form { display:flex; gap:.5rem; flex-wrap:wrap; }
.search-input { flex:1; min-width:220px; }

/* Filters */
.filter-row { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:flex-end; }
.filter-group label { display:block; font-size:.75rem; font-weight:600; color:var(--color-muted); margin-bottom:.3rem; text-transform:uppercase; letter-spacing:.04em; }
.filter-group--search { flex:1; display:flex; gap:.4rem; flex-wrap:wrap; align-items:flex-end; }
.filter-group--search .form-control { flex:1; min-width:180px; }

/* Auth */
.auth-wrapper { min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.auth-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; box-shadow:var(--shadow-md); padding:2.5rem 2rem; width:100%; max-width:420px; }
.auth-logo { text-align:center; margin-bottom:1rem; }
.auth-logo svg { width:52px; height:52px; color:var(--color-primary); }
.auth-title { text-align:center; font-size:1.35rem; font-weight:700; margin-bottom:.25rem; }
.auth-subtitle { text-align:center; color:var(--color-muted); font-size:.875rem; margin-bottom:1.5rem; }

/* Detail */
.detail-grid { display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; font-size:.875rem; }
.detail-grid dt { font-weight:600; color:var(--color-muted); white-space:nowrap; }
.detail-grid dd { word-break:break-all; }
.action-bar { display:flex; gap:.75rem; flex-wrap:wrap; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:1rem; border-top:1px solid var(--color-border); }
.page-info { font-size:.85rem; color:var(--color-muted); }

/* Empty */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--color-muted); font-size:.95rem; }

/* Responsive */
@media (max-width:600px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .page-header { flex-direction:column; }
}