:root {
    --primary-blue: #003DA5;
    --primary-gold: #FFA500;
    --secondary-blue: #0052CC;
    --light-bg: #F5F7FA;
    --text-dark: #2C3E50;
    --nav-active:   var(--primary-blue, #003da5);
    --nav-hover-bg: rgba(0, 61, 165, 0.08);
    --nav-text:     #444;
    --nav-bg:       #ffffff;
    --nav-border:   #e8eaed;
    --nav-icon:     38px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: var(--light-bg);
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* REMOVED: position: static !important; */
    /* REMOVED: top: 0px !important; */
    /* REMOVED: overflow: hidden; */
    /* ADDED: */
    overflow-y: auto;
    overflow-x: hidden;
}

.wrapper {
    /* REMOVED: max-height: calc(100vh - 50px); */
    /* REMOVED: overflow-y: auto; */
    /* REMOVED: padding-top: 50px; */
    /* REMOVED: padding-bottom: 50px; */
    /* ADDED: */
    min-height: calc(100vh - 50px);
    padding: 20px;
}

.bg-blue-r{
    background-color: var(--primary-blue) !important;
}
.text-blue-r{
    color: var(--primary-blue);
}


/* Common navbar button style */
.btn-nav-style {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-align: center;
    font-weight: 500;
    transition: background 0.2s;
}

/* Mobile buttons full width */
@media (max-width: 991.98px) {
    .btn-nav-style {
        width: 100%;
        margin-top: 0.5rem;
    }
    .navbar-nav {
        gap: 0;
    }
}

/* Avatar circle */
.avatar-circle {
    width: 100%;
    max-width: 75px;
    aspect-ratio: 1 / 1;            
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
}

        /* Style custom buttons */
        .translate-btn {
          margin: 5px;
          padding: 8px 12px;
          background-color: #0078d7;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        .translate-btn:hover {
          background-color: #005a9e;
        }

        /* Header Section */
        .header-section {
            background: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        


        .logo-placeholder {
            width: 75px;
            height: 75px;
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2em;
            font-weight: bold;
            background-size: 100% 100%;
        }

        .logo-ssu {
            background-image: url("../../images/ssu2.png");
            background-size: cover;
            background-position: center;
        }

        .logo-cell {
            background-image: url("../../images/cell.png");
            background-size: cover;
            background-position: center;
        }

        .institution-info {
            flex: 1;
            min-width: 300px;
        }

        .institution-name {
            font-size: 1.8em;
            font-weight: bold;
            color: var(--primary-blue);
            margin-bottom: 5px;
            line-height: 1.2;
        }

        .institution-tagline {
            font-size: 1.1em;
            color: black;
            font-weight: 600;
            font-style: italic;
        }

        .language-selector {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .btn-language {
            padding: 8px 20px;
            border: 2px solid var(--primary-blue);
            background: white;
            color: var(--primary-blue);
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-language:hover,
        .btn-language.active {
            background: var(--primary-blue);
            color: white;
        }

        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .navbar-brand {
            font-size: 1.5em;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        .navbar-brand:hover{
            color: white;
        }

        .navbar-links {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        .navbar {
            background-color: var(--primary-blue);
            height: 60px;
            z-index: 1030;
        }
        
        .sidebar {
            top: 48px;
            height: calc(100vh - 48px);
            width: 240px;
            transition: width .25s ease;
            z-index: 1030;
        }

        .sidebar.collapsed {
            width: 72px;
        }

        .sidebar.collapsed .sidebar-text {
            display: none;
        }

        .sidebar .nav-link {
            white-space: nowrap;
            color: #3D3D3D;
        }
        

        /* ICON CENTERING WHEN COLLAPSED */
        .sidebar.collapsed .nav-link {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }

        .sidebar.collapsed .avatar-circle {
            margin: 0 auto;
        }

        /* MOBILE TOP NAV */
        .mobile-nav {
            top: 48px;
            z-index: 1031;
        }

        /* ===== MAIN CONTENT OFFSET ===== */
        @media (min-width: 768px) {
            .main-content {
                margin-left: 240px;
                transition: margin-left .3s;
            }
            .sidebar.collapsed ~ .main-content {
                margin-left: 70px;
            }
        }

        .nav-link {
            color: white;
            font-size: 12px;
        }

        .nav-link i {
            display: block;
        }

        #sidebarMenu .nav-link.active, #sidebarMenu .nav-link:hover,  #sidebarMenu .nav-link:focus{
            color: white !important;
            background-color: var(--primary-blue) !important;
            border-radius: 5px;
        }

        #mobileNav .active{
            color: var(--primary-gold) !important;
        }


        #navBar .navbar-nav .nav-link.active,  #navBar .navbar-nav .nav-link *:hover, #navBar .nav-link:hover{
            color: var(--primary-gold) !important;
        }

        .nav-label {
            font-size: 11px;
        }

        /* Desktop adjustments */
        @media (max-width: 500px) {
            .nav-label {
                display: none; /* icons only on desktop */
            }
        }


        
        .content {
        flex-grow: 1;
        padding: 20px;
        }


        .btn-nav {
            border: 2px solid white;
            color: white;
            background: transparent;
            border-radius: 25px;
            padding: 8px 25px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-nav:hover {
            background: white;
            color: var(--primary-blue);
        }

        .btn-nav-signup {
            background: var(--primary-gold);
            border-color: var(--primary-gold);
        }

        .btn-nav-signup:hover {
            background: #FF8C00;
            border-color: #FF8C00;
            color: white;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border: 2px solid white;
        }

        .hero {
            background: white;
            border-radius: 20px;
            padding: 60px 40px;
            text-align: center;
            margin-top: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .hero h1 {
            font-size: 3em;
            color: var(--primary-blue);
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.3em;
            color: var(--text-dark);
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-primary-cta {
            background: var(--primary-blue);
            color: white;
            padding: 15px 40px;
            font-size: 1.1em;
            border-radius: 30px;
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary-cta:hover {
            background: var(--secondary-blue);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 61, 165, 0.4);
        }

        .btn-secondary-cta {
            background: white;
            color: var(--primary-blue);
            border: 2px solid var(--primary-blue);
            padding: 15px 40px;
            font-size: 1.1em;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .features-section {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .feature-card {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: all 0.3s;
            border-top: 4px solid var(--primary-blue);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            border-top-color: var(--primary-gold);
        }

        .feature-icon {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            color: var(--primary-blue);
            margin-bottom: 15px;
            font-size: 1.5em;
        }

        /* Dashboard */
        .dashboard {
            background: white;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .dashboard-header h2 {
            color: var(--primary-blue);
            font-size: 2em;
        }

        .btn-new-project {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 15px 30px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-new-project:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 61, 165, 0.4);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .project-card {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            border: 2px solid #e0e0e0;
            transition: all 0.3s;
            cursor: pointer;
        }

        .project-card:hover {
            border-color: var(--primary-blue);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .project-status {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .status-collecting {
            background: #e3f2fd;
            color: var(--primary-blue);
        }

        .status-analyzing {
            background: #fff3e0;
            color: #f57c00;
        }

        .status-validating {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        .status-completed {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .project-card h3 {
            color: var(--primary-blue);
            margin-bottom: 10px;
            font-size: 1.3em;
        }

        .project-card .btn-group {
            display: flex;
            gap: 8px;
            margin-top: 15px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.875em;
            border-radius: 6px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        /* Auth Pages */
        .auth-container {
            max-width: 500px;
            margin: 60px auto;
            background: white;
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .auth-container h2 {
            color: var(--primary-blue);
            font-size: 2.5em;
            margin-bottom: 10px;
            text-align: center;
        }

        .auth-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
        }

        .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state h3 {
            color: var(--primary-blue);
            margin-bottom: 15px;
            font-size: 1.8em;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            padding: 20px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2em;
            cursor: pointer;
            color: #999;
            line-height: 1;
        }

        .modal-close:hover {
            color: #333;
        }

        .modal h2 {
            color: var(--primary-blue);
            margin-bottom: 25px;
            font-size: 2em;
        }

        /* Page Management */
        .page {
            display: none;
        }

        .page.active {
            display: block;
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Footer */
        .footer {
            background: var(--primary-blue);
            color: white;
            text-align: center;
            padding: 30px 20px;
            margin-top: 50px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2em;
            }
            .institution-name {
                font-size: 1.4em;
            }
            .navbar-content {
                flex-direction: column;
            }
        }

        :root {
            --primary-blue: #003DA5;
            --primary-gold: #FFA500;
            --secondary-blue: #0052CC;
            --light-bg: #F5F7FA;
            --text-dark: #2C3E50;
        }

       

        
		
        /* Hide the Google Translate top bar */
        .goog-te-banner-frame.skiptranslate {
          display: none !important;
        }
        
        /* Hide the iframe banner */
          .skiptranslate {
            display: none !important;
          }

          /* Hide the Google Translate toolbar */
          .goog-te-gadget-icon {
            display: none !important;
          }

       
        /* Style custom buttons */
        .translate-btn {
          margin: 5px;
          padding: 8px 12px;
          background-color: #0078d7;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        .translate-btn:hover {
          background-color: #005a9e;
        }

         



        .back-button {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 10px 20px;
            border: 2px solid white;
            border-radius: 25px;
            transition: all 0.3s;
        }

        .back-button:hover {
            background: white;
            color: var(--primary-blue);
        }

        /* Project Header */
        .project-header {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .project-status {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .status-collecting { background: #e3f2fd; color: var(--primary-blue); }
        .status-analyzing { background: #fff3e0; color: #f57c00; }
        .status-validating { background: #f3e5f5; color: #7b1fa2; }
        .status-completed { background: #e8f5e9; color: #2e7d32; }

        /* Form Grid Layout */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group.full-width {
            grid-column: 1 / -1;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .required {
            color: #dc3545;
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .btn-warning:hover{
            background: #f57c00;
            transform: translateY(0px);
            transition: all 0.2s;
            box-shadow: 0 10px 25px rgba(245, 124, 0, 0.4);
        }

        .tab-btn {
            padding: 12px 25px;
            background: white;
            border: 2px solid var(--primary-blue);
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            color: var(--primary-blue);
            transition: all 0.3s;
        }
        
        .tab-btn.disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
        }

        .tab-btn:hover,
        .tab-btn.active {
            background: var(--primary-blue);
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .data-section {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .section-title {
            color: var(--primary-blue);
            font-size: 1.5em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Data Item Card */
        .data-item {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 20px;
            border-left: 5px solid var(--primary-blue);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .data-item-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 15px;
        }

        .data-item h4 {
            color: var(--primary-blue);
            font-size: 1.3em;
            margin-bottom: 5px;
        }

        .data-item-actions {
            display: flex;
            gap: 8px;
        }

        .btn-edit,
        .btn-delete {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 0.9em;
        }

        .btn-edit {
            background: var(--primary-blue);
            color: white;
        }

        .btn-edit:hover {
            background: var(--secondary-blue);
            transform: scale(1.05);
        }

        .btn-delete {
            background: #dc3545;
            color: white;
        }

        .btn-delete:hover {
            background: #c82333;
            transform: scale(1.05);
        }

        .data-field {
            margin: 10px 0;
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 10px;
        }

        .data-label {
            font-weight: bold;
            color: #666;
        }

        .data-value {
            color: #333;
        }

        .data-meta {
            font-size: 0.9em;
            color: #999;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #ddd;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            padding: 20px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2em;
            cursor: pointer;
            color: #999;
            line-height: 1;
        }

        .modal-close:hover {
            color: #333;
        }

        .modal h2 {
            color: var(--primary-blue);
            margin-bottom: 25px;
            font-size: 2em;
        }

        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-state-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }

        /* Analysis Section */
        .analysis-info {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
        }

        .data-count-display {
            font-size: 3em;
            font-weight: bold;
            margin: 20px 0;
        }

        .btn-analyze {
            background: var(--primary-gold);
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 30px;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-analyze:hover:not(:disabled) {
            background: #FF8C00;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 165, 0, 0.4);
        }

        .btn-analyze:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        /* File Upload */
        .file-upload-area {
            border: 3px dashed var(--primary-blue);
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            background: #f8f9fa;
        }

        .file-upload-area:hover {
            background: #e3f2fd;
        }

        .upload-icon {
            font-size: 3em;
            color: var(--primary-blue);
            margin-bottom: 15px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }

            .data-field {
                grid-template-columns: 1fr;
            }

            .data-item-header {
                flex-direction: column;
                gap: 10px;
            }

            .modal-content {
                padding: 30px 20px;
            }
        }

        #bg-avatar {
            background-image: url("/images/ssubg.jpg");
            background-size: cover;
            background-color: #3D3D3DFF; 
            background-blend-mode: overlay;     
        }

.hero-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        .auth-container {
            max-width: 450px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .auth-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 5px;
        }
        .auth-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 25px;
        }

        .ti-wrap {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            min-height: 42px;
            padding: 6px 10px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: #fff;
            cursor: text;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .ti-wrap:focus-within {
            border-color: var(--primary-blue, #003da5);
            box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.12);
        }

        .ti-wrap.is-invalid {
            border-color: #dc3545;
        }

        /* Tags sit inline */
        .ti-tags { display: contents; }

        /* Individual tag chip */
        .ti-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 8px 3px 12px;
            border-radius: 999px;
            background: var(--primary-blue, #003da5);
            color: #fff;
            font-size: 12.5px;
            font-weight: 500;
            white-space: nowrap;
            animation: tagIn 0.15s ease;
        }

        @keyframes tagIn {
            from { transform: scale(0.8); opacity: 0; }
            to   { transform: scale(1);   opacity: 1; }
        }

        .ti-tag-remove {
            background: none;
            border: none;
            color: rgba(255,255,255,0.7);
            font-size: 15px;
            line-height: 1;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: color 0.1s;
        }
        .ti-tag-remove:hover { color: #fff; }

        /* Text input inside wrapper */
        .ti-input {
            border: none;
            outline: none;
            flex: 1;
            min-width: 130px;
            font-size: 14px;
            background: transparent;
            padding: 2px 0;
            color: #333;
        }

        .ti-input::placeholder { color: #aaa; }

        /* Suggestion dropdown */
        .ti-dropdown {
            position: absolute;
            top: calc(100% + 5px);
            left: 0; right: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            list-style: none;
            margin: 0;
            padding: 6px;
            max-height: 210px;
            overflow-y: auto;
            z-index: 1050;
            display: none;
        }

        .ti-dropdown.open { display: block; }

        .ti-dropdown li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 7px;
            font-size: 14px;
            cursor: pointer;
            color: #333;
            transition: background 0.1s;
        }

        .ti-dropdown li:hover {
            background: rgba(0, 61, 165, 0.07);
            color: var(--primary-blue, #003da5);
        }

        .ti-dropdown li.ti-at-max {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .ti-dropdown .ti-no-results {
            color: #999;
            font-size: 13px;
            cursor: default;
            pointer-events: none;
        }
        .ti-dropdown .ti-no-results:hover { background: none; }

        /* Counter badge */
        .ti-badge {
            font-size: 11px;
            padding: 2px 9px;
            border-radius: 999px;
            background: rgba(0, 61, 165, 0.1);
            color: var(--primary-blue, #003da5);
            font-weight: 600;
        }

        /* Validation error */
        .ti-error {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 4px;
        }

        /* ── Bottom action bar ── */
.pd-footer {
    max-width: calc(100% - 240px);
    position: fixed; bottom: 0; left: 240px; right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e8eaed;
    padding: 12px 24px;
    display: flex; justify-content: center; gap: 12px; align-items: center;
    z-index: 100;
}

@media (max-width: 768px) {
    .pd-footer {
        max-width: 100%;
        left: 0;
        right: 0;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .pd-footer {
        flex-direction: column;
        gap: 8px;
    }
}