/* ============================================================
   LinkBiz — Component layer
   Recreates the product's core components from work-*.css
   (button / input / select / badge / signal / card / tabs / search).
   Requires colors_and_type.css to be loaded first.
   ============================================================ */

*{ box-sizing:border-box; }

.lb-root{
  font-family:var(--lb-font-sans);
  font-size:var(--lb-fs-base);
  color:var(--lb-fg4);
  letter-spacing:var(--lb-tracking);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- BUTTON ---------------- */
.Button{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:40px; padding:3px 15px; background:#fff; border:1px solid var(--lb-line);
  font-family:var(--lb-font-sans); font-weight:normal; font-size:15px;
  letter-spacing:-0.8px; color:#333; border-radius:var(--lb-radius);
  cursor:pointer; vertical-align:middle; transition:all .3s; white-space:nowrap;
}
.Button:hover,.Button:focus,.Button.af-hover{ background:var(--lb-bg-gray5); border:1px solid var(--lb-line); color:#333; }
.Button i{ font-size:18px; line-height:1; margin-top:-1px; }
.Button.info{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.Button.info:hover{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.Button.info.line{ background:#fff; border:1px solid var(--lb-info); color:var(--lb-info); }
.Button.info.line:hover,.Button.info.line.Checked{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.Button.primary{ background:var(--lb-primary); border-color:var(--lb-primary); color:#fff; }
.Button.primary.line{ background:#fff; border-color:var(--lb-primary); color:var(--lb-primary); }
.Button.success{ background:#23cf3a; border-color:#23cf3a; color:#fff; }
.Button.warning{ background:#fac60a; border-color:#fac60a; color:#fff; }
.Button.danger{ background:#ff6a00; border-color:#ff6a00; color:#fff; }
.Button.Disabled,.Button[disabled]{ color:#aaa; background:#f4f4f4; border:1px solid #ddd; cursor:not-allowed; }
.Button.active{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.Button.active i{ color:#fff; }
.Button.small{ height:32px; padding:5px 10px; font-size:13px; border-radius:var(--lb-radius-sm); }
.Button.small i{ font-size:16px; }
.Button.small.active{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.Button.large{ height:44px; padding:12px 20px; font-size:16px; }
.Button.xlarge{ height:48px; padding:14px 30px; font-size:18px; }
.Button.only-ico{ min-width:40px; padding:0; }
.Button.only-ico.small{ min-width:32px; }
.Button.trans-ico{ height:auto; padding:0; background:none; border:none; border-radius:0; color:var(--lb-fg5); }
.Button.trans-ico.help{ color:var(--lb-info); }
.Button.reset{ min-width:40px; padding:0; }
.Button.round-max{ border-radius:var(--lb-radius-pill); }
.Button.delete{ border:1px solid #f1b4b4; }
.Button.delete i{ color:#db4242; }
.Button.delete:hover{ background:#fceeee; }
.Groupbutton{ display:inline-flex; align-items:center; gap:4px; }

/* ---------------- TEXT INPUT ---------------- */
.Textinput{
  height:40px; padding:0 12px; font-family:var(--lb-font-sans); font-size:15px;
  color:#202020; letter-spacing:-0.2px; background:#fff;
  border:1px solid var(--lb-line); border-radius:var(--lb-radius); outline:none; transition:all .2s;
}
.Textinput::placeholder{ color:#999; }
.Textinput:hover{ border-color:#b7afd4; }
.Textinput:focus{ border-color:var(--lb-info); }
.Textinput[readonly],.Textinput[disabled]{ background:#f2f4f5; }
textarea.Textarea{
  width:100%; padding:10px 12px; font-family:var(--lb-font-sans); font-size:15px; color:#202020;
  background:#fff; border:1px solid var(--lb-line); border-radius:var(--lb-radius); outline:none; resize:vertical;
}
textarea.Textarea:focus{ border-color:var(--lb-info); }

/* widths */
.wid60{width:60px}.wid80{width:80px}.wid100{width:100px}.wid120{width:120px}.wid140{width:140px}
.wid160{width:160px}.wid180{width:180px}.wid200{width:200px}.wid300{width:300px}.wid400{width:400px}
.wid50p{width:50%}.wid60p{width:60%}.wid70p{width:70%}.wid80p{width:80%}.wid85p{width:85%}.wid90p{width:90%}.wid100p{width:100%}

/* ---------------- DIV SELECT ---------------- */
.Divselect{
  position:relative; display:inline-flex; align-items:center; height:40px; padding:0 36px 0 12px;
  background:#fff; border:1px solid var(--lb-line); border-radius:var(--lb-radius);
  font-size:15px; color:#222; cursor:pointer; transition:all .2s; box-sizing:border-box;
}
.Divselect:hover{ border-color:#b7afd4; }
.Divselect select{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.Divselect:after{
  content:""; position:absolute; right:10px; top:50%; width:10px; height:6px; transform:translateY(-50%);
  background:url("assets/divselect.svg") no-repeat center/contain;
}
.Divselect .ellip{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* ---------------- CHECKBOX / RADIO / SWITCH ---------------- */
.ImageCheckbox,.ImageRadio{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:15px; color:#333; user-select:none; }
.ImageCheckbox input,.ImageRadio input{ position:absolute; opacity:0; }
.ImageCheckbox span:before{
  content:""; display:inline-block; width:18px; height:18px; border:1px solid #cbcbcb; border-radius:5px;
  vertical-align:middle; transition:all .15s; background:#fff;
}
.ImageRadio span:before{ border-radius:50%; }
.ImageCheckbox.Checked span:before,.ImageCheckbox input:checked + span:before{
  background:var(--lb-info) url("assets/icons/alert-check-mark.svg") no-repeat center/12px; border-color:var(--lb-info);
}
.ImageRadio.Checked span:before,.ImageRadio input:checked + span:before{
  border:5px solid var(--lb-info); background:#fff;
}
.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; }
.switch .switch-ground{ position:relative; width:40px; height:22px; background:#cfcdd6; border-radius:1000px; transition:all .2s; }
.switch .switch-ground .marble{ position:absolute; left:2px; top:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:all .2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .switch-ground{ background:var(--lb-info); }
.switch input:checked + .switch-ground .marble{ left:20px; }
.switch .label{ font-size:14px; color:var(--lb-fg5); }

/* ---------------- STATUS: Label-color / signal / badge ---------------- */
.Label-color{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:1000px; font-size:13px; color:#fff; font-weight:normal; }
.Label-color.small{ height:20px; padding:0 8px; font-size:12px; }
.signal-color{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--lb-fg4); }
.signal-color:before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.signal-color.square:before{ border-radius:2px; }
.badge-color{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; font-size:12px; color:#fff; }
.badge-color.step{ border-radius:1000px; }

/* color01–28 fills (solid) + .light variants (tinted bg, colored text) */
.color01{ background:var(--lb-color01); } .color02{ background:var(--lb-color02); } .color03{ background:var(--lb-color03); }
.color04{ background:var(--lb-color04); } .color05{ background:var(--lb-color05); } .color06{ background:var(--lb-color06); }
.color07{ background:var(--lb-color07); } .color08{ background:var(--lb-color08); } .color09{ background:var(--lb-color09); }
.color10{ background:var(--lb-color10); } .color11{ background:var(--lb-color11); } .color12{ background:var(--lb-color12); }
.color13{ background:var(--lb-color13); } .color14{ background:var(--lb-color14); } .color15{ background:var(--lb-color15); }
.color16{ background:var(--lb-color16); } .color17{ background:var(--lb-color17); } .color18{ background:var(--lb-color18); }
.color19{ background:var(--lb-color19); } .color20{ background:var(--lb-color20); } .color21{ background:var(--lb-color21); }
.color22{ background:var(--lb-color22); } .color23{ background:var(--lb-color23); } .color24{ background:var(--lb-color24); }
.color25{ background:var(--lb-color25); } .color26{ background:var(--lb-color26); } .color27{ background:var(--lb-color27); }
.color28{ background:var(--lb-color28); }
/* signal dots take color via text color */
.signal-color.color01{ background:none; color:var(--lb-color01); } .signal-color.color03{ background:none; color:var(--lb-color03); }
.signal-color.color05{ background:none; color:var(--lb-color05); } .signal-color.color09{ background:none; color:var(--lb-color09); }
.signal-color.color10{ background:none; color:var(--lb-color10); } .signal-color.color11{ background:none; color:var(--lb-color11); }
.signal-color.color19{ background:none; color:var(--lb-color19); } .signal-color.color21{ background:none; color:var(--lb-color21); }
.Label-color.light.color01,.badge-color.light.color01{ background:#fde7eb; color:var(--lb-color01); }
.Label-color.light.color05,.badge-color.light.color05{ background:#e4f6ef; color:#2ba07a; }
.Label-color.light.color09,.badge-color.light.color09{ background:#ece7fc; color:var(--lb-color09); }
.Label-color.light.color11,.badge-color.light.color11{ background:#e3f5ff; color:#1c98d6; }
.Label-color.light.color21,.badge-color.light.color21{ background:#fff1dc; color:#e08a00; }
.Label-color.light.color19,.badge-color.light.color19{ background:#eee; color:#777; }

/* ---------------- CARD ---------------- */
.lb-card{ background:#fff; border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius); box-shadow:var(--lb-shadow-card); }

/* KPI status card */
.status-card{
  flex:1; background:#fff; border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius);
  padding:18px 20px; box-shadow:var(--lb-shadow-card); min-width:0;
}
.status-card .card-tit{ display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:bold; color:var(--lb-fg2); }
.status-card .card-value-wrap{ display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.status-card .card-value-wrap .value{ font-family:var(--lb-font-title); font-size:34px; font-weight:bold; color:var(--lb-fg1); line-height:1; }
.status-card .card-value-wrap .change{ font-size:13px; font-weight:600; color:var(--lb-color05); white-space:nowrap; }
.status-card .card-value-wrap.warning .value{ color:var(--lb-color02); }
.status-card .card-value-wrap.warning .change{ color:var(--lb-color02); }
.status-card .card-meta{ display:flex; gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--lb-line-softer); }
.status-card .card-meta .meta{ display:flex; flex-direction:column; gap:3px; }
.status-card .card-meta .meta .tit{ font-size:12px; color:var(--lb-fg6); white-space:nowrap; }
.status-card .card-meta .meta .count{ font-size:16px; font-weight:600; color:var(--lb-fg3); }
.status-board-row{ display:flex; gap:14px; }

/* ---------------- TABS ---------------- */
.Tabs > ul{ display:flex; gap:4px; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--lb-line-soft); }
.Tabs > ul > li{ padding:10px 18px; font-size:15px; color:var(--lb-fg6); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; }
.Tabs > ul > li:hover{ color:var(--lb-fg3); }
.Tabs > ul > li.active{ color:var(--lb-info); border-bottom-color:var(--lb-info); font-weight:600; }

/* ---------------- SECTION TITLE (stitArea) ---------------- */
.stitArea{ display:flex; align-items:center; justify-content:space-between; }
.stitArea .stit03{ margin:0; font-size:18px; font-weight:bold; color:var(--lb-fg2); letter-spacing:-0.8px; }
.stitR{ display:flex; align-items:center; gap:6px; margin-left:auto; }

/* ---------------- SEARCH FORM TABLE ---------------- */
.Table.Form-type{ width:100%; border-collapse:collapse; background:#fff; border-top:1px solid var(--lb-line-soft); }
.Table.Form-type th,.Table.Form-type td{ padding:9px 12px; border-bottom:1px solid var(--lb-line-softer); text-align:left; font-size:14px; vertical-align:middle; }
.Table.Form-type th{ background:#fafafa; font-weight:bold; color:var(--lb-fg3); width:150px; }
.com-searchbox{ position:relative; background:#fff; border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius); padding:4px 14px; }

/* ---------------- DATA GRID (jqxGrid look-alike) ---------------- */
.lb-grid{ width:100%; border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius); overflow:hidden; background:#fff; }
.lb-grid table{ width:100%; border-collapse:collapse; }
.lb-grid thead th{ background:#f6f5fa; color:var(--lb-fg3); font-weight:600; font-size:13px; padding:10px 12px; text-align:left; border-bottom:1px solid #e3e1ec; white-space:nowrap; }
.lb-grid tbody td{ padding:9px 12px; font-size:14px; color:var(--lb-fg4); border-bottom:1px solid var(--lb-line-softer); }
.lb-grid tbody tr:hover{ background:#faf9fe; }
.lb-grid tbody tr.selected{ background:#f3effe; }

/* ---------------- TOOLTIP ---------------- */
.Tooltip{ display:inline-block; background:#2b2838; color:#fff; font-size:12px; padding:5px 10px; border-radius:var(--lb-radius-lg); }
.require{ color:var(--lb-color01); font-size:12px; margin-left:3px; }
.blind{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }