:root {
  /* Color Palette from client/src/index.css */
  --background-color: #F5F5F5;
  --primary-text-color: #222222;
  --secondary-text-color: #888888;
  --accent-color: #FF7F50;
  --white-color: #FFFFFF;
  --border-color: #222222;

  /* Additional colors for dashboard elements if needed, can use Tailwind palette as inspiration */
  --dashboard-sidebar-bg: #1e293b; /* Example: slate-800 */
  --dashboard-sidebar-text: #f1f5f9; /* Example: slate-100 */
  --dashboard-sidebar-hover-bg: #334155; /* Example: slate-700 */
  --dashboard-header-bg: var(--white-color);
  --dashboard-content-bg: var(--background-color);
  --dashboard-active-link-bg: var(--accent-color); 
  --dashboard-active-link-text: var(--white-color);

  /* Typography from client/src/index.css */
  --font-primary: 'Inter', 'Neue Haas Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-monospace: 'JetBrains Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Spacing from client/src/index.css */
  --space-unit: 8px;
  --space-xs: var(--space-unit);    /* 8px */
  --space-sm: calc(var(--space-unit) * 2); /* 16px */
  --space-md: calc(var(--space-unit) * 3); /* 24px */
  --space-lg: calc(var(--space-unit) * 4); /* 32px */
  --space-xl: calc(var(--space-unit) * 6); /* 48px */

  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0; /* Add margin reset here as it was missing from original snippet */
  padding: 0; /* Add padding reset here */
}

body {
  margin: 0;
  font-family: var(--font-primary);
  background-color: var(--dashboard-content-bg); /* Use dashboard specific bg */
  color: var(--primary-text-color);
  min-height: 100vh;
}

/* Typography Scale from client/src/index.css */
h1, .h1 {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  color: var(--primary-text-color);
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h2, .h2 {
  font-size: 32px; /* Original h2 size */
  line-height: 40px;
  font-weight: 700;
  color: var(--primary-text-color);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

/* For dashboard section titles, maybe slightly smaller */
.dashboard-section-title {
    font-size: 24px; /* Example: between h2 and h3 */
    line-height: 32px;
    font-weight: 600; /* Semi-bold */
    color: var(--primary-text-color);
    margin-bottom: var(--space-md);
}

p, body {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--primary-text-color);
}

small,
.caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--secondary-text-color);
}

/* Links */
a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* Basic Form Input Styling from client/src/index.css */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: var(--font-primary);
  font-size: 16px;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  background-color: var(--white-color);
  color: var(--primary-text-color);
  border-radius: 2px;
  transition: border-color 100ms ease-in-out;
  width: 100%; /* Make form elements take full width by default */
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
  color: var(--secondary-text-color);
  opacity: 1;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color); 
}

/* Basic Button Styling from client/src/index.css */
button,
.btn {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out, border-color 100ms ease-in-out;
  text-align: center;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--white-color);
  border-color: var(--accent-color);
}

