/* /tools/pdf/styles.css */

:root {
    --bg:           #0f1115;
    --surface:      #1a1e27;
    --surface-hover:#222839;
    --border:       #2c3444;
    --border-light: #3a4455;
    --text:         #eef1f6;
    --text-muted:   #8a97b0;
    --primary:      #6fa3f7;
    --primary-hover:#8db9ff;
    --primary-dim:  rgba(111,163,247,0.12);
    --danger:       #f76f6f;
    --radius:       18px;
    --radius-sm:    10px;
    --shadow-sm:    0 4px 14px rgba(0,0,0,0.28);
    --shadow:       0 12px 32px rgba(0,0,0,0.38);
    --shadow-lg:    0 24px 52px rgba(0,0,0,0.52);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
}

body {
    background:              var(--bg);
    color:                   var(--text);
    font-family:             "DM Sans", Inter, system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════ */

.pdf-page {
    min-height: 100vh;
    padding:    36px 20px 160px;
}

.pdf-container {
    width:         min(1500px, 100%);
    margin-inline: auto;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */

.pdf-header {
    margin-bottom: 28px;
}

.pdf-title {
    font-size:      2rem;
    font-weight:    800;
    letter-spacing: -0.05em;
    line-height:    1;
    margin-bottom:  8px;
}

.pdf-subtitle {
    color:     var(--text-muted);
    font-size: 0.95rem;
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */

.pdf-top-bar {
    display:               grid;
    grid-template-columns: 1fr 280px;
    gap:                   16px;
    margin-bottom:         28px;
    align-items:           stretch;
}

/* ══════════════════════════════════════════
   MODE TOGGLE
══════════════════════════════════════════ */

.mode-toggle {
    display:        flex;
    align-items:    center;
    gap:            4px;
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  14px;
    padding:        4px;
    margin-bottom:  20px;
    width:          fit-content;
}

.mode-btn {
    padding:       12px 48px;
    border:        none;
    border-radius: 10px;
    font-size:     0.87rem;
    font-weight:   700;
    cursor:        pointer;
    background:    transparent;
    color:         var(--text-muted);
    transition:
        background 140ms ease,
        color      140ms ease;
    white-space:   nowrap;
}

.mode-btn-active {
    background: var(--primary);
    color:      #071120;
}

.mode-btn:not(.mode-btn-active):hover {
    background: var(--surface-hover);
    color:      var(--text);
}

/* ══════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════ */

.pdf-upload-zone {
    background:    var(--surface);
    border:        2px dashed var(--border);
    border-radius: 22px;
    padding:       28px 24px;
    text-align:    center;
    cursor:        pointer;
    transition:
        border-color 140ms ease,
        background   140ms ease,
        transform    140ms ease,
        box-shadow   140ms ease;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             6px;
}

.pdf-upload-zone:hover {
    border-color: var(--primary);
    transform:    translateY(-2px);
}

.pdf-upload-zone-active {
    border-color: var(--primary);
    background:   #192133;
    transform:    scale(1.01);
    box-shadow:   0 0 0 4px var(--primary-dim);
}

.pdf-upload-title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--text);
}

.pdf-upload-subtitle {
    color:         var(--text-muted);
    font-size:     0.88rem;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════
   PROGRESS
══════════════════════════════════════════ */

.pdf-progress {
    width:         100%;
    max-width:     380px;
    height:        5px;
    margin-top:    14px;
    border-radius: 999px;
    overflow:      hidden;
    background:    rgba(255,255,255,0.07);
}

.pdf-progress-fill {
    width:         0%;
    height:        100%;
    background:    var(--primary);
    transition:    width 120ms linear;
    border-radius: 999px;
}

.pdf-progress-text {
    color:      var(--text-muted);
    font-size:  0.82rem;
    min-height: 1em;
    margin-top: 8px;
}

/* ══════════════════════════════════════════
   BUTTONS  (shared base)
══════════════════════════════════════════ */

.pdf-main-button,
.pdf-download-button,
.floating-button {
    border:        none;
    border-radius: 14px;
    padding:       13px 22px;
    font-size:     0.92rem;
    font-weight:   700;
    cursor:        pointer;
    transition:
        transform  120ms ease,
        background 120ms ease,
        opacity    120ms ease;
    line-height:   1;
}

.pdf-main-button {
    background: var(--primary);
    color:      #071120;
}

.pdf-main-button:hover {
    background: var(--primary-hover);
    transform:  translateY(-2px);
}

.pdf-button-loading {
    opacity: 0.65;
    cursor:  wait;
}

/* ══════════════════════════════════════════
   DOWNLOAD PANEL
══════════════════════════════════════════ */

.pdf-download-panel {
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   22px;
    padding:         22px;
    display:         none;
    flex-direction:  column;
    justify-content: space-between;
    gap:             14px;
    box-shadow:      var(--shadow-sm);
    
}

.pdf-download-panel-visible {
    display: flex;
}

.pdf-download-info {
    color:       var(--text-muted);
    line-height: 1.5;
    font-size:   0.88rem;
    flex:        1;
}

.pdf-download-button {
    background:    var(--primary);
    color:         #071120;
    width:         100%;
    border-radius: 14px;
}

.pdf-download-button:hover {
    background: var(--primary-hover);
    transform:  translateY(-2px);
}

/* ══════════════════════════════════════════
   PAGE GRID
══════════════════════════════════════════ */

.pdf-pages-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
}

/* ══════════════════════════════════════════
   PAGE / FILE CARD
══════════════════════════════════════════ */

.pdf-page-card {
    position:       relative;
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    box-shadow:     var(--shadow-sm);
    cursor:         grab;
    user-select:    none;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:
        border-color 160ms ease,
        box-shadow   160ms ease,
        opacity      200ms ease,
        transform    200ms ease;
}

.pdf-page-card:active {
    cursor: grabbing;
}

.pdf-page-card:hover {
    border-color: var(--border-light);
    transform:    translateY(-3px);
    box-shadow:   var(--shadow);
}

/* ── Preview image ── */

.pdf-preview-image {
    width:          100%;
    height:         290px;   /* slightly taller than before for readability */
    object-fit:     cover;
    object-position:top center;
    background:     #fff;
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

/* ── File-count badge (File mode only) ── */

.pdf-file-badge {
    position:        absolute;
    top:             9px;
    left:            9px;
    background:      rgba(0,0,0,0.55);
    color:           var(--text);
    font-size:       0.78rem;
    font-weight:     700;
    letter-spacing:  0.02em;
    padding:         3px 9px;
    border-radius:   6px;
    backdrop-filter: blur(8px);
    pointer-events:  none;
    z-index:         2;
}

/* ── Card footer: ← label → ── */

.pdf-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px;
    border-top:      1px solid var(--border);
    gap:             4px;
    background:      var(--surface);
}

.pdf-page-label {
    color:          var(--text-muted);
    font-size:      0.88rem;
    font-weight:    600;
    letter-spacing: 0.01em;
    flex:           1;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* ── Arrow move buttons ── */

.move-btn {
    width:          34px;
    height:         34px;
    border:         none;
    border-radius:  var(--radius-sm);
    background:     transparent;
    color:          var(--text-muted);
    font-size:      1rem;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content:center;
    transition:
        background 120ms ease,
        color      120ms ease,
        transform  120ms ease;
    flex-shrink:    0;
    padding:        0;
    position:       relative;
}

.move-btn::after {
    content:  '';
    position: absolute;
    inset:    -6px;
}

.move-btn:not(:disabled):hover {
    background: var(--primary-dim);
    color:      var(--primary);
    transform:  scale(1.1);
}

.move-btn:not(:disabled):active {
    transform: scale(0.95);
}

.move-btn:disabled {
    opacity: 0.2;
    cursor:  default;
}

/* ── Remove button ── */

.pdf-remove-btn {
    position:        absolute;
    top:             9px;
    right:           9px;
    width:           30px;
    height:          30px;
    border:          none;
    border-radius:   8px;
    background:      rgba(0,0,0,0.5);
    color:           #ccd3de;
    font-size:       1.05rem;
    cursor:          pointer;
    backdrop-filter: blur(8px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:
        background 120ms ease,
        color      120ms ease,
        transform  120ms ease;
    z-index: 2;
}

.pdf-remove-btn:hover {
    background: var(--danger);
    color:      #fff;
    transform:  scale(1.1);
}

/* ══════════════════════════════════════════
   DRAG STATES
══════════════════════════════════════════ */

.pdf-page-card.pdf-dragging {
    opacity:        0.35;
    transform:      scale(0.96);
    box-shadow:     none;
    border-color:   var(--border);
    pointer-events: none;
}

.pdf-page-card.drop-before {
    box-shadow:  -4px 0 0 var(--primary), var(--shadow-sm);
    border-color: var(--primary);
}

.pdf-page-card.drop-after {
    box-shadow:  4px 0 0 var(--primary), var(--shadow-sm);
    border-color: var(--primary);
}

/* ══════════════════════════════════════════
   FLOATING BAR
══════════════════════════════════════════ */

.floating-bar {
    position:   fixed;
    left:       50%;
    bottom:     20px;
    transform:  translateX(-50%) translateY(110px);
    opacity:    0;
    pointer-events: none;

    display:     flex;
    align-items: center;
    gap:         12px;

    background:          rgba(18,22,30,0.88);
    backdrop-filter:     blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:       1px solid var(--border);
    padding:      14px 14px;
    border-radius:24px;
    box-shadow:   var(--shadow-lg);

    transition:
        transform    220ms cubic-bezier(0.34,1.56,0.64,1),
        opacity      200ms ease,
        border-color 120ms ease,
        box-shadow   120ms ease;

    z-index: 1000;
}

.floating-bar-visible {
    transform:      translateX(-50%) translateY(0);
    opacity:        1;
    pointer-events: auto;
}

.floating-bar-drag {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px var(--primary-dim), var(--shadow-lg);
}

.floating-button {
    min-width:  180px;
    background: rgba(255,255,255,0.07);
    color:      var(--text);
    border:     1px solid var(--border-light);
}

.floating-button:hover {
    background: rgba(255,255,255,0.12);
    transform:  translateY(-2px);
}

.floating-button-primary {
    background: var(--primary);
    color:      #071120;
    border:     none;
}

.floating-button-primary:hover {
    background: var(--primary-hover);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

@media (max-width: 900px) {
    .pdf-top-bar {
        grid-template-columns: 1fr;
    }

    .pdf-download-panel {
        flex-direction: row;
        align-items:    center;
    }

    .pdf-download-button {
        width:      auto;
        flex-shrink:0;
    }
}

@media (max-width: 700px) {
    .pdf-page {
        padding: 20px 12px 130px;
    }

    .pdf-title {
        font-size: 1.9rem;
    }

    /* Always 2-column grid on mobile — keeps overview compact */
    .pdf-pages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Smaller preview on mobile so more cards fit on screen */
    .pdf-preview-image {
        height: 148px;
    }

    .move-btn {
        width:  36px;
        height: 36px;
    }

    .pdf-remove-btn {
        width:  32px;
        height: 32px;
        top:    6px;
        right:  6px;
    }

    .pdf-file-badge {
        font-size: 0.68rem;
        padding:   2px 7px;
    }

    .floating-bar {
        width:           calc(100% - 24px);
        justify-content: center;
        padding:         12px;
    }

    .floating-button {
        min-width: unset;
        flex:      1;
        padding:   13px 10px;
        font-size: 0.85rem;
    }

    .pdf-download-panel {
        flex-direction: column;
    }

    .pdf-download-button {
        width: 100%;
    }

    /* Mode toggle: full width, equal-sized buttons */
    .mode-toggle {
        width: 100%;
    }

    .mode-btn {
        flex:    1;
        padding: 8px 12px;
        text-align: center;
    }
}

/* At very narrow widths keep 2 columns (override the old 1-col rule) */
@media (max-width: 420px) {
    .pdf-pages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pdf-preview-image {
        height: 138px;
    }
}