/**
 * Toolmaker Portal Client Theme
 *
 * Overrides for the default Perfex theme + portal-specific styles.
 * Loaded AFTER perfex-base-css so all selectors here take priority.
 */

/* ─── Navigation ─── */

.tm-nav {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tm-nav .navbar-brand {
    padding-top: 12px;
    padding-bottom: 12px;
}

.tm-nav .nav > li > a {
    font-weight: 500;
    font-size: 0.875rem;
    color: #475569;
    transition: color 0.15s ease;
}

.tm-nav .nav > li > a:hover,
.tm-nav .nav > li > a:focus {
    color: #1e293b;
    background: transparent;
}

.tm-nav .nav > li.active > a {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -2px;
}

/* ─── Notification Bell ─── */

.tm-nav-notifications > a {
    position: relative;
    padding: 15px 12px !important;
}

.tm-nav-notifications .fa-bell {
    font-size: 1.1rem;
    color: #64748b;
}

.tm-nav-notifications:hover .fa-bell,
.tm-nav-notifications.open .fa-bell {
    color: #1e293b;
}

.tm-notification-badge {
    position: absolute;
    top: 8px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1;
    animation: tm-pulse 2s infinite;
}

@keyframes tm-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ─── Notification Dropdown ─── */

.tm-nav-notifications.dropdown {
    position: relative;
}

.tm-bell-toggle {
    padding: 15px 12px !important;
}

.tm-notifications-dropdown.dropdown-menu {
    width: 400px;
    min-width: 400px;
    max-height: 480px;
    overflow-y: auto;
    padding: 0 !important;
    margin-top: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    right: 0;
    left: auto;
}

.tm-notifications-dropdown > li {
    list-style: none;
}

.tm-notifications-dropdown > li > a {
    white-space: normal !important;
}

.tm-notifications-dropdown > li > a.tm-notif-item {
    padding: 14px 24px !important;
}

.tm-notif-header {
    padding: 14px 24px;
    font-size: 0.813rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
}

.tm-notif-header.tm-notif-pending {
    color: #dc2626;
    background: #fef2f2;
}

.tm-notif-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 14px 20px !important;
    color: inherit !important;
    text-decoration: none !important;
}

.tm-notif-item:hover,
.tm-notif-item:focus {
    background: #f8fafc !important;
    color: inherit !important;
    text-decoration: none !important;
}

.tm-notif-icon {
    flex-shrink: 0;
    padding-top: 2px;
    margin-left: 2px;
}

.tm-notif-icon img,
.tm-notif-icon .staff-profile-image-small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}

.tm-notif-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tm-notif-text {
    display: block;
    font-size: 0.813rem;
    color: #334155;
    line-height: 1.4;
    word-wrap: break-word;
}

.tm-notif-text strong {
    color: #1e293b;
}

.tm-notif-meta {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 3px;
}

.tm-notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
}

.tm-notif-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.tm-notif-footer {
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.tm-notif-footer a {
    display: block !important;
    padding: 14px 24px !important;
    font-size: 0.813rem;
    font-weight: 600;
    color: #2563eb !important;
    text-decoration: none !important;
}

.tm-notif-footer a:hover {
    background: #eff6ff !important;
}

/* ─── Notification Items ─── */

.tm-notif-li {
    border-bottom: 1px solid #f1f5f9;
}

.tm-notif-li.tm-notif-unread {
    background: #eff6ff;
}

.tm-notif-li.tm-notif-unread:hover {
    background: #dbeafe !important;
}

.tm-notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    margin-top: 6px;
    margin-left: 4px;
}

.tm-notif-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.75rem;
}

.tm-notif-icon .staff-profile-image-small,
.tm-notif-icon img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* ─── Profile Dropdown ─── */

.tm-profile-header {
    padding: 10px 16px;
    font-size: 0.813rem;
    color: #1e293b;
}

@media (max-width: 768px) {
    .tm-notifications-dropdown.dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 50px !important;
    }
}

/* ─── Footer ─── */

.tm-footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 2rem;
}

/* ─── Remove Files/Calendar submenu (handled by theme layout) ─── */

.customer-top-submenu {
    display: none !important;
}

/* ─── Content area adjustments ─── */

.toolmaker-theme #wrapper {
    min-height: calc(100vh - 120px);
}

.toolmaker-theme #content {
    padding-top: 0.5rem;
}

/* ─── Portal Card Grid (from portal.css, included here for theme context) ─── */

.tm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Force equal height cards in grid */
.tm-card-grid .tm-tool-card {
    display: flex;
    flex-direction: column;
}

.tm-card-grid .tm-tool-card > :last-child {
    margin-top: auto;
}

/* Tool detail header image */
.tm-tool-detail-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

@media (max-width: 640px) {
    .tm-tool-detail-img {
        width: 100px;
        height: 100px;
    }
}

/* Thicker progress bar for timeline table */
.tm-progress-bar-thick {
    height: 8px !important;
    background: #e2e8f0;
}

/* Tool card thumbnail */
.tm-tool-card .tm-tool-thumb {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.tm-tool-card .tm-tool-thumb-placeholder {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 0.5rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.25rem;
}

.tm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.tm-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
    text-decoration: none;
    color: inherit;
}

.tm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.tm-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.tm-card-meta {
    font-size: 0.813rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* ─── Thumbnail Strip ─── */

.tm-thumbnail-strip {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.tm-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 0.375rem;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

/* ─── Progress Bar ─── */

.tm-progress-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.tm-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tm-progress-fill.green  { background: #16a34a; }
.tm-progress-fill.yellow { background: #f59e0b; }
.tm-progress-fill.red    { background: #ef4444; }
.tm-progress-fill.blue   { background: #3b82f6; }

.tm-progress-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
    text-align: right;
}

/* ─── Status Badges ─── */

.tm-status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tm-status-active   { background: #dcfce7; color: #166534; }
.tm-status-inactive { background: #f1f5f9; color: #475569; }
.tm-status-archived { background: #fef3c7; color: #92400e; }

/* ─── Response Flag / Traffic Light ─── */

.tm-traffic-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.tm-traffic-light.pending  { background: #ef4444; }
.tm-traffic-light.answered { background: #16a34a; }

/* ─── Discussion Accordion ─── */

.tm-discussion-toggle {
    user-select: none;
}

.tm-chevron {
    transition: transform 0.2s ease;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .tm-card-grid {
        grid-template-columns: 1fr;
    }

    .tm-thumbnail-strip {
        overflow-x: auto;
    }

    .tm-nav .nav > li.active > a {
        border-bottom: none;
        margin-bottom: 0;
        color: #2563eb;
    }
}