/* Cron Expression Generator */

.tool-interface { padding: var(--spacing-2xl) 0; }

/* Expression row */
.cron-expr-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}
.cron-expr-wrap { flex: 1; min-width: 260px; }
.cron-expr-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--spacing-sm);
}
.cron-expr-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .1em;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.cron-expr-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* Field builders */
.cron-fields {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}
.cron-field {
    background: var(--color-background-alt);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.cron-field-name {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}
.cron-range {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 11px;
    margin-left: 4px;
}
.cron-field-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cron-tab {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.cron-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.cron-tab:hover:not(.active) { background: var(--color-background); color: var(--color-text); }
.cron-field-controls { min-height: 32px; }
.cron-select {
    padding: 4px 8px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-text);
    cursor: pointer;
    width: 100%;
}
.cron-dash { margin: 0 4px; color: var(--color-text-light); }
.cron-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}
.cron-check-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
}
.cron-check-label input { width: 12px; height: 12px; cursor: pointer; accent-color: var(--color-primary); }

/* Presets */
.cron-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-xl);
}
.cron-presets-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
}
.preset-btn {
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-background-alt);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.preset-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Output */
.cron-output {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.cron-desc-box, .cron-runs-box {
    background: var(--color-background-alt);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}
.cron-output-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--spacing-md);
}
.cron-description {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}
.cron-description.error { color: #dc2626; }
.cron-next-runs { list-style: none; padding: 0; margin: 0; }
.cron-next-runs li {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-size-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.cron-next-runs li:last-child { border-bottom: none; }
.no-runs { color: var(--color-text-light); font-style: italic; font-family: inherit !important; }

/* Info */
.cron-syntax-ref {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--color-background);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    line-height: 1.8;
    white-space: pre;
}
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); }
.info-card { background: var(--color-background-alt); padding: var(--spacing-xl); border-radius: var(--radius-lg); }
.info-card h3 { margin-bottom: var(--spacing-md); color: var(--color-primary); }
.info-card ul { list-style: disc; padding-left: var(--spacing-xl); }
.info-card li { margin-bottom: var(--spacing-sm); color: var(--color-text-light); font-size: var(--font-size-sm); }
.info-card code { font-family: 'JetBrains Mono', monospace; font-size: .875em; background: var(--color-background); padding: 1px 5px; border-radius: 3px; }
.status-message { padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-md); min-height: 36px; }
.status-message.success { background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.3); }
.status-message.error   { background: rgba(239,68,68,.1);  color: #dc2626; border: 1px solid rgba(239,68,68,.25); }
.related-tools { padding: var(--spacing-2xl) 0; }
.related-tools .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }

@media (max-width: 900px) {
    .cron-fields { grid-template-columns: repeat(3, 1fr); }
    .cron-output { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cron-fields { grid-template-columns: 1fr 1fr; }
}