/* =====================================================================
   styles.css — the only V2-authored stylesheet

   Everything visual comes from the V1 theme snapshot (/shared, /apps/files,
   /apps/users). This file carries just three things the snapshot cannot:
     1. the login card (V1's login lives in a page V2 does not serve);
     2. the window-chrome geometry that V1 keeps INLINE in jessos.html
        (never snapshotted) — window frame, titlebar, traffic-light buttons;
     3. theme-token skins for the V2-only feature dialogs, so they read as
        native JessOS surfaces rather than generic <dialog> boxes.
   ===================================================================== */

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100vh; }
body {
  font: 14px/1.45 "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary);
  /* Same desktop wallpaper V1 sets inline on <body> in jessos.html. */
  background: url('/assets/theme/wallpapers/ubuntuwallpaper2.webp') center/cover no-repeat fixed, #2c001e;
}
.app-shell { min-height: 100vh; }

/* Boot splash — the neutral state between page load and the resolved session
   (workspace or login). Sits on the same wallpaper as the desktop, so a refresh
   reads as "the desktop is loading", never a login-card flash. */
.v2-boot-splash{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:url('/assets/theme/wallpapers/ubuntuwallpaper2.webp') center/cover no-repeat fixed,#2c001e}
.v2-boot-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff33;border-top-color:#f57c2a;animation:v2-boot-spin .8s linear infinite}
@keyframes v2-boot-spin{to{transform:rotate(360deg)}}

/* ===================== LOGIN (exact V1 visual language) =====================
   Isolated here so V2 never loads V1 code. This is the project's quality bar
   for pixel fidelity; leave it untouched. */
.v2-login-root{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('/assets/theme/wallpapers/ubuntuwallpaper2.webp') center/cover no-repeat,#000;color:#f5f5f5;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Ubuntu",sans-serif;font-size:14px}
.v2-login-time{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:13px;text-shadow:0 1px 2px #000c;opacity:.9}
.v2-login-card{width:100%;max-width:440px;border-radius:14px;background:rgba(38,12,50,.55);border:1px solid #fff3;box-shadow:0 22px 55px #000b;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:20px 24px 18px;display:flex;flex-direction:column;gap:14px}
.v2-login-user-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.v2-login-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid #ffffffa6;box-shadow:0 0 0 2px #0008;flex-shrink:0;background:#0006;display:flex;align-items:center;justify-content:center}
.v2-login-avatar img{width:48px;height:48px;object-fit:contain}
.v2-login-identity{display:flex;flex-direction:column;gap:2px}
.v2-login-username-label{font-size:13px;font-weight:500}
.v2-login-portal-label{font-size:11px;color:#ccc}
.v2-login-fields{display:flex;flex-direction:column;gap:10px}
.v2-login-field{display:flex;flex-direction:column;gap:4px}
.v2-login-field label{font-size:11px;color:#ccc}
.v2-login-input{height:32px;border-radius:8px;border:1px solid #ffffff40;background:#0a03148c;color:#f5f5f5;padding:0 10px;font-size:13px}
.v2-login-input:focus{outline:1px solid #f26722;outline-offset:1px;border-color:#f26722}
.v2-login-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px}
.v2-login-remember{display:flex;align-items:center;gap:6px;font-size:11px;color:#ccc;margin-right:auto}
.v2-login-remember input{width:14px;height:14px;accent-color:#f26722}
.v2-login-button{min-width:120px;height:34px;border-radius:999px;border:1px solid #000b;background:linear-gradient(to right,#f57c2a,#f49a3c);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:0 2px 6px #000a}
.v2-login-button:disabled{opacity:.65;cursor:default;box-shadow:none}
.v2-login-error{min-height:18px;font-size:11px;color:#ff5555;margin-top:4px}
.v2-login-footer{margin-top:4px;font-size:11px;color:#ccc;display:flex;justify-content:space-between;align-items:center;opacity:.9}
.v2-login-footer .jess{color:#c45307}
.v2-login-footer .os{color:#cca000}
@media(max-width:480px){.v2-login-card{padding:16px 14px 14px}}

/* ===================== DESKTOP + WINDOW CHROME =====================
   Ported from jessos.html's inline <style> (which the visual snapshot does
   not include). The workspace runs inside the same geometry as the V1 shell. */
#workspace-view{position:fixed;inset:0}
.workspace .desktop{position:fixed;inset:0;display:flex;flex-direction:column}

#window{
  position:fixed;
  top:calc(34px + 75px);
  left:calc(var(--dock-width,60px) + 100px);
  right:100px;
  bottom:20%;
  display:flex;
  flex-direction:column;
  border-radius:6px;
  box-shadow:var(--window-shadow);
  overflow:hidden;
  background:var(--window-bg);
}
#window-titlebar{
  height:38px;flex-shrink:0;background:var(--headerbar-bg);color:var(--headerbar-text);
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px;
  border-bottom:1px solid rgba(0,0,0,.2);text-shadow:var(--text-shadow);
}
#window-icon{width:20px;height:20px;flex-shrink:0}
.window-title-left{display:flex;align-items:center;gap:8px}
#window-title{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-spacer{flex:1}

/* Traffic-light controls: fixed 14px squares with a normal/hover image swap.
   Without this the button images render at natural size and stack into dots. */
.window-controls{display:flex;gap:6px}
.window-btn{width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.window-btn img{width:14px;height:14px;display:block}
.window-btn .btn-normal{display:block}
.window-btn .btn-hover{display:none}
.window-btn:hover .btn-normal{display:none}
.window-btn:hover .btn-hover{display:block}

#window-body{flex:1;background:var(--bg-view);display:flex;flex-direction:column;min-height:0;position:relative;overflow:hidden}

/* Maximize fills below the top bar, flush to the dock (matches V1). */
#window{transition:transform .2s ease}
#window.maximized{top:34px;left:var(--dock-width,60px);right:0;bottom:0;border-radius:0}
#window.window-hiding{transform:scale(0);opacity:0}

/* Symbolic (monochrome-black) icons must be inverted to read on the dark
   theme. The toolbar/hamburger icons are all symbolic; in the sidebar only the
   V2-only Shared/Trash entries are (Home uses the full-colour folder icon). */
.files-toolbar-btn img{filter:invert(1);opacity:.85}
.files-sidebar-item .sym-icon{filter:invert(1);opacity:.85}
.files-hamburger-icon,.files-context-menu-icon{filter:invert(1);opacity:.85}

/* Compact row density (view-modes.js). */
.files-compact .files-row{padding-top:3px;padding-bottom:3px}
.files-compact .files-icon{width:20px;height:20px}
.files-compact .files-name-text{font-size:12px}
.files-compact .files-row-download-btn{width:22px;height:22px}

/* Cut items (clipboard.js) dim until pasted. */
.files-row.cut{opacity:.5}
.files-row.spring-loading{box-shadow:inset 0 0 0 2px var(--gp-accent)}

/* Inline folder-expansion chevron (inline-tree.js). Render it inline (V1's is
   absolute); rotate on expand; spinner while loading. Files get a spacer so
   names align. */
.files-row .files-name .files-row-chevron{position:static;transform:none;width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:3px}
.files-row .files-name .files-row-chevron:hover{background:rgba(255,255,255,.08)}
/* Glyph geometry stays V1's (files.css): the Adwaita pan arrow points up and
   is rotated 90° collapsed (→ right) / 180° expanded (→ down) at 16px. Only
   the container positioning above is adapted to V2's inline flex layout. */
.files-row .files-name .files-row-chevron svg{width:16px;height:16px;opacity:.6;transform:rotate(90deg);transition:transform .15s ease}
.files-row .files-name .files-row-chevron.expanded svg{transform:rotate(180deg)}
.files-name .files-row-chevron-spacer{width:16px;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.files-row-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--text-secondary);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.files-sidebar-item.drop-target{outline:2px solid var(--gp-accent);outline-offset:-2px}

/* ===================== BUTTON ADAPTERS =====================
   The snapshot styles V1's sidebar rows as <div>s; we use real <button>s for
   keyboard access, so strip the native chrome. */
.files-sidebar-item{border:0;background:transparent;font:inherit;width:100%;text-align:left;cursor:pointer}
.files-hamburger-btn{border:0}
.files-status-stats.error{color:var(--gp-error,#ff8c8c)}
#statusLeft.error{color:var(--gp-error,#ff8c8c)}
/* V1 row exit: fade + slide before the re-render removes the row (F3). */
.files-row-leaving{opacity:0!important;transform:translateX(30px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.files-sidebar-item:focus-visible,.files-toolbar-btn:focus-visible,.files-row:focus-visible{outline:2px solid var(--gp-accent);outline-offset:-2px}
.files-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1;color:var(--text-secondary)}
.files-empty-icon{opacity:.7}

/* ===================== FEATURE DIALOGS (theme-token skin) =====================
   V2 has surfaces V1 never had (mounts, retention, delivery, grants…). They use
   native <dialog>; these rules dress them in the JessOS theme tokens. */
.dialog{
  width:min(440px,calc(100% - 32px));padding:0;color:var(--text-primary);
  background:var(--bg-window);border:1px solid var(--border-default);border-radius:12px;
  box-shadow:var(--shadow-lg);
}
.dialog::backdrop{background:rgba(0,0,0,.55)}
.dialog form,.dialog-body{padding:20px;display:flex;flex-direction:column;gap:12px}
.dialog h2{margin:0;font-size:17px;font-weight:600}
.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dialog-section-title{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.eyebrow{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-muted)}
.dialog label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
.dialog input,.dialog select{height:34px;border:1px solid var(--input-border);border-radius:7px;padding:0 10px;font:inherit;font-size:13px;color:var(--input-text);background:var(--input-bg)}
.dialog input:focus,.dialog select:focus{outline:2px solid var(--focus-ring);outline-offset:-2px}
.dialog code,.link-secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.link-secret{display:block;padding:10px;border-radius:8px;background:var(--bg-view);border:1px solid var(--border-default);word-break:break-all}
.upload-picker{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
progress{width:100%;height:8px}

.status-message{min-height:1.2em;margin:0;font-size:12px;color:var(--text-secondary)}
.status-message.error,.form-error{color:var(--gp-error);font-size:12px;margin:0}

.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.button{border:1px solid transparent;border-radius:8px;padding:8px 14px;background:transparent;color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.button:disabled,.disabled{opacity:.45;pointer-events:none}
.button-primary{background:var(--gp-accent);color:#fff;border-color:transparent}
.button-quiet{border-color:var(--border-default)}
.button-quiet:hover{background:var(--hover-overlay)}

.versions-list{display:flex;flex-direction:column;max-height:min(56vh,560px);overflow:auto;border-top:1px solid var(--border-default)}
.version-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-default);font-size:13px}
.version-row small{display:block;color:var(--text-secondary);font-size:11px}
.v2-link-actions{display:flex;gap:8px}

/* The users/grants dialogs reuse the V1 users.css .user-* grid; widen the shell. */
.v2-users-dialog{width:min(900px,calc(100% - 48px))}
.v2-users-dialog .user-list{max-height:min(58vh,620px);overflow:auto;margin-top:8px}

@media(max-width:800px){
  #window{top:52px;left:70px;right:14px;bottom:14px}
}
