/* =========================================================
   LAWDOCS – SYSTEM OVERRIDE CSS (ONE FILE)
   รองรับทุกอุปกรณ์ (Desktop/Tablet/Mobile)
   ใช้กับ: Bootstrap 5 + Template + DataTables
   Dev: Personnel URU
========================================================= */

/* =========================================================
   1) ROOT / TOKENS
========================================================= */
:root{
  --uru-blue:#1e293b;
  --uru-green:#39634b;
  --uru-dark:#0f172a;

  --bg:#f5f7fa;
  --text:#1e1e1e;
  --muted:#64748b;

  --card:#ffffff;
  --border:#e5e7eb;
  --shadow:0 6px 18px rgba(15,23,42,.06);

  --accent:#ffce6b;
  --danger:#dc3545;

  --header-h:120px;
  --header-h-mobile:100px;
}

/* =========================================================
   2) BASE / RESET (SAFE)
========================================================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:'Sarabun', sans-serif;
  font-size:18px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  padding-top:var(--header-h); /* กัน header fixed บังเนื้อหา */
}

@media (max-width: 991px){
  body{ padding-top:var(--header-h-mobile); }
}

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; transition:.2s; }
a:hover{ opacity:.9; }

.container, .container-fluid{ position:relative; }
main#content{ min-height:60vh; }
.main-section{ padding:40px 0; }

/* =========================================================
   3) HEADER / NAVBAR (Desktop + Shared)
========================================================= */
/* =========================================================
   1) HEADER หลัก
   ส่วนครอบแถบเมนูด้านบน
========================================================= */
.header-area{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  height: var(--header-h) !important;
  background: linear-gradient(90deg, var(--uru-blue), var(--uru-green));
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: background .25s ease, box-shadow .25s ease;
}

/* ตอน scroll แล้วเปลี่ยนพื้นหลัง */
.header-area.background-header{
  background: var(--muted);
  height: var(--header-h) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
}

/* =========================================================
   2) MAIN NAV WRAPPER
   กล่องหลักภายใน header
========================================================= */
.header-area .main-nav{
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible !important;
}

/* =========================================================
   3) LOGO
   โลโก้เว็บไซต์
========================================================= */
.header-area .logo{
  display: inline-block;
  width: 220px;
  height: 60px;
  margin: 0;
  background-image: url('../images/LAWDOCSLOGOWHITE.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* โลโก้ตอน header เปลี่ยนสี */
.header-area.background-header .logo{
  background-image: url('../images/LAWDOCSLOGODARKBLUE.png');
}

/* =========================================================
   4) MENU RESET
   ล้าง style พื้นฐานของ ul / li
========================================================= */
.header-area .menu-nav,
.header-area .menu-nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   5) DESKTOP MENU
   เมนูหลักสำหรับจอใหญ่
========================================================= */
.header-area .menu-nav{
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-area .menu-nav > li{
  position: relative;
}

.header-area .menu-nav > li > a{
  display: block;
  padding: 10px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .3px;
  line-height: 1;
  color: #fff;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}

/* สีตัวอักษรเมนู เมื่อ header เปลี่ยนพื้นหลัง */
.header-area.background-header .menu-nav > li > a{
  color: var(--uru-dark);
}

/* hover / active เมนูหลัก */
.header-area .menu-nav > li > a:hover,
.header-area .menu-nav > li > a.active{
  color: var(--accent);
}

.header-area.background-header .menu-nav > li > a:hover,
.header-area.background-header .menu-nav > li > a.active{
  color: var(--uru-blue);
}

/* =========================================================
   6) LOGIN BUTTON
   ปุ่มเข้าสู่ระบบบน desktop
========================================================= */
.header-area .menu-nav .main-white-button a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25);
  transition: all .2s ease;
}

/* ปุ่ม login ตอน header เปลี่ยนพื้นหลัง */
.header-area.background-header .menu-nav .main-white-button a{
  background: rgba(48,84,151,.10);
  color: var(--uru-blue) !important;
  border: 1px solid rgba(48,84,151,.20);
}

/* =========================================================
   7) DESKTOP DROPDOWN
   เมนูย่อยแบบ hover
========================================================= */

/* เว้นพื้นที่ด้านขวาให้ลูกศร */
.menu-nav > li.has-sub > a{
  padding-right: 26px;
}

/* ลูกศร dropdown */
.menu-nav > li.has-sub:after{
  content:"\f107";
  font-family:FontAwesome;
  font-size:12px;
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
}


/* สีลูกศรตอน background-header */
.header-area.background-header .menu-nav > li.has-sub::after{
  color: var(--uru-dark);
}

/* กล่องเมนูย่อย */
.menu-nav li.has-sub ul.sub-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:240px;
  background:var(--uru-green);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 30px rgba(15,23,42,.14);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.2s ease;
  z-index:9999;
}

