/* Palladium.Drive — /account/drive file browser */

.pd-drive-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pd-drive-toolbar .spacer { flex: 1; }

.pd-drive-breadcrumb { display: flex; align-items: center; gap: .35rem; font-size: .9rem; flex-wrap: wrap; }
.pd-drive-breadcrumb button { background: none; border: none; padding: 0; cursor: pointer; color: var(--pd-emerald, #1AD598); font: inherit; }
.pd-drive-breadcrumb button:hover { text-decoration: underline; }
.pd-drive-breadcrumb .sep { color: var(--fg-muted, #94A3B8); }
.pd-drive-breadcrumb .current { color: var(--fg-muted, #94A3B8); }

.pd-drive-list { display: flex; flex-direction: column; border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: .6rem; overflow: hidden; }
.pd-drive-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border, rgba(148,163,184,.18)); }
.pd-drive-row:last-child { border-bottom: none; }
.pd-drive-row:hover { background: var(--surface-2, rgba(148,163,184,.07)); }
.pd-drive-row .icon { width: 20px; height: 20px; flex: none; color: var(--fg-muted, #94A3B8); }
.pd-drive-row .icon.folder { color: var(--pd-emerald, #1AD598); }
.pd-drive-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-drive-row .name button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pd-drive-row .name button:hover { text-decoration: underline; }
.pd-drive-row .meta { font-size: .78rem; color: var(--fg-muted, #94A3B8); white-space: nowrap; }
.pd-drive-row .actions { display: flex; gap: .25rem; }
.pd-drive-row .actions a,
.pd-drive-row .actions button { background: none; border: none; padding: .25rem; cursor: pointer; color: var(--fg-muted, #94A3B8); border-radius: .3rem; display: inline-flex; }
.pd-drive-row .actions a:hover,
.pd-drive-row .actions button:hover { color: var(--pd-emerald, #1AD598); background: var(--surface-2, rgba(148,163,184,.12)); }
.pd-drive-row .actions button.danger:hover { color: #e5484d; }
.pd-drive-row .actions svg { width: 16px; height: 16px; }

.pd-drive-empty { padding: 2.2rem 1rem; text-align: center; color: var(--fg-muted, #94A3B8); font-size: .9rem; }

/* ── Selection / drag & drop ── */
.pd-drive-row, .pd-drive-card { cursor: default; user-select: none; }
.pd-drive-row.is-selected, .pd-drive-card.is-selected { background: color-mix(in srgb, var(--pd-emerald, #1AD598) 12%, transparent); outline: 1px solid var(--pd-emerald, #1AD598); outline-offset: -1px; }
.pd-drive-row.is-droptarget, .pd-drive-card.is-droptarget { background: color-mix(in srgb, var(--pd-emerald, #1AD598) 22%, transparent); outline: 2px dashed var(--pd-emerald, #1AD598); outline-offset: -2px; }
.pd-drive-items.pd-drop-active { outline: 2px dashed var(--pd-emerald, #1AD598); outline-offset: -2px; border-radius: .6rem; }
.pd-drive-breadcrumb button { padding: .15rem .3rem; border-radius: .3rem; }

/* ── View toggle ── */
.pd-drive-viewtoggle { display: inline-flex; border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .45rem; overflow: hidden; }
.pd-drive-viewtoggle button { background: transparent; border: none; padding: .4rem .55rem; cursor: pointer; color: var(--fg-muted, #94A3B8); display: inline-flex; }
.pd-drive-viewtoggle button.is-active { color: var(--pd-emerald, #1AD598); background: var(--surface-2, rgba(148,163,184,.12)); }
.pd-drive-viewtoggle svg { width: 15px; height: 15px; }

/* ── Grid view ── */
.pd-drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; border: none; }
.pd-drive-grid .pd-drive-empty { grid-column: 1 / -1; border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: .6rem; }
.pd-drive-card { display: flex; flex-direction: column; border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: .6rem; overflow: hidden; }
.pd-drive-card:hover { border-color: var(--border-strong, rgba(148,163,184,.5)); }
.pd-drive-thumb { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--surface-2, rgba(148,163,184,.08)); overflow: hidden; }
.pd-drive-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pd-drive-thumb .icon.folder { width: 46px; height: 46px; color: var(--pd-emerald, #1AD598); }
.pd-drive-ext { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--fg-muted, #94A3B8); border: 1px solid var(--border, rgba(148,163,184,.35)); border-radius: .35rem; padding: .3rem .55rem; }
.pd-drive-ext.pdf { color: #e5484d; border-color: #e5484d; }
.pd-drive-card .name { padding: .45rem .6rem 0; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-drive-card .meta { padding: 0 .6rem; font-size: .72rem; color: var(--fg-muted, #94A3B8); }
.pd-drive-card .actions { display: flex; gap: .15rem; padding: .3rem .45rem .45rem; }
.pd-drive-card .actions a, .pd-drive-card .actions button { background: none; border: none; padding: .2rem; cursor: pointer; color: var(--fg-muted, #94A3B8); border-radius: .3rem; display: inline-flex; }
.pd-drive-card .actions a:hover, .pd-drive-card .actions button:hover { color: var(--pd-emerald, #1AD598); background: var(--surface-2, rgba(148,163,184,.12)); }
.pd-drive-card .actions button.danger:hover { color: #e5484d; }
.pd-drive-card .actions svg { width: 15px; height: 15px; }

/* ── User picker (add member) ── */
.pd-drive-userpicker { position: relative; }
.pd-drive-userpicker-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 1075; background: var(--surface, #fff); border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .45rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
.pd-drive-userpicker-results button { display: block; width: 100%; text-align: left; background: none; border: none; padding: .45rem .7rem; font-size: .86rem; color: inherit; cursor: pointer; }
.pd-drive-userpicker-results button:hover { background: var(--surface-2, rgba(148,163,184,.12)); }
.pd-drive-userpicker-results .meta { font-size: .76rem; color: var(--fg-muted, #94A3B8); margin-left: .4rem; }

/* ── Context menu ── */
.pd-drive-ctx-backdrop { position: fixed; inset: 0; z-index: 1085; }
.pd-drive-ctx { position: fixed; z-index: 1086; min-width: 200px; padding: .3rem; background: var(--surface, #fff); border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .5rem; box-shadow: 0 10px 32px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.pd-drive-ctx button, .pd-drive-ctx a { display: block; width: 100%; text-align: left; background: none; border: none; padding: .42rem .7rem; border-radius: .35rem; font-size: .86rem; color: inherit; cursor: pointer; text-decoration: none; }
.pd-drive-ctx button:hover, .pd-drive-ctx a:hover { background: var(--surface-2, rgba(148,163,184,.12)); }
.pd-drive-ctx button.danger { color: #e5484d; }
.pd-drive-ctx button.danger:hover { background: rgba(229,72,77,.1); }
.pd-drive-ctx .sep { height: 1px; margin: .25rem .4rem; background: var(--border, rgba(148,163,184,.25)); }
.pd-drive-ctx .muted { padding: .42rem .7rem; font-size: .82rem; color: var(--fg-muted, #94A3B8); }

/* ── Preview modal ── */
.pd-drive-modal { position: fixed; inset: 0; z-index: 1090; background: rgba(4, 12, 22, .72); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.pd-drive-modal-body { background: var(--surface, #fff); color: inherit; border-radius: .7rem; width: min(960px, 96vw); height: min(84vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.4); }
.pd-drive-modal-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border, rgba(148,163,184,.25)); }
.pd-drive-modal-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.pd-drive-modal-head .spacer { flex: 1; }
.pd-drive-modal-content { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--surface-2, rgba(148,163,184,.06)); }
.pd-drive-modal-content img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-drive-modal-content iframe { width: 100%; height: 100%; border: none; }

.pd-drive-btn.danger { border-color: #e5484d; color: #e5484d; }
.pd-drive-btn.danger:hover { background: #e5484d; color: #fff; }

.pd-drive-quota { margin-top: 1rem; font-size: .8rem; color: var(--fg-muted, #94A3B8); }
.pd-drive-quota-bar { height: 6px; border-radius: 3px; background: var(--surface-2, rgba(148,163,184,.18)); overflow: hidden; margin-top: .3rem; }
.pd-drive-quota-bar > div { height: 100%; background: var(--pd-emerald, #1AD598); border-radius: 3px; }
.pd-drive-quota-bar > div.warn { background: #e5a13b; }
.pd-drive-quota-bar > div.full { background: #e5484d; }

.pd-drive-inline-form { display: flex; gap: .4rem; align-items: center; }
.pd-drive-inline-form input { padding: .3rem .5rem; border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .35rem; background: var(--surface, transparent); color: inherit; font-size: .88rem; }

.pd-drive-error { margin: .6rem 0; padding: .55rem .8rem; border-radius: .45rem; background: rgba(229,72,77,.12); color: #e5484d; font-size: .85rem; }

.pd-drive-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border-radius: .45rem; border: 1px solid var(--border, rgba(148,163,184,.3)); background: transparent; color: inherit; font-size: .86rem; cursor: pointer; }
.pd-drive-btn:hover { border-color: var(--pd-emerald, #1AD598); color: var(--pd-emerald, #1AD598); }
.pd-drive-btn.primary { background: var(--pd-emerald, #1AD598); border-color: var(--pd-emerald, #1AD598); color: #0B1929; font-weight: 600; }
.pd-drive-btn.primary:hover { background: var(--pd-emerald-hover, #15B880); color: #0B1929; }
.pd-drive-btn.is-active { border-color: var(--pd-emerald, #1AD598); color: var(--pd-emerald, #1AD598); }
.pd-drive-btn svg { width: 15px; height: 15px; }

/* ── Space switcher ── */
.pd-drive-spaces { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .85rem; color: var(--fg-muted, #94A3B8); }
.pd-drive-space-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border, rgba(148,163,184,.3)); background: transparent; color: inherit; font-size: .84rem; cursor: pointer; }
.pd-drive-space-pill:hover { border-color: var(--pd-emerald, #1AD598); }
.pd-drive-space-pill.is-active { border-color: var(--pd-emerald, #1AD598); color: var(--pd-emerald, #1AD598); font-weight: 600; }
.pd-drive-space-pill .badge,
.pd-drive-org-head .badge { padding: .1rem .4rem; border-radius: .3rem; background: var(--surface-2, rgba(148,163,184,.18)); font-size: .68rem; font-weight: 600; }

/* ── Organizations page ── */
.pd-drive-org { border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: .6rem; margin-bottom: .8rem; overflow: hidden; }
.pd-drive-org-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; }
.pd-drive-org-head .spacer { flex: 1; }
.pd-drive-org-body { border-top: 1px solid var(--border, rgba(148,163,184,.18)); padding: .7rem .9rem; }
.pd-drive-org-body select { padding: .3rem .5rem; border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .35rem; background: var(--surface, transparent); color: inherit; font-size: .88rem; }

/* ── Share panel ── */
.pd-drive-share-panel { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .8rem .9rem; border-bottom: 1px solid var(--border, rgba(148,163,184,.18)); background: var(--surface-2, rgba(148,163,184,.05)); }
.pd-drive-share-panel .pd-drive-share-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: .5rem; }
.pd-drive-share-panel strong { font-size: .85rem; }
.pd-drive-share-panel .pd-drive-row { border: none; padding: .3rem 0; }
.pd-drive-share-panel .badge { padding: .1rem .4rem; border-radius: .3rem; background: var(--surface-2, rgba(148,163,184,.18)); font-size: .68rem; font-weight: 600; margin-left: .35rem; }
.pd-drive-share-panel select { padding: .3rem .5rem; border: 1px solid var(--border, rgba(148,163,184,.3)); border-radius: .35rem; background: var(--surface, transparent); color: inherit; font-size: .88rem; }
.pd-drive-newlink input { font-size: .78rem; color: var(--pd-emerald, #1AD598); }

/* ── Info tooltips (pure CSS, hover + keyboard focus — same pattern as Bookings .bk-info) ── */
.pd-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: .3rem; border-radius: 50%; background: var(--surface-2, rgba(148,163,184,.25)); color: var(--fg-muted, #94A3B8); font-size: .68rem; font-weight: 700; font-style: normal; cursor: help; position: relative; vertical-align: middle; user-select: none; }
.pd-info:hover, .pd-info:focus { background: var(--pd-emerald, #1AD598); color: #0B1929; outline: none; }
.pd-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.96); width: max-content; max-width: 280px; padding: .5rem .65rem; border-radius: .4rem; background: #212529; color: #fff; font-size: .74rem; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s ease, transform .12s ease; pointer-events: none; z-index: 1080; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.pd-info::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #212529; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 1080; }
.pd-info:hover::after, .pd-info:focus::after,
.pd-info:hover::before, .pd-info:focus::before { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }