/* ============================================
   toolbar.css  — Professional toolbar styling
   Works on ALL three toolbars unchanged:
     _DocTopToolBox.cshtml
     _MasterTopToolBox.cshtml
     _ReportTopToolBox.cshtml
   Reference once in _Layout.cshtml:
     <link rel="stylesheet" href="~/css/toolbar.css" />
   ============================================ */

/* ---- Wrapper background ---- */
.toptoolbox {
    background-color: #ffffff !important;
}

    /* ---- Main navbar bar ---- */
    .toptoolbox .navbar,
    .toptoolbox .nav.navbar {
        background: #ffffff !important;
        border: 1px solid #e7e5e4 !important;
        border-radius: 6px !important;
        margin-top: 8px !important;
        padding: 0 6px !important;
        height: 36px !important;
        min-height: unset !important;
        box-shadow: 0 1px 4px rgba(44,40,36,0.07) !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* ---- All toolbar buttons ---- */
    .toptoolbox .btn-default,
    .toptoolbox .btn.btn-default {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        color: #44403c !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        height: 26px !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        letter-spacing: 0.2px !important;
        transition: background .12s, border-color .12s !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

        .toptoolbox .btn-default:hover,
        .toptoolbox .btn-default:focus {
            background: #fffbeb !important;
            border-color: #fde68a !important;
            color: #1c1917 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .toptoolbox .btn-default:active {
            transform: scale(0.98) !important;
            background: #fef3c7 !important;
        }

    /* Save — green tint */
    .toptoolbox #lnkSave {
        color: #15803d !important;
    }

        .toptoolbox #lnkSave:hover {
            background: #f0fdf4 !important;
            border-color: #bbf7d0 !important;
            color: #15803d !important;
        }

    /* Refresh (Report toolbar) — blue tint */
    .toptoolbox #lnkRefresh {
        color: #0369a1 !important;
    }

        .toptoolbox #lnkRefresh:hover {
            background: #f0f9ff !important;
            border-color: #bae6fd !important;
            color: #0369a1 !important;
        }

    /* Delete — red tint */
    .toptoolbox #lnkDelete {
        color: #b91c1c !important;
    }

        .toptoolbox #lnkDelete:hover {
            background: #fff5f5 !important;
            border-color: #fecaca !important;
            color: #b91c1c !important;
        }

    /* Disabled */
    .toptoolbox .btn-default.disabled,
    .toptoolbox .btn-default:disabled,
    .toptoolbox a.btn-default.disabled {
        opacity: 0.40 !important;
        pointer-events: none !important;
    }

    /* ---- Nav items ---- */
    .toptoolbox .navbar-nav {
        gap: 1px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

        .toptoolbox .navbar-nav .nav-item {
            margin-right: 2px !important;
        }

    /* ---- Split button groups (Print ▾, Action ▾) ---- */
    .toptoolbox .btn-group {
        display: inline-flex !important;
        align-items: center !important;
        height: 26px !important;
    }

        .toptoolbox .btn-group > .btn-default:not(.dropdown-toggle) {
            border-radius: 4px 0 0 4px !important;
            border-right: 0 !important;
        }

        .toptoolbox .btn-group > .btn-default.dropdown-toggle {
            border-radius: 0 4px 4px 0 !important;
            border-left: 1px solid #e7e5e4 !important;
            padding: 0 7px !important;
            min-width: unset !important;
            width: 24px !important;
        }

            .toptoolbox .btn-group > .btn-default.dropdown-toggle:hover {
                border-left-color: #fde68a !important;
            }

    /* ---- Dropdown menus ---- */
    .toptoolbox .dropdown-menu {
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 16px rgba(44,40,36,0.13) !important;
        padding: 4px 0 !important;
        min-width: 190px !important;
        z-index: 9999 !important;
        background: #ffffff !important;
    }

        .toptoolbox .dropdown-menu .dropdown-item {
            font-size: 12px !important;
            color: #44403c !important;
            padding: 7px 16px !important;
            font-weight: 500 !important;
            display: flex !important;
            align-items: center !important;
        }

            .toptoolbox .dropdown-menu .dropdown-item:hover,
            .toptoolbox .dropdown-menu .dropdown-item:focus {
                background: #fffbeb !important;
                color: #1c1917 !important;
            }

            .toptoolbox .dropdown-menu .dropdown-item i,
            .toptoolbox .dropdown-menu .dropdown-item .fa,
            .toptoolbox .dropdown-menu .dropdown-item .fas {
                width: 16px !important;
                color: #a8a29e !important;
                margin-right: 8px !important;
                font-size: 11px !important;
            }

        .toptoolbox .dropdown-menu .dropdown-divider {
            margin: 3px 0 !important;
            border-color: #e7e5e4 !important;
        }

    /* ---- Scroll nav arrows (« ») ---- */
    .toptoolbox .nav-link.text-red,
    .toptoolbox a.nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 26px !important;
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        color: #a8a29e !important;
        font-size: 11px !important;
        padding: 0 !important;
        transition: all .12s !important;
        flex-shrink: 0 !important;
    }

        .toptoolbox .nav-link.text-red:hover,
        .toptoolbox a.nav-link:hover {
            background: #fffbeb !important;
            border-color: #d97706 !important;
            color: #44403c !important;
        }

    /* ---- Doc# input (TDocNo) ---- */
    .toptoolbox #TDocNo {
        width: 68px !important;
        height: 26px !important;
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: #44403c !important;
        background: #fafaf9 !important;
        padding: 0 4px !important;
        box-shadow: none !important;
    }

    /* ---- Date input (TDocDt) ---- */
    .toptoolbox #TDocDt {
        width: 98px !important;
        height: 26px !important;
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        color: #78716c !important;
        background: #fafaf9 !important;
        padding: 0 6px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    /* ---- Float-right area: Doc toolbar (float-sm-right) ---- */
    .toptoolbox .float-sm-right {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding-left: 8px !important;
        padding-right: 4px !important;
        border-left: 1px solid #e7e5e4 !important;
        flex-shrink: 0 !important;
    }

        .toptoolbox .float-sm-right .row {
            display: flex !important;
            align-items: center !important;
            gap: 5px !important;
            flex-wrap: nowrap !important;
            margin: 0 !important;
        }

        .toptoolbox .float-sm-right [class*="col-"] {
            padding: 0 !important;
            width: auto !important;
            flex: none !important;
        }

        .toptoolbox .float-sm-right .input-group {
            height: 26px !important;
            width: auto !important;
            flex-wrap: nowrap !important;
        }

        /* Date calendar append icon */
        .toptoolbox .float-sm-right .input-group-append .input-group-text,
        .toptoolbox .float-sm-right .input-group-append .btn {
            height: 26px !important;
            padding: 0 6px !important;
            background: #fffbeb !important;
            border: 1px solid #e7e5e4 !important;
            border-left: 0 !important;
            border-radius: 0 4px 4px 0 !important;
            color: #d97706 !important;
            font-size: 11px !important;
            cursor: pointer !important;
        }

        .toptoolbox .float-sm-right #TDocDt {
            border-right: 0 !important;
            border-radius: 4px 0 0 4px !important;
        }

    /* ---- Right area: Master toolbar (uses .row directly) ---- */
    .toptoolbox > div > .row {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid #e7e5e4 !important;
        flex-shrink: 0 !important;
    }

        .toptoolbox > div > .row [class*="col-"] {
            padding: 0 !important;
            width: auto !important;
            flex: none !important;
        }

        .toptoolbox > div > .row .input-group {
            height: 26px !important;
            width: auto !important;
            flex-wrap: nowrap !important;
        }

