/*
 ============================================================
 Legal Assistant Platform
 Authored & Architected by: 
    Hany Awad Farag Gerges
 All rights reserved © 2026
 ============================================================
*/


/* ═══════════════════════════════════════════════════════════════
   Document Gallery — Production CSS
   ═══════════════════════════════════════════════════════════════ */

.doc-gallery {
    /* ── Palette ── */
    --dg-bg:             #16181d;
    --dg-surface:        #1e2128;
    --dg-surface-2:      #262932;
    --dg-border:         rgba(255,255,255,.07);
    --dg-radius:         0.75rem;
    --dg-shadow:         0 24px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);

    /* ── Toolbar ── */
    --dg-toolbar-bg:     #1a1d24;
    --dg-toolbar-border: rgba(255,255,255,.06);
    --dg-toolbar-h:      3.25rem;

    /* ── Buttons ── */
    --dg-btn-bg:         rgba(255,255,255,.06);
    --dg-btn-hover:      rgba(255,255,255,.12);
    --dg-btn-active:     rgba(255,255,255,.18);
    --dg-btn-color:      #c8cdd6;
    --dg-btn-border:     rgba(255,255,255,.08);
    --dg-btn-radius:     0.45rem;
    --dg-btn-size:       2.1rem;

    /* ── Titlebar ── */
    --dg-title-bg:       #111318;
    --dg-title-color:    #edf0f5;
    --dg-title-h:        3.25rem;
    --dg-accent:         #4e8ef7;
    --dg-accent-glow:    rgba(78,142,247,.25);

    /* ── Viewer ── */
    --dg-viewer-min-h:   74vh;
    --dg-viewer-bg:      #0e1014;

    /* ── Misc ── */
    --dg-spinner-color:  #4e8ef7;
    --dg-spinner-size:   2.75rem;
    --dg-muted:          #555c6b;
    --dg-dl-bg:          #4e8ef7;
    --dg-dl-hover:       #3a7de8;
    --dg-divider:        rgba(255,255,255,.08);
    --dg-ease:           0.18s cubic-bezier(.4,0,.2,1);

    /* ── Thumb strip ── */
    --dg-thumb-w:        80px;

    direction:     rtl;
    text-align:    right;
    font-family:   'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
    background:    var(--dg-bg);
    border:        1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    box-shadow:    var(--dg-shadow);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    position:      relative;

    /* Open animation */
    opacity:   0;
    transform: translateY(12px) scale(.985);
    transition: opacity .25s var(--dg-ease), transform .25s var(--dg-ease);
}

.doc-gallery.is-open {
    opacity:   1;
    transform: translateY(0) scale(1);
}

.doc-gallery.is-closing {
    opacity:   0;
    transform: translateY(8px) scale(.99);
}

/* ── Titlebar ─────────────────────────────────────────────────── */

.doc-gallery__titlebar {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    background:     var(--dg-title-bg);
    color:          var(--dg-title-color);
    min-height:     var(--dg-title-h);
    padding:        0 1rem;
    gap:            .75rem;
    flex-shrink:    0;
    border-bottom:  1px solid var(--dg-border);
    position:       relative;
}

.doc-gallery__titlebar::before {
    content:     '';
    position:    absolute;
    inset-inline-end: 0;
    top:         0;
    bottom:      0;
    width:       3px;
    background:  var(--dg-accent);
    border-radius: 0 var(--dg-radius) var(--dg-radius) 0;
}

.doc-gallery__titlebar-text {
    display:     flex;
    align-items: baseline;
    gap:         .75rem;
    overflow:    hidden;
}

.doc-gallery__title {
    font-size:    .97rem;
    font-weight:  600;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    letter-spacing: .01em;
}

