@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');



/* Adapter Digital Group – PM Tools UI (Admin + Dashboard base)

   CI: Red #bf2231, Black #000000, Grey #5f5b63, White #ffffff

   Font: IBM Plex Sans Thai (loaded via admin-ui.css)

*/

:root{

  --red:#bf2231;

  --black:#000;

  --grey:#5f5b63;

  --white:#fff;



  --stroke: rgba(255,255,255,.10);

  --muted: rgba(255,255,255,.72);

  --muted2: rgba(255,255,255,.55);



  --shadow: 0 30px 90px rgba(0,0,0,.55);

  --shadow2: 0 18px 60px rgba(0,0,0,.45);

}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{

  margin:0;

  font-family: 'IBM Plex Sans Thai', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Thai", sans-serif;

  color: var(--white);

}

button,input,select,textarea{ font-family: inherit; }



/* Global form controls */

select{

  width:100%;

  padding: 11px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.16);

  background: rgba(255,255,255,.06);

  color:#fff;

  outline:none;

  font-weight: 600;

}

select:focus{

  border-color: rgba(191,34,49,.60);

  box-shadow: 0 0 0 3px rgba(191,34,49,.20);

}

select option{ color:#000; background:#fff; }

select option:disabled{ color:#777; }





.bg{

  /* Keep the wrapper as a stacking context so the fixed background stays behind content */

  position: relative;

  isolation: isolate;

  background: transparent;

}



/* Fixed background layer (does NOT move when scrolling) */

.bg::before{

  content:"";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;



  background:

    radial-gradient(900px 620px at 18% 12%, rgba(191,34,49,.28), transparent 62%),

    radial-gradient(900px 620px at 78% 18%, rgba(95,91,99,.22), transparent 58%),

    linear-gradient(180deg, #070707, #000);



  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}



.screen{

  min-height:100%;

  display:grid;

  place-items:center;

  padding: 28px;

}



/* ---- Login “card” ---- */

.phone{

  width: min(430px, 100%);

  border-radius: 30px;

  background: rgba(255,255,255,.95);

  color: #101010;

  box-shadow: var(--shadow);

  overflow:hidden;

  position:relative;

}

.phone__chrome{

  padding: 22px 22px 8px;

  display:flex;

  align-items:center;

  justify-content:flex-start;

}

.logo{

  width: 300px;

  height: 124px;

  object-fit: contain;

  display:block;

}



.hero{ padding: 6px 22px 0; }

.hero__mark{

  position:relative;

  height: 150px;

  border-radius: 22px;

  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,0));

  overflow:hidden;

}

.shape{ position:absolute; border-radius: 18px; box-shadow: 0 16px 30px rgba(0,0,0,.12); }

.shape--a{ width: 78%; height: 44px; left: -10%; top: 34px; transform: rotate(-10deg); background: rgba(95,91,99,.18); }

.shape--b{ width: 44%; height: 110px; left: 28%; top: 18px; background: rgba(0,0,0,.08); border-radius: 20px; }

.shape--c{ width: 86%; height: 54px; left: -8%; bottom: 18px; transform: rotate(10deg); background: rgba(191,34,49,.20); }



.content{ padding: 20px 22px 26px; }

.title{ margin: 6px 0 8px; font-size: 28px; letter-spacing: .1px; }

.subtitle{ margin: 0 0 18px; color: rgba(0,0,0,.55); font-size: 14px; line-height: 1.6; }



.alert{

  background: rgba(191,34,49,.10);

  border: 1px solid rgba(191,34,49,.22);

  color: #7a0f19;

  padding: 10px 12px;

  border-radius: 14px;

  margin: 0 0 12px;

  font-size: 13px;

}



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 12px;

  padding: 14px 14px;

  border-radius: 18px;

  text-decoration:none;

  font-weight: 850;

  letter-spacing: .2px;

  user-select:none;

  border: 1px solid transparent;

  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;

}

.btn:active{ transform: translateY(1px); }

