/* WNNET MANAGER v3.4.0 - unified page revision
 * Loaded last so legacy Mikhmon/WinBox/Explorer rules keep working while the
 * operator-facing pages share one stable layout. No business logic lives here.
 */
:root{
  --wn34-bg:#f4f7fb;
  --wn34-panel:#fff;
  --wn34-line:#dbe4ee;
  --wn34-line-strong:#c7d4e2;
  --wn34-text:#17283d;
  --wn34-muted:#65778c;
  --wn34-blue:#0969da;
  --wn34-blue-soft:#eaf3ff;
  --wn34-green:#12833f;
  --wn34-orange:#c8660a;
  --wn34-red:#cf3048;
  --wn34-radius:10px;
  --wn34-shadow:0 4px 16px rgba(25,52,82,.055);
}

/* Global page rhythm and readable type. */
body.wn34-ui{background:var(--wn34-bg)!important;color:var(--wn34-text)!important}
body.wn34-ui .main-container{width:100%!important;max-width:1720px!important;margin:0 auto!important;padding:12px 14px 50px!important}
body.wn34-ui .row{margin:0 -5px!important}
body.wn34-ui [class^="col-"],body.wn34-ui [class*=" col-"]{padding-left:5px;padding-right:5px}
body.wn34-ui h1,body.wn34-ui h2,body.wn34-ui h3,body.wn34-ui h4{color:var(--wn34-text);letter-spacing:-.01em}
body.wn34-ui small,body.wn34-ui .text-muted{color:var(--wn34-muted)!important}

/* Cards and sections used by Dashboard, PPPoE, billing, finance, reports,
   Hotspot, router management, settings and tools. */
body.wn34-ui .card,body.wn34-ui .wnn-card,body.wn34-ui .box-bordered{
  background:var(--wn34-panel)!important;border:1px solid var(--wn34-line)!important;
  border-radius:var(--wn34-radius)!important;box-shadow:var(--wn34-shadow)!important;
}
body.wn34-ui .card{margin:0 0 11px!important;overflow:visible}
body.wn34-ui .card-header{
  min-height:48px;padding:9px 12px!important;margin:0!important;background:#fbfdff!important;
  border:0!important;border-bottom:1px solid var(--wn34-line)!important;border-radius:var(--wn34-radius) var(--wn34-radius) 0 0!important;
}
body.wn34-ui .card-header h3{display:flex;align-items:center;gap:8px;min-width:0;margin:0!important;font-size:14px!important;line-height:30px!important}
body.wn34-ui .card-header h3>i{color:var(--wn34-blue)}
body.wn34-ui .card-header h3>.pull-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-left:auto!important;float:none!important}
body.wn34-ui .card-header form,body.wn34-ui .card-header .btn{margin:0!important}
body.wn34-ui .card-body{padding:12px!important;margin:0!important}
body.wn34-ui .box-bordered{padding:12px}

