/* cuesheet.css - Cue Sheet Paper Styling and Table */

/* --- Cue Sheet Paper Style --- */
.cuesheet-container {
    margin: 60px 24px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.paper-preview {
    background: #e0e0e0;
    color: #222;
    min-height: auto;
    padding: 50px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    min-height: 800px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    transition: background 0.3s;
}

.paper-toolbar {
    position: sticky;
    top: 95px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(26, 26, 46, 0.98);
    padding: 12px 20px;
    margin-left: -50px;
    margin-right: -50px;
    margin-bottom: 20px;
    width: calc(100% + 100px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 99;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}
.paper-toolbar .toolbar-left,
.paper-toolbar .toolbar-right {
    display: flex;
    gap: 10px;
}

/* Toolbar Button Variants */
.btn-populate {
    border-color: #00ff88 !important;
    color: #00ff88;
}
.btn-populate:hover {
    background: #00ff88 !important;
    color: black;
}
.btn-populate.active {
    background: #00ff88 !important;
    color: black;
}
.btn-delete {
    border-color: #ff4444 !important;
    color: #ff4444;
}
.btn-delete:hover {
    background: #ff4444 !important;
    color: white;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
}
.btn-unpopulate {
    border-color: #ff6b6b !important;
    color: #ff6b6b;
}
.btn-unpopulate:hover {
    background: #ff6b6b !important;
    color: black;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
}
.btn-cue-names {
    border-color: #f0a500 !important;
    color: #f0a500;
}
.btn-cue-names:hover:not(.disabled) {
    background: #f0a500 !important;
    color: black;
    box-shadow: 0 0 20px rgba(240, 165, 0, 0.4);
}
.btn-cue-names.disabled {
    border-color: #555 !important;
    color: #555;
    cursor: not-allowed;
    opacity: 0.5;
}
.btn-cue-names.disabled:hover {
    background: transparent !important;
    color: #555;
    box-shadow: none;
}

/* --- Internal Cue Sheet Styling (The Paper) --- */
.cuesheet-title {
    text-align: center;
    margin-bottom: 5px;
}
.cuesheet-title h1 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: bold;
    cursor: text;
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
}
.cuesheet-title h1:hover {
    background: rgba(0, 0, 0, 0.05);
}
.cuesheet-title h1:focus {
    background: #ffffcc;
    outline: 1px solid #999;
}
.cuesheet-title h2 {
    font-size: 0.9rem;
    margin: 5px 0 0 0;
    font-weight: normal;
    color: #444;
}

/* Header grid layout */
.cuesheet-header {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: 20px;
    margin: 10px 0;
    font-size: 0.7rem;
    font-family: inherit;
}
.header-left, .header-right {
    display: flex;
    flex-direction: column;
}
.field-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 0;
    min-height: 18px;
    line-height: 1.4;
}
.field-row label {
    font-weight: normal;
    white-space: nowrap;
    flex: 1;
    text-align: right;
    padding-right: 5px;
    color: #333;
}
.field-row .field-value {
    border-bottom: 1px solid #999;
    min-height: 14px;
    padding: 0 3px;
}
.field-row input, .field-row select {
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
    font-size: 0.7rem;
    padding: 0 3px;
    font-family: inherit;
}
/* Left block: shorter underlines */
.header-left .field-row input,
.header-left .field-row select,
.header-left .field-row .field-value {
    flex: 0 0 190px;
    width: 100px;
}
#meta-program-duration {
    text-align: center;
}
#total-duration {
    text-align: center;
}
/* Right block: longer underlines */
.header-right .field-row input,
.header-right .field-row select,
.header-right .field-row .field-value {
    flex: 0 0 400px;
    width: 180px;
    margin-right: 50px;
}
.field-row input:focus, .field-row select:focus {
    background: #ffffcc;
    outline: none;
}
.field-row select {
    cursor: pointer;
}

/* Duration fields */
.duration-row {
    margin-top: 0;
}

/* Usage legend */
.usage-legend {
    font-size: 0.65rem;
    color: #555;
    margin: 15px 0 10px 0;
    text-align: center;
}

/* Cue table wrapper for horizontal scroll */
.cuesheet-table-wrapper {
    overflow-x: auto;
    margin-top: 5px;
}

/* Cue table */
.cuesheet-table {
    border-collapse: collapse;
    font-size: 0.7rem;
    white-space: nowrap;
    table-layout: fixed;
    width: 100%;
}
.cuesheet-table th {
    background: #d0d0d0;
    border: 1px solid #999;
    padding: 4px 6px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: bold;
    vertical-align: bottom;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Column resize handle */
.cuesheet-table th .col-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
}
.cuesheet-table th .col-resize:hover,
.cuesheet-table th .col-resize.resizing {
    background: rgba(0, 150, 255, 0.4);
}
.cuesheet-table.resizing {
    cursor: col-resize;
    user-select: none;
}

