/* ========== SmartHome — BASE (toàn dự án) ==========
   - Trung tính, gọn, không màu mè UI mặc định
   - Dùng biến CSS để thống nhất theme
   - Tối ưu focus-ring cho desktop & mobile
   ================================================== */

/* ---- Tokens ---- */
:root{
  /* Font & scale */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --size-12:12px; --size-13:13px; --size-14:14px; --size-15:15px; --size-16:16px;
	--size-18:18px; --size-20:20px; --size-22:22px; --size-24:24px;
  
	--bold:600;

  /* Spacing & shape */
  --gap-0.5:3px; --gap-1:6px; --gap-2:10px; --gap-3:14px; --gap-4:20px; --gap-5:28px;
  --radius:8px; --brd:1px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.45);

  /* Layout breakpoints */
  --bp-md:768px;
  --bp-lg:980px;

  /* Control baseline */
  --ctl-h:36px;

  /* Theme colors (dark-neutral) */
  --bg:#020617;          /* outer background */
  --bg-elevated:#020617; /* alternative outer */
  --card:#020617;        /* main card */
  --card-2:#020617;      /* sunken card / controls */
  --card-3:#020617;      /* hover/active */
  --text:#e5e7eb;        						/* main text */
  --muted:rgba(136,141,150,1);      /* secondary text */
  --border:#1f2937;      /* borders */

  --link:#38bdf8;        /* link color */
  --btn-border:rgba(56,189,248,.25); /* button border */
  
  /* Color */
	--white:rgba(255,255,255,1);
  --red:rgba(255,50,50,.90);
  --green:rgba(0,215,100,.90);
  --blue:rgba(0,100,215,.90);
	--yelow:rgba(215,195,0,.90);
	--grey:rgba(100,100,100,.65);
	--accent:rgba(34,211,238,1);

}

.site-title{
  font-size:var(--size-20);
}

/* Site header */
.site-header{
  border-bottom:1px solid rgba(31,41,55,.9);
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom, rgba(15,23,42,.92), rgba(15,23,42,.98));
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.site-header-user{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  min-width:max-content;
}

.site-header-login{
  margin-left:0;
  line-height:1.2;
  white-space:nowrap;
}

.site-header-datetime{
  margin-left:0;
  font-size:var(--size-12);
  line-height:1.2;
  white-space:nowrap;
}

/* ===== Defaults (mobile-first) ===== */
.container{ 
	max-width: 100%; 
	margin-inline:auto; 
	padding: 6px 12px; 
	gap:12px; 
}

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

.form-row{ 
  display:grid; 
  grid-template-columns: 1fr; 
  gap: 8px; 
	margin-bottom: 4px;
}

.form-row label {
  padding-left: 6px;
}

label{ 
	font-size: 13px;
}

/* Form-row cho các trang dùng layout label bên trái, control bên phải */
@media (min-width: 980px){
  .form-row{
    grid-template-columns: 160px minmax(0, 1fr);
    align-items:center;
  }
}

/* Dọn margin/padding mặc định */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  font-family:var(--font);
  font-size:var(--size-14);
  line-height:1.5;
  background:radial-gradient(circle at top, #020617 0, #020617 38%, #020617 100%);
  color:var(--text);
}

.section-body{
	display:flex;
	flex-direction:column;
	gap:8px;"
}

/* Links */
a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  margin:0px 4px;
  font-weight:600;
}
h1{ font-size:var(--size-18); }
h2{ font-size:var(--size-17); }
h3{ font-size:var(--size-16); }

/* Text helpers */
.muted{
	margin-left:6px;
  color:var(--muted);
}

/* Paragraph */
p{
  margin:6px 0;
}

/* Pre/code */
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:var(--size-14);
	color:var(--blue);
}

/* Focus ring chung */
:where(a, button, input, select, textarea){
  outline:none;
}
:where(a, button, input, select, textarea):focus-visible{
  box-shadow:0 0 0 2px rgba(34,211,238,.8);
  border-color:rgba(56,189,248,.9);
}

/* ---- Layout blocks ---- */
.section{
  margin-block:6px;
  padding:8px;
  border-radius:var(--radius);
  background: radial-gradient(circle at top left, rgba(12,18,32,.9) 0, rgba(12,18,32,.98) 45%);
  border:1px solid rgba(15,23,42,.9);
  box-shadow:var(--shadow-soft);
}