.btn--primary{

  width:100%;

  background: linear-gradient(180deg, var(--red), #9b1b27);

  color: var(--white);

  box-shadow: 0 16px 36px rgba(191,34,49,.22);

  border-color: rgba(191,34,49,.45);

}

.btn--primary:hover{ border-color: rgba(0,0,0,.12); box-shadow: 0 18px 44px rgba(191,34,49,.26); }

.btn__icon{

  width: 30px;

  height: 30px;

  border-radius: 12px;

  display:grid;

  place-items:center;

  background: rgba(255,255,255,.18);

  border: 1px solid rgba(255,255,255,.22);

  font-weight: 950;

}

.meta{

  margin-top: 14px;

  display:flex;

  align-items:center;

  gap: 10px;

  color: rgba(0,0,0,.50);

  font-size: 12px;

}

.meta__dot{

  width:7px;height:7px;border-radius:999px;

  background: var(--red);

  box-shadow: 0 0 0 4px rgba(191,34,49,.14);

}



/* ---- Panel / Dashboard ---- */

.panel{

  width: min(980px, 100%);

  border-radius: 24px;

  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));

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

  box-shadow: var(--shadow2);

  backdrop-filter: blur(14px);

  overflow:hidden;

}



.topbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 14px;

  padding: 18px 20px;

  border-bottom: 1px solid rgba(255,255,255,.08);

}

.topbar__logo{

  height: 36px;

  width: auto;

  object-fit: contain;

  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));

}

.topbar__right{

  display:flex;

  align-items:center;

  gap: 12px;

}

.topbar__title{ font-weight: 900; }

.topbar__sub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }

.topbar__user{ text-align:right; }



.btn--ghost{

  width:auto;

  padding: 10px 12px;

  border-radius: 14px;

  background: transparent;

  border: 1px solid rgba(255,255,255,.16);

  color: var(--white);

  box-shadow: none;

}

.btn--ghost:hover{ border-color: rgba(255,255,255,.26); }



.dash{ padding: 20px; }

.dash__h1{ margin: 0 0 6px; font-size: 28px; letter-spacing: .2px; }

.dash__p{ margin: 0 0 18px; color: var(--muted); line-height: 1.7; }



.grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }

.cardx{

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.03);

  border-radius: 18px;

  padding: 14px;

  color: var(--white);

  text-decoration:none;

  display:block;

}

.cardx--link:hover{ border-color: rgba(255,255,255,.22); }

.cardx__kicker{ font-size: 12px; color: rgba(255,255,255,.55); }

.cardx__title{ margin-top: 6px; font-weight: 900; font-size: 16px; }

.cardx__desc{ margin-top: 6px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }



@media (min-width: 860px){ .grid{ grid-template-columns: 1fr 1fr 1fr; } }

@media (max-width: 480px){ .logo{ width: 220px; height: auto; } .topbar__right{ flex-wrap:wrap; justify-content:flex-end; } }





/* Version 1: square logo after login */

.topbar__logo{

  width:90px;

  height:90px;

  object-fit:contain;

}





/* --- Version 1 UI tweaks (Adapter Full V1) --- */