/* Inputs and actions. */
body.wn34-ui .form-control,body.wn34-ui input[type="search"],body.wn34-ui select,body.wn34-ui textarea{
  max-width:100%;min-height:36px;padding:6px 9px!important;border:1px solid var(--wn34-line-strong)!important;
  border-radius:7px!important;background:#fff!important;color:var(--wn34-text)!important;font-size:12px!important;line-height:1.35!important;box-shadow:none!important;
}
body.wn34-ui textarea.form-control{height:auto;min-height:68px;resize:vertical}
body.wn34-ui .form-control:focus,body.wn34-ui input[type="search"]:focus,body.wn34-ui select:focus,body.wn34-ui textarea:focus{
  outline:0!important;border-color:#7fb5ed!important;box-shadow:0 0 0 3px rgba(9,105,218,.09)!important;
}
body.wn34-ui .btn,body.wn34-ui button,body.wn34-ui input[type="submit"]{
  min-height:34px;margin:2px!important;padding:6px 10px!important;border-radius:7px!important;
  font-size:11.5px!important;font-weight:650!important;line-height:20px!important;box-shadow:none!important;
}
body.wn34-ui .btn-xs,body.wn34-ui .btn-sm{min-height:30px;padding:4px 8px!important;font-size:10.5px!important}
body.wn34-ui .bg-primary,body.wn34-ui .btn-primary,body.wn34-ui .wnv6-primary{background:var(--wn34-blue)!important;border-color:var(--wn34-blue)!important;color:#fff!important}
body.wn34-ui .bg-success,body.wn34-ui .btn-success{background:#178844!important;border-color:#178844!important;color:#fff!important}
body.wn34-ui .bg-warning,body.wn34-ui .btn-warning{background:#f59e0b!important;border-color:#dd8b05!important;color:#fff!important}
body.wn34-ui .bg-danger,body.wn34-ui .btn-danger,body.wn34-ui .wnv6-danger{background:var(--wn34-red)!important;border-color:var(--wn34-red)!important;color:#fff!important}
body.wn34-ui .alert{box-sizing:border-box;width:100%;padding:9px 11px!important;margin:0 0 10px!important;border-radius:8px!important;font-size:12px;line-height:1.45}

/* Repair legacy [class*=col-] float leakage inside table cells. This is the
   cause of No/Status/Nama/Aksi appearing on separate header rows. */
body.wn34-ui table th[class*="col-"],body.wn34-ui table td[class*="col-"]{
  float:none!important;display:table-cell!important;position:sticky;top:0;
}
body.wn34-ui table{border-spacing:0!important;border-collapse:separate!important;width:100%;background:#fff!important}
body.wn34-ui table thead{display:table-header-group!important}
body.wn34-ui table tbody{display:table-row-group!important}
body.wn34-ui table tr{display:table-row!important}
body.wn34-ui table th,body.wn34-ui table td{float:none!important;box-sizing:border-box!important;text-align:left;vertical-align:middle!important}
body.wn34-ui .table-responsive,body.wn34-ui .wnv6-table-wrap,body.wn34-ui .overflow{
  display:block;max-width:100%;overflow:auto!important;border:1px solid var(--wn34-line)!important;border-radius:9px!important;background:#fff!important;scrollbar-gutter:stable;
}
body.wn34-ui .table-responsive>.table,body.wn34-ui .wnv6-table-wrap>.table{margin:0!important;border:0!important}
body.wn34-ui .table th{
  height:38px;padding:7px 9px!important;background:#edf4fb!important;color:#2a4058!important;
  border:0!important;border-right:1px solid #dbe5ee!important;border-bottom:1px solid #cbd9e6!important;
  font-size:10.5px!important;font-weight:750!important;white-space:nowrap!important;position:sticky!important;top:0!important;z-index:2!important;
}
body.wn34-ui .table td{
  min-height:42px;padding:7px 9px!important;background:#fff!important;color:#24384e!important;
  border:0!important;border-right:1px solid #edf1f5!important;border-bottom:1px solid #e5ebf1!important;
  font-size:11px!important;line-height:1.35!important;
}
body.wn34-ui .table tbody tr:nth-child(even) td{background:#fbfdff!important}
body.wn34-ui .table tbody tr:hover td{background:#eff6ff!important}
body.wn34-ui .table th:last-child,body.wn34-ui .table td:last-child{border-right:0!important}
body.wn34-ui .table .label{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:750;letter-spacing:.02em}

/* Smart table tools: one compact line on desktop, clean wrap on mobile. */
body.wn34-ui .wn-smart-table-tools{
  position:relative!important;top:auto!important;z-index:3!important;display:grid!important;
  grid-template-columns:minmax(220px,1fr) 82px auto auto!important;align-items:center!important;gap:7px!important;
  margin:0!important;padding:8px!important;background:#f8fbff!important;border:0!important;border-bottom:1px solid var(--wn34-line)!important;border-radius:0!important;box-shadow:none!important;
}
body.wn34-ui .wn-smart-table-tools input,body.wn34-ui .wn-smart-table-tools select{height:34px!important;margin:0!important}
body.wn34-ui .wn-smart-table-count{margin:0!important;color:var(--wn34-muted)!important;font-size:10.5px!important;white-space:nowrap}
body.wn34-ui .wn-smart-table-pages{justify-content:flex-end;white-space:nowrap}
body.wn34-ui .wn-smart-table-pages button{min-width:32px!important;margin:0!important}

/* Customer/Billing overview. */
body.wn34-customers .card-body>.row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:0 0 10px!important}
body.wn34-customers .card-body>.row>[class*="col-"]{float:none!important;width:auto!important;padding:0!important}
body.wn34-customers .wnn-kpi{min-height:74px;margin:0!important;padding:10px!important;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;border-left:3px solid #89bdf3!important;box-shadow:none!important}
body.wn34-customers .wnn-kpi>i{grid-row:1/3;align-self:center;color:var(--wn34-blue);font-size:19px;text-align:center}
body.wn34-customers .wnn-kpi>strong{font-size:17px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.wn34-customers .wnn-kpi>br{display:none}
body.wn34-customers .wnn-kpi>small{font-size:9.5px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.wn34-customers .card-body>.box-bordered{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px!important;margin-bottom:10px!important;box-shadow:none!important}
body.wn34-customers .card-body>.box-bordered>.pull-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap;margin-left:auto;float:none!important}
body.wn34-customers .card-body>.box-bordered form{margin:0!important}
body.wn34-customers .card-body>.form-inline{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:6px;margin:0 0 10px!important}
body.wn34-customers .card-body>.form-inline .form-control{min-width:0!important;margin:0!important}
body.wn34-customers .card-body>.form-inline .btn{margin:0!important}
body.wn34-customers .wnn-customer-table-wrap{max-height:calc(100vh - 360px);min-height:260px}
body.wn34-customers .wnn-billing-table{min-width:1260px!important;table-layout:auto!important}
body.wn34-customers .wnn-billing-table .wnn-col-no{width:44px!important;min-width:44px!important}
body.wn34-customers .wnn-billing-table .wnn-col-status{width:104px!important;min-width:104px!important}
body.wn34-customers .wnn-billing-table .wnn-col-name{width:210px!important;min-width:210px!important}
body.wn34-customers .wnn-billing-table .wnn-col-actions{width:270px!important;min-width:270px!important}
body.wn34-customers .wnn-name-cell{white-space:normal!important;min-width:210px!important}
body.wn34-customers .wnn-actions-cell{min-width:270px!important}
body.wn34-customers .wnn-row-actions{display:flex!important;align-items:center;gap:4px;flex-wrap:nowrap!important}
body.wn34-customers .wnn-row-actions .btn{margin:0!important}

/* Forms built with two-column tables become easier to scan. */
body.wn34-ui form table:not(.wnn-billing-table) td:first-child{color:#40556d;font-weight:650}
body.wn34-ui form table:not(.wnn-billing-table) td .form-control{margin:0!important}
body.wn34-ui .input-group{display:flex;align-items:stretch;width:100%}
body.wn34-ui .input-group .form-control{flex:1;min-width:0;border-radius:7px 0 0 7px!important}
body.wn34-ui .input-group-btn{display:flex}
body.wn34-ui .input-group-btn .btn{height:100%;margin:0!important;border-radius:0 7px 7px 0!important}

/* Sidebar, bottom status and alarm should not cover work. */
body.wn34-ui #sidenav.sidenav{padding-bottom:24px!important}
body.wn34-ui #sidenav a.menu,body.wn34-ui #sidenav .dropdown-btn,body.wn34-ui #sidenav .dropdown-container>a{font-size:11.5px!important;line-height:17px!important}
body.wn34-ui #sidenav .wncc-nav-title{margin-top:14px!important}
body.wn34-ui #wn321Status{font-size:9.5px!important}
body.wn34-ui .wn-pa-dock{right:14px!important;bottom:42px!important;max-width:310px!important}
body.wn34-ui .wn-pa-dock.wn-pa-compact{right:14px!important;bottom:42px!important}

/* Medium laptop: preserve density while keeping labels readable. */
@media(max-width:1366px){
  body.wn34-ui .main-container{padding:9px 9px 44px!important}
  body.wn34-ui .card-body{padding:9px!important}
  body.wn34-ui .table th{padding:6px 7px!important;font-size:10px!important}
  body.wn34-ui .table td{padding:6px 7px!important;font-size:10.5px!important}
  body.wn34-customers .card-body>.row{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.wn34-customers .wnn-kpi{min-height:58px;padding:7px 8px!important}
  body.wn34-customers .wnn-customer-table-wrap{max-height:calc(100vh - 330px)}
}

@media(max-width:860px){
  body.wn34-ui .main-container{padding:8px 7px 44px!important}
  body.wn34-ui .card-header h3{align-items:flex-start;flex-direction:column;line-height:20px!important}
  body.wn34-ui .card-header h3>.pull-right{width:100%;justify-content:flex-start;margin-left:0!important}
  body.wn34-ui .wn-smart-table-tools{grid-template-columns:minmax(0,1fr) 76px!important}
  body.wn34-ui .wn-smart-table-count{margin-left:2px!important}
  body.wn34-ui .wn-smart-table-pages{justify-content:flex-end}
  body.wn34-customers .card-body>.row{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.wn34-customers .card-body>.box-bordered{align-items:flex-start;flex-direction:column}
  body.wn34-customers .card-body>.box-bordered>.pull-right{width:100%;justify-content:flex-start;margin-left:0}
  body.wn34-customers .card-body>.form-inline{grid-template-columns:1fr}
  body.wn34-customers .wnn-customer-table-wrap{max-height:none}
  body.wn34-ui .wn-pa-dock{right:8px!important;bottom:38px!important}
}

@media(max-width:520px){
  body.wn34-customers .card-body>.row{grid-template-columns:1fr}
  body.wn34-ui .card-body{padding:8px!important}
  body.wn34-ui .btn,body.wn34-ui button,body.wn34-ui input[type="submit"]{min-height:38px}
  body.wn34-ui form table:not(.wnn-billing-table),body.wn34-ui form table:not(.wnn-billing-table) tbody,body.wn34-ui form table:not(.wnn-billing-table) tr,body.wn34-ui form table:not(.wnn-billing-table) td{display:block!important;width:100%!important}
  body.wn34-ui form table:not(.wnn-billing-table) td:first-child{padding-bottom:2px!important;border-bottom:0!important;background:#f8fbff!important}
  body.wn34-ui form table:not(.wnn-billing-table) td+td{padding-top:4px!important}
}

@media print{
  body.wn34-ui .main-container{max-width:none!important;padding:0!important}
  body.wn34-ui .card,body.wn34-ui .box-bordered{box-shadow:none!important}
  body.wn34-ui .wn-smart-table-tools,body.wn34-ui .wn-pa-dock{display:none!important}
}


/* WNNET MANAGER v3.4.0.16 - Mobile Finance Billing: customer + actions together, no horizontal scroll. */
@media(max-width:760px){
  body.wn34-customers .wn34-mobile-billing-wrap{overflow:visible!important;border:0!important;background:transparent!important;scrollbar-gutter:auto!important}
  body.wn34-customers table.wn34-mobile-billing{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;border:0!important;background:transparent!important}
  body.wn34-customers table.wn34-mobile-billing thead{display:none!important}
  body.wn34-customers table.wn34-mobile-billing tbody{display:block!important;width:100%!important}
  body.wn34-customers table.wn34-mobile-billing tr.wn34-mobile-billing-row{
    display:grid!important;grid-template-columns:minmax(88px,1fr) auto;column-gap:7px;row-gap:5px;width:100%!important;margin:0 0 8px!important;padding:9px!important;
    border:1px solid #dce6f2!important;border-radius:10px!important;background:#fff!important;box-shadow:0 1px 2px rgba(15,36,58,.05)!important
  }
  body.wn34-customers table.wn34-mobile-billing tr.wn34-mobile-billing-row td{border:0!important;background:transparent!important;padding:0!important;min-width:0!important;width:auto!important;max-width:none!important}
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-no{display:none!important}
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-name{
    display:block!important;grid-column:1!important;grid-row:1!important;align-self:center!important;font-weight:750!important;font-size:12px!important;line-height:15px!important;white-space:normal!important;overflow-wrap:anywhere!important;color:#18324d!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-name:before{content:'Pelanggan';display:block;color:#78899b;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px}
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions{
    display:block!important;grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:end!important;min-width:0!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions .wnn-row-actions,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions>div{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;flex-wrap:nowrap!important;min-width:0!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions .btn,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions a,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions button{
    min-width:0!important;width:auto!important;height:31px!important;min-height:31px!important;margin:0!important;padding:5px 7px!important;font-size:9px!important;line-height:18px!important;border-radius:7px!important;white-space:nowrap!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-meta{
    display:flex!important;grid-column:1/-1!important;align-items:flex-start!important;gap:7px!important;padding-top:4px!important;border-top:1px dashed #e5edf5!important;font-size:10px!important;line-height:14px!important;color:#334b63!important;white-space:normal!important;overflow-wrap:anywhere!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-meta:before{
    content:attr(data-label);flex:0 0 78px;color:#7b8da0;font-size:9px;font-weight:700!important
  }
}

/* WNNET MANAGER v3.4.0.17 - Mobile Billing Ultra Compact.
 * Keeps customer identity + actions together while fitting more customers on one screen.
 * Mobile-only: no billing logic, data, MikroTik, or payment behavior is changed.
 */
@media(max-width:760px){
  body.wn34-customers .main-container{padding:5px 5px 29px!important}
  body.wn34-customers .card{margin-bottom:5px!important;border-radius:8px!important}
  body.wn34-customers .card-body{padding:5px!important}
  body.wn34-customers .card-header{min-height:32px!important;padding:4px 7px!important}
  body.wn34-customers .card-header h3{font-size:11.5px!important;line-height:16px!important;gap:4px!important}

  /* Compact Explorer chrome on phone. */
  body.wn34-customers #wn321Topbar{min-height:46px!important;height:46px!important;padding:4px 6px!important;gap:5px!important}
  body.wn34-customers #wn321Topbar button{min-height:34px!important;height:34px!important;min-width:34px!important;width:34px!important;padding:0!important}
  body.wn34-customers #wn321Topbar .wn321-breadcrumb{min-height:34px!important;height:34px!important;padding:0 8px!important;font-size:10px!important}
  body.wn34-customers #wn321Status{min-height:24px!important;height:24px!important;padding:2px 5px!important;font-size:8.5px!important;line-height:18px!important}

  /* Alarm floating dock should not cover billing cards on phone. */
  body.wn34-customers .wn-pa-dock,
  body.wn34-customers .wn-pa-dock.wn-pa-compact{display:none!important}

  body.wn34-customers table.wn34-mobile-billing tr.wn34-mobile-billing-row{
    grid-template-columns:minmax(104px,1fr) auto!important;
    column-gap:4px!important;row-gap:3px!important;
    margin:0 0 5px!important;padding:6px!important;
    border-radius:8px!important;box-shadow:none!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-name{
    font-size:11.5px!important;line-height:13px!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-name:before{
    font-size:7px!important;line-height:8px!important;margin-bottom:0!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions .wnn-row-actions,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions>div{
    gap:2px!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions .btn,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions a,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions button{
    height:28px!important;min-height:28px!important;
    padding:3px 6px!important;font-size:8.5px!important;line-height:17px!important;border-radius:6px!important
  }

  /* Two compact information cells per line. */
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-meta{
    display:grid!important;grid-column:auto!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    align-items:center!important;gap:3px!important;
    padding:3px 4px!important;border-top:1px solid #edf2f7!important;
    font-size:9.2px!important;line-height:11px!important;min-height:25px!important;
    background:#f8fbff!important;border-radius:4px!important
  }
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-meta:before{
    flex:none!important;font-size:7.8px!important;line-height:10px!important;
    min-width:0!important;width:auto!important
  }
}

@media(max-width:390px){
  body.wn34-customers table.wn34-mobile-billing tr.wn34-mobile-billing-row{grid-template-columns:minmax(92px,1fr) auto!important;padding:5px!important}
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions .btn,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions a,
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-actions button{padding:3px 5px!important;font-size:8px!important}
  body.wn34-customers table.wn34-mobile-billing td.wn34-billing-meta{grid-template-columns:50px minmax(0,1fr)!important;font-size:8.8px!important}
}