/* Shared layout overrides, including pages rendered by older templates. */
:is(.netdisk-page, .admin-page, .share-page) {
  min-width: 0;
}

:is(.netdisk-page, .admin-page) {
  height: 100vh;
  height: 100dvh;
}

.netdisk-page > main,
.admin-page .wrap,
.admin-page .main {
  min-width: 0;
  min-height: 0;
}

.netdisk-page aside,
.admin-page .side {
  min-height: 0;
}

.netdisk-page .brand,
.netdisk-page .drive,
.admin-page .pitem,
.admin-page .strow .meta {
  overflow-wrap: anywhere;
}

.netdisk-page .drive .nm,
.admin-page .pitem .n,
.admin-page .pitem .m {
  min-width: 0;
  white-space: normal;
}

.netdisk-page .brand .tag { flex-shrink: 0; white-space: nowrap; }

.netdisk-page .topbar,
.fmbar,
.refresh-controls {
  min-width: 0;
  flex-wrap: wrap;
}

/* The file pane adapts to the space left after navigation, including resizing. */
.netdisk-page > main { container-name: file-browser; container-type: inline-size; }
.netdisk-page aside { width: clamp(164px, 17vw, 238px); }
.netdisk-page .topbar { gap: 10px; padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.8vw, 22px); }
.netdisk-page .topbar .crumbs { flex: 1 1 200px; min-width: 0; }
.netdisk-page .topbar .search { flex: 0 1 170px; min-width: 100px; max-width: 100%; }
.netdisk-page .topbar > .btn { flex: 0 0 auto; }
.netdisk-page .listwrap { min-width: 0; min-height: 0; }
.fmcrumbs { min-width: 0; flex: 1 1 200px; }
.refresh-controls { max-width: 100%; gap: 8px 10px; }
.refresh-status { flex-shrink: 0; }

/* Keep every column within the available main pane; actions may use two lines. */
.netdisk-page .listwrap > table,
.netdisk-page .file-table {
  table-layout: auto;
  width: 100%;
  max-width: 100%;
}

