/* --- Global Styles & Variables --- */
:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --danger-color: #dc3545; /* For delete button */
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --white-color: #FFFFFF;
    --grey-bg: #f4f7f6;
    --border-color: #dee2e6;
    --logo-height: 30px; /* Mobile default */
    --top-nav-height: 50px; /* Mobile default */

    /* Top Nav Gradient Colors */
    --top-nav-gradient-start: #2E3192;
    --top-nav-gradient-end: #662D8C;

    /* Side Nav Specific */
    --sidenav-bg: #343a40;
    --sidenav-text: #dee2e6;
    --sidenav-text-hover: var(--white-color);
    --sidenav-active-bg: var(--primary-color);
    --sidenav-active-text: var(--white-color);
    --sidenav-hover-bg: #495057;
    --sidenav-width: 220px; /* Desktop width */
    --sidenav-width-minimized: 65px; /* Desktop minimized width */
    --sidenav-icon-size: 1.1em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    color: var(--dark-color);
    background-color: var(--grey-bg);
    overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
a { text-decoration: none; color: var(--primary-color); }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }

/* General Button Styles */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary { color: #fff; background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; }
.btn-secondary { color: #fff; background-color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-secondary:hover { background-color: #5c636a; border-color: #565e64; }
.btn-danger { color: #fff; background-color: var(--danger-color); border-color: var(--danger-color); }
.btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; }

/* --- Login Page Styles --- */
/* ... (Login styles remain the same) ... */
.login-page {
    background-color: var(--light-color); /* Fallback */
    background-image: linear-gradient(to right, var(--top-nav-gradient-start), var(--top-nav-gradient-end));
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 100%; padding: 20px; padding-bottom: 80px; position: relative;
}
.login-container {
    background-color: #fff; padding: 20px 25px; border-radius: 8px; /* Mobile padding default */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); text-align: center;
    max-width: 400px; width: 100%; z-index: 1; margin: auto 0;
}
.login-logo { max-height: 70px; margin-bottom: 25px; border-radius: 30%; overflow: hidden; }
.login-container h1 { margin-bottom: 10px; font-size: 1.6rem; color: var(--dark-color); } /* Mobile size default */
.login-container p { margin-bottom: 25px; color: var(--secondary-color); }
.login-container form { margin-top: 20px; }
.login-container .form-group { margin-bottom: 15px; text-align: left; }
.login-container .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; font-size: 0.9rem; }
.login-container .form-group input[type="text"],
.login-container .form-group input[type="password"] {
    width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box;
}
.login-container .form-group input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); }
.error-message {
    color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;
    padding: 8px 12px; margin-top: 5px; margin-bottom: 15px; font-size: 0.9rem; display: none; text-align: center;
}
.btn-login {
    background-color: var(--primary-color); color: #fff; border: none; padding: 12px 25px; font-size: 1.1rem;
    border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; width: 100%; margin-top: 10px;
}
.btn-login:hover { background-color: #0a58ca; }

/* --- App Layout - Mobile Base Styles --- */
.app-wrapper {
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--top-nav-height));
    position: relative; padding-bottom: 60px;
}

