/* Starter responsive utilities for FL CRM */
:root{
  --max-width:1200px;
  --gap:1rem;
  --font-size:16px;
  --radius:6px;
  --color-bg:#ffffff;
  --color-fg:#1a1a1a;
  --muted:#6b7280;
  --color-brand:#134c89;
  --color-brand-light:#3788d8;
  --color-bg-grey:#f8f9fa;
  --color-green-light:#28a745;
  --color-green-dark:#218838;
}
*{box-sizing:border-box}
html{font-size:var(--font-size);-webkit-font-smoothing:antialiased}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--color-fg);background:var(--color-bg);line-height:1.4}

.hidden{display:none!important;}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 calc(var(--gap)/2)}
.row{display:flex;flex-wrap:wrap;margin:calc(var(--gap)/-2)}
.col{padding:calc(var(--gap)/2);flex:1 1 0%}
/* Responsive columns */
.col-1{flex:1 1 100%}
@media(min-width:480px){.col-sm-1{flex:1 1 50%}}
@media(min-width:768px){.col-md-1{flex:1 1 33.333%}}
@media(min-width:1024px){.col-lg-1{flex:1 1 25%}}
/* Buttons and form controls */
.button{display:inline-block;padding:.6rem 1rem;border-radius:var(--radius);border:1px solid transparent;background:#2563eb;color:#fff;text-decoration:none}
.input,textarea,select{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px}
/* Utility classes */
.text-center{text-align:center}
.flex{display:flex}
.justify-between{justify-content:space-between}
.hidden-mobile{display:block}
@media(max-width:480px){.hidden-mobile{display:none}}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Images */
.responsive-img{max-width:100%;height:auto;display:block}
/* Accessibility */
:focus{outline:3px solid #60a5fa;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.001ms!important;transition-duration:0.001ms!important}}
/* Simple grid helper */
.grid{display:grid;grid-gap:var(--gap);grid-template-columns:1fr}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
/* Footer spacing */
.footer{padding:2rem 0;margin-top:2rem;color:var(--muted)}
/* Brand overrides for grey backgrounds */
.bg-light{background-color:var(--color-brand)!important;color:#fff}
.bg-grey{background-color:var(--color-bg-grey)!important;color:#000}
.bg-muted{background-color:var(--muted)!important;color:#fff}
.bg-brand-blue{background-color:var(--color-brand)!important;color:#fff}
.bg-light .text-muted{color:rgba(255,255,255,.85)!important}
.bg-secondary{background-color:var(--color-brand)!important;color:#fff}
.table-light{--bs-table-bg:var(--color-brand);--bs-table-color:#fff}
.table-light .text-dark{color:#fff!important}
.navbar.bg-light .navbar-brand,.navbar.bg-light .nav-link{color:#fff!important}
.navbar.bg-light .nav-link.active{font-weight:600}
.color-brand{color:var(--color-brand)}

.no-top-margin{margin-top:0!important;}
.no-padding{padding:0!important;}
.strong{font-weight: 600;}

.bg_grey{background-color:#f8f9fa}
.bg-readonly{background-color:#f8f9fa}


.cat-col{border:1px solid #c5c7c9 ; border-radius: 0.45rem;}
.cat-col-header {
    background-color: #c5c7c9;
     border-radius: 0.45rem;
    border-bottom: 1px solid var(--color-bg-grey);
    margin-bottom: 0;
    padding: 0.5rem 1rem;
}
.cat-col-content{padding: 0.75rem;
}

/* FONT UTILITIES */
.font-light-green{color: #28a745!important;}
.font-dark-green{color: #218838!important;}
.font-white{color: #ffffff!important;}
.font-red{color: #dc3545!important;}
.font-orange{color: #fd7e14!important;}
.font-purple{color: #6f42c1!important;}
.font-yellow{color: #ffc107!important;}
.font-blue{color: var(--color-brand)!important;}
.font-light-blue{color: var(--color-brand-light)!important;}

.font-size-05rem{font-size: 0.5rem;}
.font-size-75rem{font-size: 0.75rem;}
.font-size-1rem{font-size: 1rem;}


.tbl-font-size-75rem td{font-size: 0.75rem;}


.font-size-50{
    font-size: 3.125rem;
}

.font-size-25{
    font-size: 1.5625rem;
}

/* widths */
.width_10pc{ width:10%;}
.width_15pc{ width:15%;}
.width_20pc{ width:20%;}
.width_25pc{ width:25%;}
.width_50pc{ width:50%;}


.fa-circle-info.font-dark-green:hover{
    color:#fff;
    background-color:#218838;
}

.fa-file-arrow-up{
    color:var(--color-brand-light);
}
.fa-file-arrow-up:hover{
    /*background-color:var(--color-brand);*/
    color:var(--color-green-light);
}



/* BUTTON UTILITIES */
.btn-brand-green
{
    background-color: var(--color-green-light);
    color: #fff;
    border: 1px solid var(--color-green-light);
}
.btn-brand-green:hover
{
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.btn-brand-red
{
    background-color: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
}
.btn-brand-red:hover
{
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-brand-light_blue{
    background-color: #3788d8;
    color: #fff;
    border: 1px solid #3788d8;
}

.btn-brand-light_blue:hover{
    background-color: #134c89;
    color: #fff;
    border: 1px solid #134c89;
}

.mod-brand-section-header{
    background-color:#e7f1ff;
    margin-top: 1rem;
}


.card-footer-brand{
    background-color: #fff;
    margin-top:1rem;
}

.visit-sc-table{
    border-collapse: collapse;
    border-spacing: 0 0.5rem;
    background-color:#ece9e9;
}

.visit-sc-table td{
    border:1px solid #c5c7c9;
    border-radius: 0.45rem;
    padding:0.75rem;
    background-color:transparent; 
}

.visit-sc-table td.noteheader{
    background-color:var(--color-brand)!important; 
    color:#fff;
    border-radius: 0rem;
    padding:0.25rem;
}
.visit-sc-table td.noteheader-plain{
    background-color:transparent; 
     color:var(--color-fg);
    border-radius: 0rem;
    padding:0.25rem;
    border-bottom: hidden;
}

.fa-brand-black{
    color:#000;
}
.fa-brand-black:hover{
    color:#000;
}

/* line height utility */
.lh-15{ /* Custom utility for 1.5 line height */
    line-height: 1.5em;
}
.lh-175{ /* Custom utility for 1.75 line height */
    line-height: 1.75em;
}
.lh-2{ /* Custom utility for 2 line height */
    line-height: 2em;
}
/* Keep file intentionally small and framework-agnostic */


/* from client-details.php */
    body { overflow-x: hidden; }
    .sidebar-layout { display: flex; min-height: calc(100vh - 56px); }
    .sidebar { 
        width: 15%; 
        min-width: 200px;
        background: #f8f9fa; 
        border-right: 1px solid #dee2e6;
        overflow-y: auto;
        max-height: calc(100vh - 56px);
        position: sticky;
        top: 56px;
    }
    .content-panel { 
        width: 85%; 
        padding: 1.5rem;
        overflow-y: auto;
        background-color: #f8f9fa;
    }

    /* Sidebar Navigation Styles */
    .nav-client-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid #e9ecef;
        transition: background 0.2s;
    }
    .nav-client-item:hover {
        background: #e9ecef;
    }
    .nav-client-item.active {
        background: var(--color-brand);
        background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 100%);

        color: white;
        font-weight: 600;
    }
    .nav-client-item.active .client-icon,
    .nav-client-item.active .expand-icon {
        color: white;
    }
    .client-icon {
        color: #6c757d;
        margin-right: 0.5rem;
    }
    .client-name {
        font-size: 0.9rem;
    }
    .expand-icon {
        float: right;
        transition: transform 0.3s;
        color: #6c757d;
    }
    .expand-icon.expanded {
        transform: rotate(90deg);
    }

    /* Product List Styles */
    .product-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #fff;
    }
    .product-list.expanded {
        max-height: 800px;
    }
    .product-tabs {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #f8f9fa;
    }
    .product-tabs.expanded {
        max-height: 500px;
    }
    .nav-product-item {
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        cursor: pointer;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.85rem;
        color: #495057;
        background: #f7f9fb;
        transition: background 0.2s;
    }
    .nav-product-item:hover {
        background: #f8f9fa;
    }
    .nav-product-item.active {
        background: #e7f1ff;
        border-style: solid;
        border-color: var(--color-brand);
        border-width: 1px 1px 0 1px; /*  border when active */
        font-weight: 500;
    }
    .product-icon {
        color: #6c757d;
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }
    .product-expand {
        float: right;
        font-size: 0.7rem;
        margin-right: 0.5rem;
    }

    /* Product Tabs */
    .product-tabs {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #f8f9fa;
    }
    .product-tabs.expanded {
        max-height: 800px;
        border-style: solid;
        border-color: var(--color-brand);
        border-width: 0 1px 1px 1px; /*  border when active */
    }
    .nav-tab-item {
        padding: 0.4rem 1rem 0.4rem 3.5rem;
        cursor: pointer;
        border-bottom: 1px solid #e9ecef;
        font-size: 0.8rem;
        color: #495057;
        transition: background 0.2s;
        position: relative;
    }
    .nav-tab-item.has-offers {
        padding-left: 4rem;
    }
    .nav-tab-item:hover {
        background: #e9ecef;
    }
    .nav-tab-item.active {
        background: #3788d8;
        background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);

        color: white;
        font-weight: 500;
    }
    .nav-tab-item.has-offers {
        position: relative;
        padding-left: 3.5rem;
    }
    .nav-tab-collapsible {
        border-bottom: 1px solid #e9ecef;
    }
    .offers-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #e9ecef;
    }
    .offers-list.expanded {
        max-height: 400px;
    }
    .nav-offer-item {
        padding: 0.3rem 1rem 0.3rem 5rem;
        cursor: pointer;
        border-bottom: 1px solid #dee2e6;
        font-size: 0.75rem;
        color: #495057;
        transition: background 0.2s;
    }
    .nav-offer-item:hover {
        background: #dee2e6;
    }
    .nav-offer-item.active {
        background: #3788d8;
        background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);
        color: white;
        font-weight: 500;
    }
    .nav-offer-item.no-offers {
        font-style: italic;
        color: #6c757d;
        cursor: default;
    }
    .nav-offer-item.no-offers:hover {
        background: transparent;
    }
    .offers-expand {
        position: absolute;
        left: auto;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.6rem;
        transition: transform 0.3s;
        float: none;
        /*display: inline-block;*/
    }
    .offers-expand.expanded {
        transform: translateY(-50%) rotate(90deg);
    }

    /* Loading State */
    .loading-spinner {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }
    .spinner-border {
        width: 3rem;
        height: 3rem;
    }

    /* Form Styling */
    .field-saving { border-color: #ffc107 !important; }
    .field-saved { border-color: #28a745 !important; }
    .save-indicator {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2em;
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .save-indicator.show { opacity: 1; }
    .save-indicator.success { color: #28a745; }
    .auto-save-field { position: relative; }
    .label-saved { color: #28a745 !important; transition: color 0.3s; }
    .label-saved-text { color: #28a745 !important; transition: color 0.3s; }
    .signature-capture {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 0.75rem;
    }
    .signature-pad {
        width: 100%;
        height: 180px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        background: #fff;
        touch-action: none;
    }
    .signature-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .signature-status { font-size: 0.85rem; }

    /* Tooltip for info icon */
    .info-icon-container:hover .info-tooltip,
    .info-icon-container:focus-within .info-tooltip {
        display: block !important;
    }

    .form-label{
        font-weight: 600;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .sidebar { width: 100%; max-height: 300px; position: relative; }
        .content-panel { width: 100%; }
        .sidebar-layout { flex-direction: column; }
    }
/* END from client-details.php */



/* LOGIN PAGE */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
        :root {
        --color-brand:#134c89;
        --color-brand-light:#3788d8;
    }
    .login-body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .login-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        padding: 40px;
        width: 100%;
        max-width: 420px;
    }
    
    .login-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .login-header h1 {
        color: #2d3748;
        font-size: 28px;
        margin-bottom: 8px;
    }
    
    .login-header p {
        color: #718096;
        font-size: 14px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        color: #2d3748;
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    .form-group input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 15px;
        transition: all 0.2s;
    }
    
    .form-group input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .alert {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .alert-error {
        background: #fee;
        border: 1px solid #fcc;
        color: #c33;
    }
    
    .alert-success {
        background: #efe;
        border: 1px solid #cfc;
        color: #3c3;
    }
    
    .alert-info {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1e40af;
    }
    
    .remember-forgot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .remember-forgot label {
        display: flex;
        align-items: center;
        color: #4a5568;
        cursor: pointer;
    }
    
    .remember-forgot input[type="checkbox"] {
        margin-right: 6px;
    }
    
    .remember-forgot a {
        color: #667eea;
        text-decoration: none;
    }
    
    .remember-forgot a:hover {
        text-decoration: underline;
    }
    
    .btn-login {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);

        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s;
    }
    
    .btn-login:hover {
        /*transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);*/
            background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 100%);
    }
    
    .btn-login:active {
        box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
    }
    
    @media (max-width: 480px) {
        .login-container {
            padding: 30px 20px;
        }
        
        .login-header h1 {
            font-size: 24px;
        }
    }
/* END LOGIN PAGE */