/* ==========================================================================
   HP Document Frontend
   Matches:
   [document_rp_rules]
   [document_downloads]
   [document_list]
   ========================================================================== */

:root{
    --hp-primary:#0c2d6b;
    --hp-primary-dark:#08204d;

    --hp-bg:#ffffff;
    --hp-bg-soft:#f8fafc;

    --hp-border:#e2e8f0;

    --hp-text:#0f172a;
    --hp-text-light:#64748b;

    --hp-radius:14px;

    --hp-shadow:
        0 4px 18px rgba(15,23,42,.06);

    --hp-shadow-lg:
        0 10px 28px rgba(15,23,42,.08);
}

/* ==========================================================================
   WRAPPER
   ========================================================================== */

.hpdoc-wrap{
    background:var(--hp-bg);
    border:1px solid var(--hp-border);
    border-radius:var(--hp-radius);
    overflow:hidden;
    box-shadow:var(--hp-shadow-lg);
    margin:32px 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.hpdoc-topbar{
    height:6px;
    background:
        linear-gradient(
            to right,
            #1e3a8a,
            #4f46e5,
            #1e40af
        );
}

.hpdoc-topbar--dark{
    background:
        linear-gradient(
            to right,
            #0f172a,
            #1e3a8a,
            #1e293b
        );
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.hpdoc-header{
    padding:28px 32px;
    border-bottom:1px solid var(--hp-border);

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0%,
            #ffffff 100%
        );
}

.hpdoc-header-left{
    flex:1;
    min-width:0;
}

.hpdoc-header-right{
    flex-shrink:0;
}

/* Badge */

.hpdoc-badge{
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border-radius:6px;

    background:#eff6ff;
    color:#1e3a8a;

    border:1px solid #bfdbfe;

    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;

    margin-bottom:10px;
}

.hpdoc-badge--slate{
    background:#f1f5f9;
    color:#1e293b;
    border-color:#e2e8f0;
}

/* Title */

.hpdoc-title{
    margin:0 0 6px;

    font-size:clamp(22px,3vw,30px);
    line-height:1.2;
    font-weight:700;

    color:var(--hp-text);
}

.hpdoc-subtitle{
    margin:0;

    font-size:14px;
    line-height:1.6;

    color:var(--hp-text-light);

    max-width:680px;
}

/* Search */

.hpdoc-search{
    width:280px;

    padding:11px 14px;

    border:1px solid var(--hp-border);
    border-radius:8px;

    background:#fff;

    font-size:14px;
    color:var(--hp-text);

    outline:none;

    transition:
        border-color .18s,
        box-shadow .18s;
}

.hpdoc-search:focus{
    border-color:var(--hp-primary);

    box-shadow:
        0 0 0 3px rgba(12,45,107,.10);
}

/* ==========================================================================
   BODY
   ========================================================================== */

.hpdoc-body{
    padding:28px 32px;
}

.hpdoc-body--table{
    padding:0;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.hpdoc-empty{
    margin:0;

    padding:48px 20px;

    text-align:center;

    border:2px dashed var(--hp-border);
    border-radius:12px;

    color:var(--hp-text-light);

    font-size:15px;
}

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */

.hpdoc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

@media (max-width:960px){
    .hpdoc-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:640px){
    .hpdoc-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================================================
   CARD
   ========================================================================== */

.hpdoc-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;

    padding:18px;

    border:1px solid var(--hp-border);
    border-radius:12px;

    background:#fff;

    transition:
        border-color .18s,
        box-shadow .18s,
        transform .18s;
}

.hpdoc-card:hover{
    border-color:#cbd5e1;

    box-shadow:var(--hp-shadow);

    transform:translateY(-2px);
}

.hpdoc-card-left{
    display:flex;
    align-items:flex-start;
    gap:14px;

    min-width:0;
    flex:1;
}

/* File Type */

.hpdoc-type-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:54px;

    padding:6px 10px;

    border-radius:999px;
    border:1px solid;

    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;

    flex-shrink:0;
}

/* Text */

.hpdoc-card-text{
    min-width:0;
}

.hpdoc-card-title{
    margin:0 0 4px;

    font-size:15px;
    line-height:1.4;
    font-weight:600;

    color:var(--hp-text);

    word-break:break-word;
}

.hpdoc-card-meta{
    font-size:12px;
    color:var(--hp-text-light);
}

/* Download Button */

.hpdoc-dl-btn{
    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 14px;

    border-radius:8px;

    background:#eff6ff;
    border:1px solid #bfdbfe;

    color:#1e3a8a;

    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:
        background .18s,
        color .18s,
        border-color .18s;
}

.hpdoc-dl-btn:hover{
    background:var(--hp-primary);
    border-color:var(--hp-primary);

    color:#fff;
}

/* ==========================================================================
   TABLE
   ========================================================================== */

.hpdoc-table-wrap{
    overflow-x:auto;
}

.hpdoc-table{
    width:100%;
    border-collapse:collapse;
}

/* Head */

.hpdoc-table thead{
    background:var(--hp-bg-soft);
    border-bottom:1px solid var(--hp-border);
}

.hpdoc-table th{
    padding:16px 22px;

    text-align:left;

    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    color:var(--hp-text-light);

    white-space:nowrap;
}

/* Rows */

.hpdoc-tr{
    border-bottom:1px solid var(--hp-border);

    transition:background .15s;
}

.hpdoc-tr:hover{
    background:var(--hp-bg-soft);
}

.hpdoc-table td{
    padding:18px 22px;
    vertical-align:middle;
}

/* Width helpers */

.hpdoc-th-type{
    width:90px;
}

.hpdoc-th-size{
    width:120px;
}

.hpdoc-th-action{
    width:220px;
}

/* Cells */

.hpdoc-td-title strong{
    color:var(--hp-text);
    font-size:14px;
    line-height:1.4;
}

.hpdoc-dl-desc{
    color:var(--hp-text-light);
    font-size:12px;
}

.hpdoc-td-size{
    color:var(--hp-text-light);
    font-size:13px;
    white-space:nowrap;
}

.hpdoc-td-action{
    white-space:nowrap;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.hpdoc-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 12px;

    border-radius:8px;

    text-decoration:none;

    font-size:12px;
    font-weight:600;

    transition:
        background .18s,
        color .18s,
        border-color .18s;

    margin-left:6px;
}

.hpdoc-btn--view{
    background:#fff;

    border:1px solid var(--hp-border);

    color:#475569;
}

.hpdoc-btn--view:hover{
    background:var(--hp-bg-soft);
    color:var(--hp-text);
}

.hpdoc-btn--dl{
    background:#eff6ff;

    border:1px solid #bfdbfe;

    color:#1e3a8a;
}

.hpdoc-btn--dl:hover{
    background:var(--hp-primary);
    border-color:var(--hp-primary);

    color:#fff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.hpdoc-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;

    padding:14px 32px;

    background:var(--hp-bg-soft);

    border-top:1px solid var(--hp-border);

    font-size:12px;
    color:var(--hp-text-light);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:768px){

    .hpdoc-header{
        padding:22px 20px;
    }

    .hpdoc-body{
        padding:20px;
    }

    .hpdoc-footer{
        padding:14px 20px;
    }

    .hpdoc-search{
        width:100%;
    }

    .hpdoc-header-right{
        width:100%;
    }

    .hpdoc-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .hpdoc-dl-btn{
        width:100%;
    }

    .hpdoc-table th,
    .hpdoc-table td{
        padding:14px;
    }

    .hpdoc-th-size,
    .hpdoc-td-size{
        display:none;
    }
}