/* =====================================================================
   AquaBest Work Portal  -  KANAKKU BRIDGE
   ---------------------------------------------------------------------
   The real Kanakku CSS is loaded above this file. This file does two
   jobs and nothing else:

     1. Re-points the portal's own colour names at Kanakku's colours,
        so every screen repaints itself.
     2. Gives the shell (left menu, top bar, page area) the exact
        sizes measured from the Kanakku demo.

   Every number in here was read off the running Kanakku demo with the
   browser's own measuring tool. Nothing is guessed.

   Everything is under  body.kanakku-skin.  Press Dark and it all
   switches off, and the portal looks exactly like it does today.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. KANAKKU COLOURS, PUT INTO THE PORTAL'S OWN COLOUR NAMES
   --------------------------------------------------------------- */
body.kanakku-skin {
  --primary:       #7539FF;
  --primary-light: #7539FF;
  --accent:        #06AED4;
  --success:       #27AE60;
  --warning:       #E2B93B;
  --danger:        #EF1E1E;
  --dark:          #FFFFFF;   /* was the page background */
  --dark-2:        #FFFFFF;   /* was panels, sidebar, header */
  --dark-3:        #F7F8F9;   /* was raised boxes, inputs        */
  --light:         #051321;   /* was the main text colour        */
  --gray:          #5D6772;   /* was the quiet text colour       */

  /* Kanakku's own names, for this file to use */
  --k-ink:     #051321;
  --k-ink-2:   #45505C;
  --k-muted:   #5D6772;
  --k-line:    #E2E4E6;
  --k-panel:   #F7F8F9;
  --k-white:   #FFFFFF;
  --k-purple:  #7539FF;
  --k-radius:  4.8px;
  --k-rail:    60px;
  --k-menu:    216px;
  --k-side:    276px;
  --k-top:     56px;
  --k-shadow:  0px 4px 3px 0px rgba(126,126,126,0.10);
}

body.kanakku-skin,
body.kanakku-skin input,
body.kanakku-skin select,
body.kanakku-skin textarea,
body.kanakku-skin button {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.kanakku-skin {
  background: var(--k-white);
  color: var(--k-ink);
  font-size: 14px;
  line-height: 21px;
}

/* ---------------------------------------------------------------
   2. THE NARROW ICON RAIL  (Kanakku's 60px strip, far left)
   --------------------------------------------------------------- */
body.kanakku-skin .k-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--k-rail);
  background: var(--k-white);
  border-right: 1px solid var(--k-line);
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}
body.kanakku-skin .k-rail-logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--k-purple);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  flex: 0 0 auto;
}
body.kanakku-skin .k-rail-logo img { width: 100%; height: 100%; object-fit: cover; }
body.kanakku-skin .k-rail-btn {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: var(--k-radius);
  color: var(--k-muted);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  flex: 0 0 auto;
}
body.kanakku-skin .k-rail-btn:hover { background: var(--k-panel); color: var(--k-purple); }
body.kanakku-skin .k-rail-btn i { font-size: 18px; }
body.kanakku-skin .k-rail-spacer { margin-top: auto; }

/* ---------------------------------------------------------------
   3. THE LEFT MENU   (Kanakku: 216px, sitting after the 60px rail)
   --------------------------------------------------------------- */
/* Kanakku's own file hides #sidebar, because its demo pages use a
   different id. Put it back. */
body.kanakku-skin #sidebar { display: flex; }

/* ---------------------------------------------------------------
   4. THE TOP BAR   (Kanakku: 56px, white, starts after the sidebar)
   --------------------------------------------------------------- */
body.kanakku-skin .main-content {
  margin-left: var(--k-side);
  width: auto;
  min-width: 0;
  background: var(--k-white);
}
body.kanakku-skin .header {
  position: sticky;
  left: auto;
  top: 0;
  height: var(--k-top);
  min-height: var(--k-top);
  margin-top: 0;
  padding: 0 24px;
  background: var(--k-white);
  border-bottom: 1px solid var(--k-line);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 98;
  box-shadow: none;
}
body.kanakku-skin .header > div:first-child {
  flex-direction: row;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
}
body.kanakku-skin .portal-header-title,
body.kanakku-skin .header h2 {
  font-size: 14px; font-weight: 600; color: var(--k-ink); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.kanakku-skin .portal-header-subtitle,
body.kanakku-skin .header > div:first-child > span:not(.portal-header-title) {
  font-size: 12px; color: var(--k-muted); font-weight: 400;
}
body.kanakku-skin .header > div:last-child {
  display: flex; align-items: center; gap: 8px !important; flex-shrink: 0;
}

/* the top search box - Kanakku: 36px tall, 12px text, radius 4.8 */
body.kanakku-skin .header input[type="search"],
body.kanakku-skin .header input[type="text"],
body.kanakku-skin #globalSearchInput {
  height: 36px;
  font-size: 12px;
  background: var(--k-white);
  color: var(--k-ink);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 8px 12px;
  min-width: 260px;
}

/* square icon buttons in the top bar */
body.kanakku-skin .header .k-icon-btn:not(:disabled) {
  width: 36px; height: 36px; padding: 0;
  min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-white) !important;
  color: var(--k-muted) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  font-size: 16px;
  box-shadow: none !important;
}
body.kanakku-skin .header .k-icon-btn:not(:disabled):hover {
  background: var(--k-panel) !important; color: var(--k-purple) !important;
}
body.kanakku-skin .header .k-icon-btn i { font-size: 16px; }

/* the user chip on the right */
body.kanakku-skin .header .k-user-chip:not(:disabled) {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; min-height: 36px; padding: 0 8px 0 0;
  background: transparent !important;
  border: 0 !important;
  color: var(--k-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.kanakku-skin .k-avatar {
  width: 32px; height: 32px; border-radius: var(--k-radius);
  background: var(--k-purple); color: #fff;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px;
}
body.kanakku-skin .k-user-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
body.kanakku-skin .k-user-name { font-size: 13px; font-weight: 600; color: var(--k-ink); }
body.kanakku-skin .k-user-sub  { font-size: 11px; font-weight: 400; color: var(--k-muted); }

/* ---------------------------------------------------------------
   5. THE PAGE AREA   (Kanakku: 24px all round)
   --------------------------------------------------------------- */
body.kanakku-skin .page-content {
  padding: 24px;
  background: var(--k-white);
  overflow-x: hidden;
}

/* ---------------------------------------------------------------
   6. TURNING OFF THE OLD DARK BUTTON RULES
   The portal's own file paints EVERY button dark slate with
   !important. These rules put them back to Kanakku. They sit after
   that file, so they win.
   --------------------------------------------------------------- */

/* (a) every button on the page, back to Kanakku's plain button */
body.kanakku-skin button:not(:disabled),
body.kanakku-skin .btn:not(:disabled),
body.kanakku-skin .tab-btn:not(:disabled) {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  box-shadow: none !important;
}
body.kanakku-skin button:not(:disabled):hover,
body.kanakku-skin .btn:not(:disabled):hover,
body.kanakku-skin .tab-btn:not(:disabled):hover {
  background: var(--k-panel) !important;
  color: var(--k-ink) !important;
}

/* (b) the portal file uses an id here, so this one needs an id too */
body.kanakku-skin #pageContent .btn:not(:disabled),
body.kanakku-skin #pageContent button:not(:disabled) {
  color: var(--k-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  min-height: 33.5px;
}
body.kanakku-skin #pageContent .btn-primary:not(:disabled),
body.kanakku-skin #pageContent button.btn-primary:not(:disabled),
body.kanakku-skin #pageContent .portal-primary-action:not(:disabled) {
  background: var(--k-purple) !important;
  color: #fff !important;
  border-color: var(--k-purple) !important;
}
body.kanakku-skin #pageContent .btn-danger:not(:disabled),
body.kanakku-skin #pageContent button.btn-danger:not(:disabled) {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}
body.kanakku-skin #pageContent .btn-success:not(:disabled),
body.kanakku-skin #pageContent button.btn-success:not(:disabled) {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
}
body.kanakku-skin #pageContent .btn-secondary:not(:disabled) {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}
body.kanakku-skin #pageContent .portal-quick-action,
body.kanakku-skin #pageContent .portal-quick-action strong,
body.kanakku-skin #pageContent .portal-quick-action small,
body.kanakku-skin #pageContent .portal-dashboard-actions .portal-quick-action,
body.kanakku-skin #pageContent .portal-dashboard-actions .portal-quick-action small {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
  font-weight: 600 !important;
}
body.kanakku-skin #pageContent .tab-btn[aria-selected="true"]:not(:disabled) {
  background: var(--k-purple) !important;
  color: #fff !important;
  border-color: var(--k-purple) !important;
}
body.kanakku-skin #pageContent .card-header,
body.kanakku-skin #pageContent .card-body {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}
body.kanakku-skin .page-content { background: var(--k-white) !important; }

