* {
  box-sizing: border-box;
}


/* =====================================================
   ROOT
===================================================== */

:root {
  --navy: #08294c;
  --navy-dark: #071e38;

  --blue: #1769df;
  --blue-soft: #edf5ff;

  --green: #25a356;
  --green-soft: #e9f8ed;

  --amber: #e59600;
  --amber-soft: #fff4df;

  --red: #e72837;
  --red-soft: #fff0f1;

  --purple: #6855dc;
  --purple-soft: #f1edff;

  --text: #172033;
  --muted: #7d8797;

  --line: #e7eaf1;

  --bg: #f5f7fb;
  --white: #ffffff;
}


/* =====================================================
   BODY
===================================================== */

body {
  margin: 0;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  background: var(--bg);
  color: var(--text);
}


button,
input,
select {
  font: inherit;
}


button {
  color: inherit;
}


.app {
  display: flex;
  min-height: 100vh;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
  width: 245px;

  position: fixed;
  inset: 0 auto 0 0;

  background:
    linear-gradient(
      180deg,
      var(--navy),
      var(--navy-dark)
    );

  color: #fff;

  padding: 20px 14px;

  display: flex;
  flex-direction: column;

  z-index: 30;

  overflow-y: auto;
}


/* =====================================================
   BRAND
===================================================== */

.brand {
  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    0
    10px
    24px;
}


.brand-icon {
  width: 42px;
  height: 42px;

  background: #fff;

  border-radius: 12px;

  color: var(--navy);

  display: grid;
  place-items: center;

  font-size: 22px;
}


.brand b {
  font-size: 21px;
}


.brand small {
  display: block;

  opacity: 0.62;

  margin-top: 2px;

  font-size: 11px;
}


/* =====================================================
   SIDEBAR NAVIGATION
===================================================== */

.sidebar-nav {
  display: flex;
  flex-direction: column;

  gap: 16px;
}


