/* =========================
   Core variables
   ========================= */
:root {
    --sidebar-bg: #0f172a;
    --sidebar-link: #cbd5e1;
    --sidebar-link-active: #ffffff;
    /* Documents sizing */
    --file-card-min: 190px;
    --file-card-pad: 12px;
    --file-card-radius: 12px;
    --file-gap: 14px;
    --file-icon-size: 32px;
}

/* =========================
   Base layout
   ========================= */
html, body, .app {
    height: 100%
}

body {
    background: #f8fafc
}

/* Sidebar */
.sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh
}

    .sidebar .brand {
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .sidebar .nav-link {
        color: var(--sidebar-link);
        padding: .65rem 1rem;
        border-left: 3px solid transparent
    }

        .sidebar .nav-link:hover {
            color: var(--sidebar-link-active);
            background: rgba(255,255,255,.06)
        }

        .sidebar .nav-link.active {
            color: var(--sidebar-link-active);
            border-left-color: #4f46e5;
            background: rgba(79,70,229,.1)
        }

/* Topbar helper (if used) */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100
}

.page-title {
    font-size: 1.05rem
}

/* Minor utilities */
.fw-500 {
    font-weight: 500
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* =========================
   Dropzone (generic + soft)
   ========================= */
#dropZone {
    border: 2px dashed #6c757d;
    border-radius: .5rem;
    background: #f8f9fa;
    transition: all .15s ease-in-out;
    min-height: 120px
}

    #dropZone.drag-hover {
        border-color: #0d6efd;
        background: #e7f1ff;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
        transform: scale(1.01)
    }

.dropzone-soft {
    border: 2px dashed #6c757d;
    border-radius: .75rem;
    padding: 2.25rem;
    text-align: center;
    transition: .12s ease;
    background: #f8f9fa
}

    .dropzone-soft.drag-hover {
        background: rgba(13,110,253,.08);
        border-color: #0d6efd;
        transform: scale(1.01)
    }

/* Identity manage visual tweak */
.list-group-item.active {
    background: #4f46e5;
    border-color: #4f46e5
}

.list-group-item-action:hover {
    background: rgba(79,70,229,.08)
}

/* =========================
   Documents: header/toolbar
   Markup expected:
   <div class="doc-header">
     <h2>Documents</h2>
     <div class="right"> ... (select + search + view toggle + upload) ... </div>
   </div>
   ========================= */
.doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px
}

    .doc-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700
    }

    .doc-header .right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto
    }

    .doc-header .doc-search {
        flex: 1 1 340px;
        min-width: 260px
    }

    .doc-header .btn-group .btn {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0
    }

    .doc-header .btn.btn-primary.btn-sm {
        padding: .45rem .8rem
    }

/* =========================
   Documents: grid & cards
   ========================= */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--file-card-min),1fr));
    gap: var(--file-gap)
}

.doc-card {
    position: relative;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--file-card-radius);
    padding: var(--file-card-pad);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 90px;
    transition: box-shadow .15s,transform .05s;
    overflow: visible
}

    .doc-card:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,.08)
    }

    .doc-card:active {
        transform: translateY(1px)
    }

.doc-card-kebab {
    position: absolute;
    top: 8px;
    right: 10px
}

.doc-card .dropdown {
    position: static
}

.doc-card .dropdown-menu {
    z-index: 1060
}

.doc-card-icon {
    font-size: var(--file-icon-size);
    line-height: 1;
    color: #3b82f6
}

.doc-type-badge {
    font-size: .7rem;
    border-radius: 9999px;
    padding: .15rem .45rem;
    background: #eef2f7;
    color: #334155
}

    .doc-type-badge.pdf {
        background: #fee2e2;
        color: #b91c1c
    }

    .doc-type-badge.excel {
        background: #dcfce7;
        color: #166534
    }

    .doc-type-badge.word {
        background: #e0e7ff;
        color: #3730a3
    }

    .doc-type-badge.image {
        background: #e0f2fe;
        color: #075985
    }

    .doc-type-badge.archive {
        background: #fde68a;
        color: #92400e
    }

.doc-card-name {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.doc-card-meta {
    font-size: .8rem;
    color: #6b7280;
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

/* =========================
   Documents: table view
   ========================= */
.doc-table table {
    width: 100%;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    overflow: hidden
}

.doc-table thead th {
    background: #f8fafc;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap
}

    .doc-table thead th .sort-ind {
        display: inline-block;
        width: 1.1em
    }

    .doc-table thead th.asc .sort-ind::before {
        content: "▲"
    }

    .doc-table thead th.desc .sort-ind::before {
        content: "▼"
    }

.doc-name-cell {
    max-width: 380px
}

.table.docs-table td, .table.docs-table th {
    vertical-align: middle
}

.table.docs-table tr:hover td {
    background: #fafafa
}

/* =========================
   Upload drawer for documents
   ========================= */
.doc-upload-drawer {
    width: 380px
}

.doc-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    background: #f9fafb;
    transition: background .2s,border-color .2s
}

    .doc-dropzone .dz-icon {
        font-size: 48px;
        color: #64748b
    }

    .doc-dropzone .dz-title {
        font-weight: 600;
        margin-top: 8px
    }

    .doc-dropzone.drag-hover {
        background: #eef2ff;
        border-color: #6366f1
    }

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width:576px) {
    :root {
        --file-card-min: 160px
    }
}
/* --- Documents header toolbar --- */
.docs-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .docs-toolbar .left {
        flex: 1 1 auto;
    }

    .docs-toolbar .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .docs-toolbar .search {
        flex: 1 1 340px;
        min-width: 260px;
    }

    .docs-toolbar .btn-group.btn-group-sm .btn {
        height: 32px;
        padding: .25rem .5rem;
    }

    .docs-toolbar .btn-upload {
        height: 32px;
        padding: .25rem .6rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    /* keep portal & search on one line */
    .docs-toolbar .left {
        min-width: 0;
    }

        .docs-toolbar .left form {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap; /* no wrapping on desktop */
            flex: 1 1 auto;
        }

            /* portal select: fixed width so it doesn't push search down */
            .docs-toolbar .left form .form-select.form-select-sm {
                width: 180px;
                flex: 0 0 180px;
            }

            /* search input can shrink/grow */
            .docs-toolbar .left form .search {
                flex: 1 1 320px;
                min-width: 220px;
            }

/* on small screens allow wrap */
@media (max-width: 768px) {
    .docs-toolbar .left form {
        flex-wrap: wrap;
    }
}