/* =========================================================
   RPG Character Sheets - Core Styles (Full File)
   Includes:
   - Grid layout
   - Attribute & Skill table baseline
   - Track component (with reset capability support)
   - Matrix layout
   - Inline editing UI (with multiline textarea support)
   - Specialties below attribute table
   - Condition single-box (status conditions) component
   - Accessibility & Print optimizations
   ========================================================= */

/* ============ RESET / BASE (scoped) ============ */
.rpgcs-sheet-view,
.rpgcs-form {
    --rpgcs-border-color:#333;
    --rpgcs-accent-bg:#f5f7f9;
    --rpgcs-header-bg:#e9edf0;
    --rpgcs-line-bg:#fff;
    --rpgcs-font-size:0.75rem;
    font-size: var(--rpgcs-font-size);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
    line-height:1.2;
}
.rpgcs-sheet-view * { box-sizing: border-box; }

/* Group legend */
.rpgcs-group__legend {
    display:block;
    width:100%;
    margin:0 0 .5rem;
    padding:4px 8px 6px;
    font-size:0.9rem;
    line-height:1.1;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    background: var(--rpgcs-header-bg,#e9edf0);
    color:#111;
    border:1px solid #c2c7cc;
    border-left:4px solid #333;
    border-radius:2px;
}
@media (max-width:640px){
    .rpgcs-group__legend {
        font-size:0.8rem;
        padding:4px 6px 5px;
    }
}
@media print {
    .rpgcs-group__legend {
        background:#fff;
        border:0;
        border-bottom:2px solid #000;
        border-left:0;
        padding:2px 0 4px;
    }
}

/* ============ GRID LAYOUT ============ */
.rpgcs-group--grid .rpgcs-grid {
    display:grid;
    grid-template-columns:repeat(var(--rpgcs-grid-cols,12),1fr);
    gap:4px 6px;
    position:relative;
}
.rpgcs-grid-cell {
    position:relative;
    display:flex;
    flex-direction:column;
    grid-column:var(--gc)/span var(--gcs);
    grid-row:var(--gr)/span var(--grs);
}
.rpgcs-grid-cell.grid-style-line {
    border-bottom:1px solid var(--rpgcs-border-color);
    padding-bottom:2px;
}
.rpgcs-grid-cell.grid-style-box {
    border:1px solid var(--rpgcs-border-color);
    padding:4px 4px 2px;
    background:#fff;
}
.rpgcs-grid-cell.grid-style-track {
    border:1px solid #aaa;
    padding:4px;
    background:#fff;
}
.rpgcs-grid-cell.grid-style-section {
    background:var(--rpgcs-header-bg);
    border:1px solid var(--rpgcs-border-color);
    padding:3px 6px;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.rpgcs-grid-cell.grid-style-logo {
    font-weight:800;
    font-size:0.9rem;
    letter-spacing:1px;
    display:flex;
    align-items:flex-end;
}
.rpgcs-grid-cell .rpgcs-field { margin:0; }

/* Labels */
.rpgcs-field__label {
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    display:block;
    line-height:1.1;
    margin-bottom:2px;
}
.rpgcs-field__label--small { font-size:0.55rem; }
.rpgcs-field--compact .rpgcs-field__label { margin-bottom:1px; }
.label-mode-left-inline .rpgcs-field__label {
    display:inline-block;
    margin-right:4px;
}

/* Inputs (form mode) */
.rpgcs-field input[type=text],
.rpgcs-field input[type=number],
.rpgcs-field select,
.rpgcs-field textarea {
    width:100%;
    box-sizing:border-box;
    padding:2px 4px;
    font-size:0.75rem;
    line-height:1.15;
    border:1px solid #b7bcc1;
    background:#fff;
    border-radius:2px;
}
.rpgcs-field textarea {
    min-height:48px;
    resize:vertical;
}

/* (Adjusted selector so inline editor textareas keep their own border) */
.grid-style-line .rpgcs-field > textarea,
.grid-style-line .rpgcs-field > input[type=text] {
    border:none;
    background:transparent;
    padding:0;
    font-size:0.75rem;
}
.grid-style-line .rpgcs-field > input[type=text]:focus,
.grid-style-line .rpgcs-field > textarea:focus {
    outline:none;
    background:#fffef5;
}

/* Checkbox (form mode generic) */
.rpgcs-checkbox-label {
    font-size:0.6rem;
    font-weight:600;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:4px;
    line-height:1;
}
.rpgcs-checkbox-label input {
    width:14px;
    height:14px;
    margin:0;
    border:1px solid #444;
    cursor:pointer;
}

/* ============ CONDITION (Single Box) ============ */
.rpgcs-condition {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.65rem;
    line-height:1;
}
.rpgcs-condition-label {
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    user-select:none;
}
.rpgcs-condition-box {
    width:16px;
    height:16px;
    border:1px solid #333;
    background:#fff;
    cursor:pointer;
    display:inline-block;
    position:relative;
    box-sizing:border-box;
}
.rpgcs-condition-box.filled { background:#222; }
.rpgcs-condition-box:focus {
    outline:2px solid #005fcc;
    outline-offset:1px;
}
.rpgcs-condition.rpgcs-updating { opacity:.6; }
.rpgcs-condition-box,
.rpgcs-condition-label { -webkit-user-select:none; -moz-user-select:none; user-select:none; }

/* ============ DISPLAY VALUE / INLINE EDIT TARGETS ============ */
.rpgcs-field__value {
    display:inline-block;
    min-width:0.9rem;
    min-height:1rem;
    padding:1px 3px;
    line-height:1.1;
    border:1px solid transparent;
    border-radius:2px;
    position:relative;
    font-size:0.75rem;
    vertical-align:top;
    white-space:pre-wrap;
}
.rpgcs-field__value:empty:before {
    content:'—';
    color:#b0b0b0;
    font-weight:400;
}
.rpgcs-field__value[data-editable="1"]:hover,
.rpgcs-field__value[data-editable="1"]:focus {
    border-color:#c7ccd1;
    background:var(--rpgcs-accent-bg);
    cursor:pointer;
}
.rpgcs-field__value[data-editable="1"] { outline:none; }
.rpgcs-field.rpgcs-updating .rpgcs-field__value,
.rpgcs-field.rpgcs-updating .rpgcs-checkbox-display,
.rpgcs-condition.rpgcs-updating { opacity:0.6; }

/* Ensure editor overflow visible inside tables */
.rpgcs-attr-skill-table th,
.rpgcs-attr-skill-table td,
.rpgcs-matrix th,
.rpgcs-matrix td {
    position:relative;
    overflow:visible;
}

/* ============ ATTRIBUTE & SKILL TABLE (baseline structure) ============ */
.rpgcs-attr-skill-table {
    width:100%;
    border-collapse:collapse;
    margin:0 0 1rem;
    table-layout:fixed;
    font-size:0.75rem;
}
.rpgcs-attr-skill-table th,
.rpgcs-attr-skill-table td {
    border:1px solid #c8cfd5;
    padding:2px 4px;
    vertical-align:middle;
}
.rpgcs-attr-skill-table thead tr.attr-skill-top-title th {
    background:var(--rpgcs-header-bg);
    font-weight:700;
    text-align:center;
    letter-spacing:.5px;
    font-size:0.75rem;
}
.rpgcs-attr-skill-table thead tr.attr-skill-attribute-row th {
    background:var(--rpgcs-accent-bg);
    font-weight:700;
    text-align:center;
}
.rpgcs-attr-skill-table td.skill-name {
    font-weight:500;
    white-space:nowrap;
}
.rpgcs-attr-skill-table .rpgcs-field__value {
    cursor:pointer;
    font-weight:600;
    display:inline-block;
    min-width:2ch;
    padding:1px 2px;
}
.rpgcs-attr-skill-table td.skill-basedie,
.rpgcs-attr-skill-table th.attr-basedie {
    text-align:center;
    font-family:monospace;
    font-weight:700;
}

/* ============ TRACKS ============ */
.rpgcs-track {
    display:flex;
    gap:3px;
    flex-wrap:wrap;
}
.rpgcs-track-box {
    width:16px;
    height:16px;
    border:1px solid #333;
    background:#fff;
    box-sizing:border-box;
    cursor:pointer;
}
.rpgcs-track-box.filled { background:#222; }
.rpgcs-track[data-editable="1"] .rpgcs-track-box:hover { outline:1px solid #555; }
.rpgcs-track.rpgcs-updating { opacity:.5; }

/* ============ CHECKBOX (view mode non-condition) ============ */
.rpgcs-field--type-checkbox .rpgcs-checkbox-display {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 0;
}
.rpgcs-field--type-checkbox .rpgcs-checkbox-display input[type=checkbox] {
    width:14px;
    height:14px;
    margin:0;
    cursor:pointer;
}
.rpgcs-field--type-checkbox .rpgcs-checkbox-display__box { }

/* ============ MATRIX LAYOUT ============ */
.rpgcs-group--matrix .rpgcs-matrix {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:0.7rem;
    margin:0 0 .75rem;
}
.rpgcs-matrix th,
.rpgcs-matrix td {
    border:1px solid #c8cfd5;
    padding:2px 4px;
    vertical-align:middle;
}
.rpgcs-matrix thead .matrix-title th {
    background:var(--rpgcs-header-bg);
    font-weight:700;
    letter-spacing:.5px;
    font-size:0.75rem;
}
.rpgcs-matrix thead .matrix-header th {
    background:var(--rpgcs-accent-bg);
    font-weight:600;
    text-transform:uppercase;
}
.matrix-row-num {
    width:2ch;
    text-align:center;
    background:#fafafa;
    font-weight:600;
}
.matrix-cell .rpgcs-field { margin:0; }
.matrix-cell .rpgcs-field__label { display:none; }
.matrix-cell .rpgcs-field__value,
.matrix-cell input[type=text],
.matrix-cell input[type=number],
.matrix-cell select {
    font-size:0.7rem;
    width:100%;
    box-sizing:border-box;
    padding:1px 3px;
}
.rpgcs-matrix-below-field { margin-top:.35rem; }
.rpgcs-matrix-below-field .rpgcs-field textarea { min-height:40px; }

/* ============ SPECIALTIES BELOW ATTR TABLE ============ */
.rpgcs-below-table-fields .rpgcs-field { margin-top:4px; }
.rpgcs-below-table-fields .rpgcs-field input[type=text] {
    border:0;
    border-bottom:1px solid #333;
    background:transparent;
    border-radius:0;
    padding:2px 2px;
    font-size:0.75rem;
}
.rpgcs-below-table-fields .rpgcs-field input[type=text]:focus {
    outline:none;
    background:#fffef5;
}

/* ============ INLINE EDITING CONTROLS ============ */
.rpgcs-inline-editor {
    display:inline-flex;
    align-items:flex-start;
    gap:4px;
    margin-left:4px;
    position:relative;
    z-index:10;
    max-width:100%;
}
.rpgcs-inline-editor .rpgcs-inline-input {
    width:auto;
    min-width:90px;
    padding:2px 4px;
    font-size:0.7rem;
    line-height:1.15;
    border:1px solid #8d9399;
    border-radius:2px;
    background:#fff;
    font-family:inherit;
}

/* Multiline inline editor textarea (consistent border even inside line cells) */
.rpgcs-inline-editor .rpgcs-inline-textarea {
    width:320px;
    max-width:48vw;
    min-height:70px;
    resize:vertical;
    overflow:auto;
    line-height:1.25;
    white-space:pre-wrap;
    font-size:0.7rem;
    border:1px solid #8d9399;
    background:#fff;
}
.rpgcs-inline-editor .rpgcs-inline-textarea:focus {
    outline:2px solid #005fcc;
    outline-offset:1px;
}
@media (max-width:800px){
    .rpgcs-inline-editor .rpgcs-inline-textarea {
        width:100%;
        max-width:100%;
    }
}

.rpgcs-inline-btn {
    background:#f5f7f9;
    border:1px solid #7f858a;
    color:#222;
    width:22px;
    height:22px;
    padding:0;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:12px;
    font-weight:700;
    border-radius:3px;
    cursor:pointer;
    user-select:none;
    position:relative;
}
.rpgcs-inline-btn:focus-visible {
    outline:2px solid #005fcc;
    outline-offset:1px;
}
.rpgcs-inline-btn:hover { background:#e2e7eb; }
.rpgcs-inline-btn:active { background:#d4dadd; }
.rpgcs-inline-btn.rpgcs-inline-save {
    border-color:#2d7a37;
    color:#1a6123;
}
.rpgcs-inline-btn.rpgcs-inline-save:hover { background:#d9f1dd; }
.rpgcs-inline-btn.rpgcs-inline-cancel {
    border-color:#a94742;
    color:#7f1f1a;
}
.rpgcs-inline-btn.rpgcs-inline-cancel:hover { background:#f6dddb; }

.rpgcs-badge-updating {
    display:inline-block;
    margin-left:4px;
    background:#ffecb3;
    color:#7a5a00;
    font-size:0.55rem;
    padding:2px 5px;
    border-radius:3px;
}
.rpgcs-badge-success {
    background:#d4f7d9;
    color:#207a2c;
}

.rpgcs-field .rpgcs-inline-error {
    display:block;
    color:#b30000;
    font-size:0.55rem;
    margin-top:2px;
    max-width:480px;
    white-space:normal;
}

/* Narrow cell editors */
.rpgcs-attr-skill-table .rpgcs-inline-editor {
    gap:2px;
    margin-left:2px;
}
.rpgcs-attr-skill-table .rpgcs-inline-btn {
    width:18px;
    height:18px;
    font-size:11px;
}

/* ============ ACCESSIBILITY & FOCUS ============ */
.rpgcs-track-box:focus {
    outline:2px solid #005fcc;
    outline-offset:1px;
}
.rpgcs-field__value:focus-visible {
    outline:2px solid #005fcc;
}
.rpgcs-display-checkbox:focus-visible {
    outline:2px solid #005fcc;
    outline-offset:2px;
}

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width:800px){
    .rpgcs-group--grid .rpgcs-grid { gap:4px 4px; }
    .rpgcs-field__label { font-size:0.6rem; }
    .rpgcs-field input[type=text],
    .rpgcs-field input[type=number],
    .rpgcs-field select,
    .rpgcs-field textarea { font-size:0.7rem; }
}

/* ============ PRINT OPTIMIZATION ============ */
@media print {
    body * {
        visibility: hidden !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    .rpgcs-print-sheet-area,
    .rpgcs-print-sheet-area * {
        visibility: visible !important;
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #fff !important;
        color: #000 !important;
    }
    .rpgcs-sheet-view-wrapper,
    .rpgcs-sheet-view,
    .rpgcs-print-sheet-area {
        position: absolute !important;
        left: 0; top: 0; width: 100vw; max-width: 100vw;
        min-width: 0; max-height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        background: #fff !important;
    }
    .rpgcs-print-sheet-btn,
    .rpgcs-inline-edit-note,
    .rpgcs-inline-editor,
    .rpgcs-badge-updating,
    .rpgcs-form,
    .rpgcs-system-form-mount,
    .rpgcs-system-select,
    .rpgcs-system-select--inline,
    .rpgcs-form-actions,
    .rpgcs-visibility,
    .rpgcs-below-table-fields .rpgcs-field textarea,
    .rpgcs-group .rpgcs-field input,
    .rpgcs-group .rpgcs-field select,
    .rpgcs-group .rpgcs-field textarea,
    .rpgcs-group[data-group="gm_meta"]
    {
        display: none !important;
    }
    .rpgcs-field__value {
        border: none !important;
        background: transparent !important;
        font-size: 8pt !important;
        color: #000 !important;
        padding: 0 1px !important;
    }
    .rpgcs-sheet-view {
        font-size: 9pt !important;
        background: #fff !important;
        color: #000 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .rpgcs-group__legend {
        font-size:7pt !important;
        background: #fff !important;
        border: none !important;
        border-bottom: 1px solid #222 !important;
        color: #000 !important;
        padding: 0 0 2px !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }
    .rpgcs-attr-skill-table {
        font-size:7pt !important;
    }
    /* Attribute names (th.attr-name) and skill names (td.skill-name) same size for print */
    .rpgcs-attr-skill-table th.attr-name,
    .rpgcs-attr-skill-table td.skill-name {
        font-size: 7pt !important;
        font-weight: 600 !important;
        padding: 0 1px !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .rpgcs-attr-skill-table th,
    .rpgcs-attr-skill-table td,
    .rpgcs-matrix th,
    .rpgcs-matrix td {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 6pt !important;
        padding: 0 1px !important;
        line-height:1.1 !important;
        vertical-align:middle !important;
        word-break:break-word !important;
        white-space:normal !important;
    }
    /* Remove the top title row ("Attributes & Skills") */
    .rpgcs-attr-skill-table .attr-skill-top-title {
        display: none !important;
    }
    .rpgcs-attr-skill-table thead tr th,
    .rpgcs-attr-skill-table thead tr td {
        font-size:5pt !important;
        padding: 0 0.5px !important;
        line-height:1.02 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-weight:600 !important;
        overflow:visible !important;
        white-space:normal !important;
        max-width: 38px !important;
    }
    .rpgcs-attr-skill-table th.attr-basedie,
    .rpgcs-attr-skill-table td.skill-basedie,
    .rpgcs-attr-skill-table th.attr-rating,
    .rpgcs-attr-skill-table .subhead-rating,
    .rpgcs-attr-skill-table .subhead-basedie {
        font-size:6pt !important;
        padding: 0 0.5px !important;
        letter-spacing:0 !important;
        font-weight:600 !important;
        text-transform: none !important;
    }
    .rpgcs-matrix {
        font-size: 6pt !important;
    }
    .rpgcs-track-box,
    .rpgcs-condition-box { border-color:#000 !important; width:10px !important; height:10px !important; }
    .rpgcs-condition-box.filled,
    .rpgcs-track-box.filled { background: #000 !important; }
    .rpgcs-print-page-break { break-before: page !important; page-break-before: always !important; height: 0 !important; }

    /* ---- TALLER LARGE TEXT FIELDS (CORRECTED SELECTORS) ---- */
    .rpgcs-field[data-field="specialties"] .rpgcs-field__value,
    .rpgcs-field[data-field="tiny_items"] .rpgcs-field__value {
        min-height: 7em !important;
        height: 7em !important;
        display: block !important;
    }
    .rpgcs-group[data-group="notes_grid"] .rpgcs-field[data-field="background"] .rpgcs-field__value,
    .rpgcs-group[data-group="notes_grid"] .rpgcs-field[data-field="notes"] .rpgcs-field__value {
        min-height: 17em !important;
        height: 17em !important;
        display: block !important;
    }
    html, body {
        width: 100vw; height: 100vh; margin: 0; padding: 0;
    }
    @page {
        size: A4 portrait;
        margin: 0.15in;
    }
}
/* Remove dash/hyphen placeholder for printing and always (for print-friendliness and handwriting) */
.rpgcs-field__value:empty:before {
    content:'' !important;
}