.btn-primary:hover {
  background-color: var(--white-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: var(--white-color);
}

.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Utility class for monospace text */
.monospace {
  font-family: var(--font-monospace);
}

/* Dashboard Layout Specific Styles */
.dashboard-body {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Prevent scrollbars on body due to flex */
}

.dashboard-sidebar {
    width: 256px; /* approx w-64 */
    background-color: var(--dashboard-sidebar-bg);
    color: var(--dashboard-sidebar-text);
    padding: var(--space-lg); /* 32px */
    display: flex;
    flex-direction: column;
    gap: var(--space-md); /* space-y-4 equivalent */
    flex-shrink: 0;
    font-family: var(--font-primary); /* Ensure primary font is applied here */
}

.sidebar-header {
    text-align: center;
    padding-bottom: var(--space-md); /* py-4 equivalent for bottom */
    padding-top: var(--space-md);   /* py-4 equivalent for top */
}
.sidebar-header img {
    height: 40px; /* h-10 */
    margin-left: auto;
    margin-right: auto;
}
.sidebar-header .sidebar-title {
    font-size: 20px; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-top: var(--space-sm); /* mt-2 */
    color: var(--dashboard-sidebar-text); /* Make title color same as other sidebar text */
}

.sidebar-nav {
    flex-grow: 1;
}

.sidebar-link {
    display: block;
    padding: var(--space-sm) var(--space-md); /* py-2.5 px-4 */
    border-radius: 4px; /* rounded */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    color: var(--dashboard-sidebar-text); /* Ensure default text color */
}

.sidebar-link:hover {
    background-color: var(--dashboard-sidebar-hover-bg);
    color: var(--white-color);
    text-decoration: none;
}

.sidebar-link.active {
    background-color: var(--dashboard-active-link-bg);
    color: var(--dashboard-active-link-text);
}

.sidebar-footer {
    margin-top: auto; /* Pushes to the bottom */
}

.sidebar-footer .btn-logout {
    width: 100%;
    background-color: #dc2626; /* red-600 */
    color: var(--white-color);
    font-weight: 600; /* font-semibold */
    padding-top: var(--space-xs); /* py-2 */
    padding-bottom: var(--space-xs);
    border-radius: 4px; /* rounded-md */
    font-size: 14px; /* text-sm */
}
.sidebar-footer .btn-logout:hover {
    background-color: #b91c1c; /* red-700 */
}

.dashboard-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Handles internal scrolling */
}

.dashboard-header {
    background-color: var(--dashboard-header-bg);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    padding: var(--space-md) var(--space-lg); /* px-6 py-4 approx */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    font-size: 24px; /* text-2xl */
    font-weight: 600; /* font-semibold */
    color: #334155; /* slate-700 */
}

.header-user-info {
    display: flex;
    align-items: center;
}

.user-greeting {
    color: #475569; /* slate-700 (adjusted for var) */
    margin-right: var(--space-md);
}

.header-logout-btn {
    background-color: #ef4444; /* red-500 */
    color: var(--white-color);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm); /* py-2 px-3 */
    border-radius: 4px; /* rounded-md */
    font-size: 12px; /* text-xs */
}
.header-logout-btn:hover {
    background-color: #dc2626; /* red-600 */
}

.dashboard-content-area {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--dashboard-content-bg);
    padding: var(--space-lg);
}

.dashboard-section {
    display: none; /* Hidden by default */
}

.dashboard-section.active {
    display: block; /* Shown when active */
}

