/* ============================================================
   Skill Details Styling
   ============================================================ */

/* ============================================================
   Base Styles
   ============================================================ */

/* Reset some basic elements for consistency across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: Arial, sans-serif;
    background-color: #eaeaea; /* Light background for the page */
    color: #333; /* Default text color */
}

/* ============================================================
   Skill Container
   ============================================================ */

.skill-container {
    max-width: 900px; /* Increased width to accommodate four columns */
    margin: 40px auto; /* Centers the container horizontally with top and bottom margins */
    padding: 20px;
    text-align: center; /* Centers text within the container */
    background-color: #f0f0f0; /* Uniform grey background for the entire container */
    border-radius: 10px; /* Adds rounded corners to the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}

/* ============================================================
   Skill Title
   ============================================================ */

.skill-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 15px; /* Reduced margin for less space */
    color: #222; /* Darker text for better readability */
}

/* ============================================================
   Skill Details
   ============================================================ */

.skill-details {
    text-align: center; /* Centers text within the details section */
}

/* ============================================================
   Description Section
   ============================================================ */

.skill-description {
    margin-bottom: 15px; /* Reduced margin for less vertical space */
    font-size: 1em;
    border: 1px solid #ccc; /* Uniform grey border */
    padding: 15px 20px; /* Adds padding inside the border for better spacing */
    border-radius: 5px; /* Rounds the corners of the border */
    background-color: #f0f0f0; /* Uniform grey background */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

/* ============================================================
   Meta Information Container
   ============================================================ */

.skill-meta {
    display: flex;
    flex-direction: column; /* Default to column for mobile responsiveness */
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Adds space between each meta item */
    margin-bottom: 20px;
    padding: 10px;
}

/* ============================================================
   Individual Meta Items
   ============================================================ */

.meta-item {
    border: 1px solid #ccc; /* Uniform grey border */
    padding: 15px 20px; /* Adds padding inside the border */
    border-radius: 5px; /* Rounds the corners of the border */
    background-color: #f0f0f0; /* Uniform grey background */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    width: 100%; /* Full width on small screens */
    box-sizing: border-box; /* Ensures padding is included in the total width */
    text-align: center; /* Center text inside each meta item */
}

/* ============================================================
   Meta Item Labels and Values
   ============================================================ */

.meta-item .label {
    font-weight: bold;
    margin-bottom: 10px;
    display: block; /* Ensures label is on its own line */
    font-size: 1em;
    color: #555; /* Slightly darker for labels */
}

.meta-item .value {
    font-size: 1em;
    color: #333; /* Dark text for values */
}

/* ============================================================
   Assigned Levels Specific Styling
   ============================================================ */

.assigned-levels .value {
    text-align: center; /* Center text within Assigned Levels */
}

/* ============================================================
   Tags Specific Styling
   ============================================================ */

.skill-tags .value {
    text-align: center; /* Center tags */
}

/* ============================================================
   Responsive Design: Arrange Meta Items in a Row on Larger Screens
   ============================================================ */

@media (min-width: 800px) {
    .skill-meta {
        flex-direction: row; /* Arrange meta items horizontally */
        justify-content: space-between; /* Distribute space evenly */
        align-items: flex-start; /* Vertically align items to the top */
    }

    .meta-item.skill-code,
    .meta-item.skill-value {
        width: 15%; /* Reduce width for USAG Code and USAG Value */
        text-align: center; /* Center text within each meta item */
    }

    .meta-item.assigned-levels {
        width: 30%; /* Increase width for Levels */
        text-align: center; /* Center text within each meta item */
    }

    .meta-item.skill-tags {
        width: 25%; /* Adjust width for Tags */
        text-align: center; /* Center text within each meta item */
    }

    .meta-item .value {
        text-align: center; /* Ensure values are centered */
    }

    .skill-description {
        margin-bottom: 15px; /* Maintain reduced spacing */
    }
}

/* ============================================================
   Optional Enhancements
   ============================================================ */

/* Hover Effects for Meta Items */
.meta-item:hover {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Typography Enhancements */
.skill-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #222;
}

.meta-item .label {
    font-size: 1.2em;
    color: #444;
}

.meta-item .value {
    font-size: 1em;
    color: #555;
}

/* ============================================================
   Level Span Styling
   ============================================================ */

.levelSpan {
    background-color: #ccc; /* Light grey background */
    padding: 5px; /* Adds padding around the text */
    border-radius: 20px; /* Rounds the corners */
    margin: 2px; /* Adds a small margin around each span */
    display: inline-block; /* Ensures spans are displayed inline */
}

/* ============================================================
   End of Skill Details Styling
   ============================================================ */

/* ============================================================
   Add Skills Grid Styling
   ============================================================ */

.addskills-container {
    max-width: 100%;
    padding: 20px;
    margin: 0 auto;
}

.addskills-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Event Selector */
.event-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.event-btn {
    padding: 10px 25px;
    font-size: 16px;
    border: 2px solid #007bff;
    background-color: #fff;
    color: #007bff;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.event-btn:hover {
    background-color: #e6f2ff;
}

.event-btn.active {
    background-color: #007bff;
    color: #fff;
}

/* Group Selector */
.group-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.group-label {
    font-weight: bold;
    color: #333;
    margin-right: 5px;
}

.group-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: 2px solid #28a745;
    background-color: #fff;
    color: #28a745;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 40px;
}

