/*=============================================================================
    GLOBAL TOURS DESIGN SYSTEM (GTDS)
    ----------------------------------------------------------------------------
    Project : Global Tours Itinerary Builder
    File    : assets/css/style.css
    Version : 2.0.0
    Part    : 1 of 5

    PURPOSE
    ----------------------------------------------------------------------------
    This stylesheet defines the application's design system.

    Order of sections

    1. Design Tokens
    2. CSS Reset
    3. Base Elements
    4. Application Layout
    5. Components
    6. Utilities
    7. Responsive
=============================================================================*/



/*=============================================================================
    DESIGN TOKENS
=============================================================================*/

:root{

    /* Brand */

    --gt-primary:#2563EB;
    --gt-primary-hover:#1D4ED8;

    --gt-success:#10B981;
    --gt-warning:#F59E0B;
    --gt-danger:#EF4444;

    /* Neutrals */

    --gt-white:#FFFFFF;

    --gt-bg:#F5F7FB;

    --gt-surface:#FFFFFF;

    --gt-border:#E5E7EB;

    --gt-text:#111827;

    --gt-text-light:#6B7280;

    /* Radius */

    --gt-radius-xs:8px;
    --gt-radius-sm:12px;
    --gt-radius-md:16px;
    --gt-radius-lg:20px;
    --gt-radius-xl:28px;

    /* Shadows */

    --gt-shadow-sm:
        0 1px 2px rgba(15,23,42,.04);

    --gt-shadow-md:
        0 10px 25px rgba(15,23,42,.06);

    --gt-shadow-lg:
        0 20px 50px rgba(15,23,42,.08);

    /* Typography */

    --gt-font:
        "Inter",
        sans-serif;

    /* Transition */

    --gt-speed:.25s ease;

}



/*=============================================================================
    RESET
=============================================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    height:100%;

    scroll-behavior:smooth;

}



body{

    height:100vh;

    overflow:hidden;

    background:var(--gt-bg);

    color:var(--gt-text);

    font-family:var(--gt-font);

    font-size:15px;

    line-height:1.5;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}



img{

    display:block;

    max-width:100%;

}



button{

    font:inherit;

    cursor:pointer;

}



input,
select,
textarea,
button{

    outline:none;

}



a{

    color:inherit;

    text-decoration:none;

}



/*=============================================================================
    TYPOGRAPHY
=============================================================================*/

h1{

    font-size:30px;

    font-weight:700;

}

h2{

    font-size:24px;

    font-weight:700;

}

h3{

    font-size:20px;

    font-weight:600;

}

h4{

    font-size:18px;

    font-weight:600;

}

h5{

    font-size:16px;

    font-weight:600;

}

p{

    color:var(--gt-text-light);

}



/*=============================================================================
    APPLICATION LAYOUT
=============================================================================*/

.gt-app{

    display:grid;

    grid-template-columns:

        260px

        1fr;

    height:100vh;

}



/*=============================================================================
    SIDEBAR
=============================================================================*/

.gt-sidebar{

    display:flex;

    flex-direction:column;

    background:var(--gt-surface);

    border-right:1px solid var(--gt-border);

    overflow:hidden;

}



.gt-logo{

    display:flex;

    align-items:center;

    gap:16px;

    padding:28px;

    border-bottom:1px solid var(--gt-border);

}



.gt-logo-icon{

    width:54px;

    height:54px;

    border-radius:18px;

    background:var(--gt-primary);

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    box-shadow:var(--gt-shadow-md);

}



.gt-logo h2{

    margin:0;

}



.gt-logo span{

    display:block;

    margin-top:4px;

    color:var(--gt-text-light);

    font-size:13px;

}



/*=============================================================================
    SIDEBAR NAVIGATION
=============================================================================*/

.gt-nav{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:20px;

}



.gt-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:14px;

    color:var(--gt-text-light);

    transition:var(--gt-speed);

    font-weight:500;

}



.gt-nav a i{

    font-size:18px;

}



.gt-nav a:hover{

    background:#EEF4FF;

    color:var(--gt-primary);

}



.gt-nav a.active{

    background:var(--gt-primary);

    color:#FFF;

    box-shadow:var(--gt-shadow-sm);

}



/*=============================================================================
    MAIN AREA
=============================================================================*/

.gt-main{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    min-width:0;

}
/*=============================================================================
    TOPBAR
=============================================================================*/

.gt-topbar{

    height:80px;

    background:var(--gt-surface);

    border-bottom:1px solid var(--gt-border);

    padding:0 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    flex-shrink:0;

}

.gt-page-title{

    display:flex;

    flex-direction:column;

}

.gt-page-title h1{

    margin:0;

    font-size:28px;

    line-height:1.2;

}

.gt-page-title p{

    margin:4px 0 0;

    font-size:14px;

}

