/* static/css/main.css */
/* Main stylesheet for Server Apps Dashboard */
/* Theme variables and application styling */

/* CSS Variables for theming */
:root {
    /* Color palette */
    --mred: #FF9D9F;
    --myellow: #FFD38C;
    --mgreen: #CBE070;
    --mblue: #80ACD6;
    --mviolet: #AE8FC0;
    --mdarkblue: #0881d8;
    /* Button colors */
    --btn-red: #fb7185;
    --btn-red-hover: #f43f5e;
    --btn-green: #a8cf83;
    --btn-green-hover: #7fb65c;
    --btn-blue: #60a5fa;
    --btn-blue-hover: #3b82f6;
    --btn-grey: #94a3b8;
    --btn-grey-hover: #64748b;
    --btn-purple: #c084fc;
    --btn-purple-hover: #a855f7;
    --btn-orange: #fdba74;
    --btn-orange-hover: #fb923c;
}

/* Remove focus outlines for better appearance */
:active, :focus {
    outline: none !important;
}

/* Remove focus border for buttons in Firefox */
button::-moz-focus-inner {
    border: 0 !important;
}

/* Dark mode theme */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: #383838;
        --color-scheme-text-color: white;
        --mapp: #DBDBEA;       /* app name color */
        --mdesc: #B9B9C8;      /* app description color */
        --mbkg: #383838;       /* app background */
        --msbkg: #2B2B2B;      /* section background */
        --mhbkg: #454545;      /* hover background */
        --mhbor: #FF595E;      /* hover border */
        --mactive: #8FA725;
        --minactive: #FF5C5F;
        --mexited: #F9B236;
        --hoo: #454545;        /* hover overlay */
    }
    .AppButton:hover {
        background: var(--hoo)!important;
    }
}

/* Light mode theme */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: #f2f2f2;
        --color-scheme-text-color: #424251;
        --mapp: #313140;       /* app name color */
        --mdesc: #4A4A4A;      /* app description color */
        --mbkg: #F5F5F5;       /* app background */
        --msbkg: #FAFAFA;      /* section background */
        --mhbkg: #EEEEEE;      /* hover background */
        --mhbor: #FF6368;      /* hover border */
        --mactive: #5E6E18;
        --minactive: #FF5C5F;
        --mexited: #F9B236;
        --hoo: #fbfbfb;        /* hover overlay */
    }
    .AppButton:hover {
        background: var(--hoo)!important;
    }
}

/* Global styles */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: top;
}

.footer {
    position : fixed;
    bottom: 0.3em;
    bottom: 0px;
    width: 100%;
    text-align: center;
    height: 24px;
    font-size: 12px;
    font-weight: 300;
    background-color: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
    opacity: 0.6;
}
.footer strong {
    font-weight: 600;
}
.footer strong {
    font-weight: 600;
}

/* Disable text selection for better UX */
* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Application link styles */
.link {
    text-decoration: none;
    display: inline-block;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    margin-right: 0.1em;
    margin-left: 0.1em;
}

/* Application icon positioning - 1px less than AppButton */
.center {
    position: relative;
    top: -4px;
    width: 110px;
    height: 110px;
}

/* Application button container - Desktop (webview) */
.AppButton {
    box-sizing: content-box;
    width: 111px;
    height: 111px;
    border-radius: 4px;
}

/* Application description text */
.AppDesk {
    position: relative;
    max-width: 100px;
    top: -19px;
    text-align: center;
    color: var(--mdesc);
    font-size: 12.0px;
    font-weight: 600;
}

/* Mobile view - proportional scaling (1px difference maintained) */
@media (max-width: 768px) {
    .AppButton {
        width: 71px;
        height: 71px;
    }
    
    .center {
        width: 70px;
        height: 70px;
        top: -3px;
    }
    
    .AppDesk {
        max-width: 71px;
        font-size: 11px;
        top: -14px;
    }
}

/* Reset styles for all elements */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: top;
}