/* matanya.dev: a GNOME 2 / MATE desktop, Clearlooks flavour, in CSS. */
:root {
  --ui-font: "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Segoe UI", Tahoma, sans-serif;
  --mono-font: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --panel-top: #f2f1ef;
  --panel-bot: #d8d5d0;
  --panel-border: #9b9891;
  --bg: #efebe7;            /* Clearlooks window background */
  --bg-dark: #d9d5d0;
  --text: #000;
  --text-dim: #555753;      /* Tango aluminium 5 */
  --title-top: #f6f5f3;     /* MATE Menta grey titlebar */
  --title-bot: #d7d3cc;
  --title-line: #b6b2aa;
  --frame: #8f8b83;
  --frame-active: #7d9a54;  /* subtle green frame on the active window */
  --select: #7fa653;        /* MATE green selection */
  --select-bot: #5f8b3a;
  --term-bg: #2e3436;       /* Tango aluminium 6 */
  --term-fg: #d3d7cf;
  --panel-h: 26px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font: 12px/1.35 var(--ui-font);
  color: var(--text);
  background: #4b7d1f url("/wallpaper/GreenMeadow.jpg") center / cover no-repeat fixed;
  display: grid;
  grid-template-rows: var(--panel-h) 1fr var(--panel-h);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; color: inherit; }
button { cursor: default; }

