/* Viewport behavior */
html,body{height:100%}
/* Make native date inputs look like rounded pills */
input.Rectangle-29[type="date"]{
border-radius: 413px !important;
overflow: hidden; /* clip inner corners */
background-color:#fff;
border:1px solid #e8e8e8;
padding: 10px 14px; /* compact visual */
height: 44px; /* match compact pill height */
line-height: 1;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff;
}
/* Remove spinners and normalize inner field paddings */
input.Rectangle-29[type="date"]::-webkit-outer-spin-button,
input.Rectangle-29[type="date"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input.Rectangle-29[type="date"]::-webkit-datetime-edit{ padding:4px 6px; border-radius:413px; background: transparent; }
input.Rectangle-29[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0 4px; }
input.Rectangle-29[type="date"]::-webkit-datetime-edit-text,
input.Rectangle-29[type="date"]::-webkit-datetime-edit-month-field,
input.Rectangle-29[type="date"]::-webkit-datetime-edit-day-field,
input.Rectangle-29[type="date"]::-webkit-datetime-edit-year-field{
padding: 0 2px;
border-radius: 8px;
background: transparent;
}
input.Rectangle-29[type="date"]::-webkit-calendar-picker-indicator{ padding:0 8px; cursor:pointer; opacity:.85; }
input.Rectangle-29[type="date"]{ -webkit-appearance: none; appearance: none; }
/* Pill-style select to match Rectangle-29 inputs */
select.Rectangle-29-select{
border-radius: 413px !important;
background-color: #fff;
border: 1px solid #e8e8e8;
padding: 10px 38px 10px 14px; /* extra right for arrow */
height: 44px;
line-height: 1;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2399a3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px 18px;
}
select.Rectangle-29-select:focus{
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
/* ===== Dashboard compact typography (slightly smaller, consistent) ===== */
.dash-root{ font-size: 14px; }
.dash-root .search-input{ font-size:14px !important }
.dash-root .search-input::placeholder{ font-size:14px }
.dash-root .dash-kpi .value{ font-size:28px }
.dash-root .dash-kpi .kpi-title{ font-size:12px }
.dash-root .dash-kpi .kpi-sub{ font-size:10px }
.dash-root .hrp-card .hrp-label{ font-size:16px }
.dash-root .hrp-table thead th{ font-size:12px !important; padding:6px 8px }
.dash-root .hrp-table tbody td{ font-size:13px !important; padding:6px 8px }
.dash-root .notes-title{ font-size:14px }
.dash-root .notes-area{ font-size:16px }
.dash-root .notes-card .tabbar, .dash-root .tabbar{ font-size:12px }
.dash-root .pager .num, .dash-root .pager .prev, .dash-root .pager .next{ font-size:12px }
/* Search + notification: tighter */
.dash-root .top-right{ gap:8px }
.dash-root .search-wrap{ padding:6px 10px !important; border-radius:24px !important }
.dash-root .search-wrap{ min-height:38px }
.dash-root .search-ico{ width:24px; height:24px }
.dash-root .search-ico svg{ width:14px; height:14px }
.dash-root #globalSearch{ font-size:14px !important }
.dash-root .notify-bell{ width:28px; height:28px; border:0 !important; background:transparent !important }
.dash-root .notify-bell .badge-dot{ width:12px; height:12px; font-size:9px; top:-3px; right:-3px }
/* KPI: smaller icon bubble and padding */
.dash-root .dash-kpi{ padding:12px }
.dash-root .dash-kpi .kpi-ico{ width:44px; height:44px; border-radius:12px }
.dash-root .dash-kpi .kpi-ico img{ width:24px; height:24px }
/* Cards: smaller padding inside dashboard */
.dash-root .hrp-card{ padding:10px }
.dash-root .hrp-card .hrp-card-body{ padding:6px 6px 8px }
/* Notes: shorter default height */
.dash-root .notes-area{ min-height:100px; line-height:1.35; padding:10px 12px }
/* Tabs: ensure pointer cursor and clear hover state */
.tabbar .tab{ cursor:pointer }
.tabbar .tab:hover{ opacity:0.9 }
/* Equal-height for Company List (col-5) and Notes (col-7) cards */
.hrp-col-5, .hrp-col-7{ display:flex }
.hrp-col-5 > .hrp-card, .hrp-col-7 > .hrp-card{ flex:1; display:flex; flex-direction:column }
/* Flatten Notes card visuals to look like plain table area */
.notes-card{ background:transparent !important; border:0 !important; box-shadow:none !important }
.notes-card .hrp-card-body{ padding-top:10px }
/* Utility: remove padding on card */
.card-p-0{ padding:0 !important }
.hrp-card-body-note{ padding: 11px 15px 7px !important; }
/* Chart card header (tabbar-like) */
.chart-card .tabbar-chart{ display:flex; align-items:center; justify-content:center; gap:10px; background:#414141; color:#fff; border-radius:12px 12px 0 0; padding:0; font-weight:800; letter-spacing:.2px; min-height:36px }
.chart-card .tabbar-chart .tab{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:1 }
.chart-card .tabbar-chart .tab .ico{ filter:none; opacity:1 }
.chart-card .chart-body{ padding:10px 12px 12px }
/* ===== Fixed heights: chart card and notes card ===== */
.chart-card{ height:400px }
.chart-card .chart-body{ height:calc(100% - 36px); display:flex; flex-direction:column; overflow:hidden }
.chart-card .chart-wrap{ flex:1 1 auto }
.chart-card .chart-legend{ flex:0 0 auto; overflow:auto }
/* Notes card (no notes-card class now): fix height and scroll inside body */
.hrp-col-7 > .hrp-card.card-p-0{ height:450px }
.hrp-card .tabbar{ min-height:36px }
.hrp-card-body-note{ height:calc(100% - 36px); overflow:auto; padding-bottom: 12px !important; }
body{overflow:hidden} /* lock outer scroll */
html, body { overflow-x: hidden; }
/* Basic shell layout */
.hrp-window{width:calc(100vw - 16px);max-width:none;min-width:980px;height:calc(100vh - 108px);margin:6px auto 64px auto;background:#f7f4f1;border:1px solid #e7e1dd;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden}
.hrp-shell{display:flex; gap:0; padding:0; height:100%; overflow:hidden}
.hrp-sidebar{width:240px; flex:0 0 240px; overflow:auto; padding-right:0; height:100%}
.hrp-main{flex:1; min-width:0; padding-left:0; display:flex; flex-direction:column; height:100%; overflow:hidden}
.hrp-content{padding:0; flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; position:relative}
.hrp-content-scroll{flex:1 1 auto; overflow:auto; padding-bottom:50px}
/* Ensure the primary card in the content fills the page height */
.hrp-content > .hrp-card{ flex:1 1 auto; display:flex; flex-direction:column; }
/* Typography & color: keep dark text inside the app window (screenshot style) */
.macos-theme .hrp-window{ color:#111; }
.macos-theme .hrp-window h1,
.macos-theme .hrp-window h2,
.macos-theme .hrp-window h3,
.macos-theme .hrp-window h4,
.macos-theme .hrp-window h5,
.macos-theme .hrp-window h6{ color:#111; }
.macos-theme .hrp-window .hrp-page-title{ color:#111; }
.macos-theme .hrp-window a.hrp-link{ color:#111; text-decoration:underline; }
.macos-theme .hrp-window .text-muted{ color:#6b7280 !important; }
/* Responsive table wrapper */
.hrp-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.hrp-card .dataTables_wrapper{width:100%; overflow-x:auto}
.hrp-card table{width:100%; max-width:none}
/* Header menu button visibility (in case Bootstrap visibility helpers are absent) */
.hrp-menu-toggle{display:none}
@media (max-width: 1024px){ .hrp-menu-toggle{display:inline-block} }
/* ===== Responsive: Tablet (<=1024px) ===== */
@media (max-width: 1024px){
/* Cards: relax fixed height a bit */
.chart-card{ height:340px }
.hrp-col-7 > .hrp-card.card-p-0{ height:340px }
.chart-card .chart-body{ height:calc(100% - 36px) }
.chart-wrap{ height:220px }
/* KPIs a touch smaller */
.dash-root .dash-kpi .value{ font-size:26px }
/* Tables: tighter */
.dash-root .hrp-table thead th{ padding:6px }
.dash-root .hrp-table tbody td{ padding:6px }
/* Search pill smaller */
.dash-root .search-wrap{ min-height:34px; padding:6px 10px }
}
/* ===== Responsive: Mobile (<=640px) ===== */
@media (max-width: 640px){
/* Grid fully stacked */
.hrp-grid{ grid-template-columns:repeat(1,1fr) }
/* Remove fixed heights */
.chart-card, .hrp-col-7 > .hrp-card.card-p-0{ height:auto }
.chart-card .chart-body{ height:auto }
.hrp-card-body-note{ height:auto; max-height:none }
.chart-wrap{ height:200px }
/* Table horizontal scroll safety */
.hrp-table-wrap{ overflow-x:auto }
/* Even tighter UI */
.dash-root .search-input{ font-size:13px !important }
.dash-root #globalSearch{ font-size:13px !important }
.dash-root .notes-area{ font-size:15px }
/* Window/container: fully fluid, no side margins or min-width */
.hrp-window{ min-width:0; width:100%; height:auto; margin:0; border-radius:0 }
.hrp-shell{ padding:0; height:auto; overflow:visible }
.hrp-main{ padding-left:0; height:auto; overflow:visible }
.hrp-content{ padding:0; overflow:visible; position:relative }
.hrp-content-scroll{ padding:10px 10px 72px; overflow:visible }
.hrp-breadcrumb{ position:fixed; bottom:0; left:0; right:0 }
/* Hide bottom dock on small screens to prevent overlap */
.mac-dock-bottom{ display:none }
/* Prevent horizontal scroll */
html, body{ overflow-x:hidden }
}
/* ===== Extra-small mobile (<=480px) ===== */
@media (max-width: 480px){
.hrp-grid{ gap:10px }
.hrp-header{ padding:8px 10px }
.hrp-page-title{ font-size:18px }
.top-right{ gap:6px }
.dash-root .search-wrap{ min-height:32px; padding:4px 8px }
.dash-root .search-ico{ width:20px; height:20px }
.dash-root .search-ico svg{ width:12px; height:12px }
.dash-root .search-input{ font-size:12px !important }
.dash-root .dash-kpi{ padding:10px }
.dash-root .dash-kpi .value{ font-size:24px }
.dash-root .hrp-card{ padding:8px }
.dash-root .hrp-card .hrp-card-body{ padding:6px }
.chart-legend .doughnut-legend{ gap:6px 12px }
.chart-legend .doughnut-legend li{ font-size:11px }
.chart-wrap{ height:180px }
.dash-root .hrp-table thead th{ font-size:11px !important; padding:6px 6px }
.dash-root .hrp-table tbody td{ font-size:12px !important; padding:6px 6px }
.dash-root .notes-area{ min-height:90px; font-size:15px }
}
/* ===== Tiny devices (<=360px) ===== */
@media (max-width: 360px){
.hrp-grid{ gap:8px }
.hrp-header{ padding:6px 8px }
.hrp-page-title{ font-size:16px }
.dash-root .search-wrap{ min-height:30px; padding:4px 8px; border-radius:20px }
.dash-root .notify-bell{ width:24px; height:24px }
.dash-root .dash-kpi{ padding:8px }
.dash-root .dash-kpi .value{ font-size:22px }
.chart-wrap{ height:160px }
.chart-card .tabbar-chart{ min-height:32px }
.hrp-card .tabbar{ min-height:32px }
.chart-legend .doughnut-legend li{ font-size:10px }
}
/* Sidebar tweaks */
.hrp-menu .hrp-sub{
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-4px);
transition: max-height .26s ease, opacity .2s ease, transform .26s ease;
}
/* expanded states per group */
.hrp-menu-item[data-group="hrm"].open ~ .hrp-sub[data-group="hrm"],
.hrp-menu-item[data-group="hrm"].active-parent ~ .hrp-sub[data-group="hrm"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="inquiry"].open ~ .hrp-sub[data-group="inquiry"],
.hrp-menu-item[data-group="inquiry"].active-parent ~ .hrp-sub[data-group="inquiry"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="quotation"].open ~ .hrp-sub[data-group="quotation"],
.hrp-menu-item[data-group="quotation"].active-parent ~ .hrp-sub[data-group="quotation"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="company"].open ~ .hrp-sub[data-group="company"],
.hrp-menu-item[data-group="company"].active-parent ~ .hrp-sub[data-group="company"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="invoice"].open ~ .hrp-sub[data-group="invoice"],
.hrp-menu-item[data-group="invoice"].active-parent ~ .hrp-sub[data-group="invoice"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="payroll"].open ~ .hrp-sub[data-group="payroll"],
.hrp-menu-item[data-group="payroll"].active-parent ~ .hrp-sub[data-group="payroll"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="project"].open ~ .hrp-sub[data-group="project"],
.hrp-menu-item[data-group="project"].active-parent ~ .hrp-sub[data-group="project"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="attendance"].open ~ .hrp-sub[data-group="attendance"],
.hrp-menu-item[data-group="attendance"].active-parent ~ .hrp-sub[data-group="attendance"]{
max-height: 44px; opacity: 1; transform: none;
}
.hrp-menu-item[data-group="usermgmt"].open ~ .hrp-sub[data-group="usermgmt"],
.hrp-menu-item[data-group="usermgmt"].active-parent ~ .hrp-sub[data-group="usermgmt"]{
max-height: 44px; opacity: 1; transform: none;
}
/* Sidebar */
.hrp-sidebar-inner{background:#E8E3DFCC;height:100%;border-radius:0;box-shadow:none;padding:6px 0 0 8px;border-right:0;box-sizing:border-box;display:flex;flex-direction:column}
.hrp-side-top{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px 6px}
.hrp-side-top .hrp-window-dots{display:flex;gap:8px}
.hrp-side-badge{width:14px;height:14px;border-radius:4px;background:#0ea5e9;box-shadow:0 1px 3px rgba(0,0,0,.15);position:relative;cursor:pointer}
.hrp-side-badge::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;background:#ffffff;border-radius:2px}
.hrp-side-badge:hover{filter:brightness(1.05)}
.hrp-menu{list-style:none;margin:0;padding:0}
.hrp-menu-item>a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#000;text-decoration:none;font-weight:600}
.hrp-menu-item>a:hover{background:#f3f4f6}
.hrp-menu-item.active>a{
background: linear-gradient(90deg, #FFFFFF 15.87%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hrp-menu-section{padding:12px 10px 6px 10px;font-size:12px;font-weight:800;color:#ec4899;text-transform:uppercase;opacity:.9}
/* Sidebar icon pill and red dot bullets (match Figma) */
.hrp-menu-item>a{gap:8px}
.hrp-menu-item>a i{
display:flex; align-items:center; justify-content:center;
width:auto; height:auto; flex:0 0 auto; background:transparent; border-radius:0; box-shadow:none; color:inherit; font-size:inherit; padding:0; margin-right:2px;
}
.hrp-menu-item>a i img{width:22px;height:22px;display:block;object-fit:contain}
.hrp-menu-item.hrp-sub>a{position:relative; padding-left:12px}
.hrp-menu-item.hrp-sub>a::before{
content:""; display:inline-block; width:6px; height:6px; border-radius:9999px;
background:#d1d5db; margin-right:6px; box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.hrp-menu-item.hrp-sub.active>a::before{background: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%)}
.hrp-menu-item.hrp-sub>a span{margin-left:2px; color:#000}
.hrp-menu-item.hrp-sub.active>a span{
background: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Parent highlight when any sub is active */
.hrp-menu-item.active-parent>a{
border:0; box-shadow:none;
background: linear-gradient(90deg, #FFFFFF 15.87%, rgba(255, 255, 255, 0) 100%);
}
.hrp-menu-item.active-parent>a span{
background: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hrp-menu-item.hrp-sub.active>a{
background: transparent;
}
/* Collapsible HRM submenu: hidden by default, shown when sidebar has group-open-hrm */
.hrp-menu-item.hrp-sub[data-group="hrm"]{display:none}
.hrp-sidebar.group-open-hrm .hrp-menu-item.hrp-sub[data-group="hrm"]{display:block}
/* Header */
.hrp-header{display:flex;align-items:center;justify-content:space-between;background:#FDF5F3;border-radius:0;padding:10px 14px;border:1px solid #efe8e4;box-shadow:inset 0 -1px 0 #ece7e3;border-left:0;border-top:0;border-right:0;margin-left:0}
.hrp-page-title{margin:0;font-size:25px;font-weight:400;color:#111}
.hrp-header-left{display:flex;align-items:center;gap:12px}
.hrp-window-dots{display:flex;gap:8px;margin-right:4px}
.hrp-window-dots .hrp-dot{width:12px;height:12px;border-radius:9999px;display:inline-block;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)}
.hrp-window-dots .hrp-dot-r{background:#ff5f57}
.hrp-window-dots .hrp-dot-y{background:#febc2e}
.hrp-window-dots .hrp-dot-g{background:#28c840}
.hrp-header-right{display:flex;align-items:center;gap:12px}
.hrp-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin-right:8px;background:#E8E3DF;border-radius:10px;padding:4px 6px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hrp-thumb .ico{width:30px;height:30px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center}
.hrp-thumb .ico img{width:22px;height:22px;opacity:1;filter:grayscale(100%)}
.hrp-thumb .ico svg{width:22px;height:22px}
.hrp-thumb .ico svg path{fill:#0f172a !important; opacity:1 !important}
.hrp-thumb .lbl{font-weight:900;font-size:9px;letter-spacing:.2px;color:#0f172a; line-height:1}
.hrp-avatar{width:36px;height:36px;border-radius:9999px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hrp-user-btn{display:flex;align-items:center;gap:10px;background:#E8E3DF;border:0;border-radius:12px;padding:6px 12px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hrp-user-btn:hover{filter:brightness(0.98)}
.hrp-user-meta{line-height:1.2; display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.hrp-user-name{font-weight:700;font-size:14px;color:#0f172a}
.hrp-user-position{font-size:12px;color:#64748b;font-weight:500}
.hrp-fingerprint img{width:28px;height:28px;opacity:.85}
/* Thumb/fingerprint and punch colors */
.hrp-fingerprint img{filter:none}
.hrp-punch-in{background:#10b981;color:#fff}
.hrp-punch-out{background:#fff;color:#ef4444;border:1px solid #f2d7d7}
/* Dropdown visuals (black text, black caret) */
.dropdown .caret{ border-top-color:#0f172a !important; border-bottom-color:#0f172a !important }
.dropdown-menu>li>a,
.dropdown-item{ color:#0f172a !important; }
.dropdown-menu>li>a:hover,
.dropdown-item:hover{ color:#0b122b !important; background-color:#f3f4f6; }
/* Profile dropdown container (white, spacious) */
.dropdown-menu{
right:0; left:auto;
min-width: 220px;
padding:8px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:12px;
box-shadow:0 12px 28px rgba(0,0,0,.14);
}
.dropdown-menu>li+li{ margin-top:4px; }
.dropdown-menu>li>a,
.dropdown-item{
padding:10px 12px !important;
border-radius:10px;
}
.dropdown-menu>li>a:hover,
.dropdown-item:hover{ background:#f5f5f5; }
.dropdown-divider{ margin:8px 0; border-top:1px solid #e5e7eb; }
/* Header: tighten spacing to mirror Figma */
.hrp-header-right{gap:10px}
.hrp-user-btn{padding:6px 12px}
/* Form card */
.hrp-card{background:#ffffff;border:1px solid #f0f0f0}
.hrp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.hrp-col-3{grid-column:span 3}
.hrp-col-4{grid-column:span 4}
.hrp-col-6{grid-column:span 6}
.hrp-col-8{grid-column:span 8}
.hrp-col-9{grid-column:span 9}
.hrp-col-12{grid-column:span 12}
.hrp-col-3{grid-column:span 3}
.hrp-col-5{grid-column:span 5}
.hrp-col-4{grid-column:span 4}
.hrp-col-7{grid-column:span 7}
/* Figma container card (Rectangle-30) */
.Rectangle-30{
width: 99%;
margin: 14px -3px 20px 9px;
padding: 45px 50px 25px 40px;
border-radius: 43px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
}
.hrp-label{font-weight:700;font-size:12px;color:#111;margin:6px 6px}
/* Upgrade label typography inside cards to Visby, larger and bold (like Mobile-No) */
.hrp-card .hrp-label{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 20px;
color: #ffffff;
line-height: 0.8;
}
.hrp-input,.hrp-select, .hrp-textarea, .hrp-file{width:100%;background:#f5f7f9;border:1px solid #e5e7eb;border-radius:20px;padding:10px 14px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);min-height:44px}
.hrp-input:focus,.hrp-select:focus,.hrp-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.hrp-textarea{min-height:92px;border-radius:16px}
.hrp-file{padding:8px 12px;border-radius:14px;background:#f9fafb}
/* Placeholder color per mock */
.hrp-input::placeholder,
.hrp-textarea::placeholder{ color:#9ca3af; opacity:1; }
/* Number inputs (Experience Count, Previous Salary) - remove spinners and unify look */
.hrp-input[type=number]{
-moz-appearance: textfield;
appearance: textfield;
}
.hrp-input[type=number]::-webkit-outer-spin-button,
.hrp-input[type=number]::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
.hrp-input[type=number]{ padding-right: 14px; }
/* Ensure exact visual match and override Bootstrap defaults for number inputs */
.hrp-card input[type=number].hrp-input,
.hrp-card .hrp-input[type=number]{
background:#fff !important;
border:1px solid #e8e8e8 !important;
border-radius:413px !important;
padding:21px 31px !important;
height:58px !important;
line-height:1.2;
box-sizing:border-box;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff;
}
/* Figma-style pill input (Rectangle-29) */
.Rectangle-29{
width: 100%; /* responsive instead of fixed 713px */
height: 58px;
margin: 2px 0 0;
padding: 16px 24px; /* balanced padding for better readability */
border-radius: 413px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
background-color: #fff;
border: 1px solid #e5e7eb;
font-size: 16px;
color: #111827;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.025em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Make sure it wins over hrp-input base */
.hrp-card .Rectangle-29{
background-color:#fff !important;
border:1px solid #e8e8e8 !important;
}
.Rectangle-29::placeholder{
font-size: 15px;
color: #9ca3af;
opacity: 1;
font-weight: 400;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* Global form typography for inputs/selects/textarea inside app window */
.macos-theme .hrp-window .hrp-form input.hrp-input,
.macos-theme .hrp-window .hrp-form select.hrp-input,
.macos-theme .hrp-window .hrp-form textarea.hrp-textarea{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 500;
color: #414141;
line-height: 0.8;
}
/* Apply same typography to Rectangle-29 family used in forms (when hrp-input class is omitted) */
.macos-theme .hrp-window .hrp-form .Rectangle-29,
.macos-theme .hrp-window .hrp-form .Rectangle-29-select,
.macos-theme .hrp-window .hrp-form .Rectangle-29-textarea{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px !important;
font-weight: 600;
color: #111;
}
/* Create/Edit form typography refinements */
.macos-theme .hrp-window .hrp-form .hrp-label{
display:block;
margin: 4px 6px 8px;
font-size: 16px;
font-weight: 800;
letter-spacing: .2px;
color:#0f172a;
}
.macos-theme .hrp-window .hrp-form input.hrp-input,
.macos-theme .hrp-window .hrp-form select.hrp-input,
.macos-theme .hrp-window .hrp-form textarea.hrp-textarea{
font-size: 16px !important; /* slightly smaller for dense form */
font-weight: 600;
color:#111;
}
.macos-theme .hrp-window .hrp-form .Rectangle-29::placeholder{ font-size: 15px; color:#6b7280; }
.macos-theme .hrp-window .hrp-form .Rectangle-29-textarea{ font-size: 15px; }
.macos-theme .hrp-window .hrp-form .upload-pill .filename{ font-size:14px; }
.macos-theme .hrp-window .hrp-form .upload-pill .choose{ font-size:14px; font-weight:800; }
.macos-theme .hrp-window .hrp-form .hrp-segment label{ font-size:14px; font-weight:800; }
/* Uniform vertical rhythm for fields (label + control) */
.macos-theme .hrp-window .hrp-form > div{ display:flex; flex-direction:column; gap:4px; }
/* Do not override grid wrappers inside forms */
.macos-theme .hrp-window .hrp-form > div.grid,
.macos-theme .hrp-window .hrp-form > div[class*="md:grid-cols"],
.macos-theme .hrp-window .hrp-form > div[class*="grid-cols-"]{
display: grid !important;
flex-direction: initial;
gap: inherit;
}
.macos-theme .hrp-window .hrp-form .hrp-label{ margin:0 4px 4px; }
.macos-theme .hrp-window .hrp-form .upload-pill{ margin-top:0; }
.macos-theme .hrp-window .hrp-form .hrp-segment{ margin-top:0; }
/* File upload pill styling */
.upload-pill .upload-display:hover{
border-color:#d1d5db;
}
.upload-pill .upload-display:hover .choose{
background:#e5e7eb;
}
/* Rectangle-29 as textarea */
.Rectangle-29-textarea{
min-height:58px;
resize:vertical;
padding-top:16px;
padding-bottom:16px;
}
/* Validation: error text and invalid control visuals */
.macos-theme .hrp-window .hrp-form .hrp-error{
color:#ef4444; /* red */
font-size:13px;
font-weight:700;
margin:4px 4px 0;
}
/* .macos-theme .hrp-window .hrp-form .Rectangle-29.is-invalid,
.macos-theme .hrp-window .hrp-form .Rectangle-29:invalid{
border-color:#ef4444 !important;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff, 0 0 0 3px rgba(239,68,68,.12) !important;
}
.macos-theme .hrp-window .hrp-form .Rectangle-29-select.is-invalid,
.macos-theme .hrp-window .hrp-form select.Rectangle-29-select:invalid{
border-color:#ef4444 !important;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff, 0 0 0 3px rgba(239,68,68,.12) !important;
} */
/* Compact variant for create/edit forms */
.macos-theme .hrp-window .hrp-compact{ padding:24px 28px; border-radius:16px; }
.macos-theme .hrp-window .hrp-compact .hrp-label{ font-size:14px; font-weight:800; margin: 6px 4px 2px; }
.macos-theme .hrp-window .hrp-compact .Rectangle-29{ height:44px !important; padding:10px 14px !important; border-radius:16px !important; font-size:14px !important; }
.macos-theme .hrp-window .hrp-compact .Rectangle-29-select{ height:44px !important; line-height:27px !important; padding-right:32px !important; background-position: right 14px center, right 9px center !important; }
.macos-theme .hrp-window .hrp-compact .Rectangle-29-textarea{ min-height:90px !important; padding:12px 14px !important; font-size:14px !important; border-radius:14px !important; }
.macos-theme .hrp-window .hrp-compact .upload-pill{ height:48px; }
.macos-theme .hrp-window .hrp-compact .upload-pill .choose{ min-width:140px; font-size:13px; }
.macos-theme .hrp-window .hrp-compact .upload-pill .filename{ font-size:13px; }
.macos-theme .hrp-window .hrp-compact .hrp-segment{ height:44px; padding:6px; }
.macos-theme .hrp-window .hrp-compact .hrp-segment label{ padding:6px 12px; font-size:13px; }
.macos-theme .hrp-window .hrp-compact .hrp-actions{ padding-top:6px; }
/* Ensure number inputs inside compact forms are also compact (override tall defaults) */
.macos-theme .hrp-window .hrp-compact input[type=number].hrp-input.Rectangle-29,
.macos-theme .hrp-window .hrp-compact .hrp-input[type=number].Rectangle-29{
height:44px !important;
padding:10px 14px !important;
border-radius:16px !important;
}
/* Uniform 58px for selects to match inputs */
.Rectangle-29-select{
-webkit-appearance:none;
appearance:none;
height:58px;
font-size:16px;
padding-right:48px;
padding-left:24px;
background:#fff;
background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%);
background-position: right 20px center, right 15px center;
background-size: 8px 8px, 8px 8px;
background-repeat: no-repeat;
color:#111827;
font-weight:500;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
border: 1px solid #e5e7eb;
border-radius: 413px;
box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff;
margin: 2px 0 0;
}
.Rectangle-29-select option{
color:#111827 !important;
font-weight:500 !important;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
padding: 10px !important;
background: #ffffff !important;
}
.Rectangle-29-select option:checked,
.Rectangle-29-select option:selected {
background: #0ea5e9 !important;
color: #ffffff !important;
}
/* Force display of selected text */
.Rectangle-29-select {
text-align: left !important;
text-indent: 0 !important;
}
.Rectangle-29-select:valid {
color: #111827 !important;
}
/* Ensure dropdown text is visible */
.Rectangle-29-select {
cursor: pointer;
}
.Rectangle-29-select option:disabled {
color: #9ca3af !important;
font-style: italic;
}
/* Override any conflicting styles */
.hrp-form .Rectangle-29-select {
color: #111827 !important;
font-weight: 500 !important;
}
.Rectangle-29-select:focus {
outline: none;
border-color: #2563eb;
box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff, 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* Ensure select dropdown shows properly */
.Rectangle-29-select::-ms-expand {
display: none;
}
.Rectangle-29-select select {
background: transparent;
border: none;
outline: none;
width: 100%;
height: 100%;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.025em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 8px 0 0;
}
/* Grid layout for forms */
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:gap-3 {
gap: 0.75rem;
}
.md\:gap-5 {
gap: 1.25rem;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
/* Labels inside Rectangle-30 container */
.Rectangle-30 .hrp-label{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 16px;
color: #000000;
line-height: 1.2;
margin: 6px 4px 2px; /* more top space, much less below label */
display: block;
}
.Rectangle-25 input[type=file]{
width: 100%;
border:0; background:transparent; padding:0; height:auto;
}
.Rectangle-25::-webkit-file-upload-button{ visibility:hidden }
.Rectangle-25::file-selector-button{ display:none }
/* Custom upload pill with left grey segment */
.upload-pill{
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 60px;
border-radius: 50px;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff;
background: #f5f5f5;
border: 1px solid #e8e8e8;
overflow: hidden;
}
.upload-pill .choose{
min-width: 140px;
height: 100%;
display:flex; align-items:center; justify-content:center;
background: #d1d5db;
color: #ffffff;
font-weight: 600;
font-size: 14px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
padding: 0 20px;
}
.upload-pill .filename{
flex:1;
padding: 0 24px;
color:#c4c4c4;
font-weight:400;
font-size: 15px;
}
.upload-pill input[type=file]{
position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-pill:hover{
border-color: #d1d5db;
}
.upload-pill:hover .choose{
background: #b8bec5;
}
.upload-pill:focus-within{
outline: 3px solid rgba(37,99,235,.12);
outline-offset:2px;
}
/* Specific label typography (Mobile-No) */
.Mobile-No{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.025em;
color: #374151;
margin: 0 0 8px 0;
}
/* Segmented control (Gender) */
.hrp-segment{
display:inline-flex; align-items:center; gap:6px; background:#f5f7f9; border:1px solid #e5e7eb; border-radius:413px; padding:6px; height:58px; width:100%;
}
.hrp-segment input[type=radio]{ position:absolute; left:-9999px; }
.hrp-segment label{
user-select:none; cursor:pointer; border-radius:9999px; padding:10px 16px; font-weight:700; color:#111; background:#ffffff; border:1px solid #e5e7eb; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.hrp-segment input[type=radio]:checked + label{
background:#0ea05d; color:#fff; border-color:#0ea05d;
}
.hrp-actions{display:flex;justify-content:flex-end;padding:10px 4px}
.hrp-btn{border:0;border-radius:22px;padding:10px 18px;font-weight:800}
.hrp-btn-primary{background:#0ea05d;color:#fff}
.hrp-btn-primary:hover{filter:brightness(.95)}
/* Breadcrumb + Pagination (fixed bottom inside content) */
.hrp-breadcrumb{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;background:#FDF5F3;border-radius:0;padding:10px 14px;margin:0;box-shadow:0 -2px 10px rgba(0,0,0,0.05);border-top:1px solid #efe8e4;border-bottom:0;border-left:0;border-right:0;z-index:10000}
.hrp-breadcrumb .crumb{display:flex;align-items:center;gap:0;font-weight:700;color:#0f0f0f;font-size:14px}
.hrp-breadcrumb .dots{display:flex;gap:8px}
.hrp-dot{width:8px;height:8px;background:#ef4444;border-radius:9999px;opacity:.5}
.hrp-dot.active{opacity:1}
.hrp-crumb-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:#f3f4f6;color:#ef4444;margin-right:6px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-size:11px}
/* Breadcrumb specific (SVG + typography like reference) */
.hrp-bc-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:6px}
.hrp-bc-ico img{width:14px;height:14px;display:block}
.hrp-bc-home{font-weight:800;color:#0f0f0f;text-decoration:none;margin-right:8px;font-size:13px;line-height:1}
.hrp-bc-sep{margin:0 8px;color:#0f0f0f;opacity:.85;font-weight:800;font-size:14px;line-height:1}
.hrp-bc-current{font-weight:800;color:#0f0f0f;font-size:13px;line-height:1}
/* Pagination visuals to match screenshot */
.hrp-pagination{display:flex;align-items:center;gap:10px}
.hrp-page-btn{background:#fff;border:1px solid #e5e7eb;border-radius:9999px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#111;box-shadow:0 4px 10px rgba(0,0,0,.06)}
.hrp-pages{display:flex;align-items:center;gap:10px}
.hrp-page{font-weight:800;color:#ef4444;text-decoration:none}
.hrp-page.active{color:#111}
.hrp-ellipsis{color:#6b7280}
/* DataTables pagination in footer (rounded pills, no square shadow) */
.hrp-card-footer #dtPagination .pagination{
margin: 0;
display: inline-flex;
gap: 6px;
}
.hrp-card-footer #dtPagination .pagination > li > a,
.hrp-card-footer #dtPagination .pagination > li > span{
border-radius: 9999px !important;
border: 1px solid #e5e7eb !important;
background: #ffffff !important;
color: #111 !important;
padding: 4px 10px !important;
line-height: 1.2 !important;
box-shadow: none !important; /* remove square shadow */
}
.hrp-card-footer #dtPagination .pagination > .active > a,
.hrp-card-footer #dtPagination .pagination > .active > span{
color: #111 !important;
background: #ffffff !important;
border-color: #1111 !important; /* subtle */
font-weight: 800;
}
.hrp-card-footer #dtPagination .pagination > li > a:hover{
background: #f9fafb !important;
}
.hrp-card-footer #dtPagination .pagination > li:first-child > a,
.hrp-card-footer #dtPagination .pagination > li:last-child > a{
border-radius: 9999px !important; /* keep round for prev/next */
}
/* Rounded white table surface (wraps hrp-table-wrap) */
.hrp-table-surface{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:16px;
box-shadow:0 8px 22px rgba(0,0,0,.06);
padding:6px 6px 8px;
}
/* ===== Hiring filters row (font + alignment) ===== */
.filters-compact{ align-items:center; }
.filters-compact .Rectangle-29,
.filters-compact .Rectangle-29-select{
height:44px !important;
line-height:44px !important;
border-radius:413px !important;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-size:14px !important;
font-weight:800 !important;
color:#111 !important;
}
.filters-compact input[type=date].Rectangle-29{
padding: 0 14px !important;
}
.filters-compact select.Rectangle-29-select{
padding-left:18px !important;
padding-right:40px !important;
background-position: right 16px center, right 10px center !important;
}
.filters-compact #globalSearch.Rectangle-29{
height:44px !important;
line-height:44px !important;
padding: 0 16px !important;
}
/* ===== Hiring list table polish ===== */
.hrp-table{
border-collapse: separate; border-spacing: 0 0; width:100%;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.hrp-table thead th{
font-weight: 700; color:#111; background:#fff; border-bottom:1px solid #ececec; padding:12px 12px;
}
.hrp-table tbody td{
padding:10px 12px; color:#414141; font-weight:500; font-size:16px;
}
.hrp-table thead th:first-child,
.hrp-table tbody td:first-child{ text-align:center; }
.hrp-table thead th:nth-child(2),
.hrp-table tbody td:nth-child(2){ text-align:center; }
/* Helpers for cells */
.td-nowrap{ white-space: nowrap; }
.td-right{ text-align: right; }
.td-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrp-table tbody tr:nth-child(even){ background:#f8fafc; }
.hrp-table tbody tr:hover{ background:#f1f5f9; }
/* Action icon buttons */
.hrp-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1px solid #e5e7eb; background:#ffffff; color:#111; text-decoration:none; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.hrp-icon-btn:hover{ background:#f3f4f6; }
.hrp-icon-btn.danger{ color:#b91c1c; border-color:#f3d4d4; }
.hrp-icon-btn .ico{ line-height:1; }
/* Compact colored action squares (view/delete etc) */
.action-icons{ display:inline-flex; align-items:center; gap:8px; }
.action-icon{ width:28px; height:28px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; line-height:0; box-shadow:none; padding:0; border:0; background:transparent; cursor:pointer; }
.action-icon:focus{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }
.action-icon svg{ display:block }
.action-icon img{ width:16px; height:16px; display:block }
.action-icon.view, .action-icon.delete{ background:transparent; }
.action-icon.edit{ background:#013594; }
.action-icon.print{ background:#267bf5; }
.action-icon.delete{ background:transparent; }
.action-icon.convert{ background:#14ae5c; }
/* Add consistent space between mixed action items (links/forms/buttons) in first column */
.JV-datatble td:first-child{
display:inline-flex;
align-items:center;
gap:12px;
}
/* DataTables font normalization to Visby inside app window */
.macos-theme .hrp-window .dataTables_wrapper,
.macos-theme .hrp-window .dataTables_wrapper table,
.macos-theme .hrp-window .dataTables_wrapper .dataTables_info,
.macos-theme .hrp-window .dataTables_wrapper .dataTables_length label,
.macos-theme .hrp-window .dataTables_wrapper .dataTables_filter input,
.macos-theme .hrp-window .dataTables_wrapper .paginate_button{
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-weight: 600;
color:#111;
}
/* Search field with icon */
#globalSearch{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position: 12px center; background-size:18px 18px; padding-left:40px !important;
}
/* Responsive tweaks */
@media (max-width: 1024px){
/* Allow page to scroll on tablet/phone */
body{overflow:auto}
/* Hide sidebar, adjust shell spacing */
/* Sidebar becomes off-canvas */
.hrp-sidebar{position:fixed; left:0; top:0; bottom:0; width:280px; max-width:80%; background:#ffffff; z-index:10010; transform:translateX(-100%); transition:transform .25s ease; border-right:1px solid #e5e7eb; display:block; padding:12px 8px 16px 8px; overflow-y:auto; -webkit-overflow-scrolling:touch}
body.sidebar-open .hrp-sidebar{transform:translateX(0)}
/* Backdrop behind sidebar */
.hrp-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:10000; opacity:0; pointer-events:none; transition:opacity .2s ease}
body.sidebar-open .hrp-backdrop{opacity:1; pointer-events:auto}
.hrp-shell{padding:10px; height:auto; flex-direction:column; overflow:visible}
/* Window should not force horizontal scroll */
.hrp-window{min-width:0; width:100%; height:auto; margin:6px 0 64px 0; border-radius:0;
/* robust mobile viewport sizing */
min-height:-webkit-fill-available;
min-height:100svh;
min-height:100dvh;
}
.hrp-main{padding-left:0; height:auto; overflow:visible}
.hrp-content{padding:0; overflow:visible; flex:initial; position:relative}
.hrp-content-scroll{padding:10px 10px calc(96px + env(safe-area-inset-bottom)); overflow:visible; -webkit-overflow-scrolling: touch}
.hrp-content-scroll img{max-width:100%; height:auto}
.hrp-breadcrumb{position:fixed; bottom:0; left:0; right:0}
/* Grid compress */
.hrp-grid{grid-template-columns:repeat(6,1fr)}
.hrp-col-6{grid-column:span 6}
.hrp-col-3{grid-column:span 3}
.hrp-col-5{grid-column:span 3} /* collapse 5 -> 3 on small screens */
.hrp-col-4{grid-column:span 6}
.hrp-col-7{grid-column:span 6}
/* Header stacks */
.hrp-header{flex-wrap:wrap; gap:10px}
/* Prevent page scroll when sidebar is open */
body.sidebar-open{overflow:hidden}
}
@media (max-width: 640px){
.hrp-header{flex-direction:column; align-items:flex-start}
.hrp-page-title{font-size:20px}
.hrp-user-btn{padding:6px 10px}
.hrp-window{margin-bottom:0} /* dock hidden on mobile */
}
/* Desktop overlay sidebar for hamburger toggle */
body.sidebar-overlay .hrp-sidebar{
position:fixed; left:0; top:0; bottom:0; width:280px; max-width:80%;
background:#ffffff; z-index:10010; transform:translateX(-100%);
transition:transform .25s ease; border-right:1px solid #e5e7eb;
padding:12px 8px 16px 8px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.sidebar-overlay.sidebar-open .hrp-sidebar{ transform:translateX(0); }
body.sidebar-overlay .hrp-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:10000; opacity:0; pointer-events:none; transition:opacity .2s ease }
body.sidebar-overlay.sidebar-open .hrp-backdrop{ opacity:1; pointer-events:auto }
body.sidebar-overlay.sidebar-open{ overflow:hidden }
/* Desktop: collapsed sidebar (icons only) */
.hrp-sidebar.hrp-sidebar-collapsed{ width:72px; flex:0 0 72px }
.hrp-sidebar.hrp-sidebar-collapsed .hrp-menu-item>a{ justify-content:center; padding-left:0; padding-right:0 }
.hrp-sidebar.hrp-sidebar-collapsed .hrp-menu-item>a span{ display:none }
.hrp-sidebar.hrp-sidebar-collapsed .hrp-menu-section{ display:none }
.hrp-sidebar.hrp-sidebar-collapsed .hrp-menu-item.hrp-sub{ display:none }
.hrp-sidebar.hrp-sidebar-collapsed .hrp-window-dots{ gap:6px }
/* Bottom dock (fixed, glass) */
.mac-dock-bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;background:rgba(30,40,50,0.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;padding:8px 12px;box-shadow:0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2);display:flex;align-items:center;gap:8px;z-index:9999}
.mac-dock-bottom .dock-item img{width:55px;height:55px;display:block}
.mac-dock-bottom .mac-dock-divider{width:2px;height:46px;background:rgba(255,255,255,.35);border-radius:2px;margin:0 4px}
/* ===== Dashboard specific styles ===== */
.dash-section{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.dash-section-title{ font-weight:800; font-size:18px; color:#0f172a; margin:0 }
.dash-kpi{ background:#fff; border:1px solid #f0f0f0; border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.08) }
.dash-kpi .title{ font-weight:700; font-size:14px; color:#414141; margin:0 0 6px }
.dash-kpi .delta{ font-weight:800; color:#0f172a }
.dash-kpi .kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.dash-kpi .value{ font-weight:900; font-size:40px; color:#111; line-height:1; text-align:right; min-width:54px }
.dash-kpi .kpi-title{ font-weight:800; font-size:14px; color:#111; margin:2px 0 2px; text-align:right }
.dash-kpi .kpi-sub{ margin-top:6px; font-weight:800; font-size:12px; display:flex; align-items:center; gap:6px }
.dash-kpi .kpi-sub.green{ color:#16a34a }
.dash-kpi .kpi-sub.red{ color:#ef4444 }
.dash-kpi .kpi-sub.blue{ color:#2563eb }
/* Charts inside cards: fill width and keep fixed height for visibility */
.hrp-card canvas{ width:100% !important; height:180px !important; }
.chart-wrap{ height:180px; }
.chart-wrap canvas{ width:100% !important; height:100% !important; display:block }
/* Chart legend styling (Company List) */
.chart-legend{ margin-top:10px; }
.chart-legend .doughnut-legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; }
.chart-legend .doughnut-legend li{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:12px; color:#414141 }
.chart-legend .doughnut-legend .swatch{ display:inline-block; width:10px; height:10px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) }
/* Search + filter row spacing */
.dash-filters{ display:flex; gap:12px; align-items:center; justify-content:flex-end }
/* Common heading spacing inside cards */
.hrp-card-heading{ margin-bottom:8px; }
/* Rounded large pill button (matches Rectangle-29 height) */
.pill-btn{ height:58px; border-radius:413px; padding:0 28px; }
/* Theme tokens (adjust once Figma tokens confirmed) */
.macos-theme .hrp-window{
--hrp-primary:#013594;
--hrp-accent:#14ae5c;
--hrp-surface:#ffffff;
--hrp-text:#111111;
--hrp-muted:#6b7280;
--hrp-shadow:0 10px 24px rgba(0,0,0,.08);
}
/* KPI header with icon */
.dash-kpi .dash-section{ margin-bottom:6px }
.dash-kpi .kpi-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.dash-kpi .kpi-left{ display:flex; align-items:center; gap:10px }
.dash-kpi .kpi-ico{ width:52px; height:52px; border-radius:14px; background:#E8E3DF; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 0 rgba(0,0,0,.04) }
.dash-kpi .kpi-ico img{ width:32px; height:32px; display:block }
.dash-kpi .delta{ color:var(--hrp-primary) }
.kpi-emp .kpi-ico{ background:#e7f0ff }
.kpi-proj .kpi-ico{ background:#efe8ff }
.kpi-task .kpi-ico{ background:#ffefe4 }
.kpi-attn .kpi-ico{ background:#e9fff1 }
.dash-notify{ display:flex; align-items:center; gap:12px; justify-content:flex-end }
.notify-pill{ display:flex; align-items:center; gap:10px; background:transparent; border:0; border-radius:413px; padding:10px 0; box-shadow:none }
.notify-bell{ position:relative; width:auto; height:auto; display:flex; align-items:center; justify-content:center; border-radius:0; background:transparent }
.notify-bell svg{ width:20px; height:20px; display:block; stroke:#000; fill:none }
.notify-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:9999px; background:#ef4444; color:#fff; font-weight:800; font-size:12px }
.notify-pill{ position:relative }
.notify-pill .dot{ display:none }
.notify-bell .badge-dot{ position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:9999px; background:#ef4444; color:#fff; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; border:2px solid #fff }
.top-right{ display:flex; align-items:center; justify-content:flex-end; gap:12px }
/* Search container with round lens bubble */
.search-wrap{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e5e7eb; border-radius:413px; padding:8px 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); width:100% }
.search-ico{ width:30px; height:30px; border-radius:9999px; background:#f1f2f4; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 2px rgba(0,0,0,.08) }
.search-ico svg{ width:16px; height:16px; opacity:.6 }
.search-input{ border:0; outline:0; background:transparent; width:100%; font-size:20px; color:#414141 }
.search-input:focus{ outline:0 !important; box-shadow:none !important; }
.search-wrap:focus-within{ border-color:#e5e7eb !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.1) !important; }
.search-input::placeholder{ color:#9ca3af; font-size:18px }
.list-card .hrp-card-body{ padding:12px 14px }
.list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.list-title{ font-weight:800; font-size:16px; color:#0f172a }
.list-link{ font-weight:800; font-size:12px; color:var(--hrp-primary); text-decoration:none }
.list-items{ display:flex; flex-direction:column; gap:8px }
.list-item{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #ececec; border-radius:12px; padding:10px 12px }
.list-left{ display:flex; align-items:center; gap:10px; min-width:0 }
.list-ico{ width:30px; height:30px; border-radius:8px; background:#E8E3DF; display:flex; align-items:center; justify-content:center }
.list-ico img{ width:18px; height:18px; display:block }
.list-main{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.list-title-sm{ font-weight:700; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.list-meta{ font-size:12px; color:#6b7280 }
.badge{ display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 8px; border-radius:9999px; font-weight:800; font-size:12px }
.badge.green{ background:#dcfce7; color:#166534 }
.badge.blue{ background:#dbeafe; color:#1e3a8a }
.badge.orange{ background:#ffedd5; color:#9a3412 }
.notes-card .hrp-card-body{ padding:10px 14px 6px }
.notes-title{ font-weight:700; font-size:16px; color:#0f172a; margin-bottom:8px }
.notes-area{ width:100%; border:1px solid #e5e7eb; border-radius:16px; padding:12px 14px; resize:vertical; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.6) }
/* Notes tabs header (dark bar, rounded corners) */
.notes-card{ overflow:hidden; }
.notes-card .tabbar{ display:flex; align-items:center; gap:22px; background:#3b3b3b; color:#cfcfcf; border-radius:12px 12px 0 0; padding:12px 16px; font-weight:900; letter-spacing:.2px }
.notes-card .tab{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; opacity:.7 }
.notes-card .tab .ico{ filter:grayscale(100%); opacity:.85 }
.notes-card .tab.active{ color:#fff; opacity:1 }
/* Notes entry with send button */
.notes-entry{ position:relative; }
.notes-entry .notes-area{ border-radius:18px; }
.notes-send{ position:absolute; right:10px; bottom:10px; width:42px; height:42px; border-radius:9999px; border:0; background:#10b981; color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(16,185,129,.35); }
.notes-add{ position:absolute; right:14px; bottom:14px; width:46px; height:46px; border-radius:9999px; border:0; background:#10b981; color:#fff; font-weight:900; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(16,185,129,.35); }
.notes-add{ cursor:pointer }
/* Chips */
.chips-wrap{ display:flex; flex-wrap:wrap; gap:10px; background:#f3f4f6; padding:14px; border-radius:16px; margin-top:14px }
.chips-panel{ position:relative; padding-right:64px; min-height:64px }
.chip{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:9999px; font-weight:600; font-size:14px }
.chip-blue{ background:#3b82f6; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08) }
/* Notes grid cards */
.notes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; margin-bottom:6px }
.note-card{ background:#f3f4f6; border-radius:16px; padding:14px; color:#0f172a; font-weight:600 }
.note-text{ line-height:1.5 }
.note-meta{ margin-top:10px; font-size:12px; color:#6b7280; display:flex; align-items:center; gap:8px }
.note-meta .del{ color:#ef4444; margin-left:auto }
/* Notes list (Emp. Notes) */
.notes-list{ display:flex; flex-direction:column; gap:14px; padding-top:6px }
.notes-item{ background:#f3f4f6; border-radius:16px; padding:14px }
.notes-item .item-text{ font-weight:700; color:#0f172a; margin-bottom:10px; line-height:1.4 }
.notes-item .item-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px }
.notes-item .item-meta{ display:flex; align-items:center; gap:14px; color:#6b7280; font-weight:800 }
.notes-item .item-meta .edit{ color:#2563eb; margin-left:auto; text-decoration:none }
.notes-item .item-meta .trash{ color:#ef4444; text-decoration:none }
/* Pager styles matching images */
.pager{ display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0; margin:2px 0 0 }
.pager .prev,.pager .next{ color:#111; text-decoration:none; font-weight:900 }
.pager-num{ justify-content:flex-end }
.pager-num .num{ font-weight:600; color:#6b7280; margin:0 6px }
.pager-num .num.active{ color:#ef4444 }
.pager-num .sep{ color:#6b7280 }
/* Action icons (view/edit/delete) */
.notes-item .actions{ display:inline-flex; align-items:center; gap:10px; margin-left:auto }
.notes-item .actions img{ width:18px; height:18px; display:block }
/* Center + icon image inside button */
.notes-add img{ width:20px; height:20px; display:block }
/* Table cards with dark rounded header bar */
.card-table{ box-shadow:var(--hrp-shadow); border-radius:16px; overflow:hidden; background:#fff; border:1px solid #ececec }
.card-table .table-header{ background:#3b3b3b; color:#fff; text-align:center; font-weight:900; letter-spacing:.6px; padding:10px; font-size:14px }
.card-table .table-header{ border-radius:12px 12px 0 0 }
.card-table .table-body{ padding:0 10px 12px }
.card-table .hrp-table thead th{ background:#fff; border-bottom:1px solid #e5e7eb; font-weight:800; color:#111 }
.card-table .hrp-table tbody tr{ background:#fff }
.card-table .hrp-table tbody tr+tr td{ border-top:1px solid #f1f5f9 }
.link-blue{ color:#267bf5; font-weight:800; text-decoration:none }
.text-green{ color:#16a34a; font-weight:800 }
.text-red{ color:#ef4444; font-weight:800 }
/* Notes tabs and pager dots */
.tabbar{ display:flex; align-items:center; gap:14px; background:#3b3b3b; color:#cfcfcf; border-radius:12px 12px 0 0; padding:10px 12px; font-weight:800 }
.tabbar .tab{ opacity:.7 }
.tabbar .tab.active{ color:#ffffff; opacity:1 }
.pager-dots{ display:flex; align-items:center; gap:8px }
.pager-dots .dot{ width:8px; height:8px; border-radius:50%; background:#e5e7eb }
.pager-dots .dot.active{ background:#0f172a }
/* Fix Rectangle-29 styling to ensure white background */
.Rectangle-29, .Rectangle-29-select, .Rectangle-29-textarea {
background-color: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 413px !important;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff !important;
margin: 8px 0 0 !important;
}
/* Inquiry submit button styling */
.inquiry-submit-btn {
background: #10b981;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
transition: all 0.2s ease;
width: 140px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
display: inline-block;
text-align: center;
}
.inquiry-submit-btn:hover {
background: #059669;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Fix file upload styling */
.upload-pill .upload-display {
background: #fff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 413px !important;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 #fff !important;
}
/* Inquiry Index Page Styling */
.inquiry-index-container {
padding: 0 !important;
}
.filter-row {
display: flex;
align-items: center;
gap: 10px;
/* Flush to header and sides, override inline */
margin: 0 !important;
padding: 10px 14px !important; /* match .hrp-header horizontal padding */
border-radius: 0 !important;
width: 100%;
flex-wrap: wrap;
}
.filter-input, .filter-select {
padding: 6px 12px;
border: 1px solid #e5e7eb;
border-radius: 15px;
font-size: 12px;
min-width: 100px;
height: 32px;
background: white;
color: #6b7280;
}
.filter-btn {
background: #6b7280;
color: white;
border: none;
padding: 6px 12px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
height: 32px;
min-width: 32px;
}
.right-actions {
margin-left: auto;
display: flex;
gap: 8px;
align-items: center;
}
.search-input {
padding: 6px 12px;
border: 1px solid #e5e7eb;
border-radius: 15px;
font-size: 12px;
min-width: 150px;
height: 32px;
background: white;
position: relative;
}
.search-input::placeholder {
color: #9ca3af;
}
.excel-btn {
background: #10b981;
color: white;
border: none;
padding: 6px 16px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
height: 32px;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.add-btn {
background: #10b981;
color: white;
border: none;
padding: 6px 16px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
height: 32px;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.inquiry-table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.inquiry-table table {
width: 100%;
border-collapse: collapse;
}
.inquiry-table th {
background: #f8f9fa;
padding: 12px 8px;
text-align: left;
font-weight: 600;
font-size: 12px;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.inquiry-table td {
padding: 12px 8px;
border-bottom: 1px solid #f1f5f9;
font-size: 12px;
white-space: nowrap;
}
/* Quotations: action column alignment and width */
#quotationTable th:first-child,
#quotationTable td:first-child{
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
}
#quotationTable td{ vertical-align: middle; }
#quotationTable .action-cell{ display:flex; align-items:center; gap:6px; }
#quotationTable .action-btn{ padding:0 !important; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent; }
#quotationTable .action-btn img{ width:18px; height:18px; display:block; }
.action-cell {
display: flex;
gap: 4px;
}
.action-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background 0.2s;
}
.action-btn:hover {
background: #f3f4f6;
}
.action-btn img {
width: 16px;
height: 16px;
display: block;
}
.status-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.status-badge.confirmed {
background: #dcfce7;
color: #166534;
}
.status-badge.scheduled {
background: #dbeafe;
color: #1e3a8a;
}
.scope-link {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
.no-data {
text-align: center;
padding: 40px;
color: #6b7280;
}
/* DataTables custom styling */
.dataTables_wrapper {
font-size: 12px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
font-size: 12px;
margin: 10px 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 4px 8px;
margin: 0 2px;
border-radius: 4px;
border: 1px solid #ddd;
background: white;
font-size: 11px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #f8f9fa;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: #10b981;
color: white;
border-color: #10b981;
}
.dataTables_scrollBody {
border: 1px solid #e5e7eb;
border-radius: 8px;
}
/* Custom scrollbar */
.dataTables_scrollBody::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Hide default DataTables search */
.dataTables_filter {
display: none;
}
/* Search container with icon */
.search-container {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 12px;
width: 16px;
height: 16px;
z-index: 1;
opacity: 0.6;
}
.search-container .search-input {
padding-left: 36px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 15px;
font-size: 12px;
min-width: 180px;
height: 32px;
}
/* Update DataTables search integration */
.custom-search-wrapper {
position: relative;
display: inline-block;
}
/* Performa index: compact filter inputs */
.performa-filter .filter-pill{
height: 38px !important;
padding: 8px 14px !important;
font-size: 12px !important;
border-radius: 9999px !important;
}
/* Simple striped table helper */
.table-striped-like tbody tr:nth-child(even){
background-color: #f9fafb;
}
.table-striped-like tbody tr:hover{
background-color: #f3f4f6;
}
/* Grid utilities (restored) */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
@media (min-width: 768px){
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.md\:gap-5 { gap: 1.25rem; }
.md\:col-span-1 { grid-column: span 1 / span 1; }
.md\:col-span-2 { grid-column: span 2 / span 2; }
.md\:col-span-3 { grid-column: span 3 / span 3; }
.md\:col-span-4 { grid-column: span 4 / span 4; }
.md\:col-span-5 { grid-column: span 5 / span 5; }
.md\:col-span-6 { grid-column: span 6 / span 6; }
}
/* Ensure selects fill available width in grids */
/* Footer breadcrumb and pagination layout */
.hrp-breadcrumb{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:#FDF5F3; border-top:1px solid #E5E5E5; position:absolute; bottom:0; left:0; right:0; z-index:10000 }
.hrp-breadcrumb .crumb{ display:flex; align-items:center; gap:8px }
.hrp-breadcrumb .hrp-bc-sep{ color:#9ca3af }
/* Footer pagination appearance */
.hrp-pagination{ display:flex; align-items:center; gap:28px }
.hrp-pagination .pagination{ display:flex; list-style:none; padding:0; margin:0; gap:10px; align-items:center; font-family: 'Visby','Visby CF','VisbyCF',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif }
.hrp-pagination .pagination li{ display:inline-flex }
.hrp-pagination .pagination a,
.hrp-pagination .pagination span{
display:inline-flex; width:24px; height:18px; padding:0;
align-items:center; justify-content:center; text-align:center;
border-radius:0; font-size:16px; font-weight:600; line-height:1;
color:#000000; text-decoration:none; letter-spacing:normal;
background-color: transparent !important; border: 0 !important; box-shadow: none !important;
}
.hrp-pagination .pagination .active span{
display:inline-block; width:24px; height:18px; flex-grow:0;
font-size:16px; font-weight:800; line-height:1; text-align:center;
/* Fallback solid color */
color:#FB0230;
/* Gradient text */
background-image: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%) !important;
background-clip: text; /* standard */
-webkit-background-clip: text; /* webkit */
-webkit-text-fill-color: transparent !important;
}
.hrp-pagination .pagination .disabled span{ opacity:.5 }
/* Remove hover/focus background boxes */
.hrp-pagination .pagination a:hover,
.hrp-pagination .pagination a:focus,
.hrp-pagination .pagination span:hover,
.hrp-pagination .pagination span:focus{
color:#FB0230 !important; outline: none; box-shadow: none !important;
}
/* Utility: gradient text (fallback to solid color when not supported) */
.jv-gradient{
background-image: linear-gradient(180deg, #FF4E71 0%, #FB0230 100%) !important;
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent !important;
}
/* Chevron buttons (first/prev/next/last) */
.hrp-pagination .pagination .page-first a,
.hrp-pagination .pagination .page-prev a,
.hrp-pagination .pagination .page-next a,
.hrp-pagination .pagination .page-last a{
width:23px; height:15px; margin:12px 10px 13px 0;
font-weight:900; color:#000000; align-items:center; justify-content:center;
}
/* Entries selector compact */
.hrp-entries-form{ display:inline-flex; align-items:center; gap:8px; margin-right:24px; font-family: 'Visby','Visby CF','VisbyCF',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif }
.hrp-entries-form span{ font-size:14px; font-weight:700; color:#000000 }
.hrp-entries-form select{
width:64px !important; height:28px !important; margin:0 0 0 15px;
font-family: 'Visby','Visby CF','VisbyCF',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
font-size:16px; font-weight:700; line-height:1; letter-spacing:normal; text-align:center; color:#000000;
background-color: transparent; border:none; padding:0 24px 0 0 !important; appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius:0;
background-image: 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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 6px center; background-size: 14px 14px;
}
.hrp-entries-form{ position:relative }
.hrp-entries-form::after{ content:none }
.Rectangle-29-select{ width:100%; }
/* Hiring filters: simple top/bottom spacing and a bottom divider */
.hiring-filters{
padding: 10px 0; /* space inside, top & bottom */
margin: 8px 0 14px 0; /* space from header above and table below */
background: transparent; /* no rectangle fill */
border: 0; /* no box border */
border-bottom: 1px solid #E5E5E5; /* single separator line */
border-radius: 0; /* no rounded corners */
display:flex;
flex-wrap:wrap;
gap: 10px 16px; /* vertical and horizontal spacing between fields */
}
.hiring-filters > *{ margin: 0 !important }
/* JV Datatable filter (used on Proforma List) */
.jv-filter{
display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px;
background:#ffffff; padding:12px 16px; border:1px solid #E5E5E5;
}
.jv-filter .filter-pill{
height:38px; padding:8px 14px; font-size:12px; font-weight:600; color:#0f0f0f;
background:#F5F5F5; border:1px solid #e8e8e8; border-radius:9999px; outline:none;
box-shadow: inset 0 2px 3px rgba(0,0,0,.12), 0 1px 0 #fff;
}
.jv-filter .filter-pill:focus{
border-color:#000000; outline:none; box-shadow:none; background:#F5F5F5; color:#0f0f0f;
}
.jv-filter .filter-pill::placeholder{ color:#99a3ad }
.jv-filter .filter-pill[type="date"]{ -webkit-appearance:none; appearance:none }
.jv-filter .filter-pill[type="date"]::-webkit-calendar-picker-indicator{ padding:0 8px; cursor:pointer; opacity:.85 }
/* Selects: show gray text until a real option is selected */
.jv-filter select.filter-pill{ color:#0f0f0f }
/* Higher specificity + important to beat global a/select styles */
.jv-filter select.filter-pill:required:invalid{ color:#99a3ad !important }
/* Ensure the placeholder option itself appears gray (Firefox honors option color) */
.jv-filter select.filter-pill option[disabled][selected]{ color:#99a3ad }
/* Once focused/changed, revert to black */
.jv-filter select.filter-pill:focus{ color:#0f0f0f }
/* Date text color: placeholder-like by default, black on focus */
.jv-filter .filter-pill[type="date"]{ color:#99a3ad }
.jv-filter .filter-pill[type="date"]:focus{ color:#0f0f0f }
/* WebKit internal edit field color tying to input color */
.jv-filter .filter-pill[type="date"]::-webkit-datetime-edit{ color:inherit }
.jv-filter .filter-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.jv-filter .filter-search{
display:flex; align-items:center; justify-content:center; width:35px; height:35px;
border-radius:50%; border:none; background:#111827; color:#ffffff; cursor:pointer;
}
.pill-btn{ display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius:9999px; font-size:12px; font-weight:600; line-height:1; text-decoration:none; gap:8px; border:1px solid #e8e8e8; background:#ffffff; color:#0f0f0f; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease }
.pill-btn:focus{ outline:2px solid rgba(17,24,39,.12); outline-offset:2px }
.pill-btn svg{ width:16px; height:16px }
.pill-success{
background:#00A65A;
color:#ffffff;
border-color:#008F4E;
/* subtle glossy pill feel */
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.22),
0 4px 10px rgba(0,0,0,0.18);
}
/* Prevent default anchor color changes on interaction */
.pill-btn:link, .pill-btn:visited{ color:#0f0f0f; text-decoration:none }
.pill-btn:hover, .pill-btn:active{ color:#0f0f0f; background:inherit; border-color:inherit; text-decoration:none; transform:none }
.pill-success:link, .pill-success:visited{ color:#ffffff; text-decoration:none }
.pill-success:hover, .pill-success:active{ color:#ffffff; background:#00A65A; border-color:#008F4E; text-decoration:none; transform:none }
.gender-toggle{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:10px 16px; border:1px solid #e5e7eb; border-radius:9999px; background:#ffffff; box-shadow: inset 0 1px 0 #ffffff, 0 1px 4px rgba(0,0,0,0.06); min-width:260px }
.gender-option{ display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; color:#000000; position:relative }
.gender-option .gender-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none }
.gender-option .gender-text{ user-select:none }
.gender-option .gender-dot{ width:16px; height:16px; border-radius:9999px; background:#e5e7eb; box-shadow: inset 0 1px 0 #ffffff }
.gender-option .gender-radio:checked + .gender-text + .gender-dot{ background:#000000 }
/* Convert Form Specific Improvements */
.hrp-form .hrp-label {
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 16px;
color: #000000;
margin: 8px 4px 6px;
display: block;
}
/* Ensure proper spacing in compact forms */
.hrp-compact .hrp-form > div {
margin-bottom: 16px;
}
/* Fix button styling */
.hrp-btn {
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 14px;
padding: 12px 24px;
border-radius: 22px;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: all 0.2s ease;
}
.hrp-btn-primary {
background: #0ea05d;
color: #ffffff;
box-shadow: 0 2px 8px rgba(14, 160, 93, 0.3);
}
.hrp-btn-primary:hover {
background: #0d8f54;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 160, 93, 0.4);
}
.hrp-btn-secondary {
background: #6b7280;
color: #ffffff;
box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}
.hrp-btn-secondary:hover {
background: #5b6470;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
color: #ffffff;
text-decoration: none;
}
/* Actions container */
.hrp-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px 4px 0;
margin-top: 16px;
}
/* Error styling improvements */
.hrp-error {
color: #ef4444;
font-size: 12px;
font-weight: 600;
margin: 4px 4px 0;
display: block;
}
/* Responsive improvements */
@media (max-width: 768px) {
.hrp-actions {
flex-direction: column;
align-items: stretch;
}
.hrp-btn {
width: 100%;
margin-bottom: 8px;
}
}
/* Password Toggle Styles */
.password-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-wrapper input {
padding-right: 45px !important;
}
.password-toggle-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
transition: color 0.2s;
z-index: 10;
}
.password-toggle-btn:hover {
color: #374151;
}
.password-toggle-btn svg {
width: 20px;
height: 20px;
}
/* ========================================
GLOBAL VALIDATION ERROR STYLES
======================================== */
/* Error message text styling */
.hrp-error,
small.hrp-error {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
font-weight: 500;
}
/* Invalid field highlighting - for all input types */
.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.Rectangle-29.is-invalid,
.Rectangle-29-select.is-invalid,
.Rectangle-29-textarea.is-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}
/* Focus state for invalid fields */
.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus,
.Rectangle-29.is-invalid:focus,
.Rectangle-29-select.is-invalid:focus,
.Rectangle-29-textarea.is-invalid:focus {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
outline: none;
}
/* Upload pill error styling */
.upload-pill.is-invalid {
border-color: #dc3545 !important;
}
/* Error icon for invalid fields (optional enhancement) */
.is-invalid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
padding-right: calc(1.5em + 0.75rem);
}
/* Remove error icon from select dropdowns to avoid overlap with arrow */
select.is-invalid,
.Rectangle-29-select.is-invalid {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
padding-right: 38px;
}
/* Textarea error styling */
textarea.is-invalid,
.Rectangle-29-textarea.is-invalid {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
/* Service validation error highlighting */
.service-error {
animation: shake 0.5s;
box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* Enhanced error message box for services */
.service-error .hrp-error {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== Active/Focus Input Highlight - Subtle Black Border ===== */
/* Applies to all form inputs when focused/active */
.Rectangle-29:focus,
.Rectangle-29:focus-visible,
.Rectangle-29-select:focus,
.Rectangle-29-select:focus-visible,
.Rectangle-29-textarea:focus,
.Rectangle-29-textarea:focus-visible,
.hrp-input:focus,
.hrp-input:focus-visible,
.hrp-textarea:focus,
.hrp-textarea:focus-visible,
.hrp-select:focus,
.hrp-select:focus-visible {
outline: none;
border-color: #1f2937 !important; /* subtle dark gray/black border */
box-shadow: inset 0 2px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(31, 41, 55, 0.3) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Smooth transition for all form inputs */
.Rectangle-29,
.Rectangle-29-select,
.Rectangle-29-textarea,
.hrp-input,
.hrp-textarea,
.hrp-select {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Active state (when clicking/holding) - slightly stronger highlight */
.Rectangle-29:active,
.Rectangle-29-select:active,
.Rectangle-29-textarea:active,
.hrp-input:active,
.hrp-textarea:active,
.hrp-select:active {
border-color: #111827 !important;
box-shadow: inset 0 2px 3px rgba(0,0,0,.18), 0 0 0 1.5px rgba(17, 24, 39, 0.35) !important;
}
/* ===== Custom Radio Button Styling (Gender, etc.) ===== */
.hrp-radio-group {
display: flex;
align-items: center;
gap: 24px;
padding: 12px 20px !important;
height: auto !important;
min-height: 44px;
}
.hrp-radio-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-family: 'Visby', 'Visby CF', 'VisbyCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
color: #374151;
transition: color 0.2s ease;
}
.hrp-radio-option:hover {
color: #111827;
}
.hrp-radio-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.hrp-radio-circle {
position: relative;
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
flex-shrink: 0;
}
.hrp-radio-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 10px;
height: 10px;
border-radius: 50%;
background: #1f2937;
transition: transform 0.2s ease;
}
/* Hover state */
.hrp-radio-option:hover .hrp-radio-circle {
border-color: #6b7280;
}
/* Checked state */
.hrp-radio-option input[type="radio"]:checked + .hrp-radio-circle {
border-color: #1f2937;
box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.15);
}
.hrp-radio-option input[type="radio"]:checked + .hrp-radio-circle::after {
transform: translate(-50%, -50%) scale(1);
}
.hrp-radio-option input[type="radio"]:checked ~ .hrp-radio-text {
color: #111827;
font-weight: 700;
}
/* Focus state for accessibility */
.hrp-radio-option input[type="radio"]:focus-visible + .hrp-radio-circle {
border-color: #1f2937;
box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.2);
}
/* Compact form variant */
.hrp-compact .hrp-radio-group {
padding: 10px 14px !important;
gap: 20px;
}
.hrp-compact .hrp-radio-option {
font-size: 14px;
}
.hrp-compact .hrp-radio-circle {
width: 18px;
height: 18px;
}
.hrp-compact .hrp-radio-circle::after {
width: 8px;
height: 8px;
}