.nav-group {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.nav-label {
  font-size: 9px;

  letter-spacing: 1.4px;

  color: #8fa5bb;

  padding:
    0
    13px
    5px;

  font-weight: 700;
}


.nav {
  width: 100%;

  border: 0;

  background: transparent;

  color: #d9e5f0;

  border-radius: 9px;

  text-align: left;

  padding: 11px 12px;

  cursor: pointer;

  font-size: 13px;

  display: grid;

  grid-template-columns:
    24px
    1fr
    auto;

  align-items: center;

  gap: 7px;

  transition: 0.18s ease;
}


.nav-symbol {
  display: grid;
  place-items: center;

  font-size: 15px;
}


.nav:hover {
  background: #0e3c68;
  color: #fff;
}


.nav.active {
  background:
    linear-gradient(
      135deg,
      #1677ff,
      #3d55dd
    );

  color: #fff;

  box-shadow:
    0
    7px
    20px
    rgba(25, 106, 255, 0.22);
}


.nav-count {
  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

  min-width: 22px;
  height: 22px;

  padding: 0 6px;

  border-radius: 999px;

  font-size: 10px;

  display: grid;
  place-items: center;
}


/* =====================================================
   SIDEBAR BOTTOM
===================================================== */

.side-bottom {
  margin-top: auto;

  padding:
    18px
    8px
    0;
}


.connection-box {
  border-top:
    1px
    solid
    #ffffff2d;

  border-bottom:
    1px
    solid
    #ffffff2d;

  padding:
    14px
    0;

  display: flex;

  gap: 10px;

  align-items: center;
}


.connection-icon {
  font-size: 19px;
  color: #2bd477;
}


.connection-box b,
.connection-box small {
  display: block;
}


.connection-box small {
  font-size: 11px;

  margin-top: 4px;

  color: #c6d4e2;
}


.connection-box small i {
  display: inline-block;

  width: 7px;
  height: 7px;

  background: #2bd477;

  border-radius: 50%;

  margin-right: 5px;
}


.side-bottom p {
  font-size: 11px;

  color: #9db0c3;

  line-height: 1.5;
}


/* =====================================================
   MAIN
===================================================== */

.main {
  margin-left: 245px;

  flex: 1;

  min-width: 0;
}


/* =====================================================
   TOPBAR
===================================================== */

.topbar {
  height: 82px;

  background: #fff;

  border-bottom:
    1px
    solid
    var(--line);

  display: flex;

  align-items: center;

  padding:
    0
    26px;

  position: sticky;

  top: 0;

  z-index: 20;
}


.menu {
  border: 0;

  background: transparent;

  font-size: 22px;

  cursor: pointer;

  width: 36px;
  height: 36px;

  border-radius: 8px;
}


.menu:hover {
  background: #f2f5f9;
}


/* =====================================================
   HEADER LOGOS
===================================================== */

.header-logos {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-left: 22px;

  height: 100%;
}


.logo-box {
  height: 54px;

  min-width: 86px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.logo-box-pln {
  width: 145px;

  overflow: hidden;
}


.header-logo {
  display: block;

  width: auto;

  object-fit: contain;
}


/* PLN */

.logo-pln {
  height: 48px;

  transform:
    scale(2.6);

  transform-origin:
    center;
}


/* YATIM MANDIRI */

.logo-yatim {
  height: 45px;

  max-width: 120px;
}


/* POLINEMA */

.logo-polinema {
  height: 48px;

  max-width: 90px;
}


/* =====================================================
   TOPBAR RIGHT
===================================================== */

.grow {
  flex: 1;
}


.system-mini-status {
  display: flex;

  align-items: center;

  gap: 7px;

  border:
    1px
    solid
    #dfe8e2;

  background: #f4fbf6;

  color: #25834a;

  border-radius: 9px;

  padding: 8px 10px;

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;
}


.system-mini-status i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #25b660;

  box-shadow:
    0
    0
    0
    4px
    rgba(37, 182, 96, 0.12);
}


.chip,
.user {
  border:
    1px
    solid
    #e3e7ee;

  background: #fff;

  border-radius: 9px;

  padding: 8px 10px;

  font-size: 11px;

  margin-left: 8px;
}


.user {
  display: flex;

  gap: 8px;

  align-items: center;

  padding: 6px 9px;
}


.user > span {
  width: 30px;
  height: 30px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: #e9eef6;

  font-weight: 800;
}


.user-text b,
.user-text small {
  display: block;
}


.user-text b {
  font-size: 11px;
}


.user-text small {
  color: var(--muted);

  font-size: 9px;

  margin-top: 2px;
}


.user > strong {
  font-size: 11px;

  color: #8993a2;
}


.notif {
  border: 0;

  background: transparent;

  margin-left: 9px;

  font-size: 18px;

  position: relative;

  cursor: pointer;

  width: 34px;
  height: 34px;

  border-radius: 8px;
}


.notif:hover {
  background: #f3f5f8;
}


.notif em {
  position: absolute;

  right: -2px;
  top: -5px;

  background: #e62d39;

  color: #fff;

  border-radius: 20px;

  font-size: 9px;

  padding: 2px 5px;
}


/* =====================================================
   CONTENT
===================================================== */

.content {
  padding: 24px;
}


.page {
  display: none;
}


.page.active {
  display: block;
}


.heading {
  margin-bottom: 18px;
}


.heading-with-status {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;
}


.heading h1 {
  margin: 0;

  font-size: 28px;

  letter-spacing: -0.5px;
}


.heading p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 13px;
}


/* =====================================================
   LIVE STATUS
===================================================== */

.live-status-card {
  background: #fff;

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

  border-radius: 11px;

  padding: 9px 12px;

  min-width: 190px;
}


.live-status-card > div {
  display: flex;

  align-items: center;

  gap: 7px;
}


.live-status-card b {
  font-size: 10px;

  letter-spacing: 0.4px;

  color: #23884a;
}


.live-status-card small {
  display: block;

  font-size: 9px;

  color: var(--muted);

  margin-top: 5px;
}


.live-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #25b660;

  box-shadow:
    0
    0
    0
    4px
    rgba(37, 182, 96, 0.12);
}


/* =====================================================
   PANEL
===================================================== */

.panel {
  background: #fff;

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

  border-radius: 13px;

  box-shadow:
    0
    5px
    18px
    rgba(32, 49, 75, 0.04);

  padding: 16px;
}


.panel-title {
  font-size: 14px;

  font-weight: 800;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

  margin-bottom: 4px;
}


.panel-title > div {
  display: flex;

  align-items: center;

  gap: 8px;
}


.panel-title select {
  border:
    1px
    solid
    #dfe4eb;

  border-radius: 7px;

  padding: 5px 7px;

  background: #fff;

  font-size: 10px;

  color: #657184;
}


.panel-subtitle {
  color: var(--muted);

  font-size: 10px;

  margin:
    0
    0
    13px;
}