.group-btn:hover {
    background-color: #e6f7eb;
}

.group-btn.active {
    background-color: #28a745;
    color: #fff;
}

/* Current Group Name */
.current-group-name {
    text-align: center;
    font-size: 18px;
    color: #2c5282;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #e8f4fc;
    border-radius: 5px;
}

/* VP 0 Section */
.vp0-section {
    margin-bottom: 30px;
    background-color: #f0f7ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #c5ddf5;
}

.vp0-section h3 {
    text-align: center;
    color: #2c5282;
    margin-bottom: 12px;
    font-size: 16px;
}

.vp0-grid {
    margin: 0 auto;
    min-width: auto;
    width: auto;
}

.vp0-grid td.skill-cell {
    min-width: 200px;
    max-width: 250px;
    background-color: #fff;
}

/* Level Legend */
.level-legend {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.legend-label {
    font-weight: bold;
    color: #333;
}

.legend-level {
    font-size: 14px;
    color: #666;
}

/* Grid Wrapper */
.grid-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

/* Skills Grid Table */
.skills-grid {
    border-collapse: collapse;
    width: 100%;
    min-width: 1200px;
}

.skills-grid th,
.skills-grid td {
    border: 1px solid #ddd;
    padding: 5px;
    vertical-align: top;
}

.skills-grid th {
    background-color: #4a90d9;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 5px;
}

.skills-grid .row-label {
    background-color: #e8f4fc;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    min-width: 70px;
    color: #2c5282;
}

.skills-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #4a90d9;
}

.skills-grid .row-label.sticky-col {
    background-color: #e8f4fc;
}

/* Alternating row colors */
.skills-grid tbody tr:nth-child(even) td.skill-cell {
    background-color: #f8fbfe;
}

.skills-grid tbody tr:nth-child(odd) td.skill-cell {
    background-color: #fff;
}

.skills-grid thead th.sticky-col {
    z-index: 15;
}

/* Skill Cell */
.skill-cell {
    min-width: 180px;
    max-width: 220px;
    background-color: #fff;
    position: relative;
}

/* Skills Container */
.skills-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Individual Skill Entry */
.skill-entry {
    padding: 4px;
    background-color: #fafafa;
    border-radius: 4px;
    border: 1px solid #eee;
}

.skill-entry:hover {
    border-color: #ccc;
}

/* Main row: Decimal, Skill Name, Dropdown, Add, Delete */
.skill-row-main {
    display: flex;
    align-items: center;
    gap: 4px;
}

.skill-decimal {
    font-size: 10px;
    color: #666;
    font-weight: bold;
    white-space: nowrap;
}

