/* ENTECH Room Booking — common.css (ธีมสีเลือดหมู) */
:root{
  --navy:#7D1F2E; --navy-dark:#5C1520; --navy-light:#A63347; --gold:#C8973A;
  --blue-light:#F5E6E9; --red:#DC2626; --green:#16A34A; --amber:#D97706;
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-600:#475569; --gray-800:#1E293B; --white:#fff;
  --radius:10px; --radius-lg:16px; --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sarabun','TH Sarabun New',sans-serif;font-size:16px;color:var(--gray-800);
  background:var(--gray-50);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--navy)}

/* Header */
header{box-shadow:var(--shadow);flex-shrink:0}
.hd-top{background:#fff;border-bottom:3px solid var(--navy);padding:10px 0}
.hd-inner{display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;
  max-width:1100px;margin:0 auto;width:100%}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:46px;width:46px;object-fit:contain}
.logo-name{font-size:.98rem;font-weight:700;color:var(--navy);line-height:1.3}
.logo-sub{font-size:.7rem;color:#64748B}
.hd-right{display:flex;align-items:center;gap:10px}
.hd-nav{background:var(--navy);padding:0 24px}
.hd-nav-inner{max-width:1100px;margin:0 auto;display:flex;gap:4px;flex-wrap:wrap}
.hd-nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.86rem;font-weight:600;
  padding:11px 14px;border-bottom:3px solid transparent}
.hd-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hd-nav a.active{color:#fff;border-bottom-color:var(--gold)}
.user-chip{display:flex;align-items:center;gap:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.uname{font-size:.85rem;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:600;border-radius:var(--radius);padding:9px 18px;
  transition:opacity .15s,background .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-dark)}
.btn-ghost{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:6px 12px;font-size:.82rem}

/* Main / cards */
.main{flex:1;max-width:1100px;margin:0 auto;width:100%;padding:28px 20px}
.page-title{font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.page-sub{color:var(--gray-600);font-size:.9rem;margin-bottom:22px}
.card{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:22px;
  box-shadow:var(--shadow);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid-rooms{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.cols-2{grid-template-columns:1fr}}

/* Forms */
label.fld{display:block;margin-bottom:14px}
label.fld span{display:block;font-size:.82rem;font-weight:600;color:var(--gray-600);margin-bottom:5px}
input,select,textarea{width:100%;min-width:0;max-width:100%;font-family:inherit;font-size:.92rem;color:var(--gray-800);
  border:1.5px solid var(--gray-300);border-radius:var(--radius);padding:9px 12px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy)}
textarea{resize:vertical;min-height:70px}
label.fld,.grid>*,.card,.modal{min-width:0}
input[type="date"],input[type="time"],input[type="datetime-local"]{
  display:block;height:44px;-webkit-appearance:none;appearance:none}
input::-webkit-date-and-time-value{min-width:0;text-align:left}

/* Chips / badges */
.chip{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:20px}
.chip-pending{background:#FEF3C7;color:#92400E}
.chip-approved{background:#DCFCE7;color:#166534}
.chip-rejected{background:#FEE2E2;color:#991B1B}
.chip-muted{background:var(--gray-100);color:var(--gray-600)}
.tag{display:inline-block;font-size:.72rem;background:var(--blue-light);color:var(--navy);
  padding:2px 9px;border-radius:8px;font-weight:600}

/* Room card */
.room{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:18px;
  display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s,border-color .2s}
.room:hover{border-color:var(--navy-light);box-shadow:0 6px 18px rgba(125,31,46,.1)}
.room h3{font-size:1.02rem;color:var(--gray-800)}
.room .meta{font-size:.82rem;color:var(--gray-600)}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th{text-align:left;color:var(--gray-600);font-weight:700;font-size:.78rem;
  padding:10px 12px;border-bottom:2px solid var(--gray-200);white-space:nowrap}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
table.tbl tr:hover td{background:var(--gray-50)}

/* Alerts */
.alert{border-radius:var(--radius);padding:11px 15px;font-size:.88rem;margin-bottom:16px}
.alert-err{background:#FEE2E2;color:#7F1D1D;border:1px solid #FECACA}
.alert-ok{background:#DCFCE7;color:#166534;border:1px solid #BBF7D0}
.alert-info{background:var(--blue-light);color:var(--navy);border:1px solid #FECDD3}

/* Modal */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;
  align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:520px;width:100%;padding:24px;
  max-height:90vh;overflow:auto}
.modal h3{color:var(--navy);margin-bottom:14px}

/* misc */
.muted{color:var(--gray-400)}
.empty{text-align:center;color:var(--gray-400);padding:40px 0}
.spin{width:34px;height:34px;border:3px solid var(--gray-200);border-top-color:var(--navy);
  border-radius:50%;animation:spin .7s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
footer{text-align:center;padding:20px;font-size:.78rem;color:var(--gray-400);
  border-top:1px solid var(--gray-200)}

/* Shared phone layout: native date/time controls, header, dialogs and wide tables. */
@media screen and (max-width:640px){
  .main{padding:20px 14px}
  .card{padding:16px}
  .hd-inner{padding:0 14px;gap:10px;flex-wrap:wrap}
  .hd-inner .logo{min-width:0;flex:1 1 180px;gap:8px}
  .hd-inner .logo-img{width:38px;height:38px;flex-shrink:0}
  .hd-inner .logo>div{min-width:0}
  .hd-right{flex-shrink:0;max-width:100%;margin-left:auto}
  .hd-right .btn{white-space:nowrap}
  .hd-right .uname{max-width:120px}
  .hd-nav{padding:0 10px}
  .hd-nav a{padding:10px}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .btn{min-height:44px}
  .btn{white-space:nowrap}
  .stars button{min-width:36px;min-height:44px}
  .modal-bg{padding:12px}
  .modal{padding:18px;max-height:calc(100dvh - 24px)}
  table.tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl td{white-space:nowrap}
  table.tbl tbody:first-child td{white-space:normal;overflow-wrap:anywhere}
  .alert,.page-sub,.modal{overflow-wrap:anywhere}
}