/* ---------- panels ---------- */
.panel {
  display: flex; align-items: stretch; gap: 2px;
  background: linear-gradient(var(--panel-top), var(--panel-bot));
  height: var(--panel-h);
  padding: 0 4px;
  position: relative; z-index: 20;
  user-select: none;
}
.panel.top { border-bottom: 1px solid var(--panel-border); }
.panel.bottom { border-top: 1px solid var(--panel-border); }
.menubar { display: flex; }
.menu { position: relative; display: flex; }
.menu-btn, .applet, .task, .show-desktop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 7px; border: 1px solid transparent; border-radius: 3px;
  background: none; white-space: nowrap;
}
.menu-btn:hover, .menu-btn.open, .task:hover, .show-desktop:hover, button.applet:hover {
  background: linear-gradient(#fff, #e6e4e0); border-color: #a9a69f;
}
.menu-btn.open { background: linear-gradient(#d4d2ce, #c6c3be); }
.foot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #7cb342; background: radial-gradient(circle at 50% 50%, #fff 0 30%, #7cb342 31% 42%, #fff 43%); }
.dropdown {
  position: absolute; top: calc(100% + 1px); left: 0; margin: 0; padding: 3px; list-style: none;
  min-width: 220px; background: var(--bg); border: 1px solid #8f8c86; box-shadow: 2px 3px 6px rgba(0,0,0,.35);
  z-index: 50;
}
.dropdown li > button, .dropdown li > a {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 4px 22px 4px 6px; border: 0; background: none; text-decoration: none; border-radius: 2px;
}
.dropdown li > button:hover, .dropdown li > a:hover { background: linear-gradient(var(--select), var(--select-bot)); color: #fff; }
.dropdown .sep { height: 1px; background: #bab7b0; margin: 3px 2px; }
.dropdown .hint { display: block; padding: 4px 6px; color: var(--text-dim); font-style: italic; font-size: 11px; }
.tray { margin-left: auto; display: flex; align-items: stretch; gap: 2px; }
.applet.status { color: var(--text-dim); }
.applet.clock { font-variant-numeric: tabular-nums; color: #2e2c28; }
.applet.session { font-variant-numeric: tabular-nums; color: #3a5f1e; gap: 4px; }
.applet.mon { padding: 0 4px; }
.applet.mon canvas { display: block; image-rendering: pixelated; border: 1px solid #b6b2aa; background: #20340f; }
.applet.temp { color: #7a3b12; font-variant-numeric: tabular-nums; }
.applet.net { color: #2e2c28; }
.mi-clock { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%233a5f1e' stroke-width='1.4'/%3E%3Cpath d='M8 4.5V8l2.5 1.5' stroke='%233a5f1e' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tasklist { display: flex; gap: 3px; flex: 1; min-width: 0; padding: 1px 4px; }
.task { min-width: 160px; border-color: #b3b0a9; background: linear-gradient(#fff, #e1dfda); }
.task.active { background: linear-gradient(#e9efe0, #cfe0b8); border-color: #8caf63; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.task[hidden] { display: none; }
.workspaces { display: flex; gap: 1px; align-self: center; margin: 0 6px; }
.ws { width: 22px; height: 16px; border: 1px solid #8f8c86; background: #cfd7e0; }
.ws.active { background: linear-gradient(#a6c97e, #6f9a3f); border-color: #5f8b3a; }
.show-desktop, .trash { padding: 0 5px; }

/* ---------- desktop ---------- */
.desktop { position: relative; min-height: 0; overflow: hidden; }
.icons { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.icon {
  width: 84px; border: 0; background: none; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.7);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 3px;
}
.icon:hover, .icon:focus-visible { background: rgba(134,171,217,.45); outline: 1px dotted rgba(255,255,255,.7); }
.icon span { font-size: 12px; line-height: 1.2; }

/* ---------- window ---------- */
.window {
  position: absolute; inset: 4% 8% 6% 130px;
  display: grid; grid-template-rows: auto auto 1fr;
  background: var(--bg); border: 1px solid var(--frame-active); border-top: 2px solid var(--frame-active);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  z-index: 5; min-width: 0;
}
.window[hidden] { display: none; }
.titlebar {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 8px;
  background: linear-gradient(var(--title-top), var(--title-bot));
  border-bottom: 1px solid var(--title-line); border-radius: 4px 4px 0 0;
  color: #2e2c28; font-weight: bold;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.titlebar .title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar.small { height: 24px; }
.wm-buttons { display: flex; gap: 2px; }
.wm {
  width: 20px; height: 18px; padding: 0; border: 1px solid #b3afa7; border-radius: 3px;
  background: linear-gradient(#fbfaf8, #e4e0d9); color: #444038;
  font: 12px/16px var(--ui-font); text-align: center; box-shadow: inset 0 1px 0 #fff;
  position: relative;
}
.wm:hover { background: linear-gradient(#fff, #ece9e3); }
.wm:active { background: linear-gradient(#d9d5ce, #e6e2db); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.wm.min::before { content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2px; background: #444038; }
.wm.max::before { content: ""; position: absolute; inset: 4px 5px; border: 1.5px solid #444038; border-top-width: 2.5px; }
.wm.close { font-weight: bold; }
.wm.close:hover { background: linear-gradient(#e8846a, #cf5a34); border-color: #a23f1e; color: #fff; }
.app-menubar { display: flex; gap: 14px; padding: 3px 8px; border-bottom: 1px solid #c8c5bf; background: var(--bg); color: #222; user-select: none; }
.app-menubar span { padding: 1px 4px; border-radius: 2px; }
.app-menubar span:hover { background: var(--select); color: #fff; }
.app-menubar { font-size: 12px; }
.terminal { background: var(--term-bg); padding: 4px 2px 4px 6px; min-height: 0; }
.terminal .xterm { height: 100%; }
.terminal .xterm-viewport { scrollbar-width: thin; scrollbar-color: #888a85 #2e3436; }

/* ---------- GTK dialogs ---------- */
.greeter {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 10;
}
.greeter-face {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 40px; min-width: 240px;
  background: linear-gradient(#f4f2ee, #e4e0d9);
  border: 1px solid var(--frame); border-top: 2px solid var(--frame-active);
  border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.greeter-name { font-size: 15px; font-weight: bold; color: #2e2c28; letter-spacing: .02em; }
.gtk.big { min-width: 150px; padding: 8px 18px; font-weight: bold; }
.linkish { border: 0; background: none; color: #3a5f1e; text-decoration: underline; padding: 2px; }

.dialog {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 24px));
  background: var(--bg); border: 1px solid var(--frame); border-radius: 6px 6px 0 0;
  box-shadow: 0 10px 34px rgba(0,0,0,.5); z-index: 10;
}
.dialog[hidden] { display: none; }
.dialog-body { display: flex; gap: 16px; padding: 16px 16px 8px; }
.dialog h1 { font-size: 15px; margin: 2px 0 8px; }
.dialog p { margin: 0 0 8px; }
.dialog .fine { color: var(--text-dim); font-size: 11px; }
.dialog a { color: #204a87; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 12px 12px; }
.gtk {
  min-width: 86px; padding: 5px 14px; border: 1px solid #8f8c86; border-radius: 3px;
  background: linear-gradient(#fdfdfc, #e2dfda); box-shadow: inset 0 1px 0 #fff;
}
.gtk:hover { background: linear-gradient(#fff, #ebe8e3); }
.gtk:active { background: linear-gradient(#d4d1cb, #e0ddd8); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.gtk.default { border-color: #5f8b3a; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #a6c97e; }
.gtk[disabled] { opacity: .55; }

/* ---------- icons (inline SVG via mask) ---------- */
.mi, .di { display: inline-block; background: currentColor; -webkit-mask: var(--svg) center / contain no-repeat; mask: var(--svg) center / contain no-repeat; }
.mi { width: 16px; height: 16px; }
.di { width: 48px; height: 48px; background: none; -webkit-mask: none; mask: none; background: var(--svg) center / contain no-repeat; }
.di-power-big { width: 56px; height: 56px; flex: none; }
.mi-term  { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='12' rx='1.5'/%3E%3Cpath d='M4 6l3 2-3 2M8 10h4' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mi-web   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5v13M4 3.5c2.5 1.4 5.5 1.4 8 0M4 12.5c2.5-1.4 5.5-1.4 8 0' stroke='%23fff' stroke-width='1.1' fill='none'/%3E%3C/svg%3E"); }
.mi-home  { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8l7-6 7 6h-2v6H3V8z'/%3E%3C/svg%3E"); }
.mi-net   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v7H3zM1 12h14v2H1z'/%3E%3C/svg%3E"); }
.mi-power { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.8a5.5 5.5 0 1 0 6 0' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8 1.5v6' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mi-info  { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M8 7v5M8 4v1' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mi-cpu   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='3' width='10' height='10' rx='1'/%3E%3Cpath d='M6 1v2M10 1v2M6 13v2M10 13v2M1 6h2M1 10h2M13 6h2M13 10h2' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.mi-desktop { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='9' rx='1'/%3E%3Cpath d='M5 14h6M8 11v3' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.mi-trash { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10l-1 10H4zM5 2h6v2H5z'/%3E%3C/svg%3E"); }
.di-computer { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='4' y='6' width='40' height='27' rx='3' fill='%23555753'/%3E%3Crect x='7' y='9' width='34' height='21' fill='%233465a4'/%3E%3Crect x='7' y='9' width='34' height='21' fill='url(%23g)'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23729fcf' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23204a87' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='18' y='34' width='12' height='5' fill='%23888a85'/%3E%3Crect x='10' y='39' width='28' height='4' rx='1' fill='%23babdb6'/%3E%3C/svg%3E"); }
.di-home { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 16h16l4-4h20v28H4z' fill='%23c17d11'/%3E%3Cpath d='M4 20h40v20H4z' fill='%23e9b96e'/%3E%3Cpath d='M4 22h40v18H4z' fill='%23f5d08a'/%3E%3C/svg%3E"); }
.di-doc { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 4h20l10 10v30H10z' fill='%23eeeeec' stroke='%23888a85'/%3E%3Cpath d='M30 4v10h10' fill='%23babdb6' stroke='%23888a85'/%3E%3Cpath d='M15 22h18M15 28h18M15 34h12' stroke='%23555753' stroke-width='2'/%3E%3C/svg%3E"); }
.di-power-big { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23babdb6'/%3E%3Ccircle cx='28' cy='28' r='22' fill='%23eeeeec'/%3E%3Cpath d='M18 17a14 14 0 1 0 20 0' stroke='%234e9a06' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M28 8v16' stroke='%234e9a06' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .icons { display: none; }
  .window { inset: 6px 6px 8px; border-radius: 0; }
  .app-menubar { display: none; }
  .menu-btn { padding: 0 5px; }
  .applet.status { display: none; }
  .dialog { top: 45%; }
  .dialog-body { padding: 12px; gap: 10px; }
  .di-power-big { width: 40px; height: 40px; }
}