/* =====================================================
   TITLE ICON
===================================================== */

.title-icon {
  width: 27px;
  height: 27px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  font-size: 13px;
}


.red-soft {
  background: var(--red-soft);
  color: var(--red);
}


.blue-soft {
  background: var(--blue-soft);
  color: var(--blue);
}


.green-soft {
  background: var(--green-soft);
  color: var(--green);
}


.purple-soft {
  background: var(--purple-soft);
  color: var(--purple);
}


/* =====================================================
   KPI
===================================================== */

.kpis {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(150px, 1fr)
    );

  gap: 13px;

  margin-bottom: 14px;
}


.kpi {
  border:
    1px
    solid
    var(--line);

  background: #fff;

  border-radius: 13px;

  box-shadow:
    0
    5px
    15px
    rgba(32, 49, 75, 0.035);

  padding: 14px;

  display: flex;

  align-items: center;

  gap: 11px;

  text-align: left;

  cursor: pointer;

  transition: 0.18s ease;
}


.kpi:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0
    8px
    20px
    rgba(32, 49, 75, 0.07);
}


.kpi-danger {
  border-color: #f2d6da;
}


.kpi-warning {
  border-color: #f4e4c7;
}


.kpi i {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-style: normal;

  font-size: 21px;

  font-weight: 900;

  flex-shrink: 0;
}


.purple {
  background: #eee9ff;
  color: #6855dc;
}


.green {
  background: #e8f8ee;
  color: #2eb35c;
}


.amber {
  background: #fff2dd;
  color: #f49b10;
}


.red {
  background: #ffebec;
  color: #e92b37;
}


.gray {
  background: #eef1f5;
  color: #758093;
}


.kpi span,
.kpi small {
  display: block;
}


.kpi span {
  font-size: 11px;

  font-weight: 700;
}


.kpi b {
  display: block;

  font-size: 25px;

  margin: 2px 0;
}


.kpi small {
  color: var(--muted);

  font-size: 9px;
}


/* =====================================================
   DASHBOARD GRID
===================================================== */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    1fr
    1.25fr;

  gap: 14px;
}


/* =====================================================
   PILL
===================================================== */

.pill {
  display: inline-flex;

  align-items: center;

  padding: 4px 8px;

  border-radius: 20px;

  font-size: 9px;

  font-style: normal;

  font-weight: 700;

  white-space: nowrap;
}


.ok {
  background: var(--green-soft);

  color: #299d51;
}


.good {
  color: var(--green);
}


.warn {
  color: var(--amber);
}


.critical-text,
.critical {
  color: var(--red);
}


.normal {
  color: var(--green);
}


.warning {
  color: var(--amber);
}


/* =====================================================
   BUTTONS
===================================================== */

.text-btn {
  border: 0;

  background: transparent;

  color: var(--blue);

  font-size: 10px;

  cursor: pointer;

  font-weight: 700;
}


.secondary-btn {
  border:
    1px
    solid
    #dbe3ee;

  color: #31506f;

  background: #fff;

  border-radius: 8px;

  padding: 8px 11px;

  font-size: 10px;

  cursor: pointer;

  font-weight: 700;
}


.secondary-btn:hover {
  background: #f5f8fb;
}


.full-btn {
  width: 100%;

  margin-top: 13px;
}


.primary {
  border: 0;

  background: var(--blue);

  color: #fff;

  padding: 10px 13px;

  border-radius: 8px;

  font-weight: 700;

  cursor: pointer;
}


.primary:hover {
  background: #135dc4;
}


/* =====================================================
   ALERT
===================================================== */

.alerts {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.alert {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 9px;

  padding: 10px;

  border-radius: 9px;

  background: #f8f9fc;

  align-items: start;
}


.alert.red {
  background: #fff2f3;
}


.alert.orange {
  background: #fff7ea;
}


.alert.blue {
  background: #eef6ff;
}


.alert > i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  margin-top: 4px;

  background: #ee313c;
}


.alert.orange > i {
  background: #f19a12;
}


.alert.blue > i {
  background: #2575dc;
}


.alert b {
  font-size: 10px;

  display: block;
}


.alert small {
  font-size: 9px;

  color: var(--muted);

  display: block;

  margin-top: 2px;
}


.alert time {
  font-size: 9px;

  color: var(--muted);

  white-space: nowrap;
}