/* (c) the buttons that are part of the shell keep their own look */
body.kanakku-skin .portal-menu-group-button:not(:disabled) {
  background: transparent !important;
  color: var(--k-ink-2) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
body.kanakku-skin .portal-menu-group-button:not(:disabled):hover {
  background: transparent !important;
  color: var(--k-purple) !important;
}
body.kanakku-skin .portal-group-arrow { margin-left: auto; font-size: 12px; opacity: .6; }

body.kanakku-skin .privacy-toggle:not(:disabled) {
  background: var(--k-white) !important;
  color: var(--k-muted) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  min-height: 0 !important;
  text-align: left;
}

body.kanakku-skin .k-rail-btn:not(:disabled) {
  background: transparent !important;
  color: var(--k-muted) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 36px;
}
body.kanakku-skin .k-rail-btn:not(:disabled):hover {
  background: var(--k-panel) !important;
  color: var(--k-purple) !important;
}

/* anything still carrying an old dark inline colour */
body.kanakku-skin #pageContent [style*="rgba(15,23,42"],
body.kanakku-skin #pageContent [style*="rgba(15, 23, 42"],
body.kanakku-skin #pageContent [style*="#0f172a"],
body.kanakku-skin #pageContent [style*="#1e293b"],
body.kanakku-skin #pageContent [style*="#334155"] {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}

/* ---------------------------------------------------------------
   7. SMALL SCREENS - the menu slides in, same as today
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.kanakku-skin .main-content { margin-left: 0; }
  body.kanakku-skin .header { padding: 0 12px 0 56px; }
  body.kanakku-skin .header input[type="search"],
  body.kanakku-skin .header input[type="text"] { min-width: 0; }
  body.kanakku-skin .page-content { padding: 12px; }
}

/* PHONES (build 2, Wave 1): the top bar holds a title, a search box and a
   row of buttons. Squeezed into one 56px line they overlapped the page
   (the search box sat on top of the page title). On a phone they now
   stack: title, then the buttons, then the search box full width. */
@media (max-width: 768px) {
  body.kanakku-skin .header {
    display: grid !important; grid-template-columns: minmax(0, 1fr);
    height: auto !important; min-height: 0 !important;
    padding: 10px 12px 10px 84px !important; row-gap: 8px; align-items: center;
  }
  body.kanakku-skin .header > * { min-width: 0; margin: 0 !important; }
  body.kanakku-skin .header > div:first-child { min-height: 20px; }
  body.kanakku-skin .header > div:last-child { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
  body.kanakku-skin .header > .ab-search { grid-row: 3; margin-left: -72px !important; width: calc(100% + 72px); max-width: none; }
  body.kanakku-skin .header > .ab-search input { width: 100% !important; min-width: 0 !important; }
}

/* ===============================================================
   8. THE PAGE ITSELF, IN KANAKKU'S LOOK
   ---------------------------------------------------------------
   Every screen in the portal is built from the same small set of
   pieces: page-header, search-bar, card, stats-grid, table-container,
   badge, form-input. Styling those pieces styles every menu at once.
   No screen is rebuilt and no button is moved.

   All sizes below were measured on the Kanakku demo.
   =============================================================== */

/* ---- page title block -------------------------------------- */
body.kanakku-skin #pageContent .page-header {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: block;
  text-align: left;
}
body.kanakku-skin #pageContent .portal-page-eyebrow {
  font-size: 13px;
  font-weight: 400;
  color: var(--k-muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  text-align: left;
}
body.kanakku-skin #pageContent .page-header h1,
body.kanakku-skin #pageContent .page-header h2,
body.kanakku-skin #pageContent .page-header h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--k-ink) !important;
  line-height: 21.6px;
  margin: 0 0 4px !important;
  text-align: left;
}
body.kanakku-skin #pageContent .page-header p {
  font-size: 13px !important;
  font-weight: 400;
  color: var(--k-muted) !important;
  margin: 0 !important;
  text-align: left;
}

/* ---- the row of filters and buttons above a list ------------ */
body.kanakku-skin #pageContent .search-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---- boxes ---- Kanakku card: white, 1px #E2E4E6, radius 10 -- */
body.kanakku-skin #pageContent .card,
body.kanakku-skin #pageContent .table-container,
body.kanakku-skin #pageContent .modal-card {
  background: var(--k-white) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--k-shadow) !important;
  margin-bottom: 24px;
  color: var(--k-muted);
  overflow: hidden;
}
body.kanakku-skin #pageContent .card-header {
  background: transparent !important;
  color: var(--k-ink) !important;
  border-bottom: 1px solid var(--k-line) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 15px 20px !important;
}
body.kanakku-skin #pageContent .card-header h1,
body.kanakku-skin #pageContent .card-header h2,
body.kanakku-skin #pageContent .card-header h3,
body.kanakku-skin #pageContent .card-header h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--k-ink) !important;
  margin: 0 !important;
}
body.kanakku-skin #pageContent .card-body {
  background: transparent !important;
  padding: 20px !important;
  color: var(--k-muted);
}

/* ---- the little number boxes -------------------------------- */
body.kanakku-skin #pageContent .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  background: transparent !important;
}
body.kanakku-skin #pageContent .stat-card {
  background: var(--k-white) !important;
  border: 1px solid var(--k-line) !important;
  border-left: 1px solid var(--k-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--k-shadow) !important;
  padding: 16px !important;
  color: var(--k-muted) !important;
}
body.kanakku-skin #pageContent .stat-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--k-ink) !important;
  line-height: 1.2;
  margin-bottom: 4px;
}
body.kanakku-skin #pageContent .stat-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--k-muted) !important;
}

/* ---- tables -------------------------------------------------
   Kanakku: head #F7F8F9 13px/600, rows 14px/400, 8px 16px cells */
body.kanakku-skin #pageContent .table-container { padding: 0 !important; overflow-x: auto; }
body.kanakku-skin #pageContent table {
  width: 100%;
  border-collapse: collapse;
  background: var(--k-white) !important;
  font-size: 14px;
}
body.kanakku-skin #pageContent table th {
  background: var(--k-panel) !important;
  color: var(--k-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left;
  padding: 9px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k-line) !important;
  white-space: nowrap;
}
body.kanakku-skin #pageContent table td {
  background: transparent !important;
  color: var(--k-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k-line) !important;
  vertical-align: middle;
}
body.kanakku-skin #pageContent table tbody tr:hover td { background: var(--k-panel) !important; }
body.kanakku-skin #pageContent table tbody tr:last-child td { border-bottom: 0 !important; }
body.kanakku-skin #pageContent table td strong,
body.kanakku-skin #pageContent table td b { color: var(--k-ink) !important; font-weight: 600 !important; }

/* small buttons sitting inside a table row */
body.kanakku-skin #pageContent table td button:not(:disabled),
body.kanakku-skin #pageContent table td .btn:not(:disabled) {
  font-size: 12px !important;
  padding: 4px 8px !important;
  min-height: 26px;
}

/* ---- boxes you type in -------------------------------------- */
body.kanakku-skin #pageContent input[type="text"],
body.kanakku-skin #pageContent input[type="search"],
body.kanakku-skin #pageContent input[type="number"],
body.kanakku-skin #pageContent input[type="date"],
body.kanakku-skin #pageContent input[type="time"],
body.kanakku-skin #pageContent input[type="email"],
body.kanakku-skin #pageContent input[type="tel"],
body.kanakku-skin #pageContent input[type="password"],
body.kanakku-skin #pageContent select,
body.kanakku-skin #pageContent textarea,
body.kanakku-skin #pageContent .form-input,
body.kanakku-skin #pageContent .form-select,
body.kanakku-skin #pageContent .form-textarea {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  min-height: 36px;
  box-shadow: none !important;
}
body.kanakku-skin #pageContent textarea { min-height: 80px; line-height: 18px; }
body.kanakku-skin #pageContent input::placeholder,
body.kanakku-skin #pageContent textarea::placeholder { color: #9AA3AC !important; opacity: 1; }
body.kanakku-skin #pageContent input:focus,
body.kanakku-skin #pageContent select:focus,
body.kanakku-skin #pageContent textarea:focus {
  outline: 0;
  border-color: var(--k-purple) !important;
}
body.kanakku-skin #pageContent label,
body.kanakku-skin #pageContent .form-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--k-ink) !important;
  margin-bottom: 4px;
  display: inline-block;
}

/* ---- little status pills ------------------------------------ */
body.kanakku-skin #pageContent .badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--k-radius) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 4px 6px !important;
  line-height: 12px;
  border: 0 !important;
}
body.kanakku-skin #pageContent .badge-success { background: #F4FBF7 !important; color: #27AE60 !important; }
body.kanakku-skin #pageContent .badge-warning { background: #FDF8EB !important; color: #B58A0B !important; }
body.kanakku-skin #pageContent .badge-danger  { background: #FDF1F1 !important; color: #EF1E1E !important; }
body.kanakku-skin #pageContent .badge-info    { background: #EFFAFD !important; color: #06AED4 !important; }
body.kanakku-skin #pageContent .badge-primary { background: #F3EEFF !important; color: #7539FF !important; }
body.kanakku-skin #pageContent .badge-secondary { background: var(--k-panel) !important; color: var(--k-muted) !important; }

/* ---- headings and plain text on a page ---------------------- */
body.kanakku-skin #pageContent h1 { font-size: 20px !important; font-weight: 700 !important; color: var(--k-ink) !important; }
body.kanakku-skin #pageContent h2 { font-size: 18px !important; font-weight: 700 !important; color: var(--k-ink) !important; }
body.kanakku-skin #pageContent h3 { font-size: 16px !important; font-weight: 600 !important; color: var(--k-ink) !important; }
body.kanakku-skin #pageContent h4,
body.kanakku-skin #pageContent h5,
body.kanakku-skin #pageContent h6 { font-size: 14px !important; font-weight: 600 !important; color: var(--k-ink) !important; }
body.kanakku-skin #pageContent p,
body.kanakku-skin #pageContent li,
body.kanakku-skin #pageContent span,
body.kanakku-skin #pageContent div { color: inherit; }
body.kanakku-skin #pageContent a { color: var(--k-purple); }

