/* priv-linkpoint: petweb's look (public/app.css of petweb, same owner), the parts the frame and the tables use. */
/* The frame is Tabler's (index.html): .page holds the menu (.navbar-vertical)
   and .page-wrapper, the top bar over the page on screen. It fills the window
   and the pages scroll inside it, so a sheet's header row stays in sight. */
html, body { height: 100%; }
body { overflow: hidden; }
.app-shell { height: 100vh; height: 100dvh; min-height: 0; }
.app-shell > .page-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.app-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; }
/* A page of the app: one shows at a time (app.js route). */
.app-page { display: none; min-height: 0; }
.app-page.active { display: flex; }

/* The menu: Tabler's dark vertical navbar. Its groups are dropdowns kept
   open (data-bs-auto-close="false"); the page's group opens on its own. */
#sidebar .offcanvas-body { flex-direction: column; flex-grow: 1; min-height: 0; }
#sidebar .navbar-nav { flex-grow: 0; }
#sidebar .navbar-nav + .navbar-nav { margin-top: .25rem; }
#sidebar .sidebar-foot { margin-top: auto; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
#sidebar .sidebar-version { font-size: 12px; opacity: .7; }
#sidebar .sidebar-version:hover { opacity: 1; }
#sidebar .app-logo { border-radius: .5rem; }
#sidebar .dropdown-item.active { font-weight: 600; }
/* A module turned off for now (MODULES_OFF in app.js): a lock, no caret. */
.sidebar-off { margin-left: auto; font-size: .8rem; }
#sidebar .nav-link:not(.disabled) .sidebar-off { display: none; }
#sidebar .nav-link.disabled.dropdown-toggle::after { display: none; }
@media (min-width: 992px) {
    /* Folded (#menu-fold, Tabler's folded-hover): icons only; the mouse on it
       opens it over the page. Folded, the groups do not fly out. */
    [data-bs-sidebar=folded-hover] #sidebar:not(:hover):not(:has(:focus-visible)) .dropdown-menu { display: none !important; }
    [data-bs-sidebar=folded-hover] #sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-foot { border-top: 0; }
}
@media (max-width: 991.98px) {
    /* On a phone the menu is an offcanvas slid in by the ☰ of the top bar;
       the navbar around it takes no room. */
    #sidebar { min-height: 0; padding: 0; border: 0; }
    #sidebar-menu { --tblr-offcanvas-width: 17rem; }
}

/* The top bar: the page's title, its menu group above it. */
.app-topbar { min-height: 3.25rem; padding-top: .25rem; padding-bottom: .25rem; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); }
.app-title { min-width: 0; }
.app-title .page-title { font-size: 1.05rem; line-height: 1.3; }
.app-title .page-pretitle { line-height: 1.2; }
.app-title .page-pretitle:empty, .app-title .page-title:empty { display: none; }
/* A phone: the group picker gives the title room. */
@media (max-width: 575.98px) {
    .app-title { flex: 1 1 auto; }
    #group-filter { max-width: 7.5rem; }
}

/* Tabler's buttons are flex boxes, where the space after an icon is lost:
   the icon keeps its distance from the words, as Tabler's .icon does. */
.btn > .bi:first-child:not(:last-child) { margin-inline-end: .3rem; }
#sidebar .navbar-brand { justify-content: flex-start; gap: .6rem; font-size: 1rem; }


/* Hàng hóa's big tables (AG Grid, goods.js gridIn): the table fills the page
   under its tools; numbers sit in the middle of their cells, as before. */
.goods-fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.goods-grid { flex: 1 1 auto; min-height: 18rem; }
.goods-grid .ag-cell { display: flex; align-items: center; overflow: hidden; }
.goods-grid .ag-cell.num { justify-content: center; text-align: center; font-variant-numeric: tabular-nums; }
.goods-grid .ag-header-cell.num .ag-header-cell-label { justify-content: center; text-align: center; }
.goods-grid .ag-cell.name, .goods-grid .ag-cell.lines { line-height: 1.35; padding-top: 4px; padding-bottom: 4px; }
.goods-grid .ag-cell.lines { white-space: pre-line; }
.goods-grid .ag-cell.strong { font-weight: 600; }
.goods-grid .ag-cell.muted, .goods-grid .ag-row.pack .ag-cell { color: #6c757d; }
.goods-grid .ag-row.inactive .ag-cell { text-decoration: line-through; color: #adb5bd; }
.goods-grid .ag-cell.pic { padding: 1px 4px; justify-content: center; }
.goods-grid .ag-cell.pic img { object-fit: contain; border-radius: 3px; }
.goods-grid .ag-row-pinned { font-weight: 600; background: var(--tblr-bg-surface-tertiary); }
.goods-grid .ag-row.clickable { cursor: pointer; }
/* A cell typed in place: a faint box; a double click, Enter or a key edits it. */
.goods-grid .ag-cell.editable { cursor: cell; box-shadow: inset 0 0 0 1px rgba(33, 115, 70, .3); }
.goods-grid .row-btn { border: 0; background: none; padding: 0 .25rem; font-size: 13px; line-height: 1.2; }
.goods-grid .row-btn:hover { background: #dde5ee; border-radius: 3px; }

/* A page's tools over its table (petweb's .app-toolbar). */
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); background: var(--tblr-bg-surface); }
.app-toolbar > input[type=search] { max-width: 28rem; }
.goods-body { padding: .75rem; }
/* A view's page: its toolbar, then its table filling the page. */
.view-count { white-space: nowrap; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.home-cards .card .h1 { margin: 0; }