/* Top Nav - Mobile Base */
.top-nav {
    background-image: linear-gradient(to right, var(--top-nav-gradient-start), var(--top-nav-gradient-end));
    height: var(--top-nav-height); padding: 0; position: sticky; top: 0; left: 0; width: 100%; z-index: 1030;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.top-nav-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.top-nav .logo-link { display: flex; align-items: center; gap: 10px; color: var(--white-color); font-weight: 500; font-size: 1.2rem; text-decoration: none; }
.top-nav .logo-link:hover { text-decoration: none; opacity: 0.9; }
.top-nav .logo { height: var(--logo-height); }
.top-nav .logo-text { display: none; }
.top-nav-right { display: flex; align-items: center; gap: 10px; color: var(--white-color); }
.top-nav-tool-icon { height: 24px; width: auto; vertical-align: middle; opacity: 0.9; transition: opacity 0.2s ease; }
.top-nav-tool-link:hover .top-nav-tool-icon { opacity: 1; }
.top-nav-tool-link { line-height: 0; display: inline-block; }
.top-nav .phone-number { display: none; }

/* Side Nav - Mobile Base */
/* ... (Side Nav Mobile Base Styles remain the same) ... */
.side-nav {
    width: 100%; background-color: var(--sidenav-bg); color: var(--sidenav-text); padding: 15px 0;
    border-bottom: 1px solid #555; flex-shrink: 0; display: flex; flex-direction: column;
    position: static; height: auto; overflow-y: visible;
}
.sticky-side { position: static; }
.side-nav-header {
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 15px; flex-shrink: 0;
}
.side-nav-title {
    font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    color: #adb5bd; margin: 0; white-space: nowrap; overflow: hidden; transition: opacity 0.3s ease;
}
.minimize-btn {
    background: none; border: none; color: var(--sidenav-text); font-size: 1rem; cursor: pointer;
    padding: 5px 8px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease;
}
.minimize-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--sidenav-text-hover); }
.side-nav-list { flex-grow: 1; overflow-y: auto; overflow-x: hidden; }
.side-nav-list li a {
    display: flex; align-items: center; gap: 15px; color: var(--sidenav-text); padding: 12px 20px;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.3s ease;
    white-space: nowrap; overflow: hidden; font-size: 0.95rem;
}
.side-nav-list li a:hover { background-color: var(--sidenav-hover-bg); color: var(--sidenav-text-hover); text-decoration: none; }
.side-nav-list li a.active { background-color: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 500; }
.side-nav-list li a i { font-size: var(--sidenav-icon-size); width: 20px; text-align: center; flex-shrink: 0; margin-right: 15px; }
.side-nav-list li a .link-text { transition: opacity 0.2s ease; opacity: 1; }
.side-nav.minimized .side-nav-header { padding-bottom: 0; border-bottom: none; }
.side-nav.minimized .side-nav-title { opacity: 0; }
.side-nav.minimized .minimize-btn i { transform: rotate(180deg); }
.side-nav.minimized .side-nav-list { display: none; }

/* Main Content - Mobile Base */
.main-content { flex-grow: 1; padding: 15px 10px; background-color: var(--white-color); min-width: 0; }
.content-header {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Space between title and button */
    align-items: center; /* Align items vertically */
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.content-header h1 {
    margin-bottom: 0; /* Remove bottom margin as flex handles spacing */
    color: var(--dark-color); font-weight: 500; font-size: 1.4rem;
    border-bottom: none; /* Remove individual border */
    padding-bottom: 0; /* Remove individual padding */
}
.content-body p { margin-bottom: 20px; color: var(--secondary-color); }

/* Add Link Button Style */
.btn-add {
    color: #fff;
    background-color: #198754; /* Green color */
    border-color: #198754;
    padding: 0.25rem 0.5rem; /* Smaller padding */
    font-size: 0.875rem; /* Smaller font */
    line-height: 1.5;
    border-radius: 0.2rem;
}
.btn-add i { margin-right: 4px; }
.btn-add:hover { background-color: #157347; border-color: #146c43; }

/* App Thumbnail Grid - Mobile Base */
.app-thumbnail-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px;
}
.app-thumbnail {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 8px; background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px;
    text-align: center; color: var(--dark-color); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease; min-height: 100px;
    text-decoration: none; position: relative; /* Needed for actions */
    overflow: hidden; /* Hide overflowing action buttons initially */
}
.app-thumbnail:hover {
    transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-decoration: none; border-color: #bbb; overflow: visible; /* Show actions on hover */
}
.app-thumbnail img { width: 30px; height: 30px; margin-bottom: 6px; object-fit: contain; }
.app-thumbnail span { font-size: 0.75rem; font-weight: 500; line-height: 1.3; }

/* Thumbnail Actions (Edit/Delete Buttons) */
.thumbnail-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 3px;
    background-color: rgba(255, 255, 255, 0.8); /* Slight background for visibility */
    padding: 2px;
    border-radius: 4px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
}
.app-thumbnail:hover .thumbnail-actions {
    opacity: 1; /* Show on hover */
}
.action-btn {
    background: none; border: none; cursor: pointer; padding: 3px; font-size: 0.75rem; /* Smaller icons */
    color: var(--secondary-color); line-height: 1; border-radius: 3px;
}
.action-btn.edit-btn:hover { color: var(--primary-color); background-color: rgba(0,0,0,0.05); }
.action-btn.delete-btn:hover { color: var(--danger-color); background-color: rgba(0,0,0,0.05); }