/* ---- tabs across the top of a screen ------------------------ */
body.kanakku-skin #pageContent .tab-btn:not(:disabled) {
  background: var(--k-white) !important;
  color: var(--k-muted) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
}

/* ---- pop-up windows ----------------------------------------- */
body.kanakku-skin .modal-card {
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
}
body.kanakku-skin .modal-header { border-bottom: 1px solid var(--k-line) !important; padding: 15px 20px; }
body.kanakku-skin .modal-footer { border-top: 1px solid var(--k-line) !important; padding: 15px 20px; }
body.kanakku-skin .modal th { background: var(--k-panel) !important; color: var(--k-ink) !important; }
body.kanakku-skin .modal button:not(:disabled) { color: var(--k-ink) !important; }
body.kanakku-skin .modal .btn-primary:not(:disabled) { background: var(--k-purple) !important; color: #fff !important; border-color: var(--k-purple) !important; }
body.kanakku-skin .modal .btn-danger:not(:disabled)  { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }

/* the coloured stripe the old design drew down the left of a number box */
body.kanakku-skin #pageContent .stat-card::before { display: none !important; }

/* breadcrumb line above a page title, Kanakku style */
body.kanakku-skin #pageContent .portal-page-eyebrow .k-crumb-sep { margin: 0 6px; color: #C6CBD0; }
body.kanakku-skin #pageContent .portal-page-eyebrow .k-crumb-now { color: var(--k-ink); font-weight: 500; }

/* the row of big shortcut buttons on the dashboard */
body.kanakku-skin #pageContent .portal-dashboard-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
  background: transparent !important;
}
body.kanakku-skin #pageContent .portal-quick-action:not(:disabled),
body.kanakku-skin #pageContent .portal-dashboard-actions .portal-quick-action:not(:disabled) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 150px; min-height: 76px;
  padding: 14px 16px !important;
  background: var(--k-white) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--k-shadow) !important;
  text-align: left;
}
body.kanakku-skin #pageContent .portal-quick-action * ,
body.kanakku-skin #pageContent .portal-dashboard-actions .portal-quick-action * {
  background: transparent !important;
  color: inherit !important;
}
body.kanakku-skin #pageContent .portal-quick-action strong { font-size: 14px !important; font-weight: 600 !important; }
body.kanakku-skin #pageContent .portal-quick-action small  { font-size: 12px !important; font-weight: 400 !important; color: var(--k-muted) !important; }

/* the strip of tabs across the top of a screen */
body.kanakku-skin #pageContent .tabs,
body.kanakku-skin #pageContent .tab-bar,
body.kanakku-skin #pageContent .portal-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
  padding: 0 0 12px !important;
  margin: 0 0 20px !important;
  display: flex; flex-wrap: wrap; gap: 8px;
  box-shadow: none !important;
}
body.kanakku-skin #pageContent .tab-btn.active:not(:disabled),
body.kanakku-skin #pageContent .tab-btn[aria-selected="true"]:not(:disabled) {
  background: var(--k-purple) !important;
  color: #fff !important;
  border-color: var(--k-purple) !important;
}
body.kanakku-skin #pageContent .tab-btn.active span,
body.kanakku-skin #pageContent .tab-btn[aria-selected="true"] span { color: #fff !important; }

/* a plain scrolling box for a very wide table */
body.kanakku-skin #pageContent .k-scroll {
  overflow-x: auto;
  width: 100%;
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 10px;
  box-shadow: var(--k-shadow);
  margin-bottom: 24px;
}

/* a button that cannot be pressed right now */
body.kanakku-skin #pageContent button:disabled,
body.kanakku-skin #pageContent .btn:disabled,
body.kanakku-skin #pageContent button[disabled],
body.kanakku-skin #pageContent [aria-disabled="true"].btn,
body.kanakku-skin #pageContent button[aria-disabled="true"] {
  background: var(--k-panel) !important;
  color: #9AA3AC !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* PHONES (build 3): the bottom bar (Home / Schedule / Quotes / ...) floats over
   the page. The old look keeps 5.6rem of space under the page for it; the
   Kanakku look set that space back to 12px, so the last rows, the page
   numbers and the last buttons sat UNDER the bar. Same space as the old look
   now, plus the phone's own safe area (iPhone home bar). */
@media (max-width: 768px) {
  body.kanakku-skin .page-content {
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* On a phone every list row becomes a card. The old look gives each card a
     dark see-through fill (right on the dark background); in the Kanakku look
     that showed as every second card grey. Cards are white with a thin line. */
  body.kanakku-skin :is(.table-container,.card) table.mobile-ready tr {
    background: var(--k-white);
    border: 1px solid var(--k-line);
  }
}

/* =====================================================================
   BUILD 4: DARK MODE = THE SAME KANAKKU LAYOUT, DARK COLOURS
   Pressing the moon used to switch the Kanakku style files off and show
   the old portal. Now only the colour names change: every card, button,
   list, sidebar and header keeps its Kanakku shape, spacing and icons.
   ===================================================================== */
body.kanakku-skin.kanakku-dark {
  --dark:    #0B1220;  --dark-2: #111A2B;  --dark-3: #1A2436;
  --light:   #E6EBF1;  --gray:   #9AA6B5;
  --k-ink:   #E6EBF1;  --k-ink-2: #C3CCD6;  --k-muted: #9AA6B5;
  --k-line:  #263247;  --k-panel: #1A2436;  --k-white: #111A2B;
  --k-shadow: 0px 4px 3px 0px rgba(0,0,0,0.25);
  background: #0B1220;
  color: #E6EBF1;
  color-scheme: dark;
}
/* the places that were written as plain white / light grey / dark ink */
body.kanakku-skin.kanakku-dark .sidebar, body.kanakku-skin.kanakku-dark .k-rail, body.kanakku-skin.kanakku-dark .header,
body.kanakku-skin.kanakku-dark .page-content, body.kanakku-skin.kanakku-dark .main-content,
body.kanakku-skin.kanakku-dark #pageContent .card, body.kanakku-skin.kanakku-dark #pageContent .stat-card,
body.kanakku-skin.kanakku-dark #pageContent .search-bar, body.kanakku-skin.kanakku-dark #pageContent .page-header,
body.kanakku-skin.kanakku-dark #pageContent .table-container, body.kanakku-skin.kanakku-dark #pageContent table,
body.kanakku-skin.kanakku-dark #pageContent .k-scroll, body.kanakku-skin.kanakku-dark .modal,
body.kanakku-skin.kanakku-dark .kw-more-menu, body.kanakku-skin.kanakku-dark .kw-rowmenu-list,
body.kanakku-skin.kanakku-dark .kt-panel, body.kanakku-skin.kanakku-dark .kt-menu,
body.kanakku-skin.kanakku-dark .portal-quick-action, body.kanakku-skin.kanakku-dark #pageContent .portal-dashboard-actions .portal-quick-action:not(:disabled),
body.kanakku-skin.kanakku-dark #pageContent table.mobile-ready tr {
  background-color: var(--k-white) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}
body.kanakku-skin.kanakku-dark #pageContent thead th, body.kanakku-skin.kanakku-dark #pageContent .table-container th,
body.kanakku-skin.kanakku-dark .kt-bar, body.kanakku-skin.kanakku-dark #pageContent .tabs,
body.kanakku-skin.kanakku-dark #pageContent .card-header, body.kanakku-skin.kanakku-dark .sidebar .nav-item.active,
body.kanakku-skin.kanakku-dark #pageContent button:disabled, body.kanakku-skin.kanakku-dark #pageContent .btn:disabled {
  background-color: var(--k-panel) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}