/* Placeholder card style (can be refined) */
.placeholder-card {
    border: 4px dashed #e5e7eb; /* gray-300 */
    border-radius: 8px; /* rounded-lg */
    min-height: 24rem; /* h-96 */
    padding: var(--space-md);
    text-align: center;
    color: #9ca3af; /* gray-400 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Settings Page Specific Styles */
.settings-card {
    background-color: var(--white-color);
    padding: var(--space-lg);
    border-radius: 6px; /* Corresponds to rounded-lg approx */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md equivalent */
    margin-bottom: var(--space-xl); /* mb-8 */
}

.settings-card h3 {
    font-size: 18px; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: var(--primary-text-color);
    margin-bottom: var(--space-md); /* mb-4 */
    padding-bottom: var(--space-sm); /* pb-2 */
    border-bottom: 1px solid var(--border-color); 
}

/* Utility classes to replace Tailwind where needed, or rely on element styling */
.space-y-4 > * + * {
    margin-top: var(--space-md); /* 16px, Tailwind's space-y-4 is 1rem (16px) */
}

.pt-2 {
    padding-top: var(--space-xs); /* 8px */
}

.mt-1 {
    margin-top: calc(var(--space-unit) / 2); /* 4px, Tailwind's mt-1 is 0.25rem (4px) */
}

.mt-3 {
    margin-top: calc(var(--space-unit) * 1.5); /* 12px, Tailwind's mt-3 is 0.75rem (12px) */
}

.mb-4 {
    margin-bottom: var(--space-md); /* 16px */
}

.text-sm {
    font-size: 14px;
}

/* Disabled input style */
input:disabled,
input[readonly] {
    background-color: #e9ecef; /* A common disabled/readonly background color, similar to bg-gray-100/200 */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Text color utilities for messages */
.text-green-500 {
    color: #22c55e; /* Tailwind green-500 */
}

.text-red-500 {
    color: #ef4444; /* Tailwind red-500 */
}

.text-secondary-text-color {
    color: var(--secondary-text-color);
}

/* Token Management Specific Styles */
.form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 0.5rem; /* For spacing if label is next to it, though current HTML has label wrapping */
}

.form-checkbox:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-checkbox:checked::after {
    content: '\2713'; /* Checkmark character */
    font-size: 1rem;
    color: var(--white-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color); /* focus:ring-accent-color */
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(30, 41, 59, 0.5); /* slate-800 with 50% opacity */
    overflow-y: auto; /* For modals that might be taller than viewport */
    display: flex; /* Using flex to center */
    align-items: center;
    justify-content: center;
    z-index: 50; /* Ensure it's on top */
}

.modal-content {
    position: relative;
    padding: var(--space-lg); /* p-8 */
    background-color: var(--white-color);
    width: 100%;
    max-width: 32rem; /* max-w-md, approx 512px */
    margin: auto; /* For flex centering */
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
}

/* Additional table styling if needed */
#api-tokens-table thead th {
    background-color: #f9fafb; /* bg-gray-50 */
    padding-left: var(--space-md); /* px-6 */
    padding-right: var(--space-md);
    padding-top: var(--space-sm); /* py-3 */
    padding-bottom: var(--space-sm);
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
}

#api-tokens-table tbody td {
    padding-left: var(--space-md); /* px-6 */
    padding-right: var(--space-md);
    padding-top: var(--space-sm); /* py-4 */
    padding-bottom: var(--space-sm);
    font-size: 0.875rem; /* text-sm */
    color: var(--primary-text-color);
    white-space: nowrap; /* To prevent ugly wrapping for short content */
}

#api-tokens-table tbody tr:nth-child(even) {
    /* background-color: #f9fafb; */ /* Optional: for zebra stripes */
}

#api-tokens-table .btn-revoke {
    color: #ef4444; /* red-500 */
    font-weight: 500;
}

#api-tokens-table .btn-revoke:hover {
    color: #dc2626; /* red-600 */
    text-decoration: underline;
}

/* Quota Section Specific Styles */
.quota-stat-card {
    background-color: var(--background-color); /* Or var(--white-color) if you prefer cards to be white */
    padding: var(--space-md);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.quota-stat-title {
    font-size: 0.875rem; /* text-sm */
    color: var(--secondary-text-color);
    margin-bottom: var(--space-xs);
}

.quota-stat-value {
    font-size: 1.5rem; /* text-2xl based on Tailwind defaults */
    font-weight: 600; /* font-semibold */
    color: var(--primary-text-color);
}

.quota-progress-bar-container {
    width: 100%;
    background-color: var(--border-color); /* Light gray background for the track */
    border-radius: 4px;
    height: 16px; /* Adjust height as needed */
    overflow: hidden; /* Ensures the inner bar corners are also rounded */
}

.quota-progress-bar {
    height: 100%;
    width: 0%; /* Will be set by JavaScript */
    background-color: var(--accent-color); /* Accent color for the progress */
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

/* Grid utility - basic, adjust as needed or use more robust grid system if available */
.grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* For medium screens and up, use 3 columns. Define your breakpoint (e.g., 768px) */
@media (min-width: 768px) { 
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gap-6 {
    gap: 1.5rem; /* Corresponds to Tailwind's gap-6 */
}

/* Table styles specific to token management for now, can be generalized */
#api-tokens-table,
#webhooks-table {
    border-collapse: separate; /* Allows border-radius on table cells if needed */
}

/* Webhook-specific styles */
.webhook-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .webhook-events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.webhook-threshold-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .webhook-threshold-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-lg);
    }
}

