/* SYSTEM24 THEME for Glance (with improved borders & button fix) */

:root{
    --color-primary: oklch(73% 0.12 300);
    --color-positive: oklch(73% 0.12 160);
    --color-background: oklch(19% 0 0);
}

body,
#__next {
    background-color: oklch(19% 0 0) !important;
    color: oklch(80% 0 0) !important;
    font-family: 'DM Mono', 'JetBrains Mono', 'Fira Mono', monospace !important;
    font-weight: 300 !important;
    letter-spacing: -0.05ch;
}

.main,
.sidebar, 
.sidebar-expanded,
.widget, 
.widget-flat, 
.widget-simple,
.widget-header,
.expand-toggle-button,
.summary,
.widget-content-frame,
.widget-content:not(.search-bang),
.bookmarks-icon-container,
.dns-stats-graph-bar,
.location-icon::after,
.card,
.panel,
.box,
.section,
.content > div,
[class^="widget-type-"] {
    background-color: oklch(19% 0 0) !important;
    color: oklch(80% 0 0) !important;
    border-radius: 0 !important;
    border: 1px solid oklch(31% 0 0) !important;  /* Changed from 2px to 1px */
    box-shadow: none !important;
}

* {
    border-radius: 0 !important;
    box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6, .tabs, label, .label {
    color: oklch(90% 0 0) !important;
    font-weight: 500 !important;
    letter-spacing: -0.05ch;
}

.text-muted,
.text-secondary,
.widget .text-secondary,
.widget .text-muted {
    color: oklch(60% 0 0) !important;
}
.text-inactive,
.text-placeholder,
input::placeholder,
textarea::placeholder {
    color: oklch(40% 0 0) !important;
}

.active,
.selected,
.tab-active,
.panel:focus-within,
.panel:hover,
.card:hover,
.widget:hover,
[class^="widget-type-"]:hover,
.widget-content-frame:hover {
    border-color: oklch(73% 0.12 300) !important;
    background-color: color-mix(in oklch, oklch(73% 0.12 300), transparent 95%) !important;
}

a,
a:visited,
.link,
.primary,
.widget a {
    color: oklch(73% 0.12 300) !important;
}
a:hover,
.link:hover,
.primary:hover,
.widget a:hover {
    color: oklch(90% 0.1 300) !important;
    text-decoration: underline;
}

.text-success,
.green,
.status-online {
    color: oklch(73% 0.12 160) !important;
}
.text-danger,
.red,
.status-offline,
.status-error {
    color: oklch(73% 0.12 0) !important;
}
.status-dot.status-online         { background: oklch(73% 0.12 160) !important; }
.status-dot.status-idle           { background: oklch(78% 0.12 80) !important; }
.status-dot.status-dnd            { background: oklch(73% 0.12 0) !important; }
.status-dot.status-streaming      { background: oklch(73% 0.12 300) !important; }

button,
.btn,
input[type="submit"] {
    background: oklch(27% 0 0) !important;
    color: oklch(90% 0 0) !important;
    border: 1px solid oklch(31% 0 0) !important;   /* Changed border-width from 2px to 1px */
    transition: border 0.2s;
}
button:hover,
.btn:hover,
input[type="submit"]:hover {
    border-color: oklch(73% 0.12 300) !important;
    background: oklch(31% 0 0) !important;
}
input,
textarea,
select {
    background: oklch(23% 0 0) !important;
    color: oklch(80% 0 0) !important;
    border: 1px solid oklch(31% 0 0) !important;   /* Changed border-width from 2px to 1px */
}
input:focus,
textarea:focus,
select:focus {
    border-color: oklch(73% 0.12 300) !important;
}

.tag,
.pill,
.badge,
.label-important {
    background: oklch(54% 0.12 300 / 0.12) !important;
    color: oklch(73% 0.12 300) !important;
    border-radius: 0 !important;
}

/* Scrollbar theme */
::-webkit-scrollbar {
    width: 8px;
    background: oklch(19% 0 0);
}
::-webkit-scrollbar-thumb {
    background: oklch(31% 0 0);
    border-radius: 0;
}

/* 
Only pad/center "Show More" and "Show Less" buttons. 
Override over-generic button selector to target those only:
*/
.show-more, .show-less, [class*="show-more"], [class*="show-less"],
button[data-testid="show-more-button"], button[data-testid="show-less-button"] {
    padding: 10px 24px !important;
    text-align: center !important;
    display: block !important;
    margin: 24px auto 0 auto !important;
    width: fit-content !important;
}
.expand-toggle-button {
    padding: 10px 24px !important;
    text-align: center !important;
    display: block !important;
    margin: 24px auto 0 auto !important;
    width: fit-content !important;
}
.widget-content:has(.expand-toggle-button:last-child) {
  padding-bottom: 16px;
}
.widget-header {
    margin-bottom: 0 !important;
}
.cards-grid.collapsible-container {
    padding: 1.5rem !important;
}
.attachments > * {
    background-color: transparent !important;
}