/* The management cards share available space without empty full-width rows. */
body #admin#admin#admin#admin #backup.active{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-flow:row dense!important;grid-auto-rows:minmax(min-content,1fr)!important;gap:12px!important;align-items:stretch!important;min-height:var(--management-space,0)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body #admin#admin#admin#admin #backup>.officeAccountRelations:not([hidden]){display:contents!important}
body #admin#admin#admin#admin #backup .card{min-width:0!important;margin:0!important;padding:14px!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
body #admin#admin#admin#admin #backup>.card:last-child{grid-column:span 2!important}
body #admin#admin#admin#admin #backup .backupFacts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:8px 0!important}
body #admin#admin#admin#admin #backup .backupFacts>div{padding:8px!important;min-width:0!important}
body #admin#admin#admin#admin #backup .actions{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;align-items:stretch!important}
body #admin#admin#admin#admin #backup .actions>.btn{flex:0 0 auto!important;width:auto!important;min-height:44px!important;margin:0!important}
body #admin#admin#admin#admin #backup input:not([type=checkbox]):not([type=radio]):not([type=color]),body #admin#admin#admin#admin #backup select{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body #admin#admin#admin#admin #backup [hidden]{display:none!important}
@media(max-width:1399px){body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:1099px){body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:699px){body #admin#admin#admin#admin #backup.active{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:10px!important}body #admin#admin#admin#admin #backup>.card:last-child{grid-column:auto!important}body #admin#admin#admin#admin #backup .card{padding:12px!important}}
body #admin#admin#admin#admin #backup #accountManagementShortcuts .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important}
body #admin#admin#admin#admin #backup #accountManagementShortcuts .actions>.btn{width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
body #admin#admin#admin#admin #backup.active{grid-auto-rows:auto!important}
@media(min-width:1400px){body #admin#admin#admin#admin #backup .backupFacts{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* Approved adaptive layout */
body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;grid-auto-rows:minmax(min-content,auto)!important;min-height:var(--management-space,0)!important;align-content:stretch!important;gap:12px!important}
body #admin#admin#admin#admin #backup .card{height:auto!important;min-height:0!important;max-height:none!important;display:flex;flex-direction:column;gap:4px;padding:14px!important}
body #admin#admin#admin#admin #backup>.card:last-child{grid-column:1/-1!important}
body #admin#admin#admin#admin #backup .card>.btn{width:100%!important;margin-top:auto;flex:0 0 auto}
body #admin#admin#admin#admin #backup .backupFacts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
body #admin#admin#admin#admin #backup .actions{flex-wrap:wrap!important;overflow:visible!important}
body #admin#admin#admin#admin #backup .actions>.btn{flex:1 1 150px!important}
#admin #backup #notificationColorSettings>div{display:grid!important;grid-template-columns:74px 1fr 1fr;overflow:visible!important;align-items:stretch!important}#admin #backup #notificationColorSettings label{font-size:14px}#admin #backup #notificationColorSettings button{min-width:0}
@media(min-width:1100px){body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:1550px){body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(4,minmax(0,1fr))!important}body #admin#admin#admin#admin #backup>.card:last-child{grid-column:span 2!important}}
@media(max-width:699px){body #admin#admin#admin#admin #backup.active{min-height:0!important}}

/* Fit the full management overview in two rows on desktop. */
@media(min-width:1000px){
 body #admin#admin#admin#admin #backup.active{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;grid-auto-rows:minmax(min-content,1fr)!important}
 body #admin#admin#admin#admin #backup>.card:last-child{grid-column:span 2!important}
 body #admin#admin#admin#admin #backup .card{padding:10px!important;gap:4px!important;font-size:15px!important;line-height:1.3!important}
 body #admin#admin#admin#admin #backup h2,body #admin#admin#admin#admin #backup h3{font-size:19px!important;line-height:1.2!important;margin:0 0 6px!important}
 body #admin#admin#admin#admin #backup p{margin:4px 0 8px!important;font-size:15px!important;line-height:1.3!important}
 body #admin#admin#admin#admin #backup .btn,body #admin#admin#admin#admin #backup select{font-size:15px!important;line-height:1.2!important;padding:8px!important;min-height:40px!important}
 body #admin#admin#admin#admin #backup .officeInactiveFilter{margin:6px 0!important;font-size:15px!important;line-height:1.2!important}
 body #admin#admin#admin#admin #backup .backupFacts{margin:4px 0!important;gap:6px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;font-size:14px!important}
 body #admin#admin#admin#admin #backup .backupFacts>div{padding:6px!important}
 body #admin#admin#admin#admin #backup #notificationColorSettings>div{grid-template-columns:58px 1fr 1fr!important;gap:6px!important}
 body #admin#admin#admin#admin #backup #notificationColorSettings input{max-width:54px!important}
}
@media(min-width:1000px){body #admin#admin#admin#admin #backup.active{grid-auto-rows:auto!important}body #admin#admin#admin#admin #backup #notificationColorSettings>div{grid-template-columns:72px 1fr 1fr!important}}

/* Mobile management fills the viewport width and grows naturally with content. */
@media(max-width:900px){
body #admin#admin#admin#admin #backup.active{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;align-content:start!important;min-height:var(--management-space,0)!important;height:auto!important;max-height:none!important;overflow:visible!important;gap:8px!important;padding:0 0 12px!important}
body #admin#admin#admin#admin #backup>.card,body #admin#admin#admin#admin #backup>.mobilePersonalNotepad{grid-column:1/-1!important}
body #admin#admin#admin#admin #backup .card{padding:10px!important;width:100%!important;max-width:100%!important;gap:6px!important}
body #admin#admin#admin#admin #backup h2,body #admin#admin#admin#admin #backup h3{font-size:18px!important;line-height:1.3!important;margin:0 0 4px!important}
body #admin#admin#admin#admin #backup p{margin:4px 0!important;font-size:14px!important;line-height:1.4!important}
body #admin#admin#admin#admin #backup .btn{min-width:0!important;max-width:100%!important;min-height:44px!important;padding:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;margin-top:0!important}
body #admin#admin#admin#admin #backup :is(form,.officePermissionGrid,.grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;min-width:0!important;max-width:100%!important;gap:8px!important}
body #admin#admin#admin#admin #backup :is(input,select,textarea){min-width:0!important;max-width:100%!important;box-sizing:border-box!important;font-size:16px!important}
body #admin#admin#admin#admin #backup label{min-width:0!important;max-width:100%!important}
body #admin#admin#admin#admin #backup .actions{gap:6px!important}
body #admin#admin#admin#admin #backup .actions>.btn{flex:1 1 130px!important}
body #admin#admin#admin#admin #backup .backupFacts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
body #admin#admin#admin#admin #backup #notificationColorSettings>div{grid-template-columns:54px repeat(2,minmax(0,1fr))!important;gap:6px!important}
body #admin#admin#admin#admin #backup #notificationColorSettings input[type=color]{width:48px!important}
}