/* =====================================================
   Khmer Font: Khmer OS Siemreap
   ===================================================== */

:root {
    --primary-blue: #0076AD;
    --black:#242424;
}


@font-face {
    font-family: 'Khmer OS Siemreap';
    src: url('../fonts/KhmerOSSiemreap.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =====================================================
   English Font: Source Sans Pro
   ===================================================== */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================
   Global styles
   ========================== */
body {
    font-family: 'Khmer OS Siemreap', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #f8f9fa;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Khmer OS Siemreap', Arial, sans-serif;
    font-weight: 600;
}

/* Font Khmer & English */
.khmer {
    font-family: 'Khmer OS Siemreap', sans-serif;
}

.english {
    /*font-family: 'Source Sans Pro', Arial, sans-serif;*/
}




/* ---------------------------
   Links & Buttons
   --------------------------- */

a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {    
    text-decoration: underline;
}

.no-button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}



/* Utility */
.text-red {
    color: #8b0000;
}

.opacity-07 {
    opacity: 0.7;
}


/* ---------------------------
   Sidebar Widgets
   --------------------------- */



.widget .refine-heading {
    font-weight: 700;
    margin-bottom: .5rem;
}

.doc-sidebar .widget {
    background: #f6f6f6;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.widget-heading{
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-blue);
    border-bottom: 1px solid #BFBFBF;
}
.widget-item a{
    color: var(--primary-blue) !important; 
}

p.widget-item{
    color: var(--primary-blue) !important;    
    margin-bottom: 5px;
}

p.widget-item:hover{
    cursor: pointer;
    text-decoration: underline;
}

p.widget-item .count{
    float: right;
    color: var(--black);
}

.doc-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}

/* Document detail: sidebar RIGHT */
.doc-layout--detail {
    grid-template-columns: minmax(0, 1fr) 320px;
}

/* Paper document: sidebar LEFT */
.doc-layout--paper {
    grid-template-columns: 320px minmax(0, 1fr);
}

/* Shared rules */
.doc-sidebar {
    width: 100%;
}

.doc-content {
    min-width: 0; /* prevent overflow */
}

/* Mobile */
@media (max-width: 991px) {
    .doc-layout--detail,
    .doc-layout--paper {
        grid-template-columns: 1fr;
    }
}


/* ===============================
   Paper Top Controls (One Line)
================================ */

.paper-top-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* move to right like old site */
    gap: 16px;
    flex-wrap: wrap; /* allow wrap on small screens */
    margin-bottom: 5px;
}

/* remove bootstrap column behavior */
.paper-top-controls > div {
    flex: 0 0 auto;
    width: auto !important;
    padding: 0 !important;
}

/* each control group */
.paper-top-controls form {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* labels */
.paper-top-controls label {
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
}

/* selects */
.paper-top-controls select {
    height: 28px;
    font-size: 12px;
    padding: 2px 6px;
}

/* buttons */
.paper-top-controls input[type="submit"] {
    height: 28px;
    font-size: 12px;
    padding: 0 10px;
    background: #0076ad;
    border: 1px solid #0076ad;
    color: #fff;
}

/* hover */
.paper-top-controls input[type="submit"]:hover {
    background: #005f8c;
    border-color: #005f8c;
}

/* Mobile: stack nicely */
@media (max-width: 767px) {
    .paper-top-controls {
        justify-content: flex-start;
        gap: 10px;
    }

    .paper-top-controls form {
        flex-wrap: wrap;
    }
}

/* --- Paper Documents: Top Search Bar --- */
.paper-search-bar{
  margin: 18px 0 18px;
}

/* Use full width but align with page content */
.paper-search-bar .paper-search-form{
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* Controls */
.paper-search-bar .psf-control{
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  outline: none;
}

/* widths similar to original */
.paper-search-bar .psf-type{
  width: 240px;     /* All Documents */
  min-width: 200px;
}

.paper-search-bar .psf-field{
  width: 200px;     /* ID / TITLE */
  min-width: 120px;
}

.paper-search-bar .psf-keyword{
  flex: 1;          /* take remaining space */
  min-width: 260px;
}

/* Button */
.paper-search-bar .psf-btn{
  height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: 4px;
  background: #0b79b7;  /* match your blue */
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
}

.paper-search-bar .psf-btn:hover{
  filter: brightness(0.95);
}

/* Make it look compact on tablets */
@media (max-width: 992px){
  .paper-search-bar .psf-type{ width: 210px; }
  .paper-search-bar .psf-field{ width: 130px; }
  .paper-search-bar .psf-keyword{ min-width: 200px; }
}

/* Mobile: stack like your previous (but nice) */
@media (max-width: 768px){
  .paper-search-bar .paper-search-form{
    flex-wrap: wrap;
  }

  .paper-search-bar .psf-type,
  .paper-search-bar .psf-field,
  .paper-search-bar .psf-keyword{
    width: 100%;
    min-width: 0;
  }

  .paper-search-bar .psf-btn{
    width: 100%;
  }
}


/* --- Paper Documents: Search Bar visual separation --- */
.paper-search-bar{
  position: relative;
  padding-bottom: 16px;            /* space before divider */
  margin-bottom: 18px;

  border-bottom: 1px solid #e5e5e5; /* subtle divider */
}

/* Soft shadow line */
.paper-search-bar::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0)
  );

  pointer-events: none;
}


/* LIST view */
#documents-container.view-list .document-item {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #e5e5e5;
}

#documents-container.view-list .document-thumb {
  flex: 0 0 140px;
}

#documents-container.view-list .document-meta {
  flex: 1;
}

/* GRID view */
#documents-container.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

#documents-container.view-grid .document-item {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 14px;
  height: 100%;
}

#documents-container.view-grid .document-thumb {
  text-align: center;
  margin-bottom: 10px;
}

/* GRID view – default desktop */
#documents-container.view-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* desktop: 4 */
  gap: 18px;
}

/* Laptop / small desktop */
@media (max-width: 1200px) {
  #documents-container.view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet */
@media (max-width: 768px) {
  #documents-container.view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 480px) {
  #documents-container.view-grid {
    grid-template-columns: 1fr;
  }
}


#documents-container.view-grid .document-meta {
  text-align: center;
}

#documents-container.view-grid .list-title {
  margin-top: 8px;
}


.paper-search-form .form-select,
.paper-search-form .form-control {
  height: 42px;
}

.paper-search-form .btn {
  font-weight: 600;
  letter-spacing: .3px;
}


/* === Search bar sizing consistency === */
.paper-search-form .form-select,
.paper-search-form .form-control,
.paper-search-form button {
    height: 46px;               /* same visual height */
    font-size: 16px;            /* same text size */
}

.paper-search-form .form-select {
    padding-top: 8px;
    padding-bottom: 8px;
}

.paper-search-form button {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.expand-section p{
    margin: 0 0 5px;
}