.gt-topbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}



/*=============================================================================
    SEARCH
=============================================================================*/

.gt-search{

    width:300px;

    height:44px;

    background:#FFF;

    border:1px solid var(--gt-border);

    border-radius:999px;

    display:flex;

    align-items:center;

    padding:0 18px;

    transition:var(--gt-speed);

}

.gt-search:focus-within{

    border-color:var(--gt-primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);

}

.gt-search i{

    color:var(--gt-text-light);

    margin-right:10px;

}

.gt-search input{

    border:none;

    background:transparent;

    width:100%;

    color:var(--gt-text);

    font-size:14px;

}

.gt-search input::placeholder{

    color:var(--gt-text-light);

}



/*=============================================================================
    WORKSPACE
=============================================================================*/

.gt-workspace{

    flex:1;

    display:grid;

    grid-template-columns:

        320px

        minmax(0,1fr)

        320px;

    gap:24px;

    padding:24px;

    overflow:hidden;

}



/*=============================================================================
    PANELS
=============================================================================*/

.gt-panel{

    display:flex;

    flex-direction:column;

    background:var(--gt-surface);

    border:1px solid var(--gt-border);

    border-radius:var(--gt-radius-lg);

    box-shadow:var(--gt-shadow-sm);

    overflow:hidden;

    min-width:0;

}

.gt-panel-left{

    min-width:0;

}

.gt-panel-center{

    min-width:0;

}

.gt-panel-right{

    min-width:0;

}



/*=============================================================================
    PANEL HEADER
=============================================================================*/

.gt-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:24px;

    border-bottom:1px solid var(--gt-border);

    flex-shrink:0;

}

.gt-panel-header h3{

    margin:0;

}

.gt-panel-header p{

    margin-top:4px;

    font-size:13px;

}



/*=============================================================================
    PANEL BODY
=============================================================================*/

.gt-panel-body{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:20px;

}



/*=============================================================================
    ACTIVITY HUB
=============================================================================*/

.gt-panel-search{

    padding:20px;

    border-bottom:1px solid var(--gt-border);

}

.gt-filter-group{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:20px;

    border-bottom:1px solid var(--gt-border);

}

.gt-activity-list{

    flex:1;

    overflow-y:auto;

    padding:20px;

}



/*=============================================================================
    TIMELINE
=============================================================================*/

.gt-timeline{

    flex:1;

    overflow-y:auto;

    padding:28px;

    background:#FBFCFE;

}



/*=============================================================================
    SUMMARY
=============================================================================*/

.gt-summary{

    flex:1;

    overflow-y:auto;

    padding:24px;

}



/*=============================================================================
    SCROLLBAR
=============================================================================*/

.gt-panel-body::-webkit-scrollbar,
.gt-activity-list::-webkit-scrollbar,
.gt-timeline::-webkit-scrollbar,
.gt-summary::-webkit-scrollbar{

    width:8px;

}

.gt-panel-body::-webkit-scrollbar-thumb,
.gt-activity-list::-webkit-scrollbar-thumb,
.gt-timeline::-webkit-scrollbar-thumb,
.gt-summary::-webkit-scrollbar-thumb{

    background:#D6DBE6;

    border-radius:999px;

}

.gt-panel-body::-webkit-scrollbar-thumb:hover,
.gt-activity-list::-webkit-scrollbar-thumb:hover,
.gt-timeline::-webkit-scrollbar-thumb:hover,
.gt-summary::-webkit-scrollbar-thumb:hover{

    background:#B7C0D1;

}
/*=============================================================================
    BUTTONS
=============================================================================*/

.btn{

    border-radius:14px;

    font-weight:600;

    transition:all .25s ease;

    box-shadow:none;

}

.btn-primary{

    background:var(--gt-primary);

    border-color:var(--gt-primary);

}

.btn-primary:hover{

    background:var(--gt-primary-hover);

    border-color:var(--gt-primary-hover);

    transform:translateY(-1px);

}

.btn-light{

    background:#FFF;

    border:1px solid var(--gt-border);

}

.btn-light:hover{

    background:#F8FAFC;

}

.btn-outline-primary{

    border-color:var(--gt-primary);

}



/*=============================================================================
    FORM CONTROLS
=============================================================================*/

.form-control,
.form-select{

    border-radius:14px;

    border:1px solid var(--gt-border);

    min-height:46px;

    box-shadow:none;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--gt-primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);

}



/*=============================================================================
    ACTIVITY CARD
=============================================================================*/

.gt-activity-card{

    background:#FFF;

    border:1px solid var(--gt-border);

    border-radius:18px;

    padding:18px;

    margin-bottom:16px;

    cursor:pointer;

    transition:all .25s ease;

}

