/* portal2.css — employee portal content skin v2 (preview via ?skin=2, scoped to html.rb-v2).
   Touches page content only: headers, cards, tables, forms, modals, badges.
   The attendance calendar (#calendar / .fc-*) is deliberately untouched. */

html.rb-v2 body{ --v2-r:16px; --v2-r-sm:10px; --v2-pad:20px; }

/* ---- page header ---- */
html.rb-v2 .content-header{ padding:26px 24px 8px !important; }
html.rb-v2 .content-header>h1{ font-size:26px !important; font-weight:700 !important; letter-spacing:-.02em !important; margin:0 !important; }
html.rb-v2 .content-header>h1 small{ display:block; margin-top:4px; font:500 13px var(--dl-sans); color:var(--dl-ink3); letter-spacing:0; }
html.rb-v2 section.content{ padding:14px 24px 28px !important; }
html.rb-v2 .breadcrumb{ padding:6px 0 !important; margin:0 !important; font-size:12.5px; }

/* ---- cards ---- */
html.rb-v2 .box{ border-radius:var(--v2-r) !important; border:1px solid var(--dl-line) !important; border-top:1px solid var(--dl-line) !important;
  box-shadow:0 1px 2px rgba(16,34,64,.04), 0 10px 30px rgba(16,34,64,.05) !important; margin-bottom:22px !important; overflow:hidden; }
html.rb-v2 .box.box-primary,html.rb-v2 .box.box-success,html.rb-v2 .box.box-danger,html.rb-v2 .box.box-warning{ border-top:1px solid var(--dl-line) !important; }
html.rb-v2 .box-header{ padding:16px var(--v2-pad) !important; border-bottom:1px solid var(--dl-line) !important; background:var(--dl-surface) !important; }
html.rb-v2 .box-header .box-title{ font-size:16px !important; font-weight:700 !important; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:10px; }
html.rb-v2 .box-header .box-title>.fa{ width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--dl-accent-soft); color:var(--dl-accent-ink); font-size:14px; }
html.rb-v2 .box-body{ padding:var(--v2-pad) !important; }
html.rb-v2 .box-body.no-padding{ padding:0 !important; }
html.rb-v2 .box-footer{ padding:14px var(--v2-pad) !important; }
html.rb-v2 .box.box-primary>.box-header .box-title>.fa{ background:var(--dl-accent-soft); color:var(--dl-accent-ink); }

/* ---- buttons ---- */
html.rb-v2 .btn{ border-radius:999px !important; padding:9px 18px !important; font-size:13.5px !important; font-weight:600 !important;
  line-height:1.2 !important; display:inline-flex; align-items:center; gap:7px; transition:transform .06s, box-shadow .15s, background .15s; border-width:1px !important; }
