/* ============================================
   CSS VARIABLES & TYPOGRAPHY SCALE
   ============================================ */

:root {
  /* Semantic Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --color-primary: #028bca;
  --color-secondary: #ff9800d9;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing Rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ============================================
   RESPONSIVE TABLE STYLES
   ============================================ */

/* Compact table cells for 1366x768 optimization */
.sgk-td--compact {
  height: 36px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
.sgk-th--compact {
  padding: 6px 10px !important;
  font-size: 10.5px !important;
}

@media (min-width: 1280px) and (max-width: 1400px) {
  body {
    font-size: 13px;
  }

  .sgk-filter-bar {
    padding: 8px 12px;
    gap: 6px;
  }

  .sgk-table-wrap {
    margin-bottom: 10px;
  }

  .sgk-td--compact {
    height: 34px !important;
    padding: 0 10px !important;
  }

  .sgk-th--compact {
    padding: 5px 10px !important;
  }

  .container {
    max-width: 1340px;
  }
}

@media (max-width: 768px) {
    .sgk-table-wrap {
        border-radius: 8px;
        overflow-x: auto;
    }

    .sgk-thead {
        display: none;
    }

    .sgk-tr {
        display: block;
        border-bottom: 1px solid #dde2ec;
        padding: 12px 0;
    }

    .sgk-tr:hover .sgk-td {
        background: transparent;
    }

    .sgk-td {
        display: block;
        height: auto !important;
        padding: 8px 12px !important;
        text-align: left;
    }

    .sgk-td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: #8c96ab;
        margin-bottom: 4px;
    }

    .sgk-td--id { width: auto; }
    .sgk-td--actions {
        width: auto;
        display: flex;
        gap: 8px;
        padding-top: 12px !important;
    }

    .sgk-act-btn {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   MODAL RESPONSIVE STYLES
   ============================================ */

@media (max-width: 640px) {
    .modal-container {
        max-width: 95vw;
        margin: 1rem;
    }
}

/* ============================================
   BADGE VARIANTS (using semantic colors)
   ============================================ */

.sgk-badge--success {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.sgk-badge--warning {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.sgk-badge--error {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.sgk-badge--info {
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

header {
    background: rgba(227, 246, 243, 0.8) !important;
}

/* ============================================
   SGK – TABLE & FILTER REDESIGN v2
   ============================================ */

.sgk-filter-bar {
  background: #fff;
  border: 1px solid #dde2ec;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sgk-filter-form {
  display: contents;
}
.sgk-filter-group { display: flex; align-items: center; gap: 7px; }
.sgk-filter-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: #8c96ab; white-space: nowrap;
}
/* Target filter form elements directly - no need to add classes to macros */
.sgk-filter-bar .form-control,
.sgk-filter-bar select,
.sgk-filter-bar input[type="text"],
.sgk-filter-bar input[type="search"] {
  font-size: 13px !important;
  height: 34px !important;
  padding: 0 10px !important;
  background: #f7f9fc !important;
  border: 1px solid #dde2ec !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.sgk-filter-bar select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
.sgk-filter-bar select:focus,
.sgk-filter-bar input[type="text"]:focus,
.sgk-filter-bar input[type="search"]:focus {
  border-color: #1a6ebd !important;
  outline: none !important;
}
.sgk-filter-sep { width: 1px; height: 22px; background: #dde2ec; flex-shrink: 0; }
.sgk-filter-spacer { flex: 1; min-width: 12px; }
.sgk-btn-apply {
  font-size: 12.5px; font-weight: 600;
  height: 34px; padding: 0 16px;
  border-radius: 6px; border: none; cursor: pointer;
  background: #ff9800d9; color: #fff;
  transition: all .15s;
}
.sgk-btn-apply:hover { background: #f57c00; }
.sgk-btn-clear {
  font-size: 12.5px; font-weight: 600;
  height: 34px; padding: 0 16px;
  border-radius: 6px; cursor: pointer;
  background: #028BCA !important; color: #fff !important;
  border: 1px solid #028BCA !important;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sgk-btn-clear:hover { background: #0273A8 !important; border-color: #0273A8 !important; }

/* Active filter chips */
.sgk-active-chips {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sgk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  background: #e8f3fb; color: #1a6ebd;
  border: 1px solid rgba(26,110,189,.2);
  padding: 4px 10px; border-radius: 100px;
}
.sgk-chip-remove { cursor: pointer; opacity: .6; transition: opacity .15s; }
.sgk-chip-remove:hover { opacity: 1; }

/* Type pills */
.sgk-type-pills { display: flex; gap: 4px; }
.sgk-pill {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 100px;
  border: 1px solid #dde2ec;
  background: #ffffff; color: #4f5a70;
  cursor: pointer; transition: all .15s;
}
.sgk-pill--all.active-all  { background: #0d1b2a; border-color: #0d1b2a; color: #fff; }
.sgk-pill--ssh.active-ssh  { background: #e8f3fb; border-color: rgba(26,110,189,.3); color: #1a6ebd; }
.sgk-pill--oracle.active-api { background: #fef3e8; border-color: rgba(240,125,36,.3); color: #b85c10; }

/* Table wrapper */
.sgk-table-wrap {
  background: #fff;
  border: 1px solid #dde2ec;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sgk-table { width: 100%; border-collapse: collapse; }
.sgk-thead { background: #f7f9fc; border-bottom: 1px solid #dde2ec; }
.sgk-th {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #8c96ab !important; padding: 8px 12px !important;
  text-align: left; white-space: nowrap;
  background: #f7f9fc !important;
  border-bottom: 1px solid #dde2ec !important;
}
.sgk-tr { transition: background .1s; }
.sgk-tr:hover .sgk-td { background: #fafbfd; }
.sgk-tr:not(:last-child) .sgk-td { border-bottom: 1px solid #f0f2f6 !important; }
/* Zebra striping for better scanability */
.sgk-tr:nth-child(even) .sgk-td { background: #fafffe; }
.sgk-tr:nth-child(even):hover .sgk-td { background: #f0f4f8; }
.sgk-td {
  height: 36px; padding: 0 12px !important;
  font-size: 13px; vertical-align: middle !important;
  border-top: none !important;
  background: transparent;
}
.sgk-td--id   { font-size: 12px; font-weight: 700; color: #c4cad8; width: 48px; }
.sgk-td--name { font-weight: 500; color: #1e2535; }
.sgk-td--conn { font-family: 'Courier New', monospace; font-size: 12px; color: #4f5a70; }
.sgk-td--actions { width: 80px; }

/* Client chip */
.sgk-client-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  background: #eef1f6; color: #4f5a70;
  padding: 3px 9px; border-radius: 4px;
}

/* Type badges */
.sgk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
}
.sgk-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sgk-badge--ssh    { background: #e8f3fb; color: #1a6ebd; border: 1px solid rgba(26,110,189,.15); }
.sgk-badge--oracle { background: #fef3e8; color: #b85c10; border: 1px solid rgba(240,125,36,.15); }
.sgk-badge--default { background: #eef1f6; color: #4f5a70; border: 1px solid #dde2ec; }

/* Action buttons */
.sgk-actions-cell {
  display: flex; align-items: center;
  gap: 6px; justify-content: center;
}
.sgk-act-btn {
  width: 30px; height: 30px;
  border: 1px solid #dde2ec !important;
  border-radius: 6px;
  background: #fff !important;
  color: #8c96ab !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: all .15s;
  padding: 0;
}
.sgk-act-btn--edit {
  color: #1a6ebd !important;
}
.sgk-act-btn--delete {
  color: #c0392b !important;
}
.sgk-act-btn--play {
  color: #27ae60 !important;
}
.sgk-act-btn--schedule {
  color: #b85c10 !important;
}
.sgk-act-btn--edit:hover  {
  background: #e8f3fb !important;
  border-color: rgba(26,110,189,.3) !important;
  color: #1a6ebd !important;
}
.sgk-act-btn--delete:hover {
  background: #fdf0ef !important;
  border-color: rgba(192,57,43,.3) !important;
  color: #c0392b !important;
}
.sgk-act-btn--play:hover {
  background: #e8faf4 !important;
  border-color: rgba(39,174,96,.3) !important;
  color: #27ae60 !important;
}
.sgk-act-btn--schedule:hover {
  background: #fef3e8 !important;
  border-color: rgba(240,125,36,.3) !important;
  color: #b85c10 !important;
}

/* ============================================
   SGK – FORM FIELDS (centralized form styles)
   ============================================ */

.sgk-form-field {
  font-size: 13.5px !important;
  height: auto !important;
  padding: 0 14px !important;
  background: #f7f9fc !important;
  border: 1px solid #dde2ec !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #1e2535 !important;
}
.sgk-form-field:focus {
  border-color: #1a6ebd !important;
  outline: none !important;
}
.sgk-form-field::placeholder {
  color: #8c96ab !important;
}
.sgk-form-field--lg {
  padding: 0 16px !important;
}
.sgk-form-field--sm {
  font-size: 12.5px !important;
  padding: 0 10px !important;
}
select.sgk-form-field {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
textarea.sgk-form-field {
  padding: 10px 14px !important;
  resize: vertical;
  min-height: 60px;
}
.sgk-form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8c96ab !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Target form fields used in Add/Edit pages (inside form, but NOT in filter bar) */
form:not(.sgk-filter-form) input[type="text"],
form:not(.sgk-filter-form) input[type="number"],
form:not(.sgk-filter-form) input[type="email"],
form:not(.sgk-filter-form) input[type="password"],
form:not(.sgk-filter-form) input[type="search"],
form:not(.sgk-filter-form) select,
form:not(.sgk-filter-form) textarea {
  font-size: 13.5px !important;
  padding: 0 14px !important;
  background: #f7f9fc !important;
  border: 1px solid #dde2ec !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #1e2535 !important;
  height: 38px !important;
}

form:not(.sgk-filter-form) select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
form:not(.sgk-filter-form) input[type="text"]:focus,
form:not(.sgk-filter-form) input[type="number"]:focus,
form:not(.sgk-filter-form) input[type="email"]:focus,
form:not(.sgk-filter-form) input[type="password"]:focus,
form:not(.sgk-filter-form) input[type="search"]:focus,
form:not(.sgk-filter-form) select:focus,
form:not(.sgk-filter-form) textarea:focus {
  border-color: #1a6ebd !important;
  outline: none !important;
}
form:not(.sgk-filter-form) input::placeholder,
form:not(.sgk-filter-form) textarea::placeholder {
  color: #8c96ab !important;
}
form:not(.sgk-filter-form) textarea {
  padding: 10px 14px !important;
  resize: vertical;
  min-height: 60px;
  height: auto !important;
}
form:not(.sgk-filter-form) label:not(.flex) {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8c96ab !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Command textarea */
#command {
  min-height: 120px !important;
}

/* Debug - force show all options */
.sgk-filter-bar select option,
.sgk-form-field option {
  display: block !important;
  padding: 8px !important;
}


/* ─── Accesibilidad (P-17) ────────────────────────────────────────────── */

/* Focus visible: contorno claro al navegar con teclado */
*:focus-visible {
    outline: 2px solid var(--primary, #028bca);
    outline-offset: 2px;
    border-radius: 2px;
}

/* sr-only: oculto visualmente, visible para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* focus:not-sr-only para skip-link */
.focus\:not-sr-only:focus {
    position: fixed;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}