.webhook-form-description {
    font-size: 12px;
    line-height: 16px;
    color: var(--secondary-text-color);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.webhook-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.webhook-details-content {
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: var(--space-lg);
    width: 100%;
    max-width: 32rem;
    margin: var(--space-md);
    max-height: 90vh;
    overflow-y: auto;
}

.webhook-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.webhook-details-header h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-text-color);
    margin: 0;
}

.webhook-close-button {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: 2px;
    transition: color 100ms ease-in-out;
}

.webhook-close-button:hover {
    color: var(--primary-text-color);
}

.webhook-close-button svg {
    width: 24px;
    height: 24px;
}

.webhook-details-info {
    margin-bottom: var(--space-lg);
}

.webhook-details-info > * + * {
    margin-top: var(--space-sm);
}

.webhook-details-info p {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.webhook-details-info strong {
    font-weight: 600;
    color: var(--primary-text-color);
}

.webhook-thresholds-details {
    margin-top: var(--space-sm);
}

.webhook-thresholds-details p {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.webhook-thresholds-details ul {
    margin: 0;
    padding-left: var(--space-md);
}

.webhook-thresholds-details li {
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-text-color);
}

.webhook-details-actions {
    text-align: right;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

/* Webhook table specific styles */
#webhooks-table thead th {
    background-color: #f9fafb; /* bg-gray-50 */
    padding-left: var(--space-md); /* px-6 */
    padding-right: var(--space-md);
    padding-top: var(--space-sm); /* py-3 */
    padding-bottom: var(--space-sm);
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
}

#webhooks-table tbody td {
    padding-left: var(--space-md); /* px-6 */
    padding-right: var(--space-md);
    padding-top: var(--space-sm); /* py-4 */
    padding-bottom: var(--space-sm);
    font-size: 0.875rem; /* text-sm */
    color: var(--primary-text-color);
    white-space: nowrap; /* To prevent ugly wrapping for short content */
}

#webhooks-table tbody tr:nth-child(even) {
    /* background-color: #f9fafb; */ /* Optional: for zebra stripes */
}

#webhooks-table .btn-delete {
    color: #ef4444; /* red-500 */
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 2px;
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
}

#webhooks-table .btn-delete:hover {
    color: #dc2626; /* red-600 */
    background-color: rgba(239, 68, 68, 0.1);
}

#webhooks-table .btn-details {
    color: var(--accent-color);
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 2px;
    margin-right: var(--space-xs);
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
}

#webhooks-table .btn-details:hover {
    background-color: rgba(255, 127, 80, 0.1);
    text-decoration: underline;
}

/* Additional utility classes for consistent styling */
.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.flex {
    display: flex;
}

.block {
    display: block;
}

.w-full {
    width: 100%;
}

.ml-2 {
    margin-left: var(--space-sm);
}

.mr-2 {
    margin-right: var(--space-sm);
}

.space-x-3 > * + * {
    margin-left: calc(var(--space-unit) * 1.5); /* 12px */
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-xs {
    font-size: 12px;
    line-height: 16px;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.rounded-md {
    border-radius: 6px;
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.min-w-full {
    min-width: 100%;
}

.overflow-x-auto {
    overflow-x: auto;
}

.mb-6 {
    margin-bottom: var(--space-lg);
}

.mb-8 {
    margin-bottom: var(--space-xl);
}

.mt-8 {
    margin-top: var(--space-xl);
}

.text-lg {
    font-size: 18px;
    line-height: 28px;
}

.border-b {
    border-bottom-width: 1px;
}

.pb-2 {
    padding-bottom: var(--space-sm);
}