html.rb-v2 .btn-sm,html.rb-v2 .btn-xs{ padding:6px 13px !important; font-size:12.5px !important; }
html.rb-v2 .btn-block{ justify-content:center; }
html.rb-v2 .btn:active{ transform:translateY(1px); }
html.rb-v2 .btn-primary{ box-shadow:0 2px 10px rgba(43,95,227,.28) !important; }
html.rb-v2 .btn-success{ box-shadow:0 2px 10px rgba(15,138,86,.25) !important; }
html.rb-v2 .btn-danger{ background:var(--dl-late-bg) !important; border-color:var(--dl-late-line) !important; color:#8f231c !important; box-shadow:none !important; }
html.rb-v2 .btn-danger:hover,html.rb-v2 .btn-danger:focus{ background:var(--dl-late) !important; border-color:var(--dl-late) !important; color:#fff !important; }
html.rb-v2 .btn-default{ background:var(--dl-surface) !important; border-color:var(--dl-line2) !important; }
html.rb-v2 .btn-default:hover{ background:var(--dl-inset) !important; }
html.rb-v2 .btn .glyphicon{ top:0; }

/* ---- tables (desktop; phones use the card layout in portal.css) ---- */
@media (min-width:768px){
  html.rb-v2 .table{ margin-bottom:0 !important; }
  html.rb-v2 .table-bordered,html.rb-v2 .table-bordered>tbody>tr>td,html.rb-v2 .table-bordered>tbody>tr>th,
  html.rb-v2 .table-bordered>thead>tr>th{ border-left:0 !important; border-right:0 !important; }
  html.rb-v2 .table>thead>tr>th{ background:var(--dl-raised) !important; border-top:0 !important; border-bottom:1px solid var(--dl-line2) !important;
    padding:12px 14px !important; font-size:11px !important; letter-spacing:.06em; color:var(--dl-ink3) !important; white-space:nowrap; }
  html.rb-v2 .table>tbody>tr>td,html.rb-v2 .table>tbody>tr>th{ padding:13px 14px !important; vertical-align:middle !important; border-top:1px solid var(--dl-line) !important; font-size:13.5px; }
  html.rb-v2 .table>tbody>tr:first-child>td{ border-top:0 !important; }
  html.rb-v2 .table>tbody>tr:hover>td{ background:var(--dl-raised) !important; }
  html.rb-v2 .table-striped>tbody>tr:nth-of-type(odd){ background:transparent !important; }
  html.rb-v2 .dataTables_scrollHead .table>thead>tr>th{ border-bottom:1px solid var(--dl-line2) !important; }
  html.rb-v2 .dataTables_scrollBody{ border-bottom:0 !important; }
  html.rb-v2 .table td p{ margin:0; }
}
/* status text written inline as coloured <p>/<b> becomes a pill */
html.rb-v2 .table td p[style*="green"],html.rb-v2 .table td b[style*="green"],
html.rb-v2 .table td p[style*="red"],html.rb-v2 .table td b[style*="red"],
html.rb-v2 .table td p[style*="orange"],html.rb-v2 .table td b[style*="orange"],
html.rb-v2 .table td p[style*="blue"],html.rb-v2 .table td b[style*="blue"]{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.01em; line-height:1.4; margin:0; }
html.rb-v2 .table td p[style*="green"],html.rb-v2 .table td b[style*="green"]{ background:var(--dl-ok-bg); color:var(--dl-ok) !important; }
html.rb-v2 .table td p[style*="red"],html.rb-v2 .table td b[style*="red"]{ background:var(--dl-late-bg); color:var(--dl-late) !important; }
html.rb-v2 .table td p[style*="orange"],html.rb-v2 .table td b[style*="orange"]{ background:var(--dl-warn-bg); color:var(--dl-warn) !important; }
html.rb-v2 .table td p[style*="blue"],html.rb-v2 .table td b[style*="blue"]{ background:var(--dl-info-bg); color:var(--dl-info) !important; }
html.rb-v2 .table td p[style*="green"]::before,html.rb-v2 .table td p[style*="red"]::before,html.rb-v2 .table td p[style*="orange"]::before,html.rb-v2 .table td p[style*="blue"]::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
html.rb-v2 .table td p[style*="green"] b,html.rb-v2 .table td p[style*="red"] b,html.rb-v2 .table td p[style*="orange"] b,html.rb-v2 .table td p[style*="blue"] b{ font-weight:700; }
html.rb-v2 .label{ padding:4px 10px !important; border-radius:999px !important; font-size:11.5px !important; }

/* ---- DataTables controls ---- */
html.rb-v2 .dataTables_wrapper>.row:first-child{ margin:0 0 14px !important; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
html.rb-v2 .dataTables_wrapper>.row:first-child>div{ padding:0 !important; width:auto !important; float:none !important; }
html.rb-v2 .dataTables_wrapper>.row:first-child>div:last-child{ margin-left:auto; }
html.rb-v2 .dataTables_length label,html.rb-v2 .dataTables_filter label{ font-size:13px; color:var(--dl-ink2) !important; display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:500; }
html.rb-v2 .dataTables_length select{ height:36px !important; border-radius:999px !important; padding:0 30px 0 12px !important; }
html.rb-v2 .dataTables_filter input{ height:38px !important; width:240px; border-radius:999px !important; padding:0 14px 0 36px !important;
  background:var(--dl-surface) 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='%238593A8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center !important; }
html.rb-v2 .dataTables_wrapper>.row:last-child{ margin:14px 0 0 !important; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
html.rb-v2 .dataTables_wrapper>.row:last-child>div{ padding:0 !important; width:auto !important; float:none !important; }
html.rb-v2 .dataTables_wrapper>.row:last-child>div:last-child{ margin-left:auto; }
html.rb-v2 .dataTables_info{ padding:0 !important; font-size:12.5px; color:var(--dl-ink3) !important; }
html.rb-v2 .dataTables_paginate{ float:none !important; margin:0 !important; }
html.rb-v2 .pagination{ margin:0 !important; display:inline-flex; gap:4px; }
html.rb-v2 .pagination>li>a,html.rb-v2 .pagination>li>span{ border-radius:999px !important; min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px !important; font-size:13px; font-weight:600; border:1px solid var(--dl-line) !important; }
html.rb-v2 .pagination>.disabled>a{ color:var(--dl-ink3) !important; background:transparent !important; }

/* ---- forms & modals ---- */
html.rb-v2 .form-control,html.rb-v2 input[type="text"],html.rb-v2 input[type="date"],html.rb-v2 input[type="time"],html.rb-v2 input[type="number"],html.rb-v2 select,html.rb-v2 textarea{
  border-radius:var(--v2-r-sm) !important; min-height:42px; padding:9px 14px !important; font-size:14px !important; box-shadow:none !important; }
html.rb-v2 textarea.form-control{ min-height:88px; }
html.rb-v2 label,html.rb-v2 .control-label{ font-size:12.5px !important; font-weight:600 !important; letter-spacing:.02em; margin-bottom:6px; }
html.rb-v2 .form-group{ margin-bottom:16px !important; }
html.rb-v2 .modal-content{ border-radius:20px !important; border:0 !important; overflow:hidden; }
html.rb-v2 .modal-header{ padding:22px 24px 8px !important; border-bottom:0 !important; }
html.rb-v2 .modal-title{ font-size:19px !important; letter-spacing:-.01em; }
html.rb-v2 .modal-header .close{ opacity:.45; font-size:26px; margin-top:-4px; }
html.rb-v2 .modal-body{ padding:14px 24px 8px !important; }
html.rb-v2 .modal-footer{ padding:14px 24px 22px !important; border-top:0 !important; display:flex; justify-content:flex-end; gap:8px; }
html.rb-v2 .modal-footer .btn+.btn{ margin-left:0 !important; }
html.rb-v2 .modal-footer .pull-left{ margin-right:auto; }

/* ---- alerts ---- */
html.rb-v2 .alert{ border-width:1px !important; border-left-width:4px !important; border-radius:12px !important; padding:14px 16px !important; }
html.rb-v2 .alert h4{ font-size:14px; margin:0 0 4px; font-weight:700; }

/* ---- leave credits ---- */
html.rb-v2 .lv-credits{ gap:12px; }
html.rb-v2 .lv-chip{ min-width:120px; padding:12px 16px; border-radius:14px; background:linear-gradient(180deg,#F8FAFE,#EEF3FB); border:1px solid #DFE7F3; }
html.rb-v2 .lv-lbl{ font-size:10.5px; letter-spacing:.06em; }
html.rb-v2 .lv-val{ font-size:20px; margin-top:2px; }
html.rb-v2 .lv-zero{ background:var(--dl-raised); }

/* ---- My Information (definition tables) ---- */
html.rb-v2 .box-body.no-padding .table-striped>tbody>tr>th{ color:var(--dl-ink3) !important; font-weight:600 !important; font-size:12.5px; letter-spacing:.02em; background:var(--dl-raised) !important; border-right:1px solid var(--dl-line) !important; }
html.rb-v2 .box-body.no-padding .table-striped>tbody>tr>td{ font-weight:600; color:var(--dl-ink) !important; }
html.rb-v2 .box-body.no-padding .table-striped>tbody>tr:last-child>td,html.rb-v2 .box-body.no-padding .table-striped>tbody>tr:last-child>th{ border-bottom:0 !important; }

/* ---- My QR ---- */
html.rb-v2 .col-xs-12[align="center"]{ background:var(--dl-surface); border:1px solid var(--dl-line); border-radius:var(--v2-r); box-shadow:0 1px 2px rgba(16,34,64,.04), 0 10px 30px rgba(16,34,64,.05); padding:34px 20px 30px !important; max-width:520px; margin:0 auto; float:none !important; }
html.rb-v2 .col-xs-12[align="center"]>h1{ font-size:22px !important; margin:0 0 18px !important; }
html.rb-v2 .col-xs-12[align="center"]>img{ padding:14px; background:#fff; border:1px solid var(--dl-line); border-radius:18px; box-shadow:var(--dl-sh-sm); }
html.rb-v2 .col-xs-12[align="center"]>.btn{ margin-top:18px !important; }

/* ---- misc ---- */
html.rb-v2 .text-muted{ line-height:1.6; }
html.rb-v2 .box-header .btn{ margin:0; }
html.rb-v2 .box-header.with-border:has(.lv-credits){ gap:16px; }

/* ---- fixes after first review ---- */
html.rb-v2 .dataTables_length select{ width:auto !important; min-width:74px; padding:0 28px 0 12px !important; }
html.rb-v2 .dataTables_scrollBody>.table>thead>tr>th{ padding:0 14px !important; height:0 !important; line-height:0 !important; border:0 !important; overflow:hidden; }
html.rb-v2 .dataTables_scrollBody>.table>thead>tr>th>*{ display:none; }
html.rb-v2 .dataTables_scrollBody>.table>tbody>tr:first-child>td{ border-top:0 !important; }