.gt-activity-card:hover{

    transform:translateY(-2px);

    box-shadow:var(--gt-shadow-md);

    border-color:#C7D2FE;

}

.gt-activity-card:last-child{

    margin-bottom:0;

}

.gt-activity-title{

    font-size:16px;

    font-weight:600;

    margin-bottom:6px;

}

.gt-activity-location{

    color:var(--gt-text-light);

    font-size:13px;

    margin-bottom:14px;

}

.gt-activity-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

.gt-price{

    color:var(--gt-primary);

    font-weight:700;

}



/*=============================================================================
    TIMELINE
=============================================================================*/

.gt-day{

    background:#FFF;

    border-radius:20px;

    border:1px solid var(--gt-border);

    margin-bottom:24px;

    overflow:hidden;

    box-shadow:var(--gt-shadow-sm);

}

.gt-day:last-child{

    margin-bottom:0;

}

.gt-day-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 24px;

    border-bottom:1px solid var(--gt-border);

}

.gt-day-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#DBEAFE;

    color:var(--gt-primary);

    font-size:12px;

    font-weight:700;

    border-radius:999px;

    padding:6px 12px;

    margin-bottom:10px;

}

.gt-day-body{

    padding:24px;

}



/*=============================================================================
    EMPTY STATE
=============================================================================*/

.gt-empty-state{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:250px;

    color:var(--gt-text-light);

}

.gt-empty-state i{

    font-size:56px;

    color:#CBD5E1;

    margin-bottom:20px;

}

.gt-empty-state h5{

    margin-bottom:8px;

}



/*=============================================================================
    SUMMARY
=============================================================================*/

.gt-summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #F1F5F9;

}

.gt-summary-item:last-of-type{

    border-bottom:none;

}

.gt-summary-total{

    margin-top:24px;

    padding:22px;

    background:#EEF4FF;

    border-radius:18px;

    text-align:center;

}

.gt-summary-total span{

    display:block;

    color:var(--gt-text-light);

    margin-bottom:8px;

}

.gt-summary-total h2{

    color:var(--gt-primary);

    margin:0;

}



/*=============================================================================
    LOADING
=============================================================================*/

.gt-loading{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.92);

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    gap:16px;

}



/*=============================================================================
    UTILITIES
=============================================================================*/

.gt-hidden{

    display:none !important;

}

.gt-flex{

    display:flex;

}

.gt-space-between{

    justify-content:space-between;

}

.gt-align-center{

    align-items:center;

}

.gt-text-muted{

    color:var(--gt-text-light);

}

.gt-shadow{

    box-shadow:var(--gt-shadow-md);

}

.gt-rounded{

    border-radius:var(--gt-radius-lg);

}
/*=============================================================================
    SEMANTIC COLORS
=============================================================================*/

:root{

    --gt-info-bg:#EEF4FF;
    --gt-info-text:#2563EB;

    --gt-success-bg:#ECFDF5;
    --gt-success-text:#059669;

    --gt-warning-bg:#FFFBEB;
    --gt-warning-text:#B45309;

    --gt-danger-bg:#FEF2F2;
    --gt-danger-text:#DC2626;

}



/*=============================================================================
    BADGES
=============================================================================*/

.gt-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    line-height:1;

}

.gt-badge-info{

    background:var(--gt-info-bg);

    color:var(--gt-info-text);

}

.gt-badge-success{

    background:var(--gt-success-bg);

    color:var(--gt-success-text);

}

.gt-badge-warning{

    background:var(--gt-warning-bg);

    color:var(--gt-warning-text);

}

.gt-badge-danger{

    background:var(--gt-danger-bg);

    color:var(--gt-danger-text);

}



/*=============================================================================
    CARDS
=============================================================================*/

.gt-card{

    background:var(--gt-surface);

    border:1px solid var(--gt-border);

    border-radius:var(--gt-radius-lg);

    box-shadow:var(--gt-shadow-sm);

    transition:all var(--gt-speed);

}

.gt-card:hover{

    box-shadow:var(--gt-shadow-md);

    transform:translateY(-2px);

}



/*=============================================================================
    DIVIDERS
=============================================================================*/

.gt-divider{

    height:1px;

    background:var(--gt-border);

    margin:20px 0;

}



/*=============================================================================
    FADE-IN ANIMATION
=============================================================================*/

@keyframes gtFadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.gt-fade{

    animation:gtFadeIn .25s ease;

}



/*=============================================================================
    LOADING STATE
=============================================================================*/

.gt-loading.is-active{

    display:flex;

}



/*=============================================================================
    FOCUS ACCESSIBILITY
=============================================================================*/

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:2px;

}



/*=============================================================================
    RESPONSIVE
=============================================================================*/

@media (max-width:1400px){

    .gt-workspace{

        grid-template-columns:

            280px

            minmax(0,1fr)

            300px;

    }

}

