body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    padding-bottom: 30px; /* reserve space for fixed footer */
}

.card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: transform 0.2s;
}

.btn-primary {
    border-radius: 20px;
    padding: 10px 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #007bff;
    color: white;
}

#categoryDescription {
    margin-top: 10px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    display: none;
}

/* Fixed gray ribbon footer: always at viewport bottom, 30px high */
footer.footer,
.app-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    min-height: 30px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: #6c757d; /* gray */
    color: #ffffff;
    z-index: 2147483647; /* topmost */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1);
    transform: none !important; /* prevent transformed ancestors from affecting it */
}

footer.footer .container,
.app-footer .container {
    height: 100%;
    display: flex;
    align-items: center;    /* vertical center within 30px */
    justify-content: center; /* horizontal center */
    padding: 0 1rem;             /* horizontal padding */
    margin: 0;
    font-size: 12px;
    line-height: 1;
}

/* link color inside footer */
.app-footer a,
footer.footer a {
    color: #f8f9fa;
    text-decoration: underline;
}

/* Ensure main content can't be hidden behind the footer */
main[role="main"] {
    margin-bottom: 30px; /* reserve space equal to footer height */
}

/* Also ensure container reserves space equal to footer */
.container.flex-fill {
    padding-bottom: 30px;
}

/* Responsive за мобилни */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 15px;
    }

    @media (max-width: 420px) {
        table th, table td {
            padding: 0.35rem 0.5rem;
            font-size: 0.9rem;
            text-align: right;
        }
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

        td:before {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: bold;
            color: #495057;
            text-align: left;
        }

    tbody td {
        text-align: right !important;
    }

    td:nth-of-type(1):before { content: "Инв. Број"; }
    td:nth-of-type(2):before { content: "Опис"; }
    td:nth-of-type(3):before { content: "Категорија"; }
    td:nth-of-type(4):before { content: "Стапка"; }
    td:nth-of-type(5):before { content: "Години"; }
    td:nth-of-type(6):before { content: "Крај"; }
    td:nth-of-type(7):before { content: "Набавка"; }

    /* Ensure table stays inside the card and cell content can wrap */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table th, table td {
        word-break: break-word;
        white-space: normal;
        vertical-align: top;
    }
    /* Optional: reduce padding on very small screens */
}

/* Small horizontal gap (5px) for icon buttons used in tables */
.btn-icon-gap {
    margin: 3px !important;
}

/* Theme overrides: change primary button color depending on selected DB choice */
body.business-theme {
    --app-primary: #0d6efd; /* bootstrap default */
}

body.personal-theme {
    --app-primary: #39B54A;
}

/* Apply variable to primary buttons and outlines */
.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    filter: brightness(0.95);
}
.btn-outline-primary {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

/* ensure link-styled buttons (logout) get color too */
.btn-link {
    color: var(--app-primary) !important;
}