/* Blood365 V319 - shared responsive UI modernization layer */
:root{
  --v319-red:#e40019;
  --v319-red-dark:#b90015;
  --v319-ink:#111827;
  --v319-muted:#667085;
  --v319-bg:#f4f7fb;
  --v319-card:#fff;
  --v319-line:#e2e8f0;
  --v319-soft:#fff3f5;
  --v319-green:#118447;
  --v319-radius:16px;
  --v319-shadow:0 10px 28px rgba(15,23,42,.07);
  --v319-shadow-hover:0 16px 38px rgba(15,23,42,.10);
  --v319-focus:0 0 0 4px rgba(228,0,25,.11);
}

html{max-width:100%;overflow-x:hidden}
body.blood365-ui{
  max-width:100%;
  overflow-x:hidden!important;
  background:linear-gradient(180deg,#f8fafc 0%,var(--v319-bg) 100%)!important;
  color:var(--v319-ink)!important;
  -webkit-font-smoothing:antialiased;
}

.bl365-topbar-main{
  min-height:68px!important;
  height:68px!important;
  padding:0 18px!important;
  gap:12px!important;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--v319-line)!important;
  box-shadow:0 5px 22px rgba(15,23,42,.06)!important;
  backdrop-filter:blur(12px);
}
.bl365-topbar-main .bl365-logo-main{
  width:226px!important;
  min-width:226px!important;
  height:68px!important;
}
.bl365-topbar-main .bl365-logo-main img{
  width:190px!important;
  max-width:190px!important;
  max-height:58px!important;
}
.bl365-menu-btn{
  width:42px!important;
  height:42px!important;
  border:1px solid var(--v319-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(15,23,42,.05)!important;
}
.bl365-menu-btn:hover{border-color:#f4a4ad!important;color:var(--v319-red)!important}
.bl365-search{
  height:44px!important;
  border-color:#d7e0ea!important;
  box-shadow:0 4px 14px rgba(15,23,42,.03)!important;
  transition:.2s ease!important;
}
.bl365-search:focus-within{border-color:#ef8e99!important;box-shadow:var(--v319-focus)!important}
.bl365-search input{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.bl365-search button[type=submit]{
  min-height:34px!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--v319-ink)!important;
  box-shadow:none!important;
}
.bl365-circle{
  width:42px!important;
  height:42px!important;
  border-color:var(--v319-line)!important;
  box-shadow:0 4px 12px rgba(15,23,42,.05)!important;
}
.bl365-circle:hover{border-color:#f2a0aa!important;background:var(--v319-soft)!important}
.bl365-profile-box{
  height:46px!important;
  border-color:var(--v319-line)!important;
  border-radius:14px!important;
  box-shadow:0 4px 12px rgba(15,23,42,.04)!important;
}
.bl365-logout{color:#344054!important}
.bl365-logout:hover{color:var(--v319-red)!important}

.layout{width:100%!important;max-width:100%!important;align-items:stretch!important}
.bl365-sidebar-main{
  top:68px!important;
  width:244px!important;
  flex:0 0 244px!important;
  height:calc(100vh - 68px)!important;
  min-height:calc(100vh - 68px)!important;
  background:linear-gradient(180deg,#121d29 0%,#07111b 100%)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  box-shadow:8px 0 28px rgba(15,23,42,.06)!important;
  scrollbar-width:thin;
}
.bl365-sidebar-main::-webkit-scrollbar{width:6px}
.bl365-sidebar-main::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:10px}
.bl365-sidebar-main .bl365-nav-group{border-top-color:rgba(255,255,255,.10)!important}
.bl365-sidebar-main .bl365-nav-title-toggle{
  min-height:34px!important;
  color:#f8fafc!important;
  border-radius:9px!important;
}
.bl365-nav-link{
  min-height:39px!important;
  height:auto!important;
  margin:3px 0!important;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}
.bl365-nav-link:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
.bl365-nav-link.active{
  background:linear-gradient(135deg,var(--v319-red),var(--v319-red-dark))!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 10px 22px rgba(228,0,25,.25)!important;
}

main.content,.content{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:calc(100vw - 244px)!important;
  width:calc(100% - 244px)!important;
  padding:20px 22px 78px!important;
  overflow:visible!important;
}
.bl365-sidebar-collapsed .bl365-sidebar-main{width:78px!important;flex-basis:78px!important}
.bl365-sidebar-collapsed main.content,.bl365-sidebar-collapsed .content{
  width:calc(100% - 78px)!important;
  max-width:calc(100vw - 78px)!important;
}

.page-head{
  align-items:flex-start!important;
  gap:14px!important;
  margin-bottom:18px!important;
}
.page-head h1{
  margin:0 0 7px!important;
  color:var(--v319-ink)!important;
  font-size:clamp(24px,2vw,30px)!important;
  letter-spacing:-.035em!important;
}
.page-head h1:after{
  width:44px!important;
  height:3px!important;
  margin-top:8px!important;
  background:var(--v319-red)!important;
}
.page-head p,.muted{color:var(--v319-muted)!important}

.card,.bl365-card,.kpi-card,.workflow-card,.workflow-step,.workflow-tile,.form-card,.panel,.box,.bl142-panel,.bl142-summary{
  max-width:100%!important;
  border:1px solid var(--v319-line)!important;
  border-radius:var(--v319-radius)!important;
  background:var(--v319-card)!important;
  box-shadow:var(--v319-shadow)!important;
}
.card,.bl365-card,.form-card,.panel,.box{padding:18px!important}
.card:hover,.bl365-card:hover,.kpi-card:hover,.workflow-card:hover,.bl142-summary:hover{
  box-shadow:var(--v319-shadow-hover)!important;
}
.card h3,.bl365-card h3,.panel h3{color:var(--v319-ink)!important;font-weight:900!important}

.btn,.button,button[type=submit],input[type=submit]{
  min-height:40px!important;
  padding:9px 15px!important;
  border:1px solid var(--v319-red)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--v319-red),var(--v319-red-dark))!important;
  color:#fff!important;
  font-weight:850!important;
  box-shadow:0 8px 18px rgba(228,0,25,.16)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.btn:hover,.button:hover,button[type=submit]:hover,input[type=submit]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 23px rgba(228,0,25,.22)!important;
}
.btn.light,.btn-outline,.button.light,.btn.gray{
  background:#fff!important;
  color:var(--v319-ink)!important;
  border-color:var(--v319-line)!important;
  box-shadow:none!important;
}
.btn.light:hover,.btn-outline:hover,.button.light:hover,.btn.gray:hover{
  color:var(--v319-red)!important;
  border-color:#ef9aa5!important;
  background:var(--v319-soft)!important;
}

.form-grid{gap:14px!important}
.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.form-grid.two,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.field{min-width:0!important;margin-bottom:8px!important}
.field label,label{
  color:#344054;
  font-size:12px;
  font-weight:850;
}
.input,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select,textarea{
  width:100%;
  max-width:100%;
  min-height:42px!important;
  border:1px solid #ccd6e2!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--v319-ink)!important;
  box-shadow:none!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:#ed8995!important;
  box-shadow:var(--v319-focus)!important;
  outline:0!important;
}
input[readonly],input:disabled,select:disabled,textarea:disabled{
  background:#f3f6fa!important;
  color:#667085!important;
}

.table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
  border:1px solid var(--v319-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
}
.table-wrap table,table{width:100%!important;border-collapse:separate!important;border-spacing:0!important}
th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f6f8fb!important;
  color:#5f6f84!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap;
}
td,th{padding:11px 13px!important;border-bottom:1px solid #edf1f5!important}
tbody tr:nth-child(even){background:#fbfcfe}
tbody tr:hover{background:#fff7f8!important}
.badge,.pill,.status-pill{font-weight:850!important}

.v246-settings-tabs,[role=tablist]{
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:thin;
}
.v246-settings-tab{
  white-space:nowrap;
  border-radius:10px!important;
}
.v246-settings-tab.active{
  background:linear-gradient(135deg,var(--v319-red),var(--v319-red-dark))!important;
  color:#fff!important;
  box-shadow:0 9px 19px rgba(228,0,25,.17)!important;
}

/* User requirement: five KPI cards and eight blood-group stock units remain in one desktop row. */
.bl142-summary-row{
  grid-template-columns:repeat(5,minmax(150px,1fr))!important;
  overflow-x:auto;
  padding-bottom:3px;
}
.bl142-summary{min-width:150px!important}
.bl142-bottle-row{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(92px,1fr))!important;
  overflow-x:auto;
  padding-bottom:6px!important;
}
.bl142-bottle-card{min-width:92px!important}

.v319-mobile-overlay{display:none}

@media(max-width:1280px){
  main.content,.content{padding:18px 18px 76px!important}
  .form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bl142-summary-row{display:flex!important}
  .bl142-summary{flex:0 0 190px!important}
  .bl142-bottle-row{display:flex!important}
  .bl142-bottle-card{flex:0 0 105px!important}
}

@media(max-width:960px){
  .bl365-topbar-main{padding:0 10px!important}
  .bl365-topbar-main .bl365-logo-main{width:158px!important;min-width:158px!important}
  .bl365-topbar-main .bl365-logo-main img{width:148px!important}
  .bl365-clock,.bl365-profile-box{display:none!important}
  .layout{display:block!important}
  .bl365-sidebar-main,
  .bl365-sidebar-collapsed .bl365-sidebar-main{
    position:fixed!important;
    top:68px!important;
    left:0!important;
    bottom:0!important;
    z-index:1001!important;
    width:min(86vw,300px)!important;
    max-width:300px!important;
    height:calc(100vh - 68px)!important;
    min-height:0!important;
    padding:12px 12px 30px!important;
    transform:translateX(-110%);
    transition:transform .22s ease!important;
  }
  body.bl365-mobile-nav-open .bl365-sidebar-main{transform:translateX(0)!important}
  main.content,.content,
  .bl365-sidebar-collapsed main.content,.bl365-sidebar-collapsed .content{
    width:100%!important;
    max-width:100%!important;
    padding:16px 14px 76px!important;
  }
  .v319-mobile-overlay{
    display:block;
    position:fixed;
    inset:68px 0 0;
    z-index:1000;
    background:rgba(5,13,23,.48);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
  }
  body.bl365-mobile-nav-open .v319-mobile-overlay{opacity:1;visibility:visible}
  body.bl365-mobile-nav-open{overflow:hidden!important}
  .form-grid.three,.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-head{flex-wrap:wrap!important}
}

@media(max-width:640px){
  .bl365-topbar-main .bl365-logo-main{width:132px!important;min-width:132px!important}
  .bl365-topbar-main .bl365-logo-main img{width:124px!important}
  .bl365-search{display:none!important}
  .bl365-circle{width:38px!important;height:38px!important}
  .bl365-logout{font-size:0!important}
  .bl365-logout:before{font-size:19px!important}
  .page-head{display:flex!important;flex-direction:column!important}
  .page-head h1{font-size:24px!important}
  .card,.bl365-card,.form-card,.panel,.box{padding:15px!important}
  .form-grid,.form-grid.two,.form-grid.three,.form-grid.four,.grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr!important;
  }
  .field[style*="grid-column"]{grid-column:1!important}
  .actions,.bl365-actions,.v317-actions{width:100%;flex-wrap:wrap!important}
  .actions .btn,.bl365-actions .btn,.v317-actions .btn{flex:1 1 auto}
  td,th{padding:10px 11px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}