/* ==========================================================================
   KeepSmile Tools - Extra Styles (Mutualized)
   ========================================================================== */

/* --- Image Editor --- */
.editor-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; background: #2a2a2a; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.toolbar-group { display: flex; align-items: center; gap: 0.5rem; border-right: 1px solid #444; padding-right: 1rem; flex-wrap: wrap; justify-content: center; }
.toolbar-group:last-child { border-right: none; padding-right: 0; }
.btn-icon { background: #333; color: white; border: 1px solid #555; border-radius: 4px; padding: 0.5rem 0.8rem; cursor: pointer; transition: background 0.2s; font-size: 0.95rem; }
.btn-icon:hover { background: #444; }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
#editor-workspace { position: relative; text-align: center; background: #111; border-radius: 8px; overflow: hidden; min-height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 1rem; }
#display-canvas { max-width: 100%; max-height: 65vh; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWNgYGD4z0AEYMQqwKgcopGQQmQhBAAwXQIF7/D+3gAAAABJRU5ErkJggg=='); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.canvas-wrapper { position: relative; display: inline-block; max-width: 100%; }

/* --- Video Editor --- */
.editor-container { display: grid; grid-template-columns: 250px 1fr 300px; grid-template-rows: auto 250px; gap: 1rem; height: calc(100vh - 200px); min-height: 700px; background: var(--gradient-card); padding: 1rem; border-radius: var(--radius); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.panel { background: #1e1e1e; border: 1px solid #444; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.panel-header { background: #2a2a2a; padding: 0.8rem 1rem; font-weight: bold; border-bottom: 1px solid #444; display: flex; justify-content: space-between; align-items: center; }
.panel-content { padding: 1rem; overflow-y: auto; flex-grow: 1; }
.library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.library-item { background: #111; border: 1px solid #333; border-radius: 4px; height: 80px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; overflow: hidden; }
.library-item:hover { border-color: var(--primary-color); }
.library-item img, .library-item video { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.library-item .type-badge { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.7); font-size: 0.6rem; padding: 2px 4px; border-radius: 2px; color: white; }
.preview-panel { grid-column: 2 / 3; display: flex; flex-direction: column; background: #000; }
.canvas-wrapper { flex-grow: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; background: #111; background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
#video-canvas { max-width: 100%; max-height: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.8); cursor: crosshair; }
.player-controls { background: #1e1e1e; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 1rem; border-top: 1px solid #444; }
.time-display { font-family: monospace; font-size: 1.1rem; width: 120px; text-align: center; }
.scrubber { flex-grow: 1; cursor: pointer; }
.properties-panel { grid-column: 3 / 4; }
.prop-group { margin-bottom: 1rem; }
.prop-group label { display: block; font-size: 0.85rem; color: #aaa; margin-bottom: 0.3rem; }
.prop-group input, .prop-group select { width: 100%; padding: 0.4rem; background: #111; border: 1px solid #444; color: white; border-radius: 4px; }
.prop-row { display: flex; gap: 0.5rem; }
.timeline-panel { grid-column: 1 / 4; grid-row: 2 / 3; display: flex; flex-direction: column; }
.timeline-header { display: flex; border-bottom: 1px solid #444; background: #222; }
.tl-track-labels { width: 250px; border-right: 1px solid #444; padding: 0.5rem; font-size: 0.9rem; font-weight: bold; }
.tl-time-ruler { flex-grow: 1; position: relative; height: 30px; background: #2a2a2a; overflow: hidden; }
.timeline-body { display: flex; flex-grow: 1; overflow-y: auto; position: relative; }
.tl-tracks-container { width: 250px; border-right: 1px solid #444; background: #1e1e1e; }
.tl-track-info { height: 40px; border-bottom: 1px solid #333; display: flex; align-items: center; padding: 0 0.5rem; font-size: 0.85rem; color: #ccc; cursor: pointer; }
.tl-track-info.selected { background: rgba(255, 152, 0, 0.2); border-left: 3px solid var(--primary-color); }
.tl-clips-area { flex-grow: 1; position: relative; background: #111; overflow-x: auto; }
.tl-track-lane { height: 40px; border-bottom: 1px solid #222; position: relative; }
.clip-bar { position: absolute; height: 30px; top: 5px; background: var(--primary-color); border-radius: 4px; display: flex; align-items: center; padding: 0 5px; font-size: 0.75rem; color: #000; font-weight: bold; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; }
.clip-bar.selected { box-shadow: 0 0 0 2px #fff; z-index: 10; }
.clip-bar.type-video { background: #03A9F4; }
.clip-bar.type-image { background: #9C27B0; color: white;}
.clip-bar.type-audio { background: #4CAF50; }
.clip-bar.type-text { background: #FFEB3B; }
.clip-handle { position: absolute; top: 0; bottom: 0; width: 8px; background: rgba(255, 255, 255, 0.4); cursor: ew-resize; z-index: 10; }
.clip-handle:hover { background: rgba(255, 255, 255, 0.8); }
.clip-handle.left { left: 0; border-radius: 4px 0 0 4px; }
.clip-handle.right { right: 0; border-radius: 0 4px 4px 0; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #F44336; z-index: 50; pointer-events: none; }
.playhead::before { content: '▼'; position: absolute; top: -10px; left: -5px; color: #F44336; font-size: 12px; }
#export-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; display: none; justify-content: center; align-items: center; flex-direction: column; }

/* --- PDF Tools (Merger & Extractor) --- */
.pdf-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; min-height: 200px; align-items: start; }
.pdf-page-item { position: relative; border: 2px solid #444; border-radius: 8px; overflow: hidden; cursor: grab; background: #111; transition: transform 0.2s, border-color 0.2s; display: flex; justify-content: center; align-items: center; min-height: 200px; user-select: none; }
.pdf-page-item:active { cursor: grabbing; }
.pdf-page-item canvas { max-width: 100%; height: auto; display: block; pointer-events: none; }
.page-number { position: absolute; bottom: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; pointer-events: none; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-delete, .btn-rotate { position: absolute; top: 5px; background: #F44336; border: none; color: white; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; opacity: 0; transition: opacity 0.2s, transform 0.2s; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; z-index: 10; }
.btn-delete { right: 5px; }
.btn-rotate { left: 5px; background: #2196F3; font-size: 1rem; }
.pdf-page-item:hover .btn-delete, .pdf-page-item:hover .btn-rotate { opacity: 1; }
.btn-delete:hover { transform: scale(1.15); background: #D32F2F; }
.btn-rotate:hover { transform: scale(1.15); background: #1976D2; }
.empty-message { grid-column: 1 / -1; text-align: center; padding: 3rem; color: #888; }
.pdf-page-item.selected { border-color: #4CAF50; transform: scale(1.03); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); }
.pdf-page-item .selection-overlay { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; background: #4CAF50; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; opacity: 0; transition: opacity 0.2s; pointer-events: none; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pdf-page-item.selected .selection-overlay { opacity: 1; }
.pdf-page-item .btn-crop { position: absolute; top: 5px; right: 5px; background: #2a2a2a; border: 1px solid #555; color: white; border-radius: 4px; padding: 4px 6px; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s; font-size: 0.9rem; z-index: 2; }
.pdf-page-item:hover .btn-crop { opacity: 1; }
.pdf-page-item .btn-crop:hover { background: var(--primary-color); }
.crop-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; }
.crop-modal-content { background: #1e1e1e; padding: 1.5rem; border-radius: 12px; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; gap: 1rem; border: 1px solid #444; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.crop-workspace { position: relative; overflow: auto; background: #111; border-radius: 8px; max-height: calc(90vh - 120px); display: inline-block; text-align: center; }
.crop-workspace canvas { display: block; margin: 0 auto; max-width: 100%; }

/* --- Batch Image Converter --- */
#bic-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; margin-top: 1.5rem; padding: 1rem; background: #1e1e1e; border-radius: 8px; min-height: 150px; }
.bic-preview-item { position: relative; border-radius: 4px; overflow: hidden; background: #111; }
.bic-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.bic-preview-item .bic-name { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; font-size: 0.75rem; padding: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Specific Tools General Styling (Extracted from global CSS) --- */
#stopwatch-display { font-size: 5rem; font-family: monospace; text-align: center; margin-bottom: 1.5rem; color: var(--text-color); }
.stopwatch-controls { justify-content: center; }
.stopwatch-controls button { min-width: 120px; }
.laps-container { margin-top: 2rem; max-height: calc(10 * 53px); overflow-y: auto; background-color: #121212; border-radius: 8px; padding: 0 0.5rem; }
.laps-header-list { list-style: none; padding: 0; margin: 0; font-weight: bold; color: #aaa; position: sticky; top: 0; background: #121212; }
#laps-list { list-style: none; padding: 0; margin: 0; }
#laps-list li { display: grid; grid-template-columns: 1fr 1fr 1fr; font-family: monospace; font-size: 1.1rem; padding: 0.8rem 1rem; border-bottom: 1px solid #333; }
.laps-header-list li { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0.8rem 1rem; border-bottom: 1px solid #444; }
#laps-list li span:nth-child(1), .laps-header-list li span:nth-child(1) { text-align: left; }
#laps-list li span:nth-child(2), .laps-header-list li span:nth-child(2) { text-align: center; color: #aaa; }
#laps-list li span:nth-child(3), .laps-header-list li span:nth-child(3) { text-align: right; }
#laps-list li:last-child { border-bottom: none; }
#laps-list li.fastest { color: #4CAF50; font-weight: bold; }
#laps-list li.slowest { color: #F44336; font-weight: bold; }
.timer-inputs { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.timer-inputs .input-group { align-items: center; }
.timer-inputs input { width: 100px; text-align: center; font-size: 1.2rem; }
#timer-display { font-size: 5rem; font-family: monospace; text-align: center; margin-bottom: 1.5rem; color: var(--text-color); }
.finished-flashing { animation: flash-red 0.7s infinite; }
@keyframes flash-red { 0% { color: var(--text-color); transform: scale(1); } 50% { color: #F44336; transform: scale(1.05); } 100% { color: var(--text-color); transform: scale(1); } }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem; }

/* --- Accordion (Percentage Calculator) --- */
.accordion-item { margin-bottom: 1rem; border: 1px solid #444; border-radius: 8px; overflow: hidden; background: #1e1e1e; }
.accordion-header { width: 100%; text-align: left; background: #2a2a2a; color: var(--text-color); padding: 1rem 1.5rem; border: none; font-size: 1.1rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s; }
.accordion-header:hover { background: #333; }
.accordion-header.active { background: var(--primary-color); color: var(--bg-color); }
.accordion-content { display: none; padding: 1.5rem; background: #1e1e1e; border-top: 1px solid #444; }
.accordion-content.active { display: block; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-header.active .accordion-icon, .accordion-header.active svg.accordion-icon { transform: rotate(90deg); }

.stat-box { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 1rem; text-align: center; }
.stat-box span { display: block; font-size: 0.85rem; color: #aaa; margin-bottom: 0.5rem; }
.stat-box strong { display: block; font-size: 1.8rem; color: var(--primary-color); }
.color-picker-block { width: 100%; height: 150px; border-radius: var(--radius); border: 2px solid #444; cursor: pointer; margin-bottom: 1.5rem; transition: transform 0.2s; }
.color-picker-block:hover { transform: scale(1.02); }
.qr-output-container { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; padding: 2rem; border-radius: var(--radius); margin: 1.5rem 0; min-height: 200px; width: 100%; box-sizing: border-box; }
#qr-output img, #qr-output canvas { margin: 0 auto !important; max-width: 100%; height: auto !important; }
.math-section { background: #2a2a2a; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid var(--primary-color); }
.math-section h3 { margin-bottom: 1rem; color: var(--secondary-color); }
.math-grid-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.math-grid-table th, .math-grid-table td { padding: 0.5rem; border: 1px solid #444; text-align: center; }
.math-grid-table th { background: #1e1e1e; }
.date-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.case-converter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Video Editor — Tablet (≤ 1100px) --- */
@media (max-width: 1100px) {
    .editor-container {
        grid-template-columns: 180px 1fr 220px;
        min-height: 600px;
    }
    .tl-track-labels, .tl-tracks-container { width: 180px; }
}

/* --- Video Editor — Mobile/Petit tablet (≤ 768px) --- */
@media (max-width: 768px) {
    .editor-container {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: unset;
        overflow: visible;
    }
    .preview-panel  { order: 1; min-height: 240px; }
    .panel:not(.preview-panel):not(.properties-panel):not(.timeline-panel) { order: 2; max-height: 220px; }
    .properties-panel { order: 3; }
    .timeline-panel { order: 4; overflow-x: auto; }
    .tl-track-labels, .tl-tracks-container { width: 110px; font-size: 0.8rem; }
    .time-display   { width: 90px; font-size: 0.95rem; }
    .player-controls { flex-wrap: wrap; gap: 0.5rem; }
}

/* --- Stopwatch & Timer --- */
@media (max-width: 600px) {
    #stopwatch-display,
    #timer-display { font-size: 3.2rem; }

    .stopwatch-controls button  { min-width: 90px; }
    .timer-inputs               { gap: 0.75rem; }
    .timer-inputs input         { width: 75px; font-size: 1rem; }

    .editor-toolbar  { gap: 0.5rem; padding: 0.75rem; }
    .toolbar-group   { gap: 0.3rem; border-right: none; padding-right: 0; }
}

@media (max-width: 400px) {
    #stopwatch-display,
    #timer-display { font-size: 2.4rem; }

    .timer-inputs { flex-wrap: wrap; justify-content: center; }
}