.alert-action {
  border: 0;

  background: transparent;

  color: var(--blue);

  font-size: 9px;

  padding: 3px 0 0;

  cursor: pointer;

  font-weight: 700;
}


.alerts.full .alert {
  padding: 14px;
}


.alert-page-head {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

  border-bottom:
    1px
    solid
    #edf0f4;

  padding-bottom: 13px;
}


.alert-page-head b,
.alert-page-head small {
  display: block;
}


.alert-page-head small {
  color: var(--muted);

  font-size: 10px;

  margin-top: 3px;
}


.alert-summary-pills {
  display: flex;

  gap: 7px;
}


.summary-pill {
  padding: 6px 9px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 800;
}


.critical-pill {
  background: var(--red-soft);

  color: var(--red);
}


.warning-pill {
  background: var(--amber-soft);

  color: var(--amber);
}


/* =====================================================
   BARN
===================================================== */

.barn-status {
  background: #f4fbf6;

  border:
    1px
    solid
    #dff0e4;

  border-radius: 10px;

  padding: 10px;

  display: flex;

  align-items: center;

  gap: 10px;

  margin:
    10px
    0
    14px;
}


.barn-status-icon {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #dbf4e3;

  color: #2d9d54;

  font-weight: 900;
}


.barn-status small,
.barn-status b {
  display: block;
}


.barn-status small {
  font-size: 9px;

  color: var(--muted);
}


.barn-status b {
  font-size: 13px;

  color: var(--green);

  margin-top: 2px;
}


.metrics {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


.metrics > div {
  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;

  gap: 8px;

  font-size: 11px;
}


/* =====================================================
   HEART RATE
===================================================== */

.split-metric {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 9px;

  margin:
    11px
    0
    2px;
}


.split-metric > div {
  border-right:
    1px
    solid
    #edf0f4;
}


.split-metric > div:last-child {
  border-right: 0;
}


.split-metric small {
  display: block;

  color: var(--muted);

  font-size: 9px;
}


.split-metric b {
  font-size: 26px;
}


.split-metric b span {
  font-size: 12px;

  font-weight: 500;
}


.split-metric strong {
  display: block;

  margin-top: 7px;

  font-size: 12px;
}


.chart {
  width: 100%;

  height: 140px;
}


.chart polyline {
  fill: none;

  stroke: #ef3434;

  stroke-width: 3;

  vector-effect:
    non-scaling-stroke;
}


.chart line {
  stroke: #e8ebf0;

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


.labels {
  display: flex;

  justify-content: space-between;

  font-size: 8px;

  color: #8a93a2;
}


/* =====================================================
   RUMINATION
===================================================== */

.rumination-box {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  border-top:
    1px
    solid
    #edf0f4;

  margin-top: 12px;

  padding-top: 12px;
}


.rumination-box span,
.rumination-box strong {
  display: block;
}


.rumination-box span {
  font-size: 10px;
}


.rumination-box strong {
  font-size: 11px;

  margin-top: 3px;
}


/* =====================================================
   CATTLE PAGE
===================================================== */

.cattle-layout {
  display: grid;

  grid-template-columns:
    430px
    1fr;

  gap: 15px;

  align-items: start;
}


.cattle-list-panel {
  position: sticky;

  top: 100px;
}


.toolbar {
  display: flex;

  gap: 8px;

  margin-bottom: 12px;
}


.toolbar input,
.toolbar select {
  border:
    1px
    solid
    #dfe4ed;

  border-radius: 8px;

  padding: 9px;

  background: #fff;

  width: 100%;

  outline: none;
}


.toolbar input:focus,
.toolbar select:focus {
  border-color: #94bce9;

  box-shadow:
    0
    0
    0
    3px
    rgba(23, 105, 223, 0.07);
}


.toolbar select {
  width: 145px;
}


/* =====================================================
   TABLE
===================================================== */

.table-wrap {
  overflow: auto;
}


table {
  width: 100%;

  border-collapse: collapse;

  font-size: 10px;
}


th,
td {
  padding: 10px 8px;

  text-align: left;

  border-bottom:
    1px
    solid
    #edf0f4;

  white-space: nowrap;
}


th {
  background: #fbfcfe;

  color: #5e6979;

  font-size: 9px;
}


tbody tr {
  cursor: pointer;
}


tbody tr:hover {
  background: #f3f7fd;
}


tbody tr.selected {
  background: #e7f1ff;
}


/* =====================================================
   CATTLE DETAIL HEADER
===================================================== */

.cattle-detail-panel {
  min-width: 0;
}


.cow-detail-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  padding-bottom: 14px;

  border-bottom:
    1px
    solid
    #edf0f4;
}


.detail-eyebrow {
  font-size: 8px;

  letter-spacing: 1.3px;

  color: var(--muted);

  font-weight: 800;
}


.cow-detail-header h2 {
  margin:
    4px
    0
    3px;

  font-size: 22px;
}


.cow-detail-header small {
  color: var(--muted);

  font-size: 9px;
}


.cow-main-status {
  min-width: 100px;

  border-radius: 999px;

  padding: 8px 11px;

  font-size: 10px;

  text-align: center;

  font-weight: 800;

  background: #eef1f5;

  color: #687486;
}


.cow-main-status.status-normal {
  background: var(--green-soft);

  color: var(--green);
}


.cow-main-status.status-warning {
  background: var(--amber-soft);

  color: var(--amber);
}


.cow-main-status.status-critical {
  background: var(--red-soft);

  color: var(--red);
}


/* =====================================================
   SECTION CAPTION
===================================================== */

.section-caption {
  margin:
    15px
    0
    8px;
}


.section-caption span,
.section-caption small {
  display: block;
}


.section-caption span {
  font-size: 11px;

  font-weight: 800;
}


.section-caption small {
  color: var(--muted);

  font-size: 8px;

  margin-top: 2px;
}


.section-caption-device {
  margin-top: 17px;
}


/* =====================================================
   DETAIL KPI
===================================================== */

.detail-kpis {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;
}


.detail {
  border:
    1px
    solid
    #e7eaf0;

  border-radius: 11px;

  padding: 11px;

  background: #fff;
}


.detail span,
.detail small {
  display: block;

  color: #6f7b8c;

  font-size: 9px;
}


.detail b {
  display: block;

  font-size: 17px;

  margin:
    5px
    0;
}


/* =====================================================
   DEVICE SUMMARY
   RSSI / WIFI DIHAPUS
===================================================== */

.device-summary-strip {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  background: #f8fafc;

  border:
    1px
    solid
    #e7eaf0;

  border-radius: 11px;

  overflow: hidden;
}


.device-summary-strip > div {
  padding: 10px 12px;

  border-right:
    1px
    solid
    #e7eaf0;
}


.device-summary-strip > div:last-child {
  border-right: 0;
}


.device-summary-strip span,
.device-summary-strip b,
.device-summary-strip small {
  display: block;
}


.device-summary-strip span {
  color: var(--muted);

  font-size: 8px;
}


.device-summary-strip b {
  font-size: 11px;

  margin-top: 4px;
}


.device-summary-strip small {
  color: var(--muted);

  font-size: 8px;

  margin-top: 2px;
}


/* =====================================================
   DETAIL GRID
===================================================== */

.detail-grid {
  display: grid;

  grid-template-columns:
    1.5fr
    1fr;

  gap: 11px;

  margin-top: 13px;
}


.subpanel {
  border:
    1px
    solid
    #e7eaf0;

  border-radius: 11px;

  padding: 13px;
}


.subpanel-title {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 10px;
}


.subpanel h3 {
  margin: 0;

  font-size: 11px;
}


.subpanel-title small {
  color: var(--muted);

  font-size: 8px;
}


.subpanel-title strong {
  background: var(--red-soft);

  color: var(--red);

  padding: 5px 7px;

  border-radius: 7px;

  font-size: 9px;
}


.chart.big {
  height: 210px;
}


/* =====================================================
   DEVICE INFORMATION
===================================================== */

.subpanel dl {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    11px
    8px;

  margin: 0;

  font-size: 9px;
}


.subpanel dt {
  color: var(--muted);
}


.subpanel dd {
  margin: 0;

  text-align: right;

  font-weight: 700;
}


/* =====================================================
   ENVIRONMENT
===================================================== */

.env-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;
}


.env {
  text-align: center;
}


.env > span {
  font-size: 38px;
}


.env > b {
  display: block;

  font-size: 29px;

  margin: 9px;
}


.env > small {
  display: block;

  color: var(--muted);

  font-size: 9px;

  margin-top: 10px;
}


.environment-history {
  margin-top: 15px;
}