.section-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px 12px;
  margin-bottom:10px;
}
.section-header-main{
  min-width:0;
}
.section-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.section-footer{
  margin-top:12px;
}

.section-notes{
	margin: 12px 6px 2px;
	font-size: 13px;
	color:var(--muted);
}

/* Cards */
.card{
  padding:8px;
  border-radius:var(--radius);
  background:radial-gradient(circle at top left, rgba(15,23,42,.9) 0, rgba(15,23,42,1) 45%);
  border:1px solid rgba(15,23,42,.9);
  box-shadow:var(--shadow-soft);
}

.card-header{}

.card-title{
	font-size:var(--size-15);
	color:var(--white);
	font-weight:500;
	margin-bottom:4px;
}

.card-subtitle{}

.card-body{
	gap:8px;
}

.card-footer{
	margin-bottom:4px;
}

/* Card grid (dùng cho guests, users, v.v.) */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Card grid (dùng cho control, telemetry) */
#telemetry-cards-grid,
#control-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
  align-items:start;
}

/* Toggle switch */
.smh-toggle{
  position:relative;
  display:inline-block;
  width:30px;
  height:22px;
  vertical-align:middle;
}

.smh-toggle > input{
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  cursor:pointer;
}

.smh-toggle-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#dc2626;
  transition:.18s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.smh-toggle-slider::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:.18s ease;
  z-index:2;
}

.smh-toggle > input:checked + .smh-toggle-slider{
  background:#48c62c;
}

.smh-toggle.mode-toggle > input + .smh-toggle-slider{
  background:#48c62c;
}

.smh-toggle > input:checked + .smh-toggle-slider::before{
  transform:translateX(21px);
}

.smh-toggle > input:disabled + .smh-toggle-slider{
  background:#9ca3af;
  cursor:not-allowed;
}

.smh-toggle-text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:9px;
  line-height:1;
  font-weight:700;
  user-select:none;
  pointer-events:none;
  z-index:1;
}

.smh-toggle-text-left{
  left:7px;
  color:#ffffff;
}

.smh-toggle-text-right{
  right:7px;
  color:#6b7280;
}

.smh-toggle.mode-toggle > input:not(:checked) + .smh-toggle-slider + .smh-toggle-text-left{
  color:#6b7280;
}

.smh-toggle.mode-toggle > input:not(:checked) + .smh-toggle-slider + .smh-toggle-text-left + .smh-toggle-text-right{
  color:#ffffff;
}


/* Nhóm nút hành động trong card (Sửa / Xóa / ...) */
.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;         /* khoảng cách giữa các nút */
}

.cards-list{
	margin-top:8px;
	display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

#channel-catalog-list{
  grid-template-columns:1fr;
}

@media (min-width: 980px){
  #channel-catalog-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
  }
}

/* ---- Inputs & Buttons (neutral) ---- */
.input{
  width:100%;
  min-height:34px;
  padding:6px 8px;
  border-radius:var(--radius);
  border:var(--brd) solid var(--border);
  background:var(--card-2);
  color:var(--text);
  font-size:13px;
}
.input::placeholder{
	color:var(--grey);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:35px; padding:10px 14px; border-radius:var(--radius);
  white-space: nowrap;
  /* ▼ Viền xanh mờ giống brand (#38bdf8 @ 35%) */
  border: var(--brd) solid var(--btn-border);
  background:var(--card); color:var(--text);
  cursor:pointer; text-decoration:none;
	height:34px;
  font-size:14px;
}

.btn:hover{
  background:var(--card-3);
}

/* Variants */
.btn-primary{
  border-color:rgba(56,189,248,.5);
  background:radial-gradient(circle at top, rgba(56,189,248,.35) 0, rgba(8,47,73,1) 35%);
}
.btn-primary:hover{
  background:radial-gradient(circle at top, rgba(56,189,248,.45) 0, rgba(8,47,73,1) 35%);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(15,23,42,.9);
}
.btn-ghost:hover{
  background:rgba(15,23,42,.8);
}

.btn-edit-channel-catalog{
  min-height:25px;
  height:25px;
  margin-top:10px;
  padding:6px 12px;
  border-radius:5px;
}