/* Modal Styles */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 1050;
    opacity: 0; /* Start hidden */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.modal-overlay.visible { /* Class added by JS */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
.modal-content {
    background-color: var(--white-color); padding: 20px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); max-width: 500px; width: 90%;
    position: relative; transform: scale(0.9); /* Start slightly scaled down */
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content {
    transform: scale(1); /* Scale in when visible */
}
.modal-close-btn {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 1.8rem; font-weight: bold; color: #aaa; cursor: pointer; line-height: 1; padding: 0;
}
.modal-close-btn:hover { color: var(--dark-color); }
.modal-content h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.5rem; font-weight: 500; }
#link-form .form-group { margin-bottom: 15px; }
#link-form label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; font-size: 0.9rem; }
#link-form input[type="text"],
#link-form input[type="url"] {
    width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box;
}
#link-form input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); }
#link-form small { font-size: 0.8rem; color: var(--secondary-color); display: block; margin-top: 3px; }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }


/* Footer - Mobile Base */
/* ... (Footer Mobile Base Styles remain the same) ... */
.app-footer {
    text-align: center; padding: 15px; font-size: 0.85rem; color: var(--secondary-color);
    width: 100%; z-index: 10; position: static; margin-top: 30px;
    border-top: 1px solid var(--border-color); background-color: var(--grey-bg);
}
.login-footer {
    position: absolute; bottom: 0; left: 0; background-color: transparent;
    color: rgba(255, 255, 255, 0.7); border-top: none; padding-left: 15px; padding-right: 15px;
    z-index: 0; margin-top: 0;
}
.login-footer:hover { color: rgba(255, 255, 255, 0.9); }


/* --- Tablet Styles (min-width: 769px) --- */
@media (min-width: 769px) {
    :root { --top-nav-height: 55px; --logo-height: 35px; }
    .app-wrapper { flex-direction: row; padding-bottom: 60px; }
    .top-nav-right { gap: 15px; }
    .top-nav .phone-number { display: inline-flex; font-size: 0.95rem; }
    /* Side Nav */
    /* ... (Side Nav Tablet/Desktop Styles remain the same) ... */
    .side-nav {
        width: var(--sidenav-width); position: sticky; top: var(--top-nav-height);
        height: calc(100vh - var(--top-nav-height)); overflow-y: auto; overflow-x: hidden;
        z-index: 1020; border-bottom: none; transition: width 0.3s ease;
    }
    .sticky-side { position: sticky; }
    .side-nav-list { display: block !important; }
    .side-nav.minimized { width: var(--sidenav-width-minimized); }
    .side-nav.minimized .side-nav-header { padding: 0 20px 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .side-nav.minimized .side-nav-title { opacity: 0; }
    .side-nav.minimized .minimize-btn i { transform: rotate(180deg); }
    .side-nav.minimized .side-nav-list li a { padding-left: 0; padding-right: 0; justify-content: center; }
    .side-nav.minimized .side-nav-list li a .link-text { opacity: 0; width: 0; }
    .side-nav.minimized .side-nav-list li a i { margin-right: 0; }
    .side-nav::-webkit-scrollbar { width: 6px; }
    .side-nav::-webkit-scrollbar-thumb { background-color: #555; border-radius: 3px; }
    .side-nav::-webkit-scrollbar-track { background: transparent; }

    /* Main Content */
    .main-content { padding: 20px 15px; }
    .content-header h1 { font-size: 1.6rem; }

    /* Thumbnails */
    .app-thumbnail-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
    .app-thumbnail { padding: 15px 10px; min-height: 110px; }
    .app-thumbnail img { width: 35px; height: 35px; margin-bottom: 8px; }
    .app-thumbnail span { font-size: 0.8rem; line-height: 1.2; }
    .action-btn { font-size: 0.85rem; } /* Slightly larger action icons */

    /* Footer */
    .app-footer { position: absolute; bottom: 0; left: 0; width: 100%; margin-top: 0; padding-left: var(--sidenav-width); transition: padding-left 0.3s ease; box-sizing: border-box; }
    body:not(.login-page) .side-nav.minimized ~ .app-footer { padding-left: var(--sidenav-width-minimized); }
    .login-footer { padding-left: 15px; }
}

/* --- Desktop Styles (min-width: 993px) --- */
@media (min-width: 993px) {
    .top-nav .logo-text { display: inline; }
    .main-content { padding: 30px; }
    .content-header h1 { font-size: 1.8rem; }
    .app-thumbnail-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; }
    .app-thumbnail { padding: 20px 15px; min-height: 130px; }
    .app-thumbnail img { width: 45px; height: 45px; margin-bottom: 12px; }
    .app-thumbnail span { font-size: 0.9rem; line-height: 1.3; }
    .action-btn { font-size: 0.9rem; }
    .login-container { padding: 30px 40px; }
    .login-container h1 { font-size: 1.8rem; }
}

/* --- Larger Desktop Styles (Optional - min-width: 1201px) --- */