body.kanakku-skin.kanakku-dark #pageContent td, body.kanakku-skin.kanakku-dark #pageContent th { border-color: var(--k-line) !important; color: var(--k-ink); }
body.kanakku-skin.kanakku-dark #pageContent td { color: var(--k-ink) !important; }
body.kanakku-skin.kanakku-dark #pageContent .stat-label, body.kanakku-skin.kanakku-dark #pageContent .page-header p,
body.kanakku-skin.kanakku-dark .sidebar .nav-item, body.kanakku-skin.kanakku-dark .nav-section-title, body.kanakku-skin.kanakku-dark .portal-menu-group-button,
body.kanakku-skin.kanakku-dark #pageContent label, body.kanakku-skin.kanakku-dark .header span, body.kanakku-skin.kanakku-dark .kt-bar .kt-count { color: var(--k-muted) !important; }
body.kanakku-skin.kanakku-dark .sidebar .nav-item.active, body.kanakku-skin.kanakku-dark .sidebar .nav-item.active span { color: #A98BFF !important; }
body.kanakku-skin.kanakku-dark #pageContent h1, body.kanakku-skin.kanakku-dark #pageContent h2, body.kanakku-skin.kanakku-dark #pageContent h3,
body.kanakku-skin.kanakku-dark #pageContent strong, body.kanakku-skin.kanakku-dark #pageContent .stat-value, body.kanakku-skin.kanakku-dark .header strong { color: var(--k-ink) !important; }
/* inputs, selects and plain (white) buttons */
body.kanakku-skin.kanakku-dark input:not([type="checkbox"]):not([type="radio"]), body.kanakku-skin.kanakku-dark select, body.kanakku-skin.kanakku-dark textarea,
body.kanakku-skin.kanakku-dark #pageContent .btn-secondary, body.kanakku-skin.kanakku-dark #pageContent .kw-actions > .btn:not(.kw-main):not(:disabled),
body.kanakku-skin.kanakku-dark #pageContent .kw-actions > button:not(.kw-main):not(:disabled), body.kanakku-skin.kanakku-dark .kw-more-btn,
body.kanakku-skin.kanakku-dark .kt-bar .kt-btn, body.kanakku-skin.kanakku-dark #pageContent .kw-rowmenu-list button, body.kanakku-skin.kanakku-dark #pageContent .kw-more-menu button,
body.kanakku-skin.kanakku-dark #pageContent .tab-btn:not(.active), body.kanakku-skin.kanakku-dark .header .k-icon-btn, body.kanakku-skin.kanakku-dark .kw-dots,
body.kanakku-skin.kanakku-dark #pageContent .btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
  background-color: var(--k-panel) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-line) !important;
}
body.kanakku-skin.kanakku-dark ::placeholder { color: #6F7C8C !important; }
/* the soft-tinted spots (badges, icon discs, alert cards) keep their hue, darker */
body.kanakku-skin.kanakku-dark #pageContent .stat-card::before, body.kanakku-skin.kanakku-dark #pageContent .stat-card::after { opacity: .5; }
body.kanakku-skin.kanakku-dark #pageContent[data-kw="dashboard"] .portal-quick-action > span:first-child { background: rgba(117,57,255,.18) !important; }
body.kanakku-skin.kanakku-dark #pageContent[data-kw="dashboard"] #duplicateScheduleAlert > *,
body.kanakku-skin.kanakku-dark #pageContent[data-kw="dashboard"] #duplicateCustomerAlert > * { background: rgba(239,30,30,.10) !important; border-color: rgba(239,30,30,.35) !important; }
body.kanakku-skin.kanakku-dark #pageContent .badge { filter: brightness(1.15); }
body.kanakku-skin.kanakku-dark #pageContent .stat-card[data-kw-tone] .stat-value { color: var(--k-ink) !important; }
/* login box, modal overlay, toasts */
body.kanakku-skin.kanakku-dark #loginScreen { background: #0B1220 !important; }
body.kanakku-skin.kanakku-dark .modal-overlay { background: rgba(0,0,0,.72) !important; }
body.kanakku-skin.kanakku-dark #abSplash { background: #0B1220 !important; color: #C3CCD6 !important; }
/* phone: the old dark backgrounds must not show through */
@media (max-width: 768px) {
  body.kanakku-skin.kanakku-dark, body.kanakku-skin.kanakku-dark .header, body.kanakku-skin.kanakku-dark .page-header,
  body.kanakku-skin.kanakku-dark .card, body.kanakku-skin.kanakku-dark .stat-card, body.kanakku-skin.kanakku-dark .search-bar { background-color: var(--k-white) !important; }
  body.kanakku-skin.kanakku-dark .mobile-bottom-nav { background: #111A2B !important; border-color: var(--k-line) !important; }
}
/* build 4, second pass: the screen files write some backgrounds and text colours with !important,
   so these are written stronger (html prefix) to win in Dark */
html body.kanakku-skin.kanakku-dark #pageContent :is(.card, .kw-listcard, .stat-card, .search-bar, .page-header, .table-container, table, tbody, .k-scroll, .portal-quick-action, .card-body, #duplicateScheduleAlert > *, #duplicateCustomerAlert > *, .modal, .kw-more-menu, .kw-rowmenu-list),
html body.kanakku-skin.kanakku-dark :is(.modal, .kw-more-menu, .kw-rowmenu-list, .kt-panel, .kt-menu, .kt-bar, .sidebar, .header, .k-rail, .page-content, .main-content) {
  background-color: var(--k-white) !important; border-color: var(--k-line) !important; box-shadow: var(--k-shadow) !important;
}
html body.kanakku-skin.kanakku-dark #pageContent :is(.card-header, thead, thead th, th, .tabs, tr:nth-child(even), .kt-bar) { background-color: var(--k-panel) !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(tr, td) { background-color: transparent !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark #pageContent[data-kw="dashboard"] :is(#duplicateScheduleAlert > *, #duplicateCustomerAlert > *) { background-color: rgba(239,30,30,.12) !important; }
/* text: everything that is not a coloured button or badge reads in light ink */
html body.kanakku-skin.kanakku-dark #pageContent :is(h1, h2, h3, h4, h5, p, span, div, td, th, label, strong, small, li, summary):not(.badge):not([class*="btn"]):not(.stat-card *[style*="color"]),
html body.kanakku-skin.kanakku-dark :is(.sidebar, .header) :is(span, div, strong, small):not(.nav-badge):not([class*="btn"]) { color: var(--k-ink); }
html body.kanakku-skin.kanakku-dark #pageContent :is(.stat-label, .page-header p, p[style*="gray"], small, .card-header p, [style*="var(--gray)"]),
html body.kanakku-skin.kanakku-dark :is(.sidebar .nav-item:not(.active), .sidebar .nav-item:not(.active) span, .nav-section-title, .portal-menu-group-button, .header .k-sub) { color: var(--k-muted) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(.badge, .btn, button) { color: inherit; }
html body.kanakku-skin.kanakku-dark #pageContent .stat-card .stat-value { color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html body.kanakku-skin.kanakku-dark .header :is(input, select) { background-color: var(--k-panel) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(.btn-secondary, .btn-sm.btn-secondary, .kw-more-btn, .kw-dots, .tab-btn:not(.active), .kt-btn, .kw-actions > .btn:not(.kw-main), .kw-actions > button:not(.kw-main), .kw-rowmenu-list button, .kw-more-menu button, .kw-rowhold > .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info)) {
  background-color: var(--k-panel) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important;
}
html body.kanakku-skin.kanakku-dark #pageContent .tab-btn.active { color: #fff !important; }
html body.kanakku-skin.kanakku-dark #pageContent .stat-card[data-kw-tone]::after { opacity: .35; }
/* build 4, third pass: the screen file (kscreens) keeps its own colour names on #pageContent[data-kw];
   in Dark they take the dark values too */
html body.kanakku-skin.kanakku-dark #pageContent[data-kw] {
  --kw-ink: #E6EBF1; --kw-ink2: #C3CCD6; --kw-muted: #9AA6B5; --kw-line: #263247; --kw-panel: #1A2436;
  --kw-purple-soft: rgba(117,57,255,.18); --kw-green-soft: rgba(39,174,96,.18); --kw-red-soft: rgba(239,30,30,.16);
  --kw-amber-soft: rgba(226,185,59,.18); --kw-blue-soft: rgba(6,174,212,.18); --kw-shadow: 0 4px 3px rgba(0,0,0,.25);
}
/* the B1 toolbar wrote its colours as plain numbers */
html body.kanakku-skin.kanakku-dark #pageContent :is(.kt-bar, .kt-bar *, .kt-tags, .kt-tags *, .kt-selbar, .kt-selbar *, .kt-panel, .kt-panel *, .kt-menu, .kt-menu *):not(.kt-check):not(input):not([class*="btn-primary"]):not(.kt-tag) { color: var(--k-ink); }
html body.kanakku-skin.kanakku-dark #pageContent :is(.kt-bar .kt-btn, .kt-panel, .kt-menu, .kt-tag) { background-color: var(--k-panel) !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(h2, h3, .page-header h2, .card-header h3, .kw-head h2, .kw-head h3, thead th, th) { color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(.stat-card .stat-value, .stat-card > h3, .stat-card strong) { color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark #pageContent :is(.stat-card .stat-label, .stat-card > p) { color: var(--k-ink-2) !important; }
html body.kanakku-skin.kanakku-dark #pageContent td :is(strong, span:not(.badge)) { color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark #pageContent td :is(div, small)[style*="gray"] { color: var(--k-muted) !important; }
html body.kanakku-skin.kanakku-dark #pageContent .card-body :is(div, span, strong, p)[style*="color"]:not(.badge) { filter: brightness(1.6); }

/* =====================================================================
   BUILD 5: KANAKKU VISUAL ALIGNMENT (shared - every page inherits it)
   Measured on the purchased template: header 60px with the breadcrumb on
   the left; page title 20px/600 with the buttons on its right; tables with
   a #F7F8F9 head, 13px/600 headings, 48px rows, 32px grey avatars; outline
   white buttons 38px; pager with square page numbers; footer line.
   ===================================================================== */
body.kanakku-skin { --k-top: 60px; }
/* --- top bar: breadcrumb left, tools right ------------------------------ */
body.kanakku-skin .header[data-k-crumb="1"] > div:first-child > :not(.k-crumb-slot):not(#syncIndicator) { display: none !important; }
body.kanakku-skin .header #syncIndicator,
body.kanakku-skin .header .portal-live-chip,
body.kanakku-skin .header .k-user-text { display: none !important; }
body.kanakku-skin .header .k-crumb-home {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-white);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0; flex: 0 0 28px;
}
body.kanakku-skin .header .k-crumb-home::before {
  content: ''; width: 14px; height: 14px; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D6772' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
body.kanakku-skin .header .k-crumb-sep { color: #C6CBD0; font-size: 16px; }
body.kanakku-skin .header > .ab-search { flex: 0 1 220px !important; max-width: 240px !important; margin-left: auto !important; }
body.kanakku-skin .header > .ab-search input {
  height: 38px !important; min-width: 0 !important; width: 100% !important; border-radius: 8px !important;
  padding: 0 36px 0 14px !important; background: #fff !important;
}
body.kanakku-skin .header > .ab-search::after {
  content: ''; position: absolute; right: 12px; top: 11px; width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235D6772' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body.kanakku-skin .header .k-avatar { width: 36px; height: 36px; border-radius: 50%; flex-basis: 36px; }
body.kanakku-skin .header[data-k-crumb="1"] > div:first-child { display: flex !important; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
body.kanakku-skin .header > .ab-search { flex: 0 1 300px; margin-left: auto; }
body.kanakku-skin .header #syncIndicator { font-size: 12px; margin-left: 8px; }
body.kanakku-skin .header .k-crumb-slot { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--k-muted); white-space: nowrap; }
body.kanakku-skin .header .k-crumb-slot:empty { display: none; }
body.kanakku-skin .header .k-crumb-slot .k-crumb-sep { margin: 0 4px; color: #C6CBD0; }
body.kanakku-skin .header .k-crumb-slot .k-crumb-now { color: var(--k-ink); font-weight: 500; }
body.kanakku-skin #pageContent .page-header .portal-page-eyebrow { display: none !important; }
body.kanakku-skin .header .k-icon-btn:not(:disabled) { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-white); }
body.kanakku-skin .header .k-user-chip:not(:disabled) .k-avatar { width: 32px; height: 32px; border-radius: 50%; }

/* --- page title row ---------------------------------------------------- */
body.kanakku-skin #pageContent .page-header { padding: 0 0 16px !important; margin: 0 0 16px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.kanakku-skin #pageContent .page-header h2 { font-size: 20px !important; font-weight: 600 !important; line-height: 28px; margin: 0 !important; color: var(--k-ink); }
body.kanakku-skin #pageContent .page-header p { font-size: 13px !important; color: var(--k-muted) !important; margin: 2px 0 0 !important; }
body.kanakku-skin #pageContent .kw-head > .kw-actions .btn, body.kanakku-skin #pageContent .kw-head > .kw-actions button { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; border-radius: 5px; }
body.kanakku-skin #pageContent .kw-head > .kw-actions .kw-main::before { content: "\ea20"; font-family: 'iconsax'; font-weight: 400; margin-right: 6px; }

/* --- search row ----------------------------------------------------------- */
body.kanakku-skin #pageContent .search-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 16px !important; gap: 10px !important; }
body.kanakku-skin #pageContent .search-bar input, body.kanakku-skin #pageContent .search-bar select, body.kanakku-skin #pageContent .search-bar .btn, body.kanakku-skin #pageContent .search-bar button {
  height: 38px !important; min-height: 38px; border-radius: 5px !important; font-size: 14px !important; border: 1px solid var(--k-line) !important; background: var(--k-white); color: var(--k-ink);
}
body.kanakku-skin #pageContent .search-bar input[type="text"], body.kanakku-skin #pageContent .search-bar input[type="search"] { max-width: 260px; }
body.kanakku-skin #pageContent .search-bar .btn-primary, body.kanakku-skin #pageContent .search-bar .btn-success, body.kanakku-skin #pageContent .search-bar .btn-danger, body.kanakku-skin #pageContent .search-bar .btn-warning { color: #fff; }

/* --- tables --------------------------------------------------------------- */
body.kanakku-skin #pageContent .card.kw-listcard, body.kanakku-skin #pageContent .table-container { border: 1px solid var(--k-line); border-radius: 10px; overflow: hidden; box-shadow: none !important; }
body.kanakku-skin #pageContent .table-container table { border-collapse: separate; border-spacing: 0; }
body.kanakku-skin #pageContent .table-container th { height: 40px; padding: 0 16px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--k-ink-2) !important; background: var(--k-panel) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; border-bottom: 1px solid var(--k-line) !important; }
body.kanakku-skin #pageContent .table-container td { height: 48px; padding: 8px 16px !important; font-size: 14px !important; color: var(--k-ink) !important; border-bottom: 1px solid var(--k-line) !important; vertical-align: middle; }
body.kanakku-skin #pageContent .table-container tbody tr:last-child td { border-bottom: 0 !important; }
body.kanakku-skin #pageContent .table-container tbody tr:hover td { background: var(--k-panel); }
body.kanakku-skin #pageContent td[data-kw-av]::before { width: 32px; height: 32px; font-size: 12px; font-weight: 600; background: #E9ECEF !important; color: var(--k-ink-2) !important; }
body.kanakku-skin.kanakku-dark #pageContent td[data-kw-av]::before { background: #263247 !important; color: #C3CCD6 !important; }
body.kanakku-skin #pageContent .badge { font-size: 12px !important; font-weight: 500 !important; height: 22px; line-height: 22px; padding: 0 8px !important; border-radius: 4px !important; }
body.kanakku-skin #pageContent .kw-dots { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-white); }
body.kanakku-skin #pageContent .kw-rowhold > .btn { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 5px; }

/* --- pager ---------------------------------------------------------------- */
body.kanakku-skin #pageContent [id$="Pagination"], body.kanakku-skin #pageContent .auto-pagination-controls, body.kanakku-skin #pageContent [id^="abFastPager_"] {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px !important; padding: 16px 0 0 !important; font-size: 14px; color: var(--k-muted);
}
body.kanakku-skin #pageContent [id$="Pagination"] > span:first-child, body.kanakku-skin #pageContent [id$="Pagination"] > div:first-child:not(:has(button)) { margin-right: auto; }
body.kanakku-skin #pageContent [id$="Pagination"] .btn, body.kanakku-skin #pageContent [id$="Pagination"] button,
body.kanakku-skin #pageContent .auto-pagination-controls .btn, body.kanakku-skin #pageContent [id^="abFastPager_"] .btn {
  min-width: 32px; height: 32px; padding: 0 10px !important; border-radius: 5px !important; border: 1px solid var(--k-line) !important; background: var(--k-white) !important; color: var(--k-ink) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
}
body.kanakku-skin #pageContent [id$="Pagination"] .btn.active, body.kanakku-skin #pageContent [id$="Pagination"] .btn-primary,
body.kanakku-skin #pageContent .auto-pagination-controls .btn.active { border-color: var(--k-purple) !important; color: var(--k-purple) !important; }

/* --- cards --------------------------------------------------------------- */
body.kanakku-skin #pageContent .card { border: 1px solid var(--k-line); border-radius: 10px; box-shadow: none; }
body.kanakku-skin #pageContent .card-header { padding: 16px 20px; border-bottom: 1px solid var(--k-line); background: var(--k-white) !important; }
body.kanakku-skin #pageContent .card-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
body.kanakku-skin #pageContent .card-body { padding: 20px; }
body.kanakku-skin #pageContent .stat-card { border-radius: 10px !important; }

/* --- dashboard: the money card as Kanakku's purple hero card ---------------- */
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] {
  background: linear-gradient(135deg, #7539FF 0%, #A65CFF 100%) !important; border-color: transparent !important; color: #fff !important;
}
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] :is(.stat-value, .stat-label, div) { color: #fff !important; }
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"]::after { background: rgba(255,255,255,.22) !important; }
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"]::before { display: none; }

/* --- footer line, as on every Kanakku page ---------------------------------- */
body.kanakku-skin #pageContent::after { content: "\00a9 2026 AquaBest Work Portal"; display: block; padding: 24px 0 8px; font-size: 13px; color: var(--k-muted); }

/* --- phones: the same, tighter --------------------------------------------- */
@media (max-width: 768px) {
  body.kanakku-skin .header .k-crumb-slot { font-size: 13px; }
  body.kanakku-skin #pageContent .page-header h2 { font-size: 18px !important; }
  body.kanakku-skin #pageContent .search-bar input[type="text"], body.kanakku-skin #pageContent .search-bar input[type="search"] { max-width: none; }
}
/* build 5, second pass */
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] div:not(.stat-value):not(.stat-label) { color: rgba(255,255,255,.85) !important; }
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] { grid-column: span 2; }
body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] .stat-value { font-size: 26px; }
@media (max-width: 768px) { body.kanakku-skin #pageContent[data-kw="dashboard"] #dashboardStats > .stat-card[data-kw-hero="1"] { grid-column: span 2; } }
/* build 5, phones: two number cards per row, breadcrumb shows only the page name */
@media (max-width: 768px) {
  body.kanakku-skin #pageContent .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.kanakku-skin #pageContent .stats-grid > .stat-card { min-width: 0; }
  body.kanakku-skin .header .k-crumb-slot > :not(.k-crumb-now) { display: none; }
  body.kanakku-skin .header .k-crumb-slot .k-crumb-now { font-size: 15px; font-weight: 600; }
  body.kanakku-skin .header #syncIndicator { display: none !important; }
  body.kanakku-skin #pageContent .stat-card .stat-value { font-size: 18px !important; word-break: normal !important; white-space: nowrap; }
}
@media (max-width: 768px) {
  html body.kanakku-skin #pageContent[data-kw] .stats-grid[data-kw-cols] { grid-template-columns: 1fr 1fr !important; }
  html body.kanakku-skin #pageContent[data-kw] .stats-grid[data-kw-cols] > .stat-card { grid-column: auto; }
  body.kanakku-skin .header > div:last-child { flex-wrap: wrap; justify-content: flex-start; gap: 8px !important; }
}

/* =====================================================================
   BUILD 6: POP-UP WINDOWS, FORMS AND MENUS IN THE KANAKKU LOOK (shared)
   Measured on the template: window radius 10, header 16/20 px with an 18 px
   title and a small round close, body 20 px, footer 16/20 px; labels 14 px/500,
   inputs 36-38 px radius 5 with a purple focus ring; buttons 38 px.
   ===================================================================== */
/* the Kanakku theme's Bootstrap hides every ".modal" until its own script shows it.
   The portal's pop-up is its own: show it when the portal opens it. */
body.kanakku-skin .modal-overlay.active > .modal {
  display: flex !important; position: relative !important; top: auto !important; left: auto !important;
  width: min(100%, 760px); max-width: min(96vw, 760px); height: auto !important; max-height: 90vh; overflow: hidden !important;
  flex-direction: column; margin: auto; z-index: 1;
  background: var(--k-white) !important; color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important; border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.18) !important;
}
body.kanakku-skin .modal-overlay.active { background: rgba(5,19,33,.55) !important; backdrop-filter: blur(2px); padding: 24px; }
body.kanakku-skin .modal-overlay.active > .modal > .modal-header { padding: 16px 20px !important; border-bottom: 1px solid var(--k-line) !important; background: var(--k-white) !important; }
body.kanakku-skin .modal-overlay.active > .modal > .modal-header h3 { font-size: 18px; font-weight: 600; margin: 0; color: var(--k-ink); }
body.kanakku-skin .modal-overlay.active > .modal > .modal-header > button {
  width: 28px; height: 28px; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--k-line) !important;
  background: var(--k-white) !important; color: var(--k-muted) !important; font-size: 12px !important; line-height: 1; box-shadow: none !important;
}
body.kanakku-skin .modal-overlay.active > .modal > .modal-header > button:hover { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
body.kanakku-skin .modal-overlay.active > .modal > .modal-body { padding: 20px !important; max-height: calc(90vh - 140px); overflow: auto; background: var(--k-white) !important; }
/* A popup that holds a table, or that sets its own wider size in script, is not
   kept at 760px. Small notes and confirm boxes stay at 760. */
body.kanakku-skin .modal-overlay.active > .modal:has(:is(table, .table-container)) {
  width: min(96vw, 1280px);
  max-width: min(96vw, 1280px);
}
body.kanakku-skin .modal .table-container { overflow-x: auto; }
body.kanakku-skin .modal td :is(.form-input, .form-select, .form-textarea, input, select, textarea) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.kanakku-skin .modal-overlay.active > .modal > .modal-footer { padding: 16px 20px !important; border-top: 1px solid var(--k-line) !important; background: var(--k-white) !important; gap: 8px; }
body.kanakku-skin .modal-overlay.active > .modal > .modal-footer:empty { display: none; }

/* labels, inputs, selects, text areas - in pop-ups and on the pages */
body.kanakku-skin :is(.modal, #pageContent) label { font-size: 14px; font-weight: 500; color: var(--k-ink); margin-bottom: 6px; display: block; }
body.kanakku-skin :is(.modal, #pageContent) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  height: 38px; min-height: 38px; padding: 6px 12px; font-size: 14px; line-height: 20px; color: var(--k-ink);
  background: var(--k-white); border: 1px solid var(--k-line); border-radius: 5px; box-shadow: none; outline: 0; width: 100%;
}
body.kanakku-skin :is(.modal, #pageContent) textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
body.kanakku-skin :is(.modal, #pageContent) :is(input, select, textarea):focus { border-color: var(--k-purple) !important; box-shadow: 0 0 0 3px rgba(117,57,255,.12) !important; }
body.kanakku-skin :is(.modal, #pageContent) :is(input, select, textarea):disabled { background: var(--k-panel); color: var(--k-muted); }
body.kanakku-skin :is(.modal, #pageContent) input[type="checkbox"], body.kanakku-skin :is(.modal, #pageContent) input[type="radio"] { width: 16px; height: 16px; accent-color: var(--k-purple); }
body.kanakku-skin .modal .form-group, body.kanakku-skin .modal .form-row, body.kanakku-skin .modal .form-grid > div { margin-bottom: 14px; }
body.kanakku-skin .modal .form-grid { gap: 14px; }
body.kanakku-skin .modal h4, body.kanakku-skin .modal .form-section-title { font-size: 15px; font-weight: 600; margin: 6px 0 12px; color: var(--k-ink); }
body.kanakku-skin .modal small, body.kanakku-skin .modal .help-text { font-size: 12px; color: var(--k-muted); }
/* what the portal says when a box is not right */
body.kanakku-skin .modal :is(.error, .field-error, .invalid, [style*="var(--danger)"]) { color: var(--danger); font-size: 13px; }
body.kanakku-skin .modal input.error, body.kanakku-skin .modal input:invalid:not(:placeholder-shown) { border-color: var(--danger) !important; }
/* buttons in pop-ups */
body.kanakku-skin .modal .btn { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 500; border-radius: 5px; box-shadow: none !important; }
body.kanakku-skin .modal .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
body.kanakku-skin .modal .btn-secondary:not(:disabled) { background: var(--k-white) !important; color: var(--k-ink) !important; border: 1px solid var(--k-line) !important; }
body.kanakku-skin .modal .btn-secondary:not(:disabled):hover { background: var(--k-panel) !important; }
body.kanakku-skin .modal .btn-primary:not(:disabled):hover { background: #6329E6 !important; }
body.kanakku-skin .modal .btn-success:not(:disabled) { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
body.kanakku-skin .modal .btn-warning:not(:disabled) { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
/* tables inside a pop-up (quotation items) */
body.kanakku-skin .modal table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
body.kanakku-skin .modal th { height: 38px; padding: 0 12px !important; font-size: 13px; font-weight: 600; background: var(--k-panel) !important; color: var(--k-ink-2) !important; }
body.kanakku-skin .modal td { padding: 8px 12px !important; border-top: 1px solid var(--k-line); font-size: 14px; }
body.kanakku-skin .modal td :is(input, select) { height: 34px; min-height: 34px; }

/* dropdown menus: the row "..." menu, the header "More" menu, the B1 toolbar menus */
body.kanakku-skin :is(.kw-rowmenu-list, .kw-more-menu, .kt-menu, .kt-panel) {
  background: var(--k-white) !important; border: 1px solid var(--k-line) !important; border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.12) !important; padding: 6px !important; min-width: 190px;
}
body.kanakku-skin :is(.kw-rowmenu-list, .kw-more-menu) :is(button, a) {
  display: flex !important; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px !important; margin: 0 !important;
  border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--k-ink) !important;
  font-size: 14px !important; font-weight: 400 !important; text-align: left; box-shadow: none !important;
}
body.kanakku-skin :is(.kw-rowmenu-list, .kw-more-menu) :is(button, a):hover { background: var(--k-panel) !important; color: var(--k-purple) !important; }
body.kanakku-skin :is(.kw-rowmenu-list, .kw-more-menu) .btn-danger { color: var(--danger) !important; }
body.kanakku-skin :is(.kw-rowmenu-list, .kw-more-menu) .btn-danger:hover { background: #FDEEEE !important; }

/* "Are you sure?" is the browser's own box; the portal's toast messages match the theme */
body.kanakku-skin .toast-container .toast, body.kanakku-skin .toast { border-radius: 8px; font-size: 14px; box-shadow: 0 8px 24px rgba(15,23,42,.15); }

/* the two icons the theme's own style.css names but never shipped (a flag menu and a select
   the portal does not use): no request is made for them */
body.kanakku-skin .custom-select { background-image: none !important; }
body.kanakku-skin .header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item.active,
body.kanakku-skin .header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item:hover { background-image: none !important; }

/* Dark */
html body.kanakku-skin.kanakku-dark .modal-overlay.active > .modal,
html body.kanakku-skin.kanakku-dark .modal-overlay.active > .modal > :is(.modal-header, .modal-body, .modal-footer) { background: var(--k-white) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark .modal :is(input, select, textarea) { background: var(--k-panel) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark .modal :is(label, h3, h4, td, th, p, span, div):not(.badge):not([class*="btn"]) { color: var(--k-ink); }
html body.kanakku-skin.kanakku-dark .modal .btn-secondary:not(:disabled) { background: var(--k-panel) !important; }
html body.kanakku-skin.kanakku-dark :is(.kw-rowmenu-list, .kw-more-menu) :is(button, a):hover { background: var(--k-panel) !important; }

/* phones: the pop-up fills the screen with the footer always reachable */
@media (max-width: 768px) {
  body.kanakku-skin .modal-overlay.active { padding: 8px; align-items: flex-end; }
  body.kanakku-skin .modal-overlay.active > .modal { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 16px); border-radius: 12px !important; }
  body.kanakku-skin .modal-overlay.active > .modal > .modal-body { padding: 16px !important; max-height: calc(100dvh - 150px); }
  body.kanakku-skin .modal-overlay.active > .modal > .modal-footer { flex-wrap: wrap; }
  body.kanakku-skin .modal-overlay.active > .modal > .modal-footer .btn { flex: 1 1 auto; }
}
/* Quotation, proforma, tax invoice and catalogue: a wide window, two full columns. */
body.kanakku-skin .modal-overlay.active > .modal.ab-doc-modal,
body.kanakku-skin .modal-overlay.active > .modal:has(:is(.quote-builder, #proformaCustomer, #pcName)) {
  width: min(96vw, 1180px) !important;
  max-width: 1180px !important;
}
body.kanakku-skin .modal.ab-doc-modal .form-grid,
body.kanakku-skin .modal:has(:is(.quote-builder, #proformaCustomer, #pcName)) .form-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px 32px;
}
body.kanakku-skin .modal .quote-section-title {
  color: var(--k-ink-2);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
body.kanakku-skin .modal .quote-line-head {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.8fr) minmax(72px, .55fr) minmax(96px, .7fr) minmax(96px, .7fr) minmax(120px, .85fr) minmax(100px, .7fr) minmax(88px, .55fr);
  gap: 12px;
  align-items: end;
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .03em;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--k-line);
}
body.kanakku-skin .modal .quote-line-grid {
  grid-template-columns: minmax(240px, 1.8fr) minmax(72px, .55fr) minmax(96px, .7fr) minmax(96px, .7fr) minmax(120px, .85fr) minmax(100px, .7fr) minmax(88px, .55fr);
  gap: 12px;
}
body.kanakku-skin .modal .quote-item-desc { min-height: 72px; }
/* The shared input rule forces every textarea to 38px, so the product
   description on a quote, tax invoice, or proforma was one clipped line. */
body.kanakku-skin :is(.modal, #pageContent) textarea.quote-item-desc {
  height: auto !important;
  min-height: 140px !important;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.45;
  resize: vertical;
  width: 100% !important;
}

/* Product Catalogue technical specifications need a readable multi-line editor. */
body.kanakku-skin .modal #pcDescription {
  display: block;
  width: 100% !important;
  height: 120px !important;
  min-height: 120px !important;
  max-height: 360px;
  box-sizing: border-box;
  padding: 10px 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-y: auto;
  resize: vertical;
}
body.kanakku-skin .modal .quote-summary-panel {
  min-width: 320px;
  background: var(--k-panel) !important;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  color: var(--k-ink);
}
@media (max-width: 900px) {
  body.kanakku-skin .modal.ab-doc-modal .form-grid,
  body.kanakku-skin .modal:has(:is(.quote-builder, #proformaCustomer, #pcName)) .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Return Check: seven columns need a wide window, not the 760px dialog. */
body.kanakku-skin .modal-overlay.active > .modal.ab-return-modal {
  width: min(96vw, 1280px) !important;
  max-width: 1280px !important;
}
body.kanakku-skin .modal.ab-return-modal .table-container { overflow-x: auto; }
body.kanakku-skin .modal.ab-return-modal table { width: 100%; min-width: 1080px; table-layout: fixed; }
body.kanakku-skin .modal.ab-return-modal th,
body.kanakku-skin .modal.ab-return-modal td { vertical-align: top; white-space: normal; word-break: break-word; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(1),
body.kanakku-skin .modal.ab-return-modal td:nth-child(1) { width: 48px; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(2),
body.kanakku-skin .modal.ab-return-modal td:nth-child(2) { width: 140px; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(3),
body.kanakku-skin .modal.ab-return-modal td:nth-child(3) { width: 200px; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(5),
body.kanakku-skin .modal.ab-return-modal td:nth-child(5) { width: 168px; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(6),
body.kanakku-skin .modal.ab-return-modal td:nth-child(6) { width: 120px; }
body.kanakku-skin .modal.ab-return-modal th:nth-child(7),
body.kanakku-skin .modal.ab-return-modal td:nth-child(7) { width: 200px; }
body.kanakku-skin .modal.ab-return-modal .team-sheet-return-status,
body.kanakku-skin .modal.ab-return-modal .team-sheet-return-cash,
body.kanakku-skin .modal.ab-return-modal .team-sheet-return-note { width: 100%; min-width: 0; box-sizing: border-box; }
body.kanakku-skin .modal.ab-return-modal .team-sheet-return-note { min-height: 72px; }

/* the grey group boxes inside the quotation / invoice forms */
body.kanakku-skin .modal :is(.quote-section, .form-section, fieldset) { background: var(--k-panel) !important; border: 1px solid var(--k-line) !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 14px; }
body.kanakku-skin .modal :is(.quote-section, .form-section) > :is(h4, strong, .section-title):first-child { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--k-ink-2); margin-bottom: 12px; }
body.kanakku-skin .modal .quote-section :is(input, select, textarea) { background: var(--k-white); }
html body.kanakku-skin.kanakku-dark .modal .quote-section :is(input, select, textarea) { background: #0F1826 !important; }
/* as in the template's forms: soft grey boxes on white sections */
body.kanakku-skin .modal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), body.kanakku-skin .modal .quote-section :is(input, select, textarea) { background: var(--k-panel) !important; }
body.kanakku-skin .modal :is(input, select, textarea):focus { background: var(--k-white) !important; }
body.kanakku-skin .modal :is(.quote-section, .form-section, fieldset) { background: var(--k-white) !important; }
html body.kanakku-skin.kanakku-dark .modal :is(.quote-section, .form-section, fieldset) { background: var(--k-white) !important; }
/* phone top bar: line 1 = menu button + page name; line 2 = the tool buttons; line 3 = search */
@media (max-width: 768px) {
  body.kanakku-skin .header { padding: 8px 12px 8px 12px !important; row-gap: 6px; }
  body.kanakku-skin .header > div:first-child { padding-left: 72px; min-height: 42px; }
  body.kanakku-skin .header > div:last-child { padding-left: 0; }
  body.kanakku-skin .header > div:last-child .btn-danger.k-user-chip::after { content: none !important; }
  body.kanakku-skin .header > div:last-child .k-user-chip { width: auto !important; flex: 0 0 auto !important; }
  body.kanakku-skin .header > div:last-child .k-user-chip .k-avatar { font-size: 12px !important; }
  body.kanakku-skin .header .k-icon-btn i { font-size: 16px !important; }
  body.kanakku-skin #menuToggle { top: 8px; left: 12px; width: 56px; height: 42px; border-radius: 8px; }
}
@media (max-width: 768px) {
  body.kanakku-skin .header::before { display: none !important; }
  body.kanakku-skin .header > .ab-search { flex: 1 1 100% !important; width: 100%; margin: 0 !important; min-width: 0; }
  body.kanakku-skin .header > .ab-search input { width: 100% !important; max-width: none !important; }
}

/* build 7, Dark: the white corner pattern on the number cards is for the light card only */
html body.kanakku-skin.kanakku-dark #pageContent[data-kw] .stat-card[data-kw-tone] { background-image: none !important; }
html:has(> body.kanakku-skin.kanakku-dark) { background: #0B1220; }
html:has(> body.kanakku-skin:not(.kanakku-dark)) { background: #F7F8F9; }
/* build 7, tablets 992-1100px: the portal's own tablet rule narrows the menu to 220px and pushes the
   page by 220px, while the Kanakku rail + menu is 276px wide - the menu covered the page. Same as
   Kanakku: the menu stays, the page starts after it. */
@media (min-width: 992px) and (max-width: 1100px) {
  html body.kanakku-skin .sidebar, html body.kanakku-skin #sidebar { width: var(--k-menu) !important; left: var(--k-rail) !important; }
  html body.kanakku-skin .main-content { margin-left: var(--k-side) !important; }
  html body.kanakku-skin .header { padding-left: 16px; padding-right: 16px; }
  html body.kanakku-skin .page-content { padding: 16px; }
  body.kanakku-skin #pageContent[data-kw="dashboard"] .portal-dashboard-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   BUILD 8 - master visual audit fixes (shared, every page)
   ===================================================================== */
/* 1. wide lists scroll sideways inside their card instead of being cut off (was overflow: hidden) */
body.kanakku-skin #pageContent .table-container { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; }
body.kanakku-skin #pageContent .card.kw-listcard > .card-body { overflow: visible; }
@media (max-width: 1400px) {
  body.kanakku-skin #pageContent .table-container th, body.kanakku-skin #pageContent .table-container td:not(.kw-wrap) { white-space: nowrap; }
}
@media (max-width: 768px) {
  body.kanakku-skin #pageContent .table-container table:not(.mobile-ready) { min-width: 640px; }
}
/* 2. toolbar: date / month boxes are fields, not full rows; their little labels sit beside them */
body.kanakku-skin #pageContent .search-bar > input[type="date"], body.kanakku-skin #pageContent .search-bar > input[type="month"],
body.kanakku-skin #pageContent .search-bar > input[type="week"], body.kanakku-skin #pageContent .search-bar > input[type="time"] {
  width: auto !important; flex: 0 0 auto !important; min-width: 150px; max-width: 190px;
}
body.kanakku-skin #pageContent .search-bar > select { width: auto !important; flex: 0 0 auto; max-width: 220px; }
body.kanakku-skin #pageContent .search-bar > label { display: inline-flex; align-items: center; height: 38px; margin: 0; font-size: 13px; font-weight: 500; color: var(--k-muted); }
body.kanakku-skin #pageContent .search-bar > input[type="text"], body.kanakku-skin #pageContent .search-bar > input[type="search"] { flex: 1 1 240px; max-width: 420px; }
/* 3. a group of number cards drawn inside another group joins the same row */
html body.kanakku-skin #pageContent .stats-grid .stats-grid, html body.kanakku-skin #pageContent[data-kw] .stats-grid[data-kw-nested] { display: contents !important; }
/* 4. one button system (Kanakku, measured): 34 px in the title row and toolbar, 28 px small (pager, inside lists) */
body.kanakku-skin #pageContent .search-bar > .btn, body.kanakku-skin #pageContent .search-bar > button { height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; }
body.kanakku-skin #pageContent .search-bar > input, body.kanakku-skin #pageContent .search-bar > select { height: 34px; min-height: 34px; }
/* 5. a card title row that also carries controls: title left, controls right on one line */
body.kanakku-skin #pageContent .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.kanakku-skin #pageContent .card-header > div:not(:first-child) { display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap !important; flex: 0 0 auto; margin-left: auto; }
body.kanakku-skin #pageContent .card-header > div:not(:first-child) .btn { white-space: nowrap; height: 34px; font-size: 13px; padding: 0 12px; }
body.kanakku-skin #pageContent .card-header > div:first-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 991.98px) { body.kanakku-skin #pageContent .card-header > div:not(:first-child) { flex-wrap: wrap !important; margin-left: 0; } }
body.kanakku-skin #pageContent .card-header > div:not(:first-child) > * { margin: 0 !important; }
body.kanakku-skin #pageContent .card-header > div:not(:first-child) > select { width: auto; min-width: 150px; }
/* 6. Dark: a hovered list row must stay dark (it turned white with invisible text) */
html body.kanakku-skin.kanakku-dark #pageContent tbody tr:hover, html body.kanakku-skin.kanakku-dark #pageContent tbody tr:hover td,
html body.kanakku-skin.kanakku-dark #pageContent .table-container tbody tr:hover > * { background: #1F2A3D !important; color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark #pageContent .stat-card[data-kw-tone]::after { opacity: 1; }
/* 7. plain screens (no own entry): the title row with the buttons on the right, like every other screen */
body.kanakku-skin #pageContent[data-kw] .page-header.kw-head > div:first-child { grid-column: 1; min-width: 0; }
body.kanakku-skin #pageContent[data-kw] .page-header.kw-head > div:first-child > h2 { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3; }
body.kanakku-skin #pageContent[data-kw] .page-header.kw-head > div:first-child > p { margin: 2px 0 0 !important; font-size: 13px !important; color: var(--k-muted) !important; }
body.kanakku-skin #pageContent[data-kw] .page-header.kw-head > div:empty { display: none; }
/* below 992 px the buttons go under the title on their own row - never squeeze the title */
@media (max-width: 991.98px) {
  html body.kanakku-skin #pageContent[data-kw] .kw-head > .kw-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  html body.kanakku-skin .main-content { margin-left: 0 !important; }
}
/* 8. Warranty Certificates: its own dark hero banner and boxes become the Kanakku title row, number cards and cards */
body.kanakku-skin #pageContent .wc-hero { background: transparent !important; color: var(--k-ink) !important; border: 0 !important; border-radius: 0 !important; padding: 0 0 16px !important; box-shadow: none !important; display: flex; align-items: center; justify-content: space-between; }
body.kanakku-skin #pageContent .wc-hero .wc-kicker { display: none; }
body.kanakku-skin #pageContent .wc-hero h2 { font-size: 20px !important; font-weight: 600 !important; color: var(--k-ink) !important; margin: 0 0 4px !important; }
body.kanakku-skin #pageContent .wc-hero p { font-size: 13px !important; color: var(--k-muted) !important; margin: 0 !important; }
body.kanakku-skin #pageContent .wc-hero-mark { display: none; }
body.kanakku-skin #pageContent .wc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
body.kanakku-skin #pageContent .wc-stat { background: var(--k-white) !important; border: 1px solid var(--k-line) !important; border-radius: 10px !important; padding: 18px 20px !important; text-align: left; box-shadow: none !important; }
body.kanakku-skin #pageContent .wc-stat.active { border-color: var(--k-purple) !important; }
body.kanakku-skin #pageContent .wc-stat > span { font-size: 13.5px; color: var(--k-ink-2); text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
body.kanakku-skin #pageContent .wc-stat > strong { font-size: 22px; color: var(--k-ink); }
body.kanakku-skin #pageContent .wc-stat > small { color: var(--k-muted); }
body.kanakku-skin #pageContent .wc-card { background: var(--k-white) !important; border: 1px solid var(--k-line) !important; border-radius: 10px !important; box-shadow: none !important; }
body.kanakku-skin #pageContent .wc-card-head { padding: 16px 20px !important; border-bottom: 1px solid var(--k-line); }
body.kanakku-skin #pageContent .wc-form-body { padding: 20px !important; }
@media (max-width: 992px) { body.kanakku-skin #pageContent .wc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* 9. empty states: centred, quiet, with room - not one grey line stuck to the edge */
body.kanakku-skin #pageContent .card-body > p[style*="text-align:center"], body.kanakku-skin #pageContent tbody td[colspan] { padding: 28px 16px !important; color: var(--k-muted); font-size: 14px; text-align: center; }
/* 10. phones: every list scrolls sideways in its box instead of crushing its columns */
@media (max-width: 768px) {
  body.kanakku-skin #pageContent .card-body:has(> table), body.kanakku-skin #pageContent .k-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.kanakku-skin #pageContent table:not(.mobile-ready) { min-width: 640px; }
  html body.kanakku-skin #pageContent table:not(.mobile-ready) th, html body.kanakku-skin #pageContent table:not(.mobile-ready) td { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
}
/* 12. tablets 769-991 px: the menu is hidden here but the menu button only existed below 769 px, so there was
   no way to open the menu. Kanakku shows a hamburger in the top bar at these widths - so do we. */
@media (min-width: 769px) and (max-width: 991.98px) {
  html body.kanakku-skin #menuToggle {
    display: inline-flex !important; align-items: center; justify-content: center; position: fixed; top: 9px; left: 12px; z-index: 200;
    width: 42px; height: 42px; padding: 0; border-radius: 8px; font-size: 0; color: var(--k-ink);
    background: var(--k-white); border: 1px solid var(--k-line); box-shadow: none;
  }
  html body.kanakku-skin #menuToggle::before { content: '\2630'; font-size: 18px; }
  html body.kanakku-skin .header { padding-left: 66px !important; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  html body.kanakku-skin #pageContent[data-kw] .stats-grid[data-kw-cols="5"], html body.kanakku-skin #pageContent[data-kw] .stats-grid[data-kw-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* B5: phones - the top bar really sticks. The portal's body has overflow-x: hidden, which turns the body into
   the scroll box for "position: sticky", so the bar scrolled away and only the fixed menu button stayed, on
   top of the search box. "clip" hides the sideways overflow without breaking sticky. */
@media (max-width: 768px) {
  html:has(> body.kanakku-skin), html body.kanakku-skin { overflow-x: clip !important; }
  body.kanakku-skin .header { position: sticky !important; top: 0 !important; z-index: 150; }
  body.kanakku-skin #menuToggle { z-index: 160; }
}

/* ===================================================================== BUILD 10 - Batch 5 (the remaining menus as pages)
   1. a toolbar whose boxes sit inside a .form-group (Reports: From / To / buttons): one row, labels beside the boxes */
body.kanakku-skin #pageContent .search-bar > .form-group { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; gap: 8px 10px; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
body.kanakku-skin #pageContent .search-bar > .form-group > label { display: inline-flex; align-items: center; margin: 0; font-size: 13px; font-weight: 500; color: var(--k-muted); }
body.kanakku-skin #pageContent .search-bar > .form-group > input, body.kanakku-skin #pageContent .search-bar > .form-group > select { width: auto !important; flex: 0 1 auto; min-width: 150px; max-width: 220px; height: 34px; min-height: 34px; margin: 0; }
body.kanakku-skin #pageContent .search-bar > .form-group > .btn, body.kanakku-skin #pageContent .search-bar > .form-group > button { height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; margin: 0; }
/* 2. a card body the portal already lays out as a row (CRM by Staff: From / To / staff): its boxes are fields, not full rows */
body.kanakku-skin #pageContent .card-body[style*="display:flex"] > input.form-input, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > input.form-input,
body.kanakku-skin #pageContent .card-body[style*="display:flex"] > select.form-input, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > select.form-input {
  width: auto !important; flex: 0 1 auto; min-width: 150px; height: 34px; min-height: 34px; margin: 0;
}
body.kanakku-skin #pageContent .card-body[style*="display:flex"] > label, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > label { margin: 0; font-size: 13px; font-weight: 500; color: var(--k-muted); }
body.kanakku-skin #pageContent .card-body[style*="display:flex"] > strong, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > strong { font-size: 14px; }
body.kanakku-skin #pageContent .card-body[style*="display:flex"] > .btn, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > .btn { height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; }
/* 3. a card title row with its buttons written straight after the title (QR Registry): title left, buttons together on the right */
body.kanakku-skin #pageContent .card-header > h3:first-child:has(~ .btn), body.kanakku-skin #pageContent .card-header > h3:first-child:has(~ button) { margin-right: auto; }
body.kanakku-skin #pageContent .card-header > .btn, body.kanakku-skin #pageContent .card-header > button.btn { height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 768px) {
  body.kanakku-skin #pageContent .search-bar > .form-group > label { flex: 0 0 18%; min-width: 44px; }
  body.kanakku-skin #pageContent .search-bar > .form-group > input, body.kanakku-skin #pageContent .search-bar > .form-group > select { flex: 1 1 70%; max-width: none; }
  body.kanakku-skin #pageContent .card-body[style*="display:flex"] > input.form-input, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > input.form-input,
  body.kanakku-skin #pageContent .card-body[style*="display:flex"] > select.form-input, body.kanakku-skin #pageContent .card-body[style*="display: flex"] > select.form-input { flex: 1 1 140px; }
}
/* 4. a table the portal puts straight into a plain box inside a card (Admin Panel's user list): the box scrolls
      sideways like a table-container instead of breaking words in half */
body.kanakku-skin #pageContent .card-body > div:not(.table-container):not(.k-scroll):has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 1400px) {
  body.kanakku-skin #pageContent .card-body > div:not(.table-container):has(> table) th,
  body.kanakku-skin #pageContent .card-body > div:not(.table-container):has(> table) td:not(.kw-wrap) { white-space: nowrap; overflow-wrap: normal; }
}