/* ---- Button danger ---- */
.btn-danger{
  background:#7f1d1d;
  border-color:#7f1d1d;
  white-space:normal;   /* cho phép xuống dòng */
  line-height:1.3;
}
.btn-danger:hover{
  background:#b91c1c;
}

.smh-toggle{
  position:relative;
  display:inline-block;
  width:52px;
  height:24px;
  vertical-align:middle;
}

.smh-toggle > input{
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  cursor:pointer;
}

.smh-toggle-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#dc2626;
  transition:.18s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.smh-toggle-slider::before{
  content:"";
  position:absolute;
  width:19px;
  height:19px;
  left:3px;
  top:2.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:.18s ease;
  z-index:2;
}

.smh-toggle > input:checked + .smh-toggle-slider{
  background:#48c62c;
}

.smh-toggle.mode-toggle > input + .smh-toggle-slider{
  background:#48c62c;
}

.smh-toggle > input:checked + .smh-toggle-slider::before{
  transform:translateX(28px);
}

.smh-toggle > input:disabled + .smh-toggle-slider{
  cursor:not-allowed;
}

.smh-toggle > input:disabled + .smh-toggle-slider::before{
  box-shadow:none;
}

.smh-toggle-text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  line-height:1;
  font-weight:500;
  user-select:none;
  pointer-events:none;
  z-index:1;
}

.smh-toggle-text-left{
  left:9px;
  color:#ffffff;
}

.smh-toggle-text-right{
  right:9px;
  color:#6b7280;
}

.smh-toggle.mode-toggle > input:not(:checked) + .smh-toggle-slider + .smh-toggle-text-left{
  color:#6b7280;
}

.smh-toggle.mode-toggle > input:not(:checked) + .smh-toggle-slider + .smh-toggle-text-left + .smh-toggle-text-right{
  color:#ffffff;
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  font-size:11px;
  color:var(--muted);
}

/* ===== Station control ===== */
.control-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  line-height:18px;
  white-space:nowrap;
}

.control-chip-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
}

.control-chip-btn{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.control-chip-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(148,163,184,.42);
}

.control-chip-btn:focus-visible{
  box-shadow:0 0 0 2px rgba(34,211,238,.35);
}

.control-set-rules-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  line-height:18px;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.control-set-rules-chip:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(148,163,184,.42);
}

.control-set-rules-chip:focus-visible{
  box-shadow:0 0 0 2px rgba(34,211,238,.35);
}

.control-rules-block{
  border-top:1px solid rgba(148,163,184,.22);
  padding-top:12px;
  margin-bottom:12px;
}

.control-overwrite-block{
  border-top:1px solid rgba(148,163,184,.22);
  padding-top:12px;
  margin-bottom:0;
}

.control-rule-row{			
  padding:6px 0;
}

.control-rule-row + .control-rule-row{
  margin-top:4px;
}

.control-rule-layout{
  display:grid;
  grid-template-columns:
    minmax(0,3.2fr)
    minmax(64px,84px)
    56px
    76px
    64px
    82px;
  gap:1px 4px;
  align-items:start;
}

.control-rule-name{
  min-width:0;
}

.control-rule-title{
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--white);
}

.control-rule-sub{
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}

.control-rule-head-label{
	display:block;
  font-size:12px;
  line-height:1.0;
  color:var(--muted);
	margin-bottom:6px;
}

.control-rule-head-label.is-center{
  text-align:center;
}

.control-rule-head-label.is-right{
  text-align:right;
}

.control-rule-zone{
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}

.control-rule-snapshot-wrap{
  text-align:left;
  white-space:nowrap;
	padding-top: 6px;
}

.control-rule-snapshot-value{
  font-size:28px;
  line-height:1;
  font-weight:700;
  color:var(--white);
}

.control-rule-snapshot-unit{
  margin-left:4px;
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:var(--muted);
}

.control-rule-operator-wrap,
.control-rule-setpoint-wrap,
.control-rule-action-wrap,
.control-rule-priority-wrap{
  text-align:center;
}

.control-rule-priority-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.control-rule-priority-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:12px;
  min-width:12px;
  height:34px;
  flex:0 0 12px;
}