.history-placeholder {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.history-placeholder > div {
  background: #f8fafc;

  border:
    1px
    solid
    #edf0f4;

  border-radius: 10px;

  padding: 13px;
}


.history-placeholder span,
.history-placeholder b {
  display: block;
}


.history-placeholder span {
  color: var(--muted);

  font-size: 9px;
}


.history-placeholder b {
  font-size: 14px;

  margin-top: 4px;
}


/* =====================================================
   DEVICE KPI
===================================================== */

.device-kpis {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  margin-bottom: 14px;
}


.device-kpi small,
.device-kpi b,
.device-kpi span {
  display: block;
}


.device-kpi small {
  color: var(--muted);

  font-size: 9px;
}


.device-kpi b {
  font-size: 25px;

  margin:
    5px
    0
    2px;
}


.device-kpi span {
  color: var(--muted);

  font-size: 9px;
}


/* =====================================================
   REPORTS
===================================================== */

.simple-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;
}


.report-card {
  min-height: 190px;

  display: flex;

  flex-direction: column;
}


.report-icon {
  font-size: 32px;
}


.report-card h3 {
  margin:
    13px
    0
    5px;

  font-size: 15px;
}


.report-card p {
  color: var(--muted);

  font-size: 10px;

  line-height: 1.6;
}


.report-btn {
  margin-top: auto;

  align-self: flex-start;
}


/* =====================================================
   SETTINGS
===================================================== */

.form {
  max-width: 720px;
}


.settings-card {
  padding: 18px;
}


.settings-section-title {
  border-bottom:
    1px
    solid
    #edf0f4;

  padding-bottom: 12px;

  margin-bottom: 4px;
}


.settings-section-title b,
.settings-section-title small {
  display: block;
}


.settings-section-title small {
  color: var(--muted);

  font-size: 9px;

  margin-top: 4px;
}


.form label {
  display: grid;

  grid-template-columns:
    1fr
    150px
    70px;

  gap: 10px;

  align-items: center;

  border-bottom:
    1px
    solid
    #edf0f4;

  padding:
    12px
    0;
}


.form label > span {
  font-size: 11px;

  font-weight: 700;
}


.form label > span small {
  display: block;

  color: var(--muted);

  font-weight: 400;

  font-size: 8px;

  margin-top: 3px;
}


.form input {
  border:
    1px
    solid
    #dfe4ed;

  border-radius: 7px;

  padding: 8px;

  width: 100%;
}


.form label > strong {
  font-size: 10px;

  color: #637083;
}


.form .primary {
  margin-top: 15px;
}


/* =====================================================
   TOAST
===================================================== */

.toast {
  position: fixed;

  right: 22px;

  bottom: 22px;

  background: #17304b;

  color: #fff;

  border-radius: 10px;

  padding: 11px 14px;

  font-size: 10px;

  box-shadow:
    0
    8px
    30px
    rgba(0, 0, 0, 0.16);

  transform:
    translateY(30px);

  opacity: 0;

  pointer-events: none;

  transition: 0.22s ease;

  z-index: 50;
}


.toast.show {
  transform:
    translateY(0);

  opacity: 1;
}


/* =====================================================
   RESPONSIVE 1450
===================================================== */

