/**
 * DJEP Booking + Contract Builder - Styles
 * toolsfordjs.com -- dark + cyan DJEP suite chrome
 */

:root {
    --djc-bg: #000000;
    --djc-bg-card: #141414;
    --djc-bg-card-alt: #1a1a1a;
    --djc-border: #2a2a2a;
    --djc-accent: #00d4ff;
    --djc-accent-hover: #33ddff;
    --djc-text: #eaeaea;
    --djc-text-muted: #999;
    --djc-text-dim: #777;
    --djc-danger: #ff6b6b;
    --djc-ok: #4ade80;
}

* { box-sizing: border-box; }

body { background: var(--djc-bg); color: var(--djc-text); font-family: 'Inter', -apple-system, sans-serif; line-height: 1.6; }

.djc-main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 80px; }

.djc-head { margin-bottom: 8px; }
.djc-head h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; margin-bottom: 8px; color: #fff; }
.djc-head p { color: var(--djc-text-muted); max-width: 680px; margin: 0; }

.djc-disclaimer-banner {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(0,212,255,0.07); border: 1px solid rgba(0,212,255,0.25);
    border-radius: 10px; padding: 14px 16px; margin: 20px 0 32px; font-size: 0.85rem; color: #bcebf5;
}
.djc-disclaimer-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--djc-accent); }

.djc-restore-bar {
    display: none; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.3);
    border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; font-size: 0.85rem; color: #d3f5df;
}
.djc-restore-actions { display: flex; gap: 10px; align-items: center; }
.djc-restore-btn {
    background: var(--djc-ok); border: 0; color: #032210; border-radius: 8px; padding: 8px 14px;
    font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.82rem;
}
.djc-restore-btn:hover { filter: brightness(1.1); }
.djc-restore-dismiss {
    background: transparent; border: 0; color: #d3f5df; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.djc-restore-dismiss:hover { color: #fff; }

.djc-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: start; }

.djc-form-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.djc-card {
    background: var(--djc-bg-card); border: 1px solid var(--djc-border); border-radius: 14px; padding: 22px; min-width: 0;
}
.djc-card h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; margin-bottom: 4px; color: #fff;
    display: flex; align-items: center; gap: 8px;
}
.djc-card h2 .djc-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--djc-accent); color: #001318; font-size: 0.75rem; font-weight: 700; }
.djc-card-sub { color: var(--djc-text-dim); font-size: 0.85rem; margin-bottom: 16px; }

.djc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.djc-field { margin-bottom: 12px; min-width: 0; }
.djc-field label { display: block; font-size: 0.78rem; color: var(--djc-text-muted); margin-bottom: 5px; }

.djc-input, .djc-select, textarea.djc-input {
    width: 100%; background: #000; border: 1px solid rgba(255,255,255,0.14); color: #fff;
    border-radius: 8px; padding: 11px 12px; font-family: inherit; font-size: 0.95rem; min-width: 0;
}
.djc-input:focus, .djc-select:focus, textarea.djc-input:focus { outline: none; border-color: var(--djc-accent); }
textarea.djc-input { resize: vertical; min-height: 70px; }

.djc-sub-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--djc-text-dim); font-weight: 600; margin: 16px 0 8px; }

.djc-check { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: #ddd; padding: 6px 0; cursor: pointer; }
.djc-check input { width: 17px; height: 17px; accent-color: var(--djc-accent); cursor: pointer; flex-shrink: 0; }

.djc-addon-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; margin-bottom: 4px; }
.djc-addon-price { text-align: right; }

.djc-btn {
    background: var(--djc-accent); border: 0; color: #001318; border-radius: 9px; padding: 12px 18px;
    font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.9rem;
}
.djc-btn:hover { background: var(--djc-accent-hover); }
.djc-btn.djc-btn-sec { background: #1e1e1e; border: 1px solid rgba(255,255,255,0.14); color: #eee; }
.djc-btn.djc-btn-sec:hover { border-color: var(--djc-accent); color: var(--djc-accent); }
.djc-btn-icon { background: transparent; color: var(--djc-danger); font-size: 1.2rem; padding: 4px 10px; }
.djc-btn-icon:hover { background: rgba(255,107,107,0.1); }

.djc-inline-add { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; margin-top: 10px; }

.djc-timeline-row { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: center; margin-bottom: 6px; }

.djc-clause-card { border: 1px solid var(--djc-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255,255,255,0.02); }
.djc-clause-toggle span { font-weight: 600; color: #fff; }
.djc-clause-help { font-size: 0.78rem; color: var(--djc-text-dim); margin: 4px 0 0 26px; }

.djc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.djc-row-actions { display: flex; gap: 2px; justify-self: end; }
.djc-move-btn {
    background: transparent; border: 0; color: var(--djc-text-muted); font-size: 0.85rem;
    padding: 4px 7px; cursor: pointer; line-height: 1; font-family: inherit;
}
.djc-move-btn:hover:not(:disabled) { color: var(--djc-accent); }
.djc-move-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* Output / preview column */
.djc-preview-col { position: sticky; top: 24px; min-width: 0; }
.djc-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.djc-preview-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; color: #fff; }
.djc-preview-total { font-size: 0.85rem; color: var(--djc-accent); font-weight: 600; }
.djc-history-controls { display: flex; gap: 6px; }
.djc-hist-btn { border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; font-size: 0.78rem; padding: 6px 10px; }
.djc-preview-hint { font-size: 0.78rem; color: var(--djc-text-dim); margin: 0 0 12px; }

.djc-doc {
    background: #fdfcf8; color: #1a1a1a; border-radius: 12px; padding: 28px;
    max-height: 70vh; overflow-y: auto; font-size: 0.92rem;
}
.djc-doc h4 { border-bottom: 1px solid #ccc; padding-bottom: 4px; margin: 20px 0 8px; font-family: 'Space Grotesk', sans-serif; }
.djc-doc h5 { margin: 12px 0 2px; font-size: 0.95rem; }
.djc-doc-title { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 16px; font-family: 'Space Grotesk', sans-serif; }
.djc-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 0.82rem; margin-bottom: 14px; }
.djc-doc-list { margin: 6px 0 6px 18px; }
.djc-doc-price { float: right; color: #555; }
.djc-doc-total { text-align: right; font-weight: 700; margin-top: 6px; }
.djc-doc-time { font-family: 'Space Grotesk', monospace; color: #555; margin-right: 8px; }
.djc-doc-intro { font-size: 0.9rem; color: #333; margin: 0 0 16px; }
.djc-clause p { font-size: 0.85rem; color: #333; margin: 2px 0 0; }
[contenteditable] { outline: none; }
.djc-editable { cursor: text; border-radius: 4px; outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color .15s, background-color .15s; }
.djc-editable:hover { outline-color: rgba(0,150,180,0.45); background: rgba(0,180,210,0.06); }
.djc-editable:focus { outline: 2px solid var(--djc-accent); background: rgba(0,212,255,0.06); }
.djc-sig-block { margin-top: 32px; }
.djc-sig-line { margin: 22px 0; border-bottom: 1px solid #999; padding-bottom: 4px; font-size: 0.85rem; }
.djc-disclaimer { margin-top: 24px; font-size: 0.72rem; color: #888; font-style: italic; border-top: 1px solid #ddd; padding-top: 10px; }

.djc-signoff-cta {
    margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: rgba(0,212,255,0.07);
    border: 1px solid rgba(0,212,255,0.25); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.djc-signoff-cta a { color: var(--djc-accent); font-weight: 600; text-decoration: none; }
.djc-signoff-cta a:hover { text-decoration: underline; }

.djc-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1a1a1a; border: 1px solid var(--djc-accent); color: #fff; padding: 10px 18px; border-radius: 8px;
    font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 2000;
}
.djc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.djc-toast.err { border-color: var(--djc-danger); }

@media (max-width: 980px) {
    .djc-layout { grid-template-columns: 1fr; }
    .djc-preview-col { position: static; }
    .djc-doc { max-height: none; }
}
@media (max-width: 560px) {
    .djc-main { padding: 24px 16px 56px; }
    .djc-head h1 { font-size: 1.6rem; }
    .djc-card { padding: 16px; }
    .djc-field-row { grid-template-columns: 1fr; }
    .djc-addon-row { grid-template-columns: 1fr 70px auto; }
    .djc-inline-add { grid-template-columns: 1fr; }
    .djc-timeline-row { grid-template-columns: 1fr 110px auto; }
    .djc-doc-grid { grid-template-columns: 1fr 1fr; }
    .djc-actions { flex-direction: column; }
    .djc-actions .djc-btn { width: 100%; }
}

@media print {
    /* body-qualified: global-chrome.css sets .tfdjgh/.tfdjgf to display:block !important
       unconditionally and loads after this stylesheet, so a bare-class rule here would
       lose the same-specificity tie-break. The extra ancestor selector wins outright. */
    body .tfdjgh, body .tfdjgf, .djc-form-col, .djc-head, .djc-disclaimer-banner, .djc-restore-bar, .djc-preview-head, .djc-preview-hint, .djc-actions, .djc-toast, .djc-signoff-cta { display: none !important; }
    .djc-main { padding: 0; max-width: 100%; }
    .djc-layout { display: block; }
    .djc-doc { max-height: none; overflow: visible; background: #fff; color: #000; border-radius: 0; padding: 0; }
}