.control-rule-priority-dot{
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  
  background:var(--grey);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.control-rule-priority-dot.is-true{
  background:var(--green);
}

.control-rule-priority-dot.is-false{
  background:var(--red);
}

.control-rule-priority-dot.is-unknown{
  background:var(--grey);
}

.control-rule-operator-select,
.control-rule-action-select,
.control-rule-setpoint-input,
.control-rule-priority-input{
  width:100%;
  min-width:0;
  height:30px;
  padding:4px 2px;
  font-size:15px;
  font-weight:500;
  text-align:center;
}

.control-rule-setpoint-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.control-rule-setpoint-input{
  width:68px;
  max-width:68px;
}

.control-rule-priority-input{
  width:65px;
  max-width:65px;
}

.control-rule-operator-select,
.control-rule-action-select{
  text-align-last:center;
}

@media (max-width: 640px){
	.control-rule-layout{
		display:grid;
		grid-template-columns:minmax(0,1fr) 64px 84px 72px;
		grid-template-areas:
			"name name snapshot setpoint"
			". operator action priority";
		gap:10px 10px;
		align-items:start;
	}

	.control-rule-col-name{ grid-area:name; min-width:0; }
	.control-rule-col-snapshot{ grid-area:snapshot; min-width:0; }
	.control-rule-col-setpoint{ grid-area:setpoint; min-width:0; }
	.control-rule-col-operator{ grid-area:operator; min-width:0; }
	.control-rule-col-action{ grid-area:action; min-width:0; }
	.control-rule-col-priority{ grid-area:priority; min-width:0; }
	
	.control-rule-col-operator .control-rule-head-label,
	.control-rule-col-action .control-rule-head-label,
	.control-rule-col-priority .control-rule-head-label{
		display:block;
		text-align:center;
	}

	.control-rule-col-setpoint .control-rule-head-label{
		display:block;
		text-align:center;
	}
	
	.control-rule-col-operator,
	.control-rule-col-action,
	.control-rule-col-priority{
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
	}

	.control-rule-operator-select,
	.control-rule-action-select,
	.control-rule-priority-input{
		width:100%;
		min-width:0;
		height:32px;
		padding:5px 8px;
		font-size:13px;
		text-align:center;
	}

  .control-rule-priority-wrap{
    gap:6px;
  }

  .control-rule-priority-badge{
    width:10px;
    min-width:10px;
    height:32px;
    flex:0 0 10px;
  }

  .control-rule-priority-dot{
    width:4px;
    height:4px;
  }

  .control-rule-col-snapshot,
  .control-rule-col-operator,
  .control-rule-col-setpoint,
  .control-rule-col-action,
  .control-rule-col-priority{
    min-width:0;
  }

  .control-rule-title{
    font-size:13px;
    line-height:1.2;
  }

  .control-rule-sub,
  .control-rule-zone{
    font-size:11px;
    line-height:1.2;
  }

  .control-rule-head-label{
    font-size:13px;
    margin-bottom:6px;
  }

  .control-rule-col-snapshot .control-rule-head-label{
    text-align:left;
  }

  .control-rule-snapshot-wrap{
    text-align:left;
    white-space:nowrap;
		padding-top: 6px;
  }

  .control-rule-snapshot-value{
    font-size:22px;
  }

  .control-rule-snapshot-unit{
    font-size:13px;
    font-weight:700;
  }

  .control-rule-operator-select,
  .control-rule-action-select,
  .control-rule-setpoint-input,
  .control-rule-priority-input{
    width:100%;
    min-width:0;
    height:32px;
    padding:4px 6px;
    font-size:13px;
    text-align:center;
  }

  .control-rule-operator-select,
  .control-rule-action-select{
    text-align-last:center;
  }
}

.control-rule-name{
	grid-column:1;
	grid-row:1;
	min-width:0;
}

.control-rule-head-label.is-center{
	grid-column:2;
	grid-row:1;
	text-align:center;
	font-size:11px;
}

.control-rule-head-label.is-right{
	grid-column:3;
	grid-row:1;
	text-align:right;
	font-size:11px;
}

.control-rule-zone{
	grid-column:1;
	grid-row:2;
	font-size:12px;
}

.control-rule-snapshot-wrap{
	grid-column:2;
	grid-row:2;
	text-align:center;
}

.control-rule-setpoint-wrap{
	grid-column:3;
	grid-row:2;
	text-align:right;
}

.control-rule-title{
	font-size:13px;
	line-height:1.25;
}

.control-rule-sub{
	font-size:11px;
	line-height:1.25;
}

.control-rule-snapshot-value{
	font-size:22px;
}

.control-rule-snapshot-unit{
	font-size:13px;
	font-weight:700;
}


/* textarea */
textarea{
  height:auto;
  min-height:72px;
  resize:vertical;
}

/* Card subtle border for readonly/disabled */
input[disabled],
select[disabled],
textarea[disabled]{
  opacity:.7;
  cursor:not-allowed;
}

/* Header nav */
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.nav a{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
}
.nav a:hover{
  border-color:rgba(148,163,184,.6);
  background:rgba(15,23,42,.9);
}

/* Subnav (trong các page con nếu cần) */
.subnav{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}
.subnav a{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
}
.subnav a:hover{
  border-color:rgba(148,163,184,.6);
  background:rgba(15,23,42,.9);
}

/* Tables (ví dụ Telemetry) */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table th,
.table td{
  border-bottom:1px solid rgba(31,41,55,.9);
  padding:6px 8px;
}
.table th{
  text-align:left;
  font-weight:500;
}

/* Scroll */
::-webkit-scrollbar{
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track{
  background:#020617;
}
::-webkit-scrollbar-thumb{
  background:#1f2937;
  border-radius:999px;
}

/* Alerts */
.alert{
  padding:8px 10px;
  border-radius:5px;
  font-size:13px;
}
.alert-error{
  background:rgba(127,29,29,.25);
  border:1px solid rgba(248,113,113,.6);
	border-radius:8px
  color:#fecaca;
}
.alert-success{
  background:rgba(22,101,52,.25);
  border:1px solid rgba(74,222,128,.6);
  color:#bbf7d0;
}

/* Station control status */
.control-status-wrap{
  margin-top:-40px;
  margin-bottom:10px;
}

.control-status-box{
  display:block;
  margin:0;
  height:28px;
  padding:4px 10px;
  line-height:18px;
  box-sizing:border-box;
  overflow:hidden;
}

.control-status-box + .control-status-box{
  margin-top:6px;
}

.control-status-box.is-soft-hidden{
  visibility:hidden;
  background:transparent;
  color:transparent;
  border-color:transparent;
}

@media (max-width: 768px){
  .control-status-wrap{
    margin-top:-30px;
  }
}

/* Inline code / kbd */
kbd{
  display:inline-block;
  padding:2px 5px;
  border-radius:4px;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.9);
  font-size:11px;
}

/* Chip / pill */
.chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  font-size:11px;
}