/* ---- omtoptoolbox (alternate toolbar style) ---- */
.omtoptoolbox .btn-default {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    color: #44403c !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    height: 26px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background .12s, border-color .12s !important;
}

    .omtoptoolbox .btn-default:hover {
        background: #fffbeb !important;
        border-color: #fde68a !important;
        color: #1c1917 !important;
    }

/* ============================================
   MODAL STYLING — all toolbar modals
   Covers: attachment, PDF viewer, delete,
           open list, general entries
   ============================================ */

/* ---- Modal base ---- */
.modal-content {
    border: 1px solid #e7e5e4 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(44,40,36,0.14) !important;
    overflow: hidden !important;
}

/* ---- Modal header ---- */
.modal-header {
    background: #0369a1 !important;
    border-bottom: none !important;
    padding: 10px 16px !important;
    border-radius: 8px 8px 0 0 !important;
    align-items: center !important;
}

    .modal-header .modal-title,
    .modal-header h4.modal-title,
    .modal-header h6.modal-title {
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

        .modal-header .modal-title i,
        .modal-header .modal-title .fa {
            color: rgba(255,255,255,0.85) !important;
            font-size: 13px !important;
        }

        .modal-header .modal-title small {
            font-size: 11px !important;
            font-weight: 400 !important;
            color: rgba(255,255,255,0.75) !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
        }

            .modal-header .modal-title small i.text-warning {
                color: #fde68a !important;
            }

    /* Close button */
    .modal-header .close {
        color: rgba(255,255,255,0.85) !important;
        opacity: 1 !important;
        text-shadow: none !important;
        font-size: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        transition: color .12s !important;
    }

        .modal-header .close:hover {
            color: #ffffff !important;
            opacity: 1 !important;
        }

/* ---- Modal body ---- */
.modal-body {
    padding: 16px !important;
    background: #fafaf9 !important;
}

/* ---- Modal footer ---- */
.modal-footer {
    background: #f5f4f1 !important;
    border-top: 1px solid #e7e5e4 !important;
    padding: 8px 16px !important;
    border-radius: 0 0 8px 8px !important;
}

/* ---- Attachment modal specific ---- */
/* Upload iframe panel */
#modal-attachment-viewer .col-sm-6:first-child {
    border: 1px solid #e7e5e4 !important;
    border-radius: 6px !important;
    height: 417px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
}