.netdisk-page .listwrap > table :is(th, td) {
  padding: 12px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.netdisk-page .listwrap > table .col-select { width: 42px; }
.netdisk-page .listwrap > table .col-name { width: 38%; }
.netdisk-page .listwrap > table .col-size { width: 84px; }
.netdisk-page .listwrap > table :is(.col-time, .col-del) { width: 148px; }
.netdisk-page .listwrap > table .col-dl { width: 76px; }
.netdisk-page .listwrap > table .col-act { width: clamp(116px, 18cqw, 228px); }
.netdisk-page .listwrap > table :is(.col-time, .col-del, .col-dl) { display: table-cell; }
.netdisk-page .listwrap > table th { z-index: 1; }
.netdisk-page .name { align-items: flex-start; gap: 9px; }
.netdisk-page .name .file-icon { flex: 0 0 auto; overflow: visible; }
.netdisk-page .name .file-name,
.netdisk-page .name > span:last-child {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.55;
}

.file-actions {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.file-actions :is(.iconbtn, .ab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  padding: 6px;
  touch-action: manipulation;
}

.file-actions .action-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; line-height: 1; }
.file-actions svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.file-actions :is(.iconbtn, .ab) { color: var(--mut, #8999aa); border-radius: 8px; }
.file-actions :is(.iconbtn, .ab):hover { color: var(--acc, #3784ff); background: var(--panel2, #1c2633); }
.file-actions :is(.iconbtn, .ab):focus-visible { outline: 2px solid var(--acc, #3784ff); outline-offset: 2px; }
.file-actions .action-danger:hover { color: #f87171; background: rgba(248,113,113,.12); }
.file-actions:empty { display: none; }
.mobile-time-sort { display: none; }
.btn { justify-content: center; max-width: 100%; }
.btn, .x, .ab, .iconbtn, .time-sort-arrow, .upload-notice-open { touch-action: manipulation; }
.btn, .x { flex-shrink: 0; }

/* Dialogs retain a reachable header/footer, with scrolling inside the body. */
.modal {
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.modal :is(.box, .mbox) {
  min-width: 0;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

.modal :is(.h, .mhead, .ft) { flex-shrink: 0; min-width: 0; gap: 12px; }
.modal :is(.h, .mhead) .t { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.modal :is(.bd, .mbody) { min-width: 0; min-height: 0; overscroll-behavior: contain; }
.modal .mbody > div { max-width: 100%; }
.modal .mbody :is(img, video, iframe, pre) { max-width: 100%; }
.modal .mbody audio { max-width: calc(100% - 24px); margin: 12px !important; }
.modal .ft { flex-wrap: wrap; }
.modal :is(input, select, textarea),
.admin-page .f :is(input, select),
.share-page :is(input, select) { min-width: 0; max-width: 100%; }
.modal .x { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.modal .f > div { min-width: 0; }
.fmdrop { padding: 32px 20px; line-height: 1.6; overflow-wrap: anywhere; }
.fmlist { min-width: 0; }
.fmrow, .share-page .row, .srow { min-width: 0; }
.fmrow .nm, .share-page .row .nm, .srow .nm {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.file-list-info, .file-meta, .trash-info { min-width: 0; overflow-wrap: anywhere; }
.file-meta-time { white-space: normal; }
.fmrow .file-actions { flex: 0 1 152px; }
.share-page .file-actions { flex: 0 0 auto; }
.trash-row { flex-wrap: wrap; align-items: flex-start; }
.trash-row .trash-info { flex: 1 1 250px; }
.trash-row > .btn { margin-top: 2px; }
.download-log-scroll { max-width: 100%; overscroll-behavior: contain; }
.download-log-table { min-width: 560px; }
.download-log-pager { flex-wrap: wrap; }
.upload-notice-row { flex-wrap: wrap; gap: 6px 12px; }
.upload-notice-info { flex: 1 1 180px; }
.upload-notice-open { display: inline-flex; align-items: center; min-height: 32px; white-space: normal; }
.upload-notice-clear { min-height: 32px; }
.upload-notices-head { gap: 8px; }
.toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.admin-page .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-page .card, .admin-page .f { min-width: 0; }
.admin-page .card h3, .admin-page .strow { gap: 12px; flex-wrap: wrap; }
.admin-page .strow .l { flex: 1 1 200px; }
.admin-page .strow .acts { flex-wrap: wrap; }
.admin-page .strow .meta .sub2 { white-space: normal; overflow-wrap: anywhere; }
.admin-page #shModal .bd > div:first-child { flex-wrap: wrap; }
.admin-page #lgList .fmrow { flex-wrap: wrap; gap: 8px 12px; }
.admin-page #lgList .nm { flex: 1 1 160px; }
.share-page .card { max-width: 100%; min-width: 0; }

@media (min-width: 761px) and (max-width: 1180px) {
  .admin-page .side { width: 190px; }
  .netdisk-page .brand { padding: 14px 12px; }
  .netdisk-page .topbar { padding: 12px 14px; }
  .netdisk-page .topbar .crumbs { flex-basis: 100%; }
  .netdisk-page .listwrap > table :is(th, td) { padding: 11px 7px; }
  .admin-page .main { padding: 20px 18px; }
  .admin-page .card { padding: 18px 16px; }
  .admin-page .grid2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .netdisk-page, .admin-page {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
  }

  /* Named drive chips replace the narrow icon-only sidebar. */
  .netdisk-page aside {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .netdisk-page .brand { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 14px; }
  .netdisk-page .brand .top { font-size: 14px; min-width: 0; }
  .netdisk-page .brand .titletext { display: inline; }
  .netdisk-page .brand .pj { display: flex; margin-top: 0; flex-wrap: wrap; min-width: 0; font-size: 12px; }
  .netdisk-page .drives { padding: 8px 12px; overflow: visible; }
  .netdisk-page .drives .lbl { display: block; padding: 0 2px 6px; }
  .netdisk-page #drives { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 0 0 4px; scrollbar-width: thin; scrollbar-color: var(--line) var(--panel); }
  .netdisk-page .drive { flex: 0 0 auto; justify-content: flex-start; min-height: 44px; max-width: min(78vw, 340px); padding: 10px 12px; border: 1px solid var(--line); }
  .netdisk-page .drive .nm { display: block; font-size: 13px; overflow-wrap: anywhere; }
  .netdisk-page .foot { padding: 2px 14px 7px; border-top: 0; gap: 12px; flex-wrap: wrap; }
  .netdisk-page .foot a { display: inline-flex; align-items: center; min-height: 32px; }
  .netdisk-page > main { width: 100%; display: block; }
  .netdisk-page .topbar { padding: 12px; gap: 8px; }
  .netdisk-page .topbar .crumbs { flex: 1 1 100%; white-space: normal; flex-wrap: wrap; overflow: visible; overflow-wrap: anywhere; }
  .netdisk-page .crumbs a { white-space: normal; min-width: 0; }
  .netdisk-page .topbar .search { flex: 1 1 100%; width: 100%; min-height: 44px; font-size: 16px; }
  .netdisk-page #mainRefresh { flex: 1 1 100%; }
  .netdisk-page #mainRefreshStatus { padding: 6px 12px !important; }
  .netdisk-page #mainUploadNotices { margin-left: 12px !important; margin-right: 12px !important; }
  .netdisk-page .listwrap { overflow: visible; padding: 0 12px 16px; }

  .refresh-controls > .time-sort-controls { flex-direction: row !important; width: auto !important; gap: 4px !important; }
  .refresh-controls > .time-sort-controls .time-sort-arrow { width: 44px !important; height: 44px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
  .refresh-toggle { min-height: 44px; }
  .refresh-toggle input { min-width: 18px; min-height: 18px; }
  :is(.netdisk-page, .admin-page, .share-page) .btn { min-height: 44px; }
  .file-actions :is(.iconbtn, .ab), .fmrow > .ab, .modal .x { width: 44px; min-width: 44px; min-height: 44px; }
  .file-actions :is(.iconbtn, .ab) { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; }
  .upload-notice-open, .upload-notice-clear { min-height: 44px; }
  .upload-notices-list { max-height: 180px; }

  .modal { padding: 12px; }
  .modal :is(.box, .mbox) { max-width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .modal :is(.h, .mhead, .ft) { padding: 10px 12px; }
  .modal .bd { padding: 14px; }
  .modal .mbody > div { padding: 16px !important; }
  .modal .mbody pre { padding: 14px; }
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal select { font-size: 16px; }
  .modal .f > div { flex-wrap: wrap; }
  .modal .f > div > input { flex-basis: 140px !important; }
  .modal .f > div > button { min-height: 42px; }
  .modal .grid2 { grid-template-columns: minmax(0, 1fr); }
  .modal .fmbar { gap: 8px; }
  .modal .fmcrumbs { flex-basis: 100%; flex-wrap: wrap; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .modal .fmcrumbs a { min-height: 30px; display: inline-flex; align-items: center; }
  .fmdrop { padding: 22px 14px; min-height: 84px; }
  .fmlist, .trash-modal .fmlist { max-height: none; }
  .fmrow.file-row, .share-page .row.file-row, .srow.file-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: "icon info" ". size" "actions actions";
    align-items: start;
    gap: 8px;
    padding: 12px;
  }
  .file-row > .file-icon { grid-area: icon; }
  .file-row > .file-list-info, .file-row > .file-name { grid-area: info; }
  .file-row > .sz { grid-area: size; white-space: normal; overflow-wrap: anywhere; }
  .file-row > .sz[data-label]::before { content: attr(data-label) "："; }
  .file-row > .file-actions { grid-area: actions; justify-content: flex-start; gap: 6px; }
  .file-meta { line-height: 1.65; }
  .file-meta-time { flex-basis: 100%; }
  .trash-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px; }
  .trash-row > span:first-child { grid-column: 1; }
  .trash-row .trash-info { grid-column: 2 / -1; }
  .trash-row > .btn { grid-row: 2; }
  .trash-row > .btn:nth-last-child(2) { grid-column: 2; }
  .trash-row > .btn:last-child { grid-column: 3; }
  .download-log-scroll { max-height: 58vh; max-height: 58dvh; }
  .download-log-table :is(th, td) { padding: 10px; }
  .download-log-pager { gap: 8px; }
  .toast { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-width: 0; max-width: none; }

  .admin-page header { padding: 12px; flex-wrap: wrap; gap: 8px 14px; }
  .admin-page header .b { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
  .admin-page header > div:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
  .admin-page header a { display: inline-flex; align-items: center; min-height: 36px; }
  .admin-page .wrap { display: block; overflow: visible; }
  .admin-page .side { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-page .side .hd { padding: 10px 12px; }
  .admin-page .plist { display: flex; align-items: stretch; gap: 8px; padding: 0 12px 8px; overflow-x: auto; }
  .admin-page .pitem { flex: 0 0 auto; min-width: 140px; max-width: min(75vw, 320px); border: 1px solid var(--line); margin-bottom: 0; }
  .admin-page .side .ft { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 12px; }
  .admin-page .side .ft .btn { padding: 8px 6px; font-size: 12px; flex-wrap: wrap; }
  .admin-page .main { overflow: visible; padding: 18px 12px; }
  .admin-page .grid2 { grid-template-columns: minmax(0, 1fr); }
  .admin-page .card { padding: 16px 14px; }
  .admin-page .card h3 { line-height: 1.5; }
  .admin-page .strow { padding: 12px; }
  .admin-page .strow .l { flex-basis: 100%; }
  .admin-page .strow .acts { width: 100%; justify-content: flex-end; }
  .admin-page #shList .fmrow { flex-wrap: wrap; align-items: flex-start; }
  .admin-page #shList .fmrow > div { flex-basis: calc(100% - 32px) !important; }
  .admin-page #lgList { max-height: none !important; }
  .admin-page #lgList .fmrow > span { max-width: 100%; overflow-wrap: anywhere; }
  .admin-page #lgList .nm { flex-basis: 100%; }
  .share-page { padding: 12px; }
  .share-page .card, .share-page .card.dir { width: 100%; padding: 22px 14px; }
  .share-page .list { max-height: none; }
  .share-page .crumbs { overflow-wrap: anywhere; }
  .share-page .fname { font-size: 15px; }
  .home-page { padding: 0 14px; }
  .home-page .hd { margin-top: 42px; }
  .home-page .grid { grid-template-columns: minmax(0, 1fr); }
  .home-page .card :is(.row1, .meta) { flex-wrap: wrap; gap: 8px; }
  .home-page .nm, .home-page .link { overflow-wrap: anywhere; }
  .login-page { min-height: 100vh; min-height: 100dvh; height: auto; padding: 20px 12px; }
  .login-page .card { width: min(370px, 100%); padding: 28px 20px; }
  .login-page input { font-size: 16px; }
}


/* File rows respond to their own pane, not a desktop/mobile device category. */
@container file-browser (max-width: 720px) {
  .topbar .crumbs { flex-basis: 100%; }
  .topbar .search { flex: 1 1 170px; }
  .listwrap { padding: 0 0 16px; }
  .netdisk-page .listwrap > table { display: block; width: 100%; border-collapse: separate; }
  .netdisk-page .listwrap > table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
  }
  .netdisk-page .listwrap > table thead .time-sort-controls { visibility: hidden; }
  .netdisk-page #rows { display: block; width: 100%; }
  .netdisk-page #rows > tr.file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "name name" "size downloads" "time expiry" "actions actions";
    gap: 6px 12px; min-width: 0; padding: 12px clamp(12px, 2cqw, 20px);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  }
  .netdisk-page #rows > tr.file-row:hover { background-color: var(--panel2); }
  .netdisk-page #rows > tr.file-row > td {
    display: block; width: auto; min-width: 0; padding: 0; border: 0;
    text-align: left; line-height: 1.5; white-space: normal; overflow-wrap: anywhere;
  }
  .netdisk-page #rows .col-name { grid-area: name; margin-bottom: 2px; }
  .netdisk-page #rows .col-size { grid-area: size; }
  .netdisk-page #rows .col-dl { grid-area: downloads; }
  .netdisk-page #rows .col-time { grid-area: time; }
  .netdisk-page #rows .col-del { grid-area: expiry; }
  .netdisk-page #rows .col-act { grid-area: actions; padding-top: 4px; }
  .netdisk-page #rows td[data-label]::before { content: attr(data-label); margin-right: 8px; color: var(--mut); font-size: 12px; }
  .netdisk-page #rows :is(.col-time, .col-del)::before { display: block; }
  .netdisk-page #rows .file-name { font-size: 14px; font-weight: 500; }
  .netdisk-page #rows .file-actions { justify-content: flex-start; gap: 4px; }
  .netdisk-page #rows .dlnum { display: inline-flex; align-items: center; min-height: 28px; }
  .netdisk-page #rows .col-del .dx { min-width: 32px; min-height: 32px; margin-left: 4px; }
  .netdisk-page #rows > tr:not(.file-row), .netdisk-page #rows > tr:not(.file-row) > td { display: block; width: 100%; }
  .mobile-time-sort { display: inline-flex; order: 3; align-items: center; gap: 4px; color: var(--mut); font-size: 12px; margin-left: auto; }
  .mobile-time-sort .time-sort-controls { flex-direction: row !important; width: auto !important; gap: 4px !important; margin-left: 2px !important; }
  .mobile-time-sort .time-sort-arrow { width: 44px !important; height: 44px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; font-size: 12px !important; background: var(--panel2) !important; }
  .mobile-time-sort .time-sort-arrow.is-active { border-color: var(--acc) !important; }
}

/* A short landscape viewport must still permit scrolling to the last action. */
@media (max-height: 560px) {
  .netdisk-page, .admin-page { height: auto; min-height: 100dvh; overflow: auto; }
  .netdisk-page .listwrap, .admin-page .wrap, .admin-page .main { overflow: visible; }
  .netdisk-page aside, .admin-page .side { align-self: stretch; }
  .modal { padding: 8px; }
  .modal :is(.box, .mbox) { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal :is(.h, .mhead, .ft) { padding-top: 6px; padding-bottom: 6px; }
  .modal .bd { padding-top: 12px; padding-bottom: 12px; }
  .fmdrop { padding: 16px; min-height: 0; }
  .fmlist, .trash-modal .fmlist { max-height: none; }
  .share-page { place-items: start center; }
  .login-page { height: auto; min-height: 100vh; padding-top: 20px; padding-bottom: 20px; }
}

@media (pointer: coarse) and (min-width: 761px) {
  .file-actions :is(.iconbtn, .ab), .modal .x { min-width: 44px; min-height: 44px; }
  .btn, .upload-notice-open { min-height: 44px; }
}

/* Comfortable upload target with a bounded height on short/mobile screens. */
.fmdrop { min-height: 180px; padding: 48px 20px; display:flex; align-items:center; justify-content:center; }
@media(max-width:760px) { .fmdrop { min-height:140px; padding:32px 14px; } }
@media(max-height:500px) { .fmdrop { min-height:100px; padding:24px 14px; } }

.file-share-card { border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;overflow-wrap:anywhere; }
.file-share-card p { margin:8px 0; }
.file-share-card .share-result .btn { margin:8px 0 16px; }

.share-link-row { display:flex; align-items:stretch; gap:10px; margin:8px 0 16px; }
.share-link-row .share-link-input { flex:1; color-scheme:dark; }
.share-link-row .share-link-input:focus { outline:2px solid var(--acc); outline-offset:2px; }
.share-link-row .btn, .file-share-card .share-link-row .btn { flex:none; margin:0; }
@media(max-width:480px) { .share-link-row { flex-wrap:wrap; } .share-link-row .share-link-input { flex-basis:100%; } }
.col-del .expiry-cancel {
  display: block;
  margin: 5px 0 0;
  padding: 4px 0;
  color: var(--acc, #3784ff);
  font-size: 12px;
  line-height: 1.4;
}
.col-del .expiry-cancel:hover { color: var(--acc, #3784ff); text-decoration: underline; }