/* Flex helpers */
.flex-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.flex-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.justify-between{
  justify-content:space-between;
}

/* Simple utility spacing */
.mt-1{ margin-top:4px; }
.mt-2{ margin-top:8px; }
.mt-3{ margin-top:12px; }
.mt-4{ margin-top:16px; }
.mb-1{ margin-bottom:4px; }
.mb-2{ margin-bottom:8px; }
.mb-3{ margin-bottom:12px; }
.mb-4{ margin-bottom:16px; }

/* Text alignment */
.text-right{ text-align:right; }
.text-center{ text-align:center; }

/* Mono text */
.text-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Text Color */
.text-red {
  color:var(--red);
  font-weight: 500;
}

.text-green {
  color:var(--green);
  font-weight: 500;
}

.text-blue {
  color:var(--blue);
  font-weight: 500;
}

/* Divider */
.divider{
  margin:10px 0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(148,163,184,.6), transparent);
}

/* Badges for status (optional) */
.badge-ok{
  border-color:rgba(34,197,94,.7);
  color:#bbf7d0;
}
.badge-warn{
  border-color:rgba(250,204,21,.7);
  color:#facc15;
}
.badge-err{
  border-color:rgba(248,113,113,.8);
  color:#fecaca;
}

/* Subtext row */
.subtext-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
}

/* =========================
   Field (native input)
   ========================= */
.field {
  display: flex;
  gap: 6px;
  font-size: 13px;
}
   
.field label{
  margin: 8px 6px;
}

/* =========================
   Date/Time Picker (native input)
   Dùng cho: input[type="date"], input[type="datetime-local"]...
   ========================= */

/* ===== DateTime Picker layout (GRID, dóng cột PC/Mobile) ===== */

.dtp-range{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; /* 2 field + nút */
  gap:12px;
  align-items:end;
}

.dtp-field{
  display:grid;
  grid-template-rows:auto auto;
  gap:6px;
  min-width:0; /* quan trọng để không phá grid trên mobile */
}

