html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,iframe,canvas,svg{max-width:100%}
input,select,textarea,button{max-width:100%;box-sizing:border-box}
.responsive-table-wrap,.table-wrap,.table-responsive,.history-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.responsive-mobile-header,.responsive-sidebar-backdrop{display:none}
@media(max-width:1024px){
.content,.main-content,.page-content,.manager-content,.staff-content,main{min-width:0!important}
.grid,.card-grid,.dashboard-grid,.settings-grid,.form-grid,.probot-grid,.history-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
table{white-space:nowrap}
}
@media(max-width:768px){
:root{--mobile-page-padding:14px;--mobile-header-height:56px}
body{min-width:0!important;width:100%!important;overflow-x:hidden!important}
.responsive-mobile-header{display:flex;position:sticky;top:0;z-index:9990;height:56px;align-items:center;gap:10px;padding:0 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #e6e6e6}
.responsive-mobile-menu-button{width:40px;height:40px;flex:0 0 40px;border:1px solid #dedede;border-radius:9px;background:#fff;color:#222;font-size:21px;cursor:pointer}
.responsive-mobile-title{min-width:0;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.responsive-sidebar-backdrop{position:fixed;inset:0;z-index:9980;background:rgba(0,0,0,.34)}
body.responsive-menu-open .responsive-sidebar-backdrop{display:block}
.sidebar,.manager-sidebar,.staff-sidebar,aside.sidebar,nav.sidebar{
position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:9995!important;
width:min(82vw,300px)!important;max-width:300px!important;height:100dvh!important;overflow-y:auto!important;
transform:translateX(-105%);transition:transform .2s ease;box-shadow:8px 0 30px rgba(0,0,0,.13);background:#fff!important
}
body.responsive-menu-open .sidebar,
body.responsive-menu-open .manager-sidebar,
body.responsive-menu-open .staff-sidebar,
body.responsive-menu-open aside.sidebar,
body.responsive-menu-open nav.sidebar{transform:translateX(0)}
.main,.main-content,.content,.page-content,.manager-main,.manager-content,.staff-main,.staff-content,main{
width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;
padding-left:14px!important;padding-right:14px!important;box-sizing:border-box!important
}
.page-head,.page-header,.history-header,.probot-head,.toolbar,.topbar,.card-title-row{
display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important
}
h1{font-size:clamp(21px,6vw,27px)!important;line-height:1.2!important}
.grid,.card-grid,.dashboard-grid,.settings-grid,.form-grid,.probot-grid,.history-stats,.two-column,.columns,.cards{grid-template-columns:1fr!important}
.card,.base-card,.panel,.security-card,.probot-card,.history-card{width:100%!important;min-width:0!important;box-sizing:border-box!important}
.form-row,.field-row,.form-columns,.modal-row,.filters,.history-filters{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%!important;min-height:44px;font-size:16px!important}
textarea{min-height:110px}
.button-row,.actions,.modal-actions,.form-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.responsive-table-wrap,.table-wrap,.table-responsive,.history-table-wrap{
margin-left:-14px;margin-right:-14px;width:calc(100% + 28px);padding-left:14px;padding-right:14px;box-sizing:border-box
}
table{width:max-content!important;min-width:100%!important;white-space:nowrap}
th,td{padding:10px 11px!important}
.modal,.modal-dialog,.employee-modal,.dialog,[role=dialog]{
width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;
margin:12px!important;border-radius:14px!important;overflow-y:auto!important;box-sizing:border-box!important
}
.modal-backdrop,.employee-modal-backdrop,.dialog-backdrop{align-items:flex-start!important;overflow-y:auto!important;padding:0!important}
.event-card,.interview-card,.slot-card,.application-card{width:100%!important;min-width:0!important}
code,pre,.mono,.url,.token,.id-text{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
pre{white-space:pre-wrap}
.desktop-only{display:none!important}.mobile-only{display:block!important}
}
@media(max-width:420px){
.main,.main-content,.content,.page-content,.manager-main,.manager-content,.staff-main,.staff-content,main{padding-left:11px!important;padding-right:11px!important}
}
@media(min-width:769px){.mobile-only{display:none!important}}
/* ===== Mobile hamburger-only override ===== */
@media (max-width:768px){
.responsive-mobile-header{
display:block!important;
position:fixed!important;
top:12px!important;
left:12px!important;
z-index:10000!important;
width:44px!important;
height:44px!important;
padding:0!important;
background:transparent!important;
border:0!important;
backdrop-filter:none!important;
}
.responsive-mobile-menu-button{
width:44px!important;
height:44px!important;
border:1px solid #dedede!important;
border-radius:12px!important;
background:rgba(255,255,255,.97)!important;
color:#222!important;
font-size:22px!important;
line-height:1!important;
box-shadow:0 4px 14px rgba(0,0,0,.10)!important;
}
.responsive-mobile-title{display:none!important}
.main,.main-content,.content,.page-content,.manager-main,.manager-content,.staff-main,.staff-content,main{
padding-top:68px!important;
}
}
/* =========================================================
Mobile Base44 shell
Screenshot-inspired: compact top bar + full canvas + drawer
========================================================= */
@media (max-width:768px){
html,body{
width:100%!important;
min-height:100%!important;
background:#f7f7f8!important;
}
body{
margin:0!important;
padding:0!important;
}
/* Base44-like top app bar */
.responsive-mobile-header{
display:flex!important;
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
z-index:10000!important;
width:100%!important;
height:52px!important;
padding:0 10px!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
box-sizing:border-box!important;
background:rgba(255,255,255,.98)!important;
border-bottom:1px solid #e7e7ea!important;
box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
}
.responsive-mobile-menu-button{
appearance:none!important;
-webkit-appearance:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:36px!important;
height:36px!important;
min-width:36px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:9px!important;
background:transparent!important;
color:#202124!important;
box-shadow:none!important;
font-size:21px!important;
font-weight:500!important;
line-height:1!important;
}
.responsive-mobile-menu-button:active{
background:#f1f2f4!important;
}
.responsive-mobile-title{
display:block!important;
flex:1!important;
min-width:0!important;
margin:0!important;
padding:0 6px!important;
text-align:left!important;
font-size:14px!important;
font-weight:650!important;
color:#202124!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Main app canvas */
.main,
.main-content,
.content,
.page-content,
.manager-main,
.manager-content,
.staff-main,
.staff-content,
main{
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:calc(100dvh - 52px)!important;
margin:52px 0 0 0!important;
padding:14px!important;
box-sizing:border-box!important;
background:#f7f7f8!important;
}
/* If page has a single root panel/card, make it Base44-like */
.main > .card:first-child,
.main-content > .card:first-child,
.content > .card:first-child,
.page-content > .card:first-child,
main > .card:first-child,
.panel,
.base-card{
background:#fff!important;
border:1px solid #e4e4e7!important;
border-radius:12px!important;
box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
}
/* Page headings */
.page-head,
.page-header,
.history-header,
.probot-head,
.toolbar,
.topbar,
.card-title-row{
margin:0 0 12px 0!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
h1{
margin:0!important;
font-size:20px!important;
font-weight:700!important;
letter-spacing:-.01em!important;
color:#18181b!important;
}
h2{
font-size:16px!important;
color:#27272a!important;
}
/* Drawer */
.sidebar,
.manager-sidebar,
.staff-sidebar,
aside.sidebar,
nav.sidebar{
position:fixed!important;
top:0!important;
left:0!important;
bottom:0!important;
z-index:10020!important;
width:min(84vw,300px)!important;
max-width:300px!important;
height:100dvh!important;
padding-top:10px!important;
background:#fff!important;
border-right:1px solid #e5e7eb!important;
box-shadow:12px 0 32px rgba(0,0,0,.12)!important;
transform:translateX(-104%)!important;
transition:transform .20s ease!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
}
body.responsive-menu-open .sidebar,
body.responsive-menu-open .manager-sidebar,
body.responsive-menu-open .staff-sidebar,
body.responsive-menu-open aside.sidebar,
body.responsive-menu-open nav.sidebar{
transform:translateX(0)!important;
}
.responsive-sidebar-backdrop{
display:none;
position:fixed!important;
inset:0!important;
z-index:10010!important;
background:rgba(17,24,39,.30)!important;
backdrop-filter:blur(1px)!important;
}
body.responsive-menu-open .responsive-sidebar-backdrop{
display:block!important;
}
/* Base44 nav link treatment */
.sidebar a,
.manager-sidebar a,
.staff-sidebar a{
min-height:40px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
margin:2px 8px!important;
padding:0 10px!important;
border-radius:9px!important;
color:#3f3f46!important;
text-decoration:none!important;
}
.sidebar a:hover,
.manager-sidebar a:hover,
.staff-sidebar a:hover{
background:#f4f4f5!important;
}
.sidebar a.active,
.manager-sidebar a.active,
.staff-sidebar a.active{
background:#eef4ff!important;
color:#2563eb!important;
}
/* Cards */
.card,
.base-card,
.panel,
.security-card,
.probot-card,
.history-card,
.event-card,
.interview-card,
.slot-card,
.application-card{
width:100%!important;
min-width:0!important;
padding:14px!important;
box-sizing:border-box!important;
background:#fff!important;
border:1px solid #e4e4e7!important;
border-radius:12px!important;
box-shadow:0 1px 2px rgba(0,0,0,.025)!important;
}
/* Inputs */
input:not([type=checkbox]):not([type=radio]),
select,
textarea{
width:100%!important;
min-height:42px!important;
padding:9px 11px!important;
background:#fff!important;
border:1px solid #d4d4d8!important;
border-radius:9px!important;
outline:none!important;
box-shadow:none!important;
font-size:16px!important;
}
input:focus,
select:focus,
textarea:focus{
border-color:#2563eb!important;
box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;
}
/* Buttons */
button,
.btn,
.button{
border-radius:9px!important;
}
/* Tables */
.responsive-table-wrap,
.table-wrap,
.table-responsive,
.history-table-wrap{
width:100%!important;
margin:0!important;
padding:0!important;
overflow-x:auto!important;
background:#fff!important;
border:1px solid #e4e4e7!important;
border-radius:12px!important;
}
table{
margin:0!important;
background:#fff!important;
}
th{
background:#fafafa!important;
color:#52525b!important;
font-size:12px!important;
font-weight:650!important;
}
td{
color:#3f3f46!important;
border-top:1px solid #f1f1f3!important;
}
/* Dialog */
.modal,
.modal-dialog,
.employee-modal,
.dialog,
[role=dialog]{
width:calc(100vw - 20px)!important;
max-width:calc(100vw - 20px)!important;
max-height:calc(100dvh - 20px)!important;
margin:10px!important;
padding:16px!important;
background:#fff!important;
border:1px solid #e4e4e7!important;
border-radius:14px!important;
box-shadow:0 18px 50px rgba(0,0,0,.16)!important;
}
/* Empty states: centered like reference image */
.empty-state,
.no-items,
.empty,
[data-empty-state]{
min-height:55dvh!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
color:#71717a!important;
font-size:13px!important;
}
/* Optional existing FABs */
.fab,
.floating-action,
.floating-action-button{
position:fixed!important;
right:14px!important;
bottom:18px!important;
z-index:9990!important;
width:46px!important;
height:46px!important;
border-radius:50%!important;
box-shadow:0 8px 20px rgba(37,99,235,.25)!important;
}
}