/* แสดง dropdown เมื่อ hover บน desktop */
@media (min-width: 992px){
  .menu-nav li.has-sub:hover ul.sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

.menu-nav li.has-sub ul.sub-menu li a{
  display:block;
  padding:11px 14px;
  font-size:16px;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-nav li.has-sub ul.sub-menu li:last-child a{ border-bottom:0; }
.menu-nav li.has-sub ul.sub-menu li a:hover{
  background:#fff;
  color:#ff9d00 !important;
}

/* =========================================================
   6) MOBILE NAV (≤991px) – FIX ชน templatemo-plot-listing.css
   เปิด/ปิดด้วย:
   - ul.menu-nav => .open-menu
   - li.has-sub  => .open
========================================================= */
.menu-trigger{ display:none; }

@media (max-width: 991px){

  /* กัน template ที่ทำ header เป็น center */
  .header-area{
    text-align:left !important;
    padding:0 !important;
    background:#ffffff !important;
  }

  .header-area .main-nav{
    min-height:var(--header-h-mobile);
    overflow:visible !important;
    position:relative !important;
    align-items:center !important;
  }

  .header-area .container{
    background:transparent !important;
    padding:0 12px !important;
  }

  /* logo */
  .header-area .logo{
    margin-left:0 !important;
    margin-top:12px !important;
    width:200px;
    height:52px;
  }

  /* hamburger */
  .menu-trigger{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:10001;
    background:rgba(0,0,0,.05);
    border:1px solid rgba(0,0,0,.08);
  }

  /* hamburger lines */
  .menu-trigger span{
    position:relative;
    display:block;
    width:22px;
    height:2px;
    background:#111;
  }
  .menu-trigger span::before,
  .menu-trigger span::after{
    content:"";
    position:absolute;
    left:0;
    width:22px;
    height:2px;
    background:inherit;
  }
  .menu-trigger span::before{ top:-7px; }
  .menu-trigger span::after { top: 7px; }

  /* menu panel */
  .header-area .menu-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    width:100%;
    flex-direction:column;
    gap:0;
    background:#fff;
    padding:8px 0;
    margin:0;
    border-top:1px solid #eef2f7;
    box-shadow:0 18px 30px rgba(15,23,42,.12);
    border-radius:0 0 16px 16px;
    max-height:calc(100vh - var(--header-h-mobile));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:10000;
  }

  .header-area .menu-nav.open-menu{ display:flex; }

  .header-area .menu-nav > li{
    width:100%;
    padding:0;
    border-bottom:1px solid #eef2f7;
  }

  .header-area .menu-nav > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    height:auto;
    line-height:1.35;
    background:transparent;
    color:#111827 !important;
    font-weight:700;
    font-size:17px;
    border-radius:0;
  }

  .header-area .menu-nav > li > a:hover,
  .header-area .menu-nav > li > a.active{
    background:#f1f5f9;
    color:var(--uru-blue) !important;
  }

  /* arrow dropdown */
  .menu-nav > li.has-sub:after{
    right:16px;
    top:20px;
    transform:none;
    color:#111827;
    font-size:14px;
  }

  /* dropdown accordion */
  .menu-nav li.has-sub ul.sub-menu{
    position:relative;
    width:100%;
    top:0; left:0;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:#f8fafc;
    border-radius:0;
    padding:0;
    margin:0;
    z-index:1;
  }

  .menu-nav li.has-sub.open ul.sub-menu{ display:block; }

  .menu-nav li.has-sub ul.sub-menu li a{
    display:block;
    padding:12px 16px 12px 34px;
    font-size:16px;
    font-weight:600;
    background:#f8fafc;
    color:#111827 !important;
    border-bottom:1px solid #e2e8f0;
  }

  .menu-nav li.has-sub ul.sub-menu li a:hover{
    background:#eef2ff;
    color:var(--uru-blue) !important;
  }

  /* LOGIN full width + center */
  .header-area .menu-nav li .main-white-button{
    width:100%;
    padding:12px 16px;
    box-sizing:border-box;
  }

  .header-area .menu-nav li .main-white-button a{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px;
    padding:14px 16px !important;
    border-radius:999px !important;
    text-align:center;
    line-height:1 !important;
    min-height:48px;
    background:rgba(48,84,151,.10) !important;
    color:var(--uru-blue) !important;
    border:1px solid rgba(48,84,151,.18) !important;
  }

  .header-area .menu-nav li .main-white-button a i{
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    transform:none !important;
  }

  .header-area .menu-nav li .main-white-button a::before,
  .header-area .menu-nav li .main-white-button a::after{
    display:none !important;
    content:none !important;
  }
}