@media (max-width: 1450px) {

  .dashboard-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .kpis {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .detail-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .cattle-layout {
    grid-template-columns:
      380px
      1fr;
  }

}


/* =====================================================
   RESPONSIVE 1150
===================================================== */

@media (max-width: 1150px) {

  .sidebar {
    transform:
      translateX(-100%);

    transition: 0.2s;
  }


  .sidebar.open {
    transform:
      translateX(0);
  }


  .main {
    margin-left: 0;
  }


  .system-mini-status {
    display: none;
  }


  .header-logos {
    gap: 10px;

    margin-left: 10px;
  }


  .logo-box {
    min-width: 70px;
  }


  .logo-box-pln {
    width: 115px;
  }


  .logo-pln {
    transform:
      scale(2.2);

    height: 42px;
  }


  .logo-yatim {
    height: 38px;
  }


  .logo-polinema {
    height: 41px;
  }


  .cattle-layout {
    grid-template-columns: 1fr;
  }


  .cattle-list-panel {
    position: static;
  }

}


/* =====================================================
   RESPONSIVE 850
===================================================== */

@media (max-width: 850px) {

  .content {
    padding: 16px;
  }


  .heading-with-status {
    flex-direction: column;
  }


  .live-status-card {
    width: 100%;
  }


  .kpis,
  .dashboard-grid,
  .env-grid,
  .simple-grid,
  .device-kpis,
  .history-placeholder {
    grid-template-columns:
      1fr
      1fr;
  }


  .detail-kpis {
    grid-template-columns:
      1fr
      1fr;
  }


  /* Device dibuat satu kolom agar rapi */

  .device-summary-strip {
    grid-template-columns: 1fr;
  }


  .device-summary-strip > div {
    border-right: 0;

    border-bottom:
      1px
      solid
      #e7eaf0;
  }


  .device-summary-strip > div:last-child {
    border-bottom: 0;
  }


  .detail-grid {
    grid-template-columns: 1fr;
  }


  .topbar .chip:first-of-type {
    display: none;
  }


  .user-text {
    display: none;
  }

}


/* =====================================================
   RESPONSIVE 650
===================================================== */

@media (max-width: 650px) {

  .topbar {
    height: 72px;

    padding:
      0
      10px;
  }


  .header-logos {
    gap: 4px;

    margin-left: 4px;
  }


  .logo-box {
    min-width: 48px;

    height: 45px;
  }


  .logo-box-pln {
    width: 78px;
  }


  .logo-pln {
    height: 32px;

    transform:
      scale(1.8);
  }


  .logo-yatim {
    height: 29px;

    max-width: 65px;
  }


  .logo-polinema {
    height: 32px;

    max-width: 55px;
  }


  .chip {
    display: none;
  }


  .user > strong {
    display: none;
  }


  .content {
    padding: 13px;
  }


  .heading h1 {
    font-size: 22px;
  }


  .kpis,
  .dashboard-grid,
  .env-grid,
  .simple-grid,
  .device-kpis,
  .history-placeholder {
    grid-template-columns: 1fr;
  }


  .detail-kpis {
    grid-template-columns: 1fr;
  }


  .device-summary-strip {
    grid-template-columns: 1fr;
  }


  .device-summary-strip > div {
    border-right: 0;

    border-bottom:
      1px
      solid
      #e7eaf0;
  }


  .device-summary-strip > div:last-child {
    border-bottom: 0;
  }


  .toolbar {
    flex-direction: column;
  }


  .toolbar select {
    width: 100%;
  }


  .form label {
    grid-template-columns: 1fr;
  }


  .form label > strong {
    margin-top: -5px;
  }


  .alert-page-head {
    flex-direction: column;

    align-items: flex-start;
  }

}
/* Readability and accessible header interactions */
[hidden]{display:none!important}
.panel-subtitle,.kpi small,.live-status-card small,.alert small,.alert time,.section-caption small,.detail small,.device-summary-strip small,.subpanel-title small,.env>small,.report-card p,.settings-section-title small{font-size:13px;line-height:1.5}
.panel-title{font-size:17px}.kpi span,.metrics>div,.activity-list>div,.rumination-box span,.rumination-box strong,.detail span,.device-summary-strip span,.device-summary-strip b,.subpanel dl,.text-btn,.secondary-btn,table{font-size:14px}
th{font-size:13px}.kpi b{font-size:32px}.detail b{font-size:25px}.alert b,.subpanel h3{font-size:15px}.labels{font-size:12px}.split-metric small{font-size:13px}.split-metric strong{font-size:15px}.panel{padding:20px}.alert{padding:14px}.content{line-height:1.45}.detail-kpis{gap:12px}.detail-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.header-dropdown{position:fixed;top:76px;right:24px;width:390px;max-width:calc(100vw - 24px);max-height:calc(100vh - 100px);overflow:auto;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #132c4b30;padding:18px;z-index:60;font-size:14px}
.profile-dropdown{width:300px}.dropdown-heading{display:flex;align-items:center;justify-content:space-between;font-size:17px}.dropdown-heading button{border:0;background:#eef2f7;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:22px}.dropdown-note,.demo-note{color:#6c5a21;background:#fff8e5;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.5}.notification-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:white;padding:14px 4px;cursor:pointer}.notification-item:hover{background:#f1f6fc}.notification-item strong,.notification-item span,.notification-item small{display:block}.notification-item span{color:#586577;margin:5px 0;line-height:1.5}.notification-item small{color:#637083}.locked-admin{display:block;padding:12px;width:100%;border:1px solid var(--line);border-radius:8px;margin:16px 0 10px;background:#f3f5f8;color:#626d7b}.user{cursor:pointer}.neutral,.cow-main-status{background:#eef1f5;color:#566273}.neutral-text{color:#626d7b}.live-status-card b,.system-mini-status{color:#626d7b}.live-dot,.system-mini-status i{background:#8793a3;box-shadow:none}.is-online b,.system-mini-status.is-online{color:#23884a}.is-online .live-dot,.is-online i{background:#25b660}.connection-icon{color:#8793a3}.barn-status{background:#f5f7fa;border-color:#e1e6ed}.barn-status b,.barn-status-icon{color:#626d7b}.barn-status-icon{background:#e7ebf0}.nav[aria-disabled=true]{opacity:.65}.access-note{padding:12px;background:#f0f3f8;border-radius:8px}button:focus-visible,a:focus-visible{outline:3px solid #1769df;outline-offset:3px}
.topbar{gap:4px}.header-logos{gap:10px;margin-left:10px}.system-mini-status{max-width:160px;white-space:normal}.user{flex-shrink:0}.split-metric{gap:12px}.detail{min-width:0;overflow-wrap:anywhere}
@media(max-width:1450px){.system-mini-status{display:none}.detail-grid{grid-template-columns:1fr}.header-logos{gap:8px}.topbar{padding:0 14px}}
@media(max-width:850px){.detail-grid{grid-template-columns:1fr}.header-dropdown{right:12px}.metrics>div{grid-template-columns:1fr auto}.metrics .pill{grid-column:1/-1;justify-self:start}}
@media(max-width:650px){.detail-kpis{grid-template-columns:1fr}.panel{padding:16px}.topbar{gap:0}.header-logos{margin-left:2px;gap:2px}.logo-box{min-width:40px}.logo-box-pln{width:65px}.user{margin-left:3px;padding:5px}.notif{margin-left:2px}.heading h1{font-size:24px}.header-dropdown{top:76px}}

/* Client polish: six overview cards, PLN-only header, responsive touch UI. */
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{min-width:0;min-height:120px}.kpi>div{min-width:0}.kpi small{overflow-wrap:anywhere}.kpi-fan.fan-on b{color:var(--green)}
.header-logos{margin-left:12px;flex-shrink:0}.logo-box-pln{width:265px;height:76px;min-width:0;overflow:hidden}.logo-pln{width:315px;height:315px;max-width:none;transform:none;flex-shrink:0}.topbar{height:92px}.header-dropdown{top:98px}.environment-empty{padding:24px 16px;background:#f6f8fb;border:1px dashed #d7dfe9;border-radius:10px;color:#647185;font-size:14px}.environment-empty p{margin:6px 0 0}.menu,.notif{min-width:44px;min-height:44px}.user{min-height:44px}.notification-item{min-height:64px}.dropdown-heading button{width:44px;height:44px}.header-dropdown{overscroll-behavior:contain;max-height:calc(100dvh - 112px)}
.sidebar-backdrop{position:fixed;inset:0;z-index:25;border:0;background:#071e3866}.sidebar{z-index:30}.header-dropdown{z-index:60}
@media(min-width:1151px){.menu{display:none}.sidebar-backdrop{display:none!important}}
@media(max-width:1150px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:min(280px,85vw)}.nav{min-height:46px}}
@media(max-width:650px){.topbar{height:80px;padding:0 8px;gap:0}.header-logos{margin-left:0}.logo-box-pln{width:170px;height:72px}.logo-pln{width:205px;height:205px;transform:none}.header-dropdown{top:86px;right:10px;width:min(390px,calc(100vw - 20px));max-height:calc(100dvh - 100px)}.profile-dropdown{width:min(310px,calc(100vw - 20px))}.kpis{gap:10px}.kpi{padding:12px;gap:8px;min-height:132px}.kpi i{width:30px;height:30px;font-size:18px}.kpi b{font-size:28px}.kpi span{font-size:13px}.kpi small{font-size:12px}.user{margin-left:0}.notif{margin-left:0}.notif em{right:0;top:0}.metrics>div{grid-template-columns:1fr auto}.toolbar input,.toolbar select{min-height:44px;font-size:16px}.dashboard-grid{grid-template-columns:1fr}.heading-with-status{gap:12px}.notification-item{font-size:14px}}
@media(max-width:359px){.kpis{grid-template-columns:1fr}.logo-box-pln{width:132px}.logo-pln{width:164px;height:164px}.user{padding:4px}.content{padding:10px}}