.dtp-field label{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--text, rgba(255,255,255,.92));
}

.dtp-field input[type="date"],
.dtp-field input[type="datetime-local"],
.dtp-field input[type="time"],
.dtp-field input[type="month"]{
  width:100%;
  min-width:0;
}

.dtp-actions{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  min-width:max-content;
}

/* Style chung cho các date/time input */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"]{
  width:100%;
  height:40px;
  padding:0 12px;
  font:inherit;
  color:var(--text, rgba(255,255,255,.92));
  background:var(--field-bg, rgba(255,255,255,.06));
  border:1px solid var(--border, rgba(255,255,255,.14));
  border-radius:10px;
  outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Hover */
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="month"]:hover{
  background:var(--field-bg-hover, rgba(255,255,255,.08));
  border-color:var(--border-hover, rgba(255,255,255,.22));
}

/* Focus */
input[type="date"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="time"]:focus-visible,
input[type="month"]:focus-visible{
  border-color:var(--accent, #2f81f7);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #2f81f7) 35%, transparent),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Disabled */
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="time"]:disabled,
input[type="month"]:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Căn/đẹp icon lịch (WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.75;
  cursor:pointer;
  padding:6px;
  margin-right:-6px;
  border-radius:8px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}

/* Placeholder theo tone tối (nếu trình duyệt hỗ trợ) */
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder{
  color:rgba(255,255,255,.45);
}

/* Mobile: 1 cột, nút nằm dưới và canh phải */
@media (max-width: 640px){
  .dtp-range{
    grid-template-columns: 1fr;
    align-items:stretch;
  }
  .dtp-actions{
    width:100%;
    justify-content:flex-end;
  }
}

/* ---- Toast placeholder (nếu sau này cần) ---- */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  min-width:220px;
  max-width:360px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(15,23,42,.98);
  border:1px solid rgba(148,163,184,.6);
  box-shadow:var(--shadow-soft);
  font-size:13px;
}

/* ---- Small components ---- */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  font-size:11px;
  color:var(--muted);
}

/* ---- Form group for simple stacked forms (optional) ---- */
.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}
.form-group label{
  font-weight:500;
}

/* ---- Responsive tweaks ---- */

/* Card grid 2–3 cột ở màn hình rộng */
@media (min-width: 768px){
  .card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (min-width: 1120px){
  .card-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

/* Container rộng hơn một chút trên desktop */
@media (min-width: 980px){
  .container{
    max-width:1120px;
  }
}

/* Alert visibility helper */
.alert.is-hidden{
  display:none;
}
.alert.is-visible{
  display:block;
}

/* ---- Mobile tweaks (giảm đệm 2 bên container & section) ---- */
@media (max-width: 480px){
  .container{ padding-left:6px; padding-right:6px; }
  .section{  padding:8px 10px; }
  .card{     padding:12px; }
  input, select, textarea {font-size:16px;}
}

/* ===== Mobile: prevent iOS Safari zoom on form focus =====
   iOS auto-zooms when focused control font-size < 16px.
   Apply only on touch devices (coarse pointer). */
@media (hover: none) and (pointer: coarse){
  input,
  select,
  textarea,
  button{
    font-size:16px !important;
  }
}

/* Footer chung cho toàn hệ thống */
.site-footer {
  margin-top: 8px;
  padding: 10px 10px;
  font-size: 12px;        /* chỉnh cỡ chữ footer ở đây */
  text-align: left;
  color: var(--muted);
  border-top: 1px solid var(--brd-subtle);
}

/* Nếu muốn tên + số điện thoại đậm, hơi to hơn */
.site-footer strong {
  font-size: 12px;        /* hoặc 14px nếu muốn nổi hơn */
  font-weight: 600;
}

/* Điện thoại: font nhỏ hơn nữa */
@media (max-width: 480px) {
  .site-footer {
    font-size: 8px;      /* giảm cỡ chữ trên mobile */
  }

  .site-footer strong {
    font-size: 8px;
  }
}

/* Toolbar form – dùng chung cho các thanh filter (label + control) */
.form-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
	border-radius: 6px;
  align-items:flex-end;
}

/* Trong toolbar, form-group không cần margin-top riêng */
.form-toolbar .form-group{
  margin-top:0;
}