.skill-name-input {
    flex: 1;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.skill-dropdown {
    cursor: pointer;
    color: #999;
    font-size: 10px;
    padding: 2px 4px;
    user-select: none;
}

.skill-dropdown:hover {
    color: #333;
}

.skill-dropdown.has-details {
    color: #28a745;
    font-weight: bold;
}

/* Details row: Dance, Nickname, Levels (hidden by default) */
.skill-row-details {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.nickname-input {
    width: 90px;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    font-style: italic;
    color: #666;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

/* Dance and NA Toggles */
.dance-toggle,
.na-toggle {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    background-color: #fff;
    color: #666;
    transition: all 0.2s ease;
    user-select: none;
    text-align: center;
    box-sizing: border-box;
}

.dance-toggle:hover {
    background-color: #f3e5f5;
    border-color: #9c27b0;
    color: #9c27b0;
}

.dance-toggle.active {
    background-color: #9c27b0;
    color: #fff;
    border-color: #9c27b0;
}

.na-toggle:hover {
    background-color: #fff3e0;
    border-color: #ff9800;
    color: #ff9800;
}

.na-toggle.active {
    background-color: #ff9800;
    color: #fff;
    border-color: #ff9800;
}

/* Level Toggle Spans */
.level-spans {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
}

.skill-name-input:focus,
.nickname-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}

.level-toggle {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    color: #666;
    transition: all 0.2s ease;
    user-select: none;
}

.level-toggle:hover {
    background-color: #e0e0e0;
}

.level-toggle.active {
    background-color: #28a745;
    color: #fff;
    border-color: #28a745;
}

/* B7 — the division grid is READ-ONLY: it displays CoP-derived `skill_levels` state that a
   checkbox has no business owning (see admin/addXcel.php's renderSkillEntry docblock, task E6).
   It must not LOOK clickable, or an admin will click it and believe the no-op saved. */
.level-toggle.readonly {
    cursor: default;
}

.level-toggle.readonly:hover {
    background-color: #f0f0f0;
}

.level-toggle.readonly.active:hover {
    background-color: #28a745;
}

.legend-readonly {
    font-style: italic;
    color: #999;
}

/* E6 — the way OUT of the read-only grid. ⚠️ It is the ONLY thing on this page that says where
   legality is edited; the grid carried "edit via E6" with no destination for eight days, which is
   exactly F14c's undiscoverable-/skills/my defect. --gold-deep is 5.35:1 on white (measured at X3);
   the #999 above it is a pre-existing legacy value and not a pattern to copy. */
.level-edit-link,
.legend-link {
    font-size: 11px;
    white-space: nowrap;
    color: var(--gold-deep, #88651c);
    text-decoration: underline;
}

.level-edit-link {
    margin-left: 8px;
    align-self: center;
}

/* Delete Entry Button */
.delete-entry {
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    margin-left: auto;
    padding: 0 2px;
}

.delete-entry:hover {
    color: #dc3545;
}

/* Add Skill Button */
.add-skill-btn {
    padding: 2px 8px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: #999;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-skill-btn:hover {
    background-color: #e8f4e8;
    border-color: #28a745;
    color: #28a745;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .skills-grid {
        font-size: 11px;
    }

    .skill-cell {
        min-width: 150px;
    }
}

/* ============================================================
   End of Add Skills Grid Styling
   ============================================================ */

/* ============================================================
   Show Skills Page Styling
   ============================================================ */

.showskills-container {
    max-width: 1200px;
    padding: 20px;
    margin: 0 auto;
}

.showskills-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Full Group Selector with Names */
.group-selector-full {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    justify-content: center;
}

.group-btn-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
    font-size: 14px;
    border: 2px solid #64748b;
    background-color: #fff;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.group-btn-full:hover {
    background-color: #f1f5f9;
    border-color: #475569;
    color: #475569;
}

.group-btn-full.active {
    background-color: #fefce8;
    border-color: #facc15;
    color: #000;
}

.group-btn-full .group-num {
    font-weight: bold;
    font-size: 18px;
}

.group-btn-full .group-name {
    font-size: 13px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Skills List */
.skills-list {
    margin-top: 20px;
}

/* VP Section */
.vp-section {
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.vp-header {
    background-color: #4a90d9;
    color: #fff;
    padding: 12px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.vp-skills {
    padding: 10px 20px;
}

/* Skill group (skills sharing the same decimal code) */
.skill-group {
    display: flex;
    align-items: center;
    padding: 8px 0;
    line-height: 1.5;
    border-bottom: 2px solid #ccc;
}

.skill-group:last-child {
    border-bottom: none;
}

.skill-group-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.skill-group-item {
    padding: 4px 0;
}

.skill-group-item:hover {
    background-color: #f0f7ff;
}

.skill-group-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin: 4px 0;
}

a.skill-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    text-align: left;
}

.skill-display-decimal {
    width: 100px;
    min-width: 100px;
    font-size: 12px;
    color: #888;
    font-weight: bold;
}

.skill-display-content {
    flex: 1;
    text-align: left;
}

.skill-display-name {
    font-weight: bold;
    color: #333;
}

/* X6d — was .skill-display-nickname. The roles swapped: .skill-display-name now carries the
   nickname (primary) and this carries the demoted CoP prose. */
.skill-display-cop {
    font-style: italic;
    color: #666;
    font-size: 0.9em;
}

/* Skill badges */
.skill-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    margin-left: 3px;
    vertical-align: middle;
}

.skill-badge.dance {
    background-color: #9c27b0;
}

.skill-badge.na {
    background-color: #ff9800;
}

.skill-badge.level {
    background-color: #28a745;
}

.no-skills {
    color: #999;
    font-style: italic;
    padding: 10px 0;
}

/* ============================================================
   End of Show Skills Page Styling
   ============================================================ */

/* ============================================================
   SK10 — /skills/my "Your drills" — the third visibility chip.
   codex.css defines .cs-chip--public / .cs-chip--private for the two-state skills/connections
   lists; a drill has a THIRD state (design §4.1's 'inherit' — visible only once attached to a
   public skill, not the same claim as 'public'), so it needs its own chip rather than being
   folded into an existing one. Reuses codex.css's --blue-soft/--ink-navy tokens so it sits in the
   same palette without redefining them here.
   ============================================================ */
.cs-chip--shared { background: var(--blue-soft); border: 1px solid var(--ink-navy); color: var(--ink-navy) }