.btn--danger{

  background: linear-gradient(180deg, var(--red), #9b1b27);

  color: var(--white);

  box-shadow: 0 14px 30px rgba(191,34,49,.20);

  border-color: rgba(191,34,49,.45);

}

.btn--danger:hover{ box-shadow: 0 18px 40px rgba(191,34,49,.26); }

.btn--full{

  width: 100%;

}





/* --- ADAPTER FULL VERSION 1 UI tweaks --- */

.btn--danger{

  border-color: rgba(191,34,49,.55);

  background: rgba(191,34,49,.16);

}

.btn--danger:hover{

  border-color: rgba(191,34,49,.85);

  background: rgba(191,34,49,.22);

}

/* Back to Dashboard button sizing: full on mobile, compact on desktop */

.bottomActions{

  margin-top: 18px;

  display:flex;

  justify-content:center;

}

.btn--backdash{

  width: 100%;

  max-width: 420px;

  padding: 12px 16px;

  border-radius: 16px;

  text-align:center;

}

@media (max-width: 720px){

  .btn--backdash{ max-width: 100%; }

}









/* --- Back to Dashboard (final) --- */

.bottomActions{

  margin-top: 24px;

  display: flex;

  justify-content: center;

}



.btn--backdash{

  width: 100%;

  max-width: 320px;

  padding: 14px 16px;

  border-radius: 18px;

  text-align: center;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}



.btn--backdash .icon{

  font-size: 16px;

  line-height: 1;

  transform: translateY(-1px);

  opacity: .95;

}



@media (max-width: 768px){

  .btn--backdash{

    max-width: 100%;

  }

}





/* Force Back-to-Dashboard sizing (override btn--full if accidentally applied) */

a.btn.btn--backdash{

  width: auto !important;

  max-width: 320px !important;

  flex: 0 0 auto !important;

}

@media (max-width: 768px){

  a.btn.btn--backdash{

    width: 100% !important;

    max-width: 100% !important;

  }

}





/* ===== Dashboard Back Button (robust final) ===== */

.dashBackWrap{

  margin-top: 24px;

  display: flex;

  justify-content: center;

}



a.btn.dashBackBtn{

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  gap: 10px;



  width: auto !important;

  min-width: 260px;

  max-width: 320px;

  padding: 14px 16px;

  border-radius: 18px;

  text-align: center;

  flex: 0 0 auto !important;

}



.dashBackIcon{

  font-size: 16px;

  line-height: 1;

  transform: translateY(-1px);

  opacity: .95;

}



@media (max-width: 768px){

  .dashBackWrap{ justify-content: stretch; }

  a.btn.dashBackBtn{

    width: 100% !important;

    max-width: 100% !important;

  }

}





/* Warn button (Disable) */

.btnWarn{

  border-color: rgba(255, 183, 77, .40);

  background: rgba(255, 183, 77, .12);

}

.btnWarn:hover{

  border-color: rgba(255, 183, 77, .70);

  background: rgba(255, 183, 77, .18);

}

/* Danger button (Delete) */

.btnDanger{

  border-color: rgba(191,34,49,.45);

  background: rgba(191,34,49,.10);

}

.btnDanger:hover{

  border-color: rgba(191,34,49,.75);

  background: rgba(191,34,49,.16);

}





/* Wider button utility */

.btn--wide{min-width:220px; margin-top: 30px;}



/* =========================================================

   UI Components – shared across the whole system (V2.8.3)

   Modern minimal corporate, CI-based

   ========================================================= */



.page{ padding: 18px 20px 24px; }

@media (max-width: 720px){ .page{ padding: 14px 14px 20px; } }



.toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }

.toolbar__title h2{ margin:0; font-size: 20px; letter-spacing: .2px; }

.toolbar__title p{ margin:4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.6; }



.tableCard{ margin-top: 14px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); }



/* Tables */

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

.tableCard thead th{ text-align:left; padding: 12px 14px; font-size: 12px; letter-spacing: .2px; color: rgba(255,255,255,.70); background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.10); position: sticky; top: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; }

.tableCard tbody td{ padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; font-size: 13px; font-weight: 400; }

.tableCard tbody tr:hover{ background: rgba(255,255,255,.02); }

.tableCard tbody tr:last-child td{ border-bottom: none; }



/* Pills */

.pill{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,.18); white-space: nowrap; }

.pill .dot{ width:8px;height:8px;border-radius:999px; }

.pill--on{ background: rgba(0,255,150,.10); border-color: rgba(0,255,150,.24); }

.pill--on .dot{ background: rgba(0,255,150,.95); box-shadow: 0 0 0 4px rgba(0,255,150,.16); }

.pill--off{ background: rgba(191,34,49,.12); border-color: rgba(191,34,49,.28); }

.pill--off .dot{ background: rgba(191,34,49,.95); box-shadow: 0 0 0 4px rgba(191,34,49,.18); }



/* Compact mobile table */

.mLabel{ display:none; font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 6px; letter-spacing: .2px; }

@media (max-width: 720px){

  .tableCard{ border-radius: 18px; overflow: visible; background: transparent; border: none; }

  .tableCard table{ display:block; }

  .tableCard thead{ display:none; }

  .tableCard tbody{ display:block; }

  .tableCard tbody tr{ display:block; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); margin-bottom: 12px; overflow: hidden; }

  .tableCard tbody td{ display:block; border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px 14px; text-align:left !important; }

  .tableCard tbody td:last-child{ border-bottom: none; }

  .mLabel{ display:block; }

}





/* ===== Sendmail/Admin Alerts (success/error) ===== */

.sm-alert{

  border-radius: 12px;

  padding: 10px 12px;

  font-size: 13px;

  line-height: 1.35;

  margin-bottom: 10px;

  border: 1px solid rgba(0,0,0,.08);

}

.sm-alert--success{

  background: rgba(34,197,94,.12);

  border-color: rgba(34,197,94,.25);

  color: #166534;

}

.sm-alert--error{

  background: rgba(239,68,68,.10);

  border-color: rgba(239,68,68,.25);

  color: #991b1b;

}