/* =========================================================
   SoftVide - Global Application Styles
   File: assets/css/app.css
   ========================================================= */

/* ---------- Theme Variables ---------- */

:root {
    --sv-bg: #0f0f0f;
    --sv-surface: #181818;
    --sv-surface-hover: #272727;
    --sv-border: #303030;

    --sv-text: #f1f1f1;
    --sv-text-secondary: #aaaaaa;
    --sv-text-muted: #717171;

    --sv-accent: #ff0033;
    --sv-accent-hover: #e6002d;

    --sv-chip-bg: #272727;
    --sv-chip-active-bg: #f1f1f1;
    --sv-chip-active-text: #0f0f0f;

    --sv-sidebar-width: 220px;
    --sv-header-height: 56px;

    --sv-radius-small: 6px;
    --sv-radius-medium: 10px;
    --sv-radius-large: 14px;

    --sv-font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ---------- Reset ---------- */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: var(--sv-bg);
}

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background: var(--sv-bg);
    color: var(--sv-text);

    font-family: var(--sv-font-family);
    font-size: 14px;
    line-height: 1.5;

    overflow-x: hidden;
}


/* ---------- Basic Elements ---------- */

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

img {
    display: block;
    max-width: 100%;
}


/* ---------- Application Shell ---------- */

.app-shell {
    display: flex;

    width: 100%;
    min-height: calc(100vh - var(--sv-header-height));

    background: var(--sv-bg);
}


/* ---------- Main Content ---------- */

.content {
    flex: 1;

    min-width: 0;
    min-height: calc(100vh - var(--sv-header-height));

    padding: 20px 24px 50px;

    background: var(--sv-bg);
}


/* ---------- Common Divider ---------- */

.sidebar-divider {
    width: calc(100% - 16px);
    height: 1px;

    margin: 10px 8px;

    background: var(--sv-border);
}


/* ---------- Common Utility Classes ---------- */

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* ---------- Scrollbar ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* ---------- Selection ---------- */

::selection {
    background: var(--sv-accent);
    color: #ffffff;
}