/* Attached files card inside modal */
#modal-attachment-viewer .card {
    border: 1px solid #e7e5e4 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

#modal-attachment-viewer .card-header {
    background: #f5f4f1 !important;
    border-bottom: 1px solid #e7e5e4 !important;
    border-left: 3px solid #d97706 !important;
    padding: 6px 12px !important;
    border-radius: 6px 6px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#modal-attachment-viewer .card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #44403c !important;
    margin: 0 !important;
}

#modal-attachment-viewer .card-body {
    padding: 8px !important;
    background: #ffffff !important;
    max-height: 355px !important;
    overflow-y: auto !important;
}

/* Refresh icon */
#modal-attachment-viewer .fa-sync {
    color: #15803d !important;
    font-size: 12px !important;
    transition: transform .3s !important;
}

    #modal-attachment-viewer .fa-sync:hover {
        transform: rotate(180deg) !important;
    }

/* ---- PDF viewer modal ---- */
#modal-print-pdf-viewer .modal-body {
    padding: 0 !important;
    background: #f5f4f1 !important;
    min-height: 250px !important;
}

#modal-print-pdf-viewer object {
    display: block !important;
    border: none !important;
}

/* ---- Delete confirm modal ---- */
#modal-delete-document .modal-header,
#modal-delete-master .modal-header {
    background: #b91c1c !important;
}

#modal-delete-document .modal-body,
#modal-delete-master .modal-body {
    background: #ffffff !important;
    padding: 16px !important;
}