.doc-gallery__subtitle {
    font-size:   .78rem;
    color:       var(--dg-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.doc-gallery__close-btn {
    background:    transparent;
    border:        none;
    color:         var(--dg-btn-color);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         2rem;
    height:        2rem;
    border-radius: var(--dg-btn-radius);
    flex-shrink:   0;
    opacity:       .6;
    transition:    opacity var(--dg-ease), background var(--dg-ease), color var(--dg-ease);
}

.doc-gallery__close-btn:hover {
    opacity:    1;
    background: rgba(239,68,68,.15);
    color:      #f87171;
}

/* ── Toolbar ──────────────────────────────────────────────────── */

.doc-gallery__toolbar {
    display:      flex;
    align-items:  center;
    flex-wrap:    wrap;
    gap:          .2rem;
    padding:      .4rem .75rem;
    background:   var(--dg-toolbar-bg);
    border-color: var(--dg-toolbar-border);
    border-style: solid;
    border-width: 0;
    min-height:   var(--dg-toolbar-h);
    flex-shrink:  0;
    position:     sticky;
    z-index:      10;
}

.doc-gallery__toolbar--top    { border-bottom-width: 1px; top: 0; }
.doc-gallery__toolbar--bottom { border-top-width: 1px;    bottom: 0; }

.doc-gallery__toolbar-group {
    display:     flex;
    align-items: center;
    gap:         .2rem;
}

.doc-gallery__toolbar-divider {
    width:         1px;
    height:        1.4rem;
    background:    var(--dg-divider);
    margin:        0 .3rem;
    flex-shrink:   0;
}

/* ── Buttons ──────────────────────────────────────────────────── */

.doc-gallery__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .3rem;
    min-width:       var(--dg-btn-size);
    height:          var(--dg-btn-size);
    padding:         0 .55rem;
    background:      var(--dg-btn-bg);
    color:           var(--dg-btn-color);
    border:          1px solid var(--dg-btn-border);
    border-radius:   var(--dg-btn-radius);
    cursor:          pointer;
    font-size:       .82rem;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background var(--dg-ease), color var(--dg-ease),
                     border-color var(--dg-ease), box-shadow var(--dg-ease);
    user-select:     none;
    position:        relative;
}

.doc-gallery__btn[title]:hover::after {
    content:         attr(title);
    position:        absolute;
    bottom:          calc(100% + 6px);
    left:            50%;
    transform:       translateX(-50%);
    background:      #0a0c10;
    color:           #c8cdd6;
    font-size:       .72rem;
    padding:         .25rem .55rem;
    border-radius:   .3rem;
    white-space:     nowrap;
    pointer-events:  none;
    z-index:         100;
    border:          1px solid var(--dg-border);
    box-shadow:      0 4px 12px rgba(0,0,0,.4);
}

.doc-gallery__btn:hover:not(:disabled) {
    background:    var(--dg-btn-hover);
    color:         #edf0f5;
    border-color:  rgba(255,255,255,.14);
    text-decoration: none;
}

.doc-gallery__btn:active:not(:disabled) {
    background: var(--dg-btn-active);
    transform:  scale(.96);
}

.doc-gallery__btn:disabled {
    opacity: .3;
    cursor:  not-allowed;
}

.doc-gallery__btn--download {
    background:   var(--dg-dl-bg);
    color:        #fff;
    border-color: transparent;
    font-weight:  500;
}

.doc-gallery__btn--download:hover:not(:disabled) {
    background: var(--dg-dl-hover);
    color:      #fff;
    box-shadow: 0 0 0 3px var(--dg-accent-glow);
}

.doc-gallery__btn--accent {
    background:   transparent;
    color:        var(--dg-accent);
    border-color: var(--dg-accent);
}

.doc-gallery__btn--accent:hover {
    background: var(--dg-accent-glow);
    color:      var(--dg-accent);
}

/* ── Zoom label ───────────────────────────────────────────────── */

.dg-zoom-label {
    font-size:    .78rem;
    color:        var(--dg-muted);
    min-width:    3rem;
    text-align:   center;
    font-variant-numeric: tabular-nums;
    padding:      0 .1rem;
}

/* ── Page controls ────────────────────────────────────────────── */

.doc-gallery__page-select {
    height:        var(--dg-btn-size);
    padding:       0 .4rem;
    background:    var(--dg-surface-2);
    border:        1px solid var(--dg-btn-border);
    border-radius: var(--dg-btn-radius);
    font-size:     .82rem;
    color:         var(--dg-btn-color);
    cursor:        pointer;
    max-width:     5rem;
    direction:     rtl;
}

.doc-gallery__page-select:focus,
.dg-page-input:focus {
    outline:        2px solid var(--dg-accent);
    outline-offset: 2px;
}

.dg-page-input {
    height:        var(--dg-btn-size);
    width:         3.5rem;
    padding:       0 .5rem;
    background:    var(--dg-surface-2);
    border:        1px solid var(--dg-btn-border);
    border-radius: var(--dg-btn-radius);
    font-size:     .82rem;
    color:         var(--dg-btn-color);
    text-align:    center;
    direction:     ltr;
}

.doc-gallery__counter {
    font-size:   .78rem;
    color:       var(--dg-muted);
    white-space: nowrap;
    padding:     0 .25rem;
}

/* ── Viewer ───────────────────────────────────────────────────── */

.doc-gallery__viewer-wrap {
    display:  flex;
    flex:     1;
    overflow: hidden;
    position: relative;
}

.doc-gallery__viewer {
    position:        relative;
    min-height:      var(--dg-viewer-min-h);
    background:      var(--dg-viewer-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        auto;
    flex:            1;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
    background-size: 24px 24px;
}

.doc-gallery__image {
    max-width:      100%;
    max-height:     100%;
    object-fit:     contain;
    display:        block;
    margin:         auto;
    transform-origin: center center;
    transition:     transform .15s cubic-bezier(.4,0,.2,1);
    user-select:    none;
    -webkit-user-drag: none;
}

.doc-gallery__frame {
    width:       100%;
    min-height:  var(--dg-viewer-min-h);
    border:      none;
    display:     block;
    transition:  transform .15s cubic-bezier(.4,0,.2,1);
}

/* ── Spinner ──────────────────────────────────────────────────── */

.doc-gallery__spinner {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .75rem;
    background:      rgba(14,16,20,.7);
    backdrop-filter: blur(4px);
    z-index:         5;
}

.doc-gallery__spinner-inner {
    width:         var(--dg-spinner-size);
    height:        var(--dg-spinner-size);
    border:        3px solid rgba(78,142,247,.15);
    border-top-color: var(--dg-spinner-color);
    border-radius: 50%;
    animation:     dg-spin .7s linear infinite;
}

.doc-gallery__spinner-text {
    font-size: .78rem;
    color:     var(--dg-muted);
}

@keyframes dg-spin { to { transform: rotate(360deg); } }

/* ── Thumbnail strip ──────────────────────────────────────────── */

.dg-thumb-strip {
    width:          var(--dg-thumb-w);
    background:     #12141a;
    border-inline-start: 1px solid var(--dg-border);
    overflow-y:     auto;
    overflow-x:     hidden;
    display:        none;
    flex-direction: column;
    flex-shrink:    0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.dg-thumb-strip.is-visible { display: flex; }

.dg-thumb-list {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        6px;
    flex:           1;
}

.dg-thumb {
    width:           100%;
    height:          96px;
    background:      var(--dg-surface-2);
    border:          2px solid transparent;
    border-radius:   .35rem;
    cursor:          pointer;
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         0;
    flex-shrink:     0;
    position:        relative;
    transition:      border-color var(--dg-ease), box-shadow var(--dg-ease);
}

.dg-thumb:hover {
    border-color: rgba(78,142,247,.5);
}

.dg-thumb.is-active {
    border-color: var(--dg-accent);
    box-shadow:   0 0 0 1px var(--dg-accent-glow);
}

.dg-thumb img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

.dg-thumb i {
    font-size: 1.4rem;
    color:     var(--dg-muted);
}

.dg-thumb span {
    position:    absolute;
    bottom:      2px;
    left:        50%;
    transform:   translateX(-50%);
    font-size:   .62rem;
    color:       #fff;
    background:  rgba(0,0,0,.65);
    padding:     1px 4px;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Thumbnail pager ──────────────────────────────────────────── */

.dg-thumb-pager {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding:         5px 6px;
    border-top:      1px solid var(--dg-border);
    background:      #0e1014;
    flex-shrink:     0;
}

.dg-thumb-pager__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    padding:         0;
    border:          1px solid var(--dg-btn-border);
    border-radius:   .3rem;
    background:      var(--dg-btn-bg);
    color:           var(--dg-btn-color);
    cursor:          pointer;
    font-size:       .7rem;
    transition:      background var(--dg-ease), border-color var(--dg-ease);
    flex-shrink:     0;
}

.dg-thumb-pager__btn:hover:not(:disabled) {
    background:   var(--dg-btn-hover);
    border-color: rgba(255,255,255,.18);
    color:        #edf0f5;
}

.dg-thumb-pager__btn:disabled {
    opacity: .3;
    cursor:  not-allowed;
}

.dg-thumb-pager__info {
    font-size:   .65rem;
    color:       var(--dg-muted);
    min-width:   32px;
    text-align:  center;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* ── Toast ────────────────────────────────────────────────────── */

.dg-toast {
    position:        absolute;
    bottom:          4.5rem;
    left:            50%;
    transform:       translateX(-50%) translateY(8px);
    background:      rgba(10,12,16,.92);
    color:           #c8cdd6;
    font-size:       .82rem;
    padding:         .45rem 1rem;
    border-radius:   2rem;
    border:          1px solid var(--dg-border);
    backdrop-filter: blur(8px);
    white-space:     nowrap;
    z-index:         200;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .2s ease, transform .2s ease;
}

.dg-toast.is-visible {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ── Empty / unavailable ──────────────────────────────────────── */

.doc-gallery__doc-unavailable {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            1rem;
    padding:        3rem;
    color:          var(--dg-muted);
    text-align:     center;
}

.doc-gallery__doc-unavailable i { font-size: 3rem; }
.doc-gallery__doc-unavailable p { margin: 0; font-size: .9rem; }

.doc-gallery__empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            1rem;
    padding:        4rem 2rem;
    color:          var(--dg-muted);
    text-align:     center;
    min-height:     20rem;
}

.doc-gallery__empty i { font-size: 3.5rem; opacity: .4; }
.doc-gallery__empty p { margin: 0; font-size: .95rem; opacity: .6; }
    .doc-gallery__empty small {
        font-size: .75rem;
        opacity: .45;
    }

/* ── Fullscreen ───────────────────────────────────────────────── */

.doc-gallery.is-fullscreen {
    position:      fixed;
    inset:         0;
    z-index:       9999;
    border-radius: 0;
    border:        none;
    box-shadow:    none;
    --dg-viewer-min-h: calc(100vh - 9.75rem);
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 576px) {
    .doc-gallery__toolbar  { padding: .25rem .4rem; gap: .15rem; }
    .doc-gallery__btn span { display: none; }
    .doc-gallery__subtitle { display: none; }
    .doc-gallery__toolbar-divider { margin: 0 .1rem; }
    .doc-gallery__page-select     { max-width: 3.5rem; }
    .dg-thumb-strip { --dg-thumb-w: 62px; }
    .dg-thumb-pager__info { display: none; }
    .doc-gallery__titlebar::before { display: none; }
}

/* ── Print ────────────────────────────────────────────────────── */

@media print {
    .doc-gallery__titlebar,
    .doc-gallery__toolbar--top,
    .doc-gallery__toolbar--bottom,
    .dg-thumb-strip,
    .dg-thumb-pager { display: none !important; }

    .doc-gallery { border: none; box-shadow: none; background: #fff; }
    .doc-gallery__viewer { min-height: unset; overflow: visible; background: #fff; }
    .doc-gallery__image  { max-width: 100%; max-height: unset; }
}

.dg-page-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--dg-muted);
    font-size: .9rem;
    padding: 2rem;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .dg-page-error i {
        font-size: 2.5rem;
        opacity: .5;
    }