/* Column minimum widths */
.cuesheet-table th.col-seq { min-width: 45px; }
.cuesheet-table th.col-usage { min-width: 55px; }
.cuesheet-table th.col-timein { min-width: 85px; }
.cuesheet-table th.col-timeout { min-width: 85px; }
.cuesheet-table th.col-duration { min-width: 35px; }
.cuesheet-table th.col-shares { min-width: 45px; }
.cuesheet-table th.col-role { min-width: 60px; }
.cuesheet-table th.col-pro { min-width: 50px; }
.cuesheet-table th.col-ipi { min-width: 50px; }
.cuesheet-table th.col-firstname { min-width: 100px; }
.cuesheet-table th.col-lastname { min-width: 90px; }
.cuesheet-table th.col-publisher { min-width: 100px; }
.cuesheet-table th.col-notes { min-width: 80px; }

/* Title column - flexible but bounded */
.cuesheet-table th.col-title {
    text-align: left;
    min-width: 150px;
    max-width: 400px;
    white-space: normal;
}
/* Left-aligned columns */
.cuesheet-table th.col-firstname,
.cuesheet-table th.col-lastname,
.cuesheet-table th.col-publisher,
.cuesheet-table th.col-notes {
    text-align: left;
}

.cuesheet-table td {
    border: 1px solid #bbb;
    padding: 2px 4px;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
/* Cue title cell can wrap */
.cuesheet-table td.col-title-cell {
    white-space: normal;
    min-width: 150px;
}
.cuesheet-table td.center { text-align: center; }
.cuesheet-table td.mono { font-family: 'Courier New', monospace; font-size: 0.65rem; }

/* Cue group styling */
.cue-group-first td {
    border-top: 2px solid #666;
}
.cue-group-row td {
    border-top: none;
}
.cue-row-even {
    background: #f5f5f5;
}

/* Page break control for PDF export */
.cue-group {
    page-break-inside: avoid;
    break-inside: avoid;
}
.cue-group-first {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Table inputs */
.cuesheet-table input,
.cuesheet-table select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    padding: 1px 2px;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.cuesheet-table select {
    cursor: pointer;
    padding-right: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 6px;
}
.cuesheet-table input:focus,
.cuesheet-table select:focus {
    background-color: #ffffcc;
    outline: 1px solid #999;
}
.cuesheet-table input.timecode {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    text-align: center;
}
.cuesheet-table input.shares {
    text-align: right;
}

/* Disabled cells with diagonal stripes pattern */
.cuesheet-table td.cell-disabled {
    background: repeating-linear-gradient(
        -45deg,
        #f5f5f5,
        #f5f5f5 3px,
        #e0e0e0 3px,
        #e0e0e0 6px
    );
}
.cuesheet-table input.field-disabled {
    background: transparent !important;
    color: #999;
    cursor: not-allowed;
}
.cuesheet-table input.field-disabled:focus {
    background: transparent !important;
    outline: none !important;
}

/* Row actions container - positioned outside table */
.cuesheet-table-container {
    position: relative;
    display: flex;
}
.row-actions-container {
    position: relative;
    width: 50px;
    flex-shrink: 0;
}
.row-action-group {
    position: absolute;
    left: 5px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.btn-row-delete {
    width: 20px;
    height: 20px;
    border: none;
    background: #f5f5f5;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-row-delete:hover {
    background: #ffebee;
    color: #c00;
}
.btn-row-add {
    width: 20px;
    height: 20px;
    border: 1px solid #4caf50;
    background: #e8f5e9;
    color: #4caf50;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-row-add:hover {
    background: #c8e6c9;
}

/* Cue sheet buttons container */
.cuesheet-buttons-container {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    padding-left: 10px;
}
.btn-add-cue {
    padding: 8px 16px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-add-cue:hover {
    background: #43a047;
}
.btn-delete-selected {
    padding: 8px 16px;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-delete-selected:hover {
    background: #d32f2f;
}

/* Batch selection checkbox styling */
.seq-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.seq-input {
    width: 30px;
    text-align: center;
    font-weight: bold;
    border: none;
    background: transparent;
    padding: 2px;
    font-size: 0.75rem;
    font-family: inherit;
}
.seq-input:focus {
    background: #ffffcc;
    outline: 1px solid #999;
}
.batch-checkbox {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}
.batch-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.batch-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
}
.batch-checkbox:hover input ~ .checkmark {
    border-color: #0af;
}
.batch-checkbox input:checked ~ .checkmark {
    background-color: #0af;
    border-color: #0af;
}
.batch-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.batch-checkbox input:checked ~ .checkmark:after {
    display: block;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Reset button */
.cuesheet-reset-container {
    margin-top: 30px;
    text-align: center;
    padding-bottom: 20px;
}
.btn-reset {
    background: transparent;
    border: 1px solid #c00;
    color: #c00;
    padding: 10px 30px;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-reset:hover {
    background: #c00;
    color: white;
}

/* --- Print Styles --- */
@media print {
    .cuesheet-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .cue-group {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Hide interactive elements in print */
    .batch-checkbox,
    .btn-add-writer,
    .btn-delete,
    .actions,
    td.actions,
    .row-actions-container,
    .cuesheet-buttons-container {
        display: none !important;
    }
    /* Make inputs look like plain text */
    .cuesheet-table input,
    .cuesheet-table select {
        border: none !important;
        background: transparent !important;
        background-image: none !important;
        outline: none !important;
    }
    /* Hide toolbar */
    .paper-toolbar {
        display: none !important;
    }
    .batch-checkbox { display: none !important; }
    .cuesheet-reset-container { display: none !important; }
}