#modal-delete-document textarea,
#modal-delete-master textarea {
    border: 1px solid #e7e5e4 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    resize: vertical !important;
}

    #modal-delete-document textarea:focus,
    #modal-delete-master textarea:focus {
        border-color: #d97706 !important;
        box-shadow: 0 0 0 3px rgba(217,119,6,0.10) !important;
        outline: none !important;
    }

/* ---- Open list modal ---- */
#modal_listofmaster_open .modal-body {
    background: #ffffff !important;
    padding: 12px 16px !important;
}

/* ---- General entries / log modal ---- */
#modal-view-general-view .modal-body {
    background: #ffffff !important;
    padding: 0 !important;
}

/* ============================================
   ATTACHMENT MODAL — draggable + resizable
   ============================================ */
#modal-attachment-viewer .modal-dialog {
    max-width: none !important;
    width: 820px !important;
    margin: 40px auto !important;
}

#modal-attachment-viewer .modal-content {
    border: 1px solid #e7e5e4 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(44,40,36,0.18) !important;
    overflow: hidden !important;
    resize: both !important;
    min-width: 520px !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

#modal-attachment-viewer .modal-header {
    background: #44403c !important;
    border-bottom: none !important;
    padding: 8px 14px !important;
    cursor: move !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#modal-attachment-viewer .modal-title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    flex: 1 !important;
}

    #modal-attachment-viewer .modal-title i {
        color: #fde68a !important;
    }

    #modal-attachment-viewer .modal-title small {
        color: rgba(255,255,255,0.65) !important;
        font-size: 11px !important;
    }

    #modal-attachment-viewer .modal-title .text-warning {
        color: #fde68a !important;
    }

/* Window control buttons */
#modal-attachment-viewer .modal-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#modal-attachment-viewer .btn-modal-ctrl {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    cursor: pointer !important;
    transition: opacity .15s !important;
    padding: 0 !important;
    color: rgba(0,0,0,0.55) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

    #modal-attachment-viewer .btn-modal-ctrl:hover {
        opacity: 0.75 !important;
    }

#modal-attachment-viewer .btn-modal-maximize {
    background: #fde68a !important;
}

#modal-attachment-viewer .btn-modal-restore {
    background: #86efac !important;
    display: none !important;
}

#modal-attachment-viewer .btn-modal-close {
    background: #fca5a5 !important;
}

#modal-attachment-viewer .modal-body {
    padding: 10px !important;
    flex: 1 !important;
    overflow: auto !important;
    background: #f5f4f1 !important;
}

    #modal-attachment-viewer .modal-body .row {
        height: 100% !important;
        min-height: 380px !important;
    }

#modal-attachment-viewer .col-sm-6:first-child {
    border: 1px solid #e7e5e4 !important;
    border-radius: 6px !important;
    min-height: 380px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
}

#modal-attachment-viewer #iframe-attachment {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    border: none !important;
    display: block !important;
}

#modal-attachment-viewer .col-sm-6:last-child {
    padding-left: 8px !important;
    padding-right: 0 !important;
}

#modal-attachment-viewer .card {
    border: 1px solid #e7e5e4 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#modal-attachment-viewer .card-header {
    background: #fffbeb !important;
    border-bottom: 1px solid #fde68a !important;
    border-left: 3px solid #d97706 !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#modal-attachment-viewer .card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #44403c !important;
    margin: 0 !important;
}

/* Resize grip hint at bottom-right */
#modal-attachment-viewer .modal-content::after {
    content: '' !important;
    position: absolute !important;
    bottom: 3px !important;
    right: 3px !important;
    width: 12px !important;
    height: 12px !important;
    border-right: 2px solid #d0ccc8 !important;
    border-bottom: 2px solid #d0ccc8 !important;
    border-radius: 0 0 4px 0 !important;
    pointer-events: none !important;
}

/* Maximized state */
#modal-attachment-viewer.maximized .modal-dialog {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-height: 100vh !important;
}

#modal-attachment-viewer.maximized .modal-content {
    height: 100vh !important;
    border-radius: 0 !important;
    resize: none !important;
}


