/* ============================================
   App King Shared Theme
   Dark mode, minimal, terminal-meets-dashboard
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: #0d1117;
  color: #e6edf3;
  line-height: 1.6;
  min-height: 100vh;
  padding: 24px;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  color: #e6edf3;
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 1.75rem; margin-bottom: 16px; }
h2 { font-size: 1.375rem; margin-bottom: 12px; }
h3 { font-size: 1.125rem; margin-bottom: 8px; }
h4 { font-size: 1rem; margin-bottom: 8px; }

p {
  color: #c9d1d9;
  margin-bottom: 12px;
}

.text-secondary { color: #8b949e; }
.text-accent { color: #58a6ff; }
.text-success { color: #3fb950; }
.text-warning { color: #d29922; }
.text-error { color: #f85149; }
.text-mono {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 0.875rem;
}

a {
  color: #58a6ff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- Layout --- */
.container {
  max-width: 960px;
  margin: 0 auto;
}

.container-wide {
  max-width: 1200px;
  margin: 0 auto;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.grid {
  display: grid;
  gap: 16px;
}
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* --- Cards --- */
.card {
  background-color: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.card-compact {
  background-color: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.card:hover, .card-compact:hover {
  border-color: #30363d;
}

/* --- Header Bar --- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: #161b22;
  border-bottom: 1px solid #21262d;
  margin: -24px -24px 24px -24px;
}

.app-header h1 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.app-header .subtitle {
  color: #8b949e;
  font-size: 0.875rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background-color: #21262d;
  color: #e6edf3;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover {
  background-color: #30363d;
  border-color: #484f58;
  text-decoration: none;
}

.btn-primary {
  background-color: #238636;
  border-color: #2ea043;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #2ea043;
  border-color: #3fb950;
}

.btn-accent {
  background-color: #1f6feb;
  border-color: #388bfd;
  color: #ffffff;
}
.btn-accent:hover {
  background-color: #388bfd;
  border-color: #58a6ff;
}

.btn-danger {
  background-color: #da3633;
  border-color: #f85149;
  color: #ffffff;
}
.btn-danger:hover {
  background-color: #f85149;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 0.8125rem;
}

/* --- Form Elements --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88,166,255,0.15);
}

input::placeholder, textarea::placeholder {
  color: #484f58;
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  color: #8b949e;
  font-weight: 500;
}

.form-group {
  margin-bottom: 16px;
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid #21262d;
}

th {
  font-weight: 600;
  color: #8b949e;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #161b22;
}

td {
  color: #c9d1d9;
  font-size: 0.875rem;
}

tr:hover td {
  background-color: #161b22;
}

/* --- Badges / Tags --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-ioc {
  background-color: rgba(210,153,34,0.15);
  color: #d29922;
  border: 1px solid rgba(210,153,34,0.3);
}

.badge-foc {
  background-color: rgba(63,185,80,0.15);
  color: #3fb950;
  border: 1px solid rgba(63,185,80,0.3);
}

.badge-category {
  background-color: rgba(88,166,255,0.1);
  color: #58a6ff;
  border: 1px solid rgba(88,166,255,0.2);
}

/* --- Utilities --- */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }

.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.divider {
  border: none;
  border-top: 1px solid #21262d;
  margin: 24px 0;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0d1117;
}
::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  body { padding: 16px; }
  .app-header { padding: 12px 16px; margin: -16px -16px 16px -16px; }
  .card { padding: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}