@media (max-width:1200px){

    .gt-workspace{

        grid-template-columns:

            260px

            minmax(0,1fr);

    }

    .gt-panel-right{

        display:none;

    }

}

@media (max-width:992px){

    .gt-app{

        grid-template-columns:1fr;

    }

    .gt-sidebar{

        display:none;

    }

    .gt-topbar{

        padding:16px 20px;

        height:auto;

        flex-wrap:wrap;

    }

    .gt-topbar-actions{

        width:100%;

        flex-wrap:wrap;

    }

    .gt-search{

        width:100%;

    }

    .gt-workspace{

        grid-template-columns:1fr;

        padding:16px;

    }

}

@media (max-width:576px){

    .gt-panel-header{

        padding:18px;

    }

    .gt-timeline{

        padding:18px;

    }

    .gt-summary{

        padding:18px;

    }

    .gt-day-body{

        padding:18px;

    }

    .btn{

        width:100%;

    }

}
/*=============================================================================
    GLOBAL TOURS DESIGN SYSTEM
    PART 5 OF 5
    ---------------------------------------------------------------------------
    Utilities
    Dark Mode Foundation
    Print Styles
    Accessibility
=============================================================================*/


/*=============================================================================
    SPACING UTILITIES
=============================================================================*/

.gt-mt-1{margin-top:.25rem;}
.gt-mt-2{margin-top:.50rem;}
.gt-mt-3{margin-top:1rem;}
.gt-mt-4{margin-top:1.5rem;}
.gt-mt-5{margin-top:2rem;}

.gt-mb-1{margin-bottom:.25rem;}
.gt-mb-2{margin-bottom:.50rem;}
.gt-mb-3{margin-bottom:1rem;}
.gt-mb-4{margin-bottom:1.5rem;}
.gt-mb-5{margin-bottom:2rem;}

.gt-p-1{padding:.25rem;}
.gt-p-2{padding:.50rem;}
.gt-p-3{padding:1rem;}
.gt-p-4{padding:1.5rem;}
.gt-p-5{padding:2rem;}



/*=============================================================================
    FLEX UTILITIES
=============================================================================*/

.gt-flex{

    display:flex;

}

.gt-inline-flex{

    display:inline-flex;

}

.gt-align-center{

    align-items:center;

}

.gt-justify-between{

    justify-content:space-between;

}

.gt-justify-center{

    justify-content:center;

}

.gt-gap-1{

    gap:.25rem;

}

.gt-gap-2{

    gap:.5rem;

}

.gt-gap-3{

    gap:1rem;

}

.gt-gap-4{

    gap:1.5rem;

}



/*=============================================================================
    WIDTH UTILITIES
=============================================================================*/

.gt-w-100{

    width:100%;

}

.gt-h-100{

    height:100%;

}



/*=============================================================================
    TEXT UTILITIES
=============================================================================*/

.gt-text-center{

    text-align:center;

}

.gt-text-right{

    text-align:right;

}

.gt-text-muted{

    color:var(--gt-text-light);

}

.gt-text-primary{

    color:var(--gt-primary);

}

.gt-fw-500{

    font-weight:500;

}

.gt-fw-600{

    font-weight:600;

}

.gt-fw-700{

    font-weight:700;

}



/*=============================================================================
    BORDER UTILITIES
=============================================================================*/

.gt-border{

    border:1px solid var(--gt-border);

}

.gt-rounded{

    border-radius:var(--gt-radius-lg);

}



/*=============================================================================
    DARK MODE FOUNDATION

    (Will be activated later using JavaScript)

    document.documentElement.dataset.theme="dark";
=============================================================================*/

html[data-theme="dark"]{

    --gt-bg:#111827;

    --gt-surface:#1F2937;

    --gt-border:#374151;

    --gt-text:#F9FAFB;

    --gt-text-light:#9CA3AF;

}



/*=============================================================================
    REDUCED MOTION
=============================================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/*=============================================================================
    PRINT STYLES

    Future:
    Quote
    Proposal
    PDF
=============================================================================*/

@media print{

    body{

        background:#FFFFFF;

        overflow:visible;

    }

    .gt-sidebar,

    .gt-topbar,

    .btn,

    .toast-container,

    .gt-loading{

        display:none !important;

    }

    .gt-main{

        width:100%;

        overflow:visible;

    }

    .gt-workspace{

        display:block;

        padding:0;

    }

    .gt-panel{

        border:none;

        box-shadow:none;

        margin-bottom:30px;

    }

}



/*=============================================================================
    FUTURE COMPONENT PLACEHOLDERS

    Activities

    Hotels

    Restaurants

    Vehicles

    Timeline Items

    Calendar

    Drag & Drop

    AI Assistant

=============================================================================*/