/* ============================================
   ALL MODALS — professional dark header
   Draggable + maximizable via toolbar.js
   No cshtml changes required
   ============================================ */

/* Modal content */
.modal .modal-content {
    border: 1px solid #d6d3d1 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(28,25,23,0.22) !important;
    overflow: hidden !important;
}

/* Modal header — dark charcoal, acts as drag handle */
.modal .modal-header {
    background: #292524 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 14px !important;
    cursor: move !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: unset !important;
}

    /* Title text */
    .modal .modal-header .modal-title,
    .modal .modal-header h4.modal-title,
    .modal .modal-header h6.modal-title {
        color: #fafaf9 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        flex: 1 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

        .modal .modal-header .modal-title i {
            color: #fde68a !important;
            margin-right: 6px !important;
        }

        .modal .modal-header .modal-title small {
            color: rgba(255,255,255,0.55) !important;
            font-size: 10px !important;
            text-transform: none !important;
            font-weight: 400 !important;
        }

        .modal .modal-header .modal-title .text-warning {
            color: #fde68a !important;
        }

    /* Maximize button — injected by toolbar.js, amber circle */
    .modal .modal-header .btn-modal-maximize {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #fde68a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        cursor: pointer !important;
        color: rgba(0,0,0,0.6) !important;
        font-weight: 700 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: opacity .15s !important;
        line-height: 1 !important;
    }

        .modal .modal-header .btn-modal-maximize:hover {
            opacity: 0.75 !important;
        }

    /* Close button — red circle */
    .modal .modal-header .close {
        color: transparent !important;
        text-shadow: none !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #fca5a5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        border: none !important;
        transition: opacity .15s !important;
        position: relative !important;
    }

        .modal .modal-header .close::after {
            content: '\00D7' !important;
            color: rgba(0,0,0,0.6) !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            position: absolute !important;
            line-height: 1 !important;
        }

        .modal .modal-header .close span {
            display: none !important;
        }

        .modal .modal-header .close:hover {
            opacity: 0.75 !important;
        }

/* Modal body */
.modal .modal-body {
    background: #fafaf9 !important;
    padding: 14px !important;
}

/* Modal footer */
.modal .modal-footer {
    background: #f5f4f1 !important;
    border-top: 1px solid #e7e5e4 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 8px 14px !important;
}

/* Maximized state */
.modal.maximized .modal-dialog {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100vh !important;
}

.modal.maximized .modal-content {
    height: 100vh !important;
    border-radius: 0 !important;
}

/* Override AdminLTE blue modal headers specifically */
.modal .modal-header.bg-primary,
.modal .modal-header.bg-info,
.modal .modal-header.bg-success,
.modal .modal-header.bg-warning,
.modal .modal-header.bg-danger {
    background: #292524 !important;
}

/* ============================================
   FIX: Remove outer white border on modal
   ============================================ */
.modal-dialog {
    margin: 30px auto !important;
}

.modal-backdrop {
    background-color: rgba(28,25,23,0.55) !important;
}

/* Remove Bootstrap's default white bg on modal-dialog */
.modal-content {
    border: none !important;
    background: transparent !important;
}

/* Inner content gets the actual styling */
.modal .modal-content {
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(28,25,23,0.28) !important;
    overflow: hidden !important;
}

/* ============================================
   FIX: Modal drag positioning
   ============================================ */

/* Allow modal-dialog to be freely positioned */
.modal-dialog {
    position: relative !important;
}

    /* When dragging, JS sets position:fixed — ensure it overrides */
    .modal-dialog[style*="position: fixed"],
    .modal-dialog[style*="position:fixed"] {
        position: fixed !important;
        margin: 0 !important;
    }

/* Cursor on header */
.modal .modal-header {
    cursor: move !important;
}

/* jQuery UI draggable helper */
.ui-draggable-dragging {
    z-index: 9999 !important;
}