/*
 GreenEco — Notifications & Work Inbox
 System-aligned restructure
 Version: 3.3.16.44.2.545

 Goals:
 - Full-width balanced screen matching the current GreenEco system language.
 - Fixed title and tabs.
 - One equal command/counter row.
 - One equal filter row.
 - No side columns, odd stretching, wrapping, or hover jitter.
 - Table/search/footer consume the remaining screen height.
 - Only table body scrolls vertically.
 - Table headers remain sticky.
 - No app.js, business logic, or print changes.
*/

@media screen {

  /* =========================================================
     APPLICATION / PAGE FRAME
     ========================================================= */

  .app-shell:has(.unified-notifications-page){
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
  }

  .app-shell:has(.unified-notifications-page)
  > .app-workspace{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;

    overflow-y:hidden!important;
    overflow-x:auto!important;

    position:relative!important;
    z-index:1!important;
  }

  .unified-notifications-page{
    direction:rtl!important;

    width:min(1320px,calc(100% - 24px))!important;
    min-width:1040px!important;
    max-width:1320px!important;

    height:100%!important;
    min-height:0!important;
    max-height:100%!important;

    margin:0 auto!important;
    padding:8px 0 8px!important;

    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:6px!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* =========================================================
     TITLE — full width, aligned with the rest of the screen
     ========================================================= */

  .unified-notifications-page
  > .page-title{
    flex:0 0 58px!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;

    margin:0!important;
    padding:6px 14px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #7c8b92!important;
    border-radius:0!important;
    background:#fff!important;

    overflow:hidden!important;
    box-sizing:border-box!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
  }

  .unified-notifications-page
  > .page-title h1{
    margin:0!important;
    padding:0!important;
    font-size:20px!important;
    line-height:1.2!important;
  }

  .unified-notifications-page
  > .page-title p{
    margin:2px 0 0!important;
    padding:0!important;
    font-size:10px!important;
  }

  /* =========================================================
     TABS — integrated directly below title
     ========================================================= */

  .unified-notifications-page
  > .unified-notification-switch{
    flex:0 0 40px!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;

    margin:0!important;
    padding:0!important;

    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;

    border:0!important;
    background:transparent!important;

    overflow:hidden!important;
    box-sizing:border-box!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
  }

  .unified-notifications-page
  > .unified-notification-switch
  > button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;

    margin:0!important;
    padding:5px 10px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;

    border:1px solid #8b999f!important;
    border-radius:0!important;
    box-sizing:border-box!important;

    white-space:nowrap!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  .unified-notifications-page
  > .unified-notification-switch
  > button > b{
    min-width:26px!important;
    height:24px!important;

    padding:0 6px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #c3cdd1!important;
    border-radius:0!important;
    background:#fff!important;

    box-sizing:border-box!important;
  }

  /* =========================================================
     TOAST — preserve, compact, fixed in normal flow
     ========================================================= */

  .unified-notifications-page
  > .unified-notification-toast{
    flex:0 0 auto!important;

    width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:6px 9px!important;

    box-sizing:border-box!important;
  }

  /* =========================================================
     ROW 1 — COMMANDS + COUNTERS
     Notifications: 5 commands + 2 counts = 7 equal cells
     Work Inbox:    3 commands + 4 counts = 7 equal cells
     ========================================================= */

  .unified-notifications-page
  > .unified-notification-toolbar{
    flex:0 0 48px!important;

    direction:rtl!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;

    margin:0!important;
    padding:4px!important;

    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:5px!important;

    border:1px solid #b4c0c5!important;
    border-radius:0!important;
    background:#f3f6f7!important;

    overflow:hidden!important;
    box-sizing:border-box!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
  }

  .unified-notifications-page
  > .unified-notification-toolbar
  > .toolbar-actions,

  .unified-notifications-page
  > .unified-notification-toolbar
  > .unified-notification-inline-counts{
    display:contents!important;
  }

  .unified-notifications-page
  > .unified-notification-toolbar
  > .toolbar-actions
  > button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;

    margin:0!important;
    padding:4px 6px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;

    border-radius:0!important;
    box-sizing:border-box!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  .unified-notifications-page
  > .unified-notification-toolbar
  .unified-notification-inline-counts
  > span{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;

    margin:0!important;
    padding:4px 6px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;

    border:1px solid #bdc8cd!important;
    border-radius:0!important;
    background:#fff!important;

    box-sizing:border-box!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;

    font-size:10px!important;
  }

  .unified-notifications-page
  > .unified-notification-toolbar
  .unified-notification-inline-counts
  > span > b{
    flex:0 0 auto!important;
    font-size:12px!important;
  }

  /* =========================================================
     ROW 2 — FILTERS
     ========================================================= */

  .unified-notifications-page
  > .unified-notification-filters{
    flex:0 0 52px!important;

    direction:rtl!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;

    margin:0!important;
    padding:4px!important;

    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:5px!important;

    border:1px solid #b4c0c5!important;
    border-radius:0!important;
    background:#f7f9fa!important;

    overflow:hidden!important;
    box-sizing:border-box!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
  }

  .unified-notifications-page
  > .unified-notification-filters.work-filters{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .unified-notifications-page
  > .unified-notification-filters
  > label{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;

    margin:0!important;
    padding:3px 5px!important;

    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;

    border:1px solid #c3cdd1!important;
    border-radius:0!important;
    background:#fff!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .unified-notifications-page
  > .unified-notification-filters
  > label > span{
    min-width:0!important;
    margin:0!important;
    padding:0!important;

    font-size:10px!important;
    font-weight:900!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .unified-notifications-page
  > .unified-notification-filters
  > label > select,

  .unified-notifications-page
  > .unified-notification-filters
  > label > input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;

    margin:0!important;
    padding:3px 6px!important;

    border-radius:0!important;
    box-sizing:border-box!important;
  }

  .unified-notifications-page
  > .unified-notification-filters
  > button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;

    margin:0!important;
    padding:4px 8px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border-radius:0!important;
    box-sizing:border-box!important;

    white-space:nowrap!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* =========================================================
     TABLE AREA — consumes every remaining pixel
     ========================================================= */

  .unified-notifications-page
  > .unified-notification-table,

  .unified-notifications-page
  > .unified-work-table{
    flex:1 1 auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:0!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .unified-notifications-page
  > .unified-notification-table
  > .table-panel,

  .unified-notifications-page
  > .unified-work-table
  > .table-panel{
    flex:1 1 auto!important;

    width:100%!important;
    min-width:0!important;

    height:100%!important;
    min-height:0!important;
    max-height:100%!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;

    border:1px solid #9eacb2!important;
    border-radius:0!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* Search / result count / page-size = compact system row. */
  .unified-notifications-page
  .table-panel
  > .table-controls{
    flex:0 0 44px!important;

    direction:rtl!important;

    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;

    margin:0!important;
    padding:5px!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) 150px 110px!important;
    align-items:center!important;
    gap:5px!important;

    border:0!important;
    border-bottom:1px solid #a8b5ba!important;
    border-radius:0!important;
    background:#f7f9fa!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .unified-notifications-page
  .table-panel
  > .table-controls
  > .table-search{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    margin:0!important;
  }

  .unified-notifications-page
  .table-panel
  > .table-controls
  > .table-search input{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;

    box-sizing:border-box!important;
  }

  .unified-notifications-page
  .table-panel
  > .table-controls
  > .results-count,

  .unified-notifications-page
  .table-panel
  > .table-controls
  > .page-size{
    width:100%!important;
    min-width:0!important;

    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;

    margin:0!important;
    padding:4px 7px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;

    border:1px solid #c3cdd1!important;
    border-radius:0!important;
    background:#fff!important;

    box-sizing:border-box!important;
    white-space:nowrap!important;
  }

  .unified-notifications-page
  .table-panel
  > .table-scroll{
    flex:1 1 auto!important;

    width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;

    overflow-y:auto!important;
    overflow-x:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;

    box-sizing:border-box!important;
  }

  .unified-notifications-page
  .table-panel
  > .table-footer{
    flex:0 0 38px!important;

    width:100%!important;
    min-width:0!important;

    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;

    margin:0!important;
    padding:4px 8px!important;

    box-sizing:border-box!important;
  }

  .unified-notifications-page
  .data-table{
    width:100%!important;
    min-width:920px!important;
  }

  .unified-notifications-page
  .data-table thead th{
    position:sticky!important;
    top:0!important;
    z-index:6!important;
  }

  /* =========================================================
     STABILITY — no hover/press movement
     ========================================================= */

  .unified-notifications-page button:hover:not(:disabled),
  .unified-notifications-page button:focus-visible,
  .unified-notifications-page button:active{
    transform:none!important;
    translate:none!important;
    scale:none!important;
    box-shadow:none!important;
    filter:none!important;
  }
}

/* Keep the exact horizontal structure on smaller windows.
   Horizontal scrolling is preferred over wrapping into side columns. */
@media screen and (max-width:1060px){

  .unified-notifications-page{
    width:1040px!important;
    min-width:1040px!important;
    margin-inline:8px!important;
  }
}