/* ============================================
   Common Tools CSS - Shared across all tools
   ============================================ */

/* Override page width for all tools to allow sidebar ads */
.kubectl-builder-page .page,
.kubectl-builder-page .content,
.kubectl-builder-page main .container,
.kubectl-builder-page article.page,
.kubectl-builder-page .single .content,
.regex-lab-page .page,
.regex-lab-page .content,
.regex-lab-page main .container,
.regex-lab-page article.page,
.regex-lab-page .single .content,
.passgen-page .page,
.passgen-page .content,
.passgen-page main .container,
.passgen-page article.page,
.passgen-page .single .content,
.jwt-tools-page .page,
.jwt-tools-page .content,
.jwt-tools-page main .container,
.jwt-tools-page article.page,
.jwt-tools-page .single .content {
    max-width: 1600px !important;
}

/* Common box-sizing */
.kubectl-builder-page *,
.regex-lab-page *,
.passgen-page *,
.jwt-tools-page * {
    box-sizing: border-box;
}

/* ============================================
   Common Tool Card Styles
   ============================================ */

/* Shared card variables - each tool can override colors */
:root {
    --tool-card-radius: 12px;
    --tool-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --tool-card-padding: 20px;
}

/* Common card class used by all tools */
.regex-lab-card,
.kubectl-builder-card,
.jwt-tools-card,
.tool-card {
    border-radius: var(--tool-card-radius);
    padding: var(--tool-card-padding);
    box-shadow: var(--tool-card-shadow);
    margin-bottom: 20px;
}

/* Regex Lab uses these specific classes */
.regex-lab-card {
    background: var(--regex-card-bg, #f8f9fa);
    border: 1px solid var(--regex-card-border, #e1e4e8);
}

/* kubectl Builder uses these specific classes */
.kubectl-builder-card {
    background: var(--kubectl-card-bg, #f8f9fa);
    border: 1px solid var(--kubectl-card-border, #e1e4e8);
}

/* JWT Tools uses these specific classes */
.jwt-tools-card {
    background: var(--jwt-card-bg-alt, #ffffff);
    border: 1px solid var(--jwt-card-border, #e1e4e8);
}

/* Generic tool card for any new tools */
.tool-card {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
}

/* Common card header styles */
.regex-lab-card-header,
.kubectl-builder-card-header,
.jwt-tools-card-header,
.tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

/* Common card title styles */
.regex-lab-card-title,
.kubectl-builder-card-title,
.jwt-tools-card-title,
.tool-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ============================================
   Common Button Styles (Optional - for future use)
   ============================================ */

/* Base button that tools can extend */
.tool-btn-base {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

/* ============================================
   Common Responsive Breakpoints
   ============================================ */

/* Shared media query helpers - tools can reference these */
/* Mobile: < 640px */
/* Tablet: 640px - 900px */
/* Desktop: > 900px */