/* =========================================================
   7) PAGE HEADING
========================================================= */
.page-heading{ padding:20px 0; }

/* =========================================================
   8) CARD / SEARCH FORM
========================================================= */
.card-info{
  border:1px solid #d6e4f0;
  border-radius:14px;
  background:#f8fbff;
  box-shadow:var(--shadow);
}
.card-info .card-header{
  background:#e9f2fb;
  border-bottom:1px solid #d6e4f0;
  border-radius:14px 14px 0 0;
}
.card-info select.form-select,
.card-info input.form-control{
  border-radius:10px;
  border:1px solid #bcd3ea;
}
.card-info select.form-select:focus,
.card-info input.form-control:focus{
  border-color:#2a5298;
  box-shadow:0 0 0 .15rem rgba(42,82,152,.22);
}
#total-count .badge{
  font-size:.9rem;
  padding:.55em .8em;
}

/* =========================================================
   9) DATATABLES THEME
========================================================= */
.dataTables_wrapper{
  background:var(--card);
  padding:18px;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow-x:auto;
}
table.dataTable{ width:100% !important; }
.table{ font-size:16px; }
table.dataTable thead th{ white-space:nowrap; }

.dataTables_paginate .pagination{
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:center;
}
.dataTables_paginate .page-link{
  border-radius:999px;
  padding:.38rem .75rem;
  border:1px solid var(--border);
}
.dataTables_paginate .page-item.active .page-link{
  background:var(--uru-blue);
  border-color:var(--uru-blue);
}
.dt-buttons .btn{ border-radius:12px; }

/* =========================================================
   10) FOOTER
========================================================= */
.site-footer{
  background:#1e293b;
  color:#fff;
  padding:40px 0 0;
}
.site-footer p{
  color:#afb9c5;
}
.site-footer a{ color:#afb9c5; }
.site-footer a:hover{ color:#fff; }
.sub-footer{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:20px;
  padding:15px 0;
  text-align:center;
  font-size:14px;
}

/* =========================================================
   11) BACK TO TOP
========================================================= */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--uru-blue),#6f42c1);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(48,84,151,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:.2s ease;
  z-index:1050;
}
.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* =========================================================
   12) UTILITIES / ACCESSIBILITY
========================================================= */
.text-wrap{ white-space:normal !important; }
.small-muted{ color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


/* =========================================
  13)  LAWDOCS – ลดช่องว่างบน Mobile (ท้าย app.css)
========================================= */

/* 1) ให้ body เว้นพื้นที่ตาม header จริงบนมือถือ */
@media (max-width: 767px){
  :root{ --header-h-mobile: 86px; }   /* เดิม 100px → ลดลง */
  body{ padding-top: var(--header-h-mobile) !important; }
}

/* 2) ลด padding ของ banner บนมือถือ */
@media (max-width: 767px){
  .main-banner{
    padding: 40px 0 60px 0 !important; /* ช่องล่าง ช่องบน เดิมมักสูงมาก (เช่น 600px) */
  }
  .main-banner ul.categories{ margin-top: 20px !important; }
  .main-banner .top-text h2{ margin-bottom: 20px !important; }
}

/* 3) ถ้าหน้าแรกมี “หัวข้อใหญ่” อยู่ต่ำเกิน ให้ยกขึ้น */
@media (max-width: 767px){
  .main-banner .top-text{ margin-top: 0 !important; }
}


/* =========================
   14) TABLET FIX (768px–991px)
   ปรับ Banner + Logo + Header spacing
========================= */
@media (min-width: 768px) and (max-width: 991px){

  /* ===== Banner ลดช่องว่างบน/ล่าง ===== */
  .main-banner{
    padding: 40px 0 60px 0 !important;
  }

  /* ===== Header Height ===== */
  .header-area .main-nav{
    min-height: 86px !important;
    padding-right: 70px !important; /* เผื่อ hamburger */
    align-items: center !important;
  }

  /* ===== Logo = Mobile Style ===== */
  .header-area .logo{
    width: 200px !important;
    height: 52px !important;

    margin-left: 0 !important;
    margin-top: 10px !important;

    background-size: contain !important;
    background-position: left center !important;
  }

  /* ===== Hamburger Position ===== */
  .header-area .menu-trigger{
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

}

/* =========================
   15) card-header
========================= */

.card-header{
    padding:20px 30px;   /* บนล่าง / ซ้ายขวา */
}

.card-header.full-width{
    width:100%;
    padding:30px 30px;
}


/* =========================
   16) card-header
========================= */

    /* =========================
       PAGE: Datatable Loader
    ========================== */
    #datalawslist-container.loading::before{
      content:'กำลังโหลดข้อมูล...';
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      background:rgba(255,255,255,.9);
      padding:10px 20px;
      border-radius:5px;
      font-weight:700;
      z-index:9999;
    }
    #datalawslist-container.loading{
      position:relative;
      min-height:100px;
      pointer-events:none;
      opacity:.6;
    }

    /* =========================
       PAGE: Search Form Theme
    ========================== */
    .card.card-info{
      border:1px solid #d6e4f0;
      border-radius:12px;
      background:#f8fbff;

      margin-bottom: 12px;   /* ✅ เพิ่มบรรทัดนี้ ลดช่องว่างใต้การ์ด */
    }
    .card-info .card-header{
      background:linear-gradient(135deg, #d6e4f0, #d6e4f0);
      border-radius:12px 12px 0 0;
    }
    .card-info .card-header h2,
    .card-info .card-header h5{ color:#2c2c2c; }

    .card-info .card-body{ background:#f8fbff; }

    .card-info .card-body .col-lg-2{
      font-weight:600;
      color:#1e3c72;
    }

    .card-info select.form-select,
    .card-info input.form-control{
      border-radius:8px;
      border:1px solid #bcd3ea;
      transition:all .2s ease;
    }
    .card-info select.form-select:focus,
    .card-info input.form-control:focus{
      border-color:#2a5298;
      box-shadow:0 0 0 .15rem rgba(42,82,152,.25);
    }

    .card-info .btn-primary{
      background:#2a5298;
      border-color:#2a5298;
      font-weight:600;
    }
    .card-info .btn-primary:hover{
      background:#1e3c72;
      border-color:#1e3c72;
    }

    .card-info .btn-warning{
      background:#ffc107;
      border-color:#ffc107;
      font-weight:600;
    }
    .card-info .btn-warning:hover{
      background:#e0a800;
      border-color:#e0a800;
    }

    #total-count .badge{
      font-size:.95rem;
      padding:.5em .75em;
    }

    .section-title{
    margin: 0;          /* ✅ ไม่ให้กินพื้นที่ */
    padding: 0;
    height: 0;
    }


/* =========================
   TABLE HEADER (LAWDOCS STYLE)
========================= */
#datalawslist thead th{
  background: #d6e4f0;
  color: #1e293b;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  padding: 14px 12px;
  border: none;
  vertical-align: middle;
  position: relative;
}

/* มุมโค้ง */
#datalawslist thead th:first-child{
  border-top-left-radius: 10px;
}
#datalawslist thead th:last-child{
  border-top-right-radius: 10px;
}

/* เส้นแบ่งคอลัมน์ */
#datalawslist thead th:not(:last-child){
  border-right: 1px solid rgba(255,255,255,.15);
}



    /* =========================
       PAGE: buttons [10, 20, 50, 'ทั้งหมด']
    ========================== */

 .dt-length-buttons{
  display:flex;
  align-items:center;
  gap:6px;
}

.dt-length-buttons button{
  border:none;
  padding:6px 12px;
  border-radius:999px;
  background:#e7edf8;
  color:#305497;
  font-weight:400;
  cursor:pointer;
  transition:all .2s ease;
}

/* hover */
.dt-length-buttons button:hover{
  background:#305497;
  color:#fff;
}

/* active */
.dt-length-buttons button.active{
  background:#305497;
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}