/*==========================================================
  AllkitPy Documentation Theme
  modules.css
==========================================================*/

/*==========================================================
  Variables
==========================================================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --background:#f5f7fb;

    --card:#ffffff;

    --border:#dfe5ef;

    --text:#1f2937;

    --text-light:#6b7280;

    --code-bg:#edf4ff;

    --output-bg:#eefbf2;

    --note-bg:#fff9db;

    --warning-bg:#ffe8e8;

    --info-bg:#eaf7ff;

    --purple-bg:#f4edff;

    --shadow:
        0 8px 25px rgba(0,0,0,.08);

    --radius:16px;

}

/*==========================================================
  Reset
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:

        "Segoe UI",

        Arial,

        sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;

}

/*==========================================================
  Header
==========================================================*/

.topbar{

    position:sticky;

    top:0;

    z-index:999;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

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

    box-shadow:var(--shadow);

}

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:28px;

    font-weight:bold;

}

.logo span{

    color:var(--primary);

}

.logo small{

    color:var(--text-light);

    font-size:15px;

}

.search input{

    width:320px;

    padding:12px 18px;

    border-radius:30px;

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

    background:#fafafa;

}

/*==========================================================
  Layout
==========================================================*/

.container{

    display:flex;

    min-height:100vh;

}

/*==========================================================
  Sidebar
==========================================================*/

.sidebar{

    width:260px;

    background:white;

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

    padding:25px;

    position:sticky;

    top:75px;

    height:calc(100vh - 75px);

    overflow:auto;

}

.sidebar h2{

    margin-bottom:20px;

    color:var(--primary);

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.sidebar a{

    text-decoration:none;

    color:#444;

    padding:12px 16px;

    border-radius:10px;

    transition:.25s;

}

.sidebar a:hover{

    background:var(--primary);

    color:white;

    transform:translateX(5px);

}

.sidebar .active{

    background:var(--primary);

    color:white;

}

/*==========================================================
  Content
==========================================================*/

.content{

    flex:1;

    padding:45px;

}

.content h1{

    font-size:42px;

    margin-bottom:15px;

    color:var(--primary);

}

.content h2{

    margin-top:40px;

    margin-bottom:18px;

}

.content h3{

    margin-top:25px;

    margin-bottom:12px;

}

.content p{

    color:var(--text-light);

    margin-bottom:15px;

}

/*==========================================================
  Function Card
==========================================================*/

.function-card{

    background:white;

    border-radius:var(--radius);

    padding:28px;

    margin:40px 0;

    box-shadow:var(--shadow);

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

}

.function-title{

    font-size:30px;

    color:var(--primary);

    margin-bottom:15px;

}

.function-description{

    margin-bottom:25px;

}

/*==========================================================
  Code + Output
==========================================================*/

.example-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    margin:25px 0;

}

.code-box{

    background:var(--code-bg);

    border-left:6px solid var(--primary);

    padding:18px;

    border-radius:12px;

}

.output-box{

    background:var(--output-bg);

    border-left:6px solid #22c55e;

    padding:18px;

    border-radius:12px;

}

.code-box h4,

.output-box h4{

    margin-bottom:12px;

}

pre{

    overflow:auto;

}

code{

    font-family:

        Consolas,

        monospace;

    font-size:14px;

}
/*==========================================================
  Section Titles
==========================================================*/

.section-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:32px;

    color:var(--primary);

    margin:45px 0 20px;

}

.section-subtitle{

    font-size:22px;

    margin-bottom:18px;

    color:#374151;

}

/*==========================================================
  Documentation Tables
==========================================================*/

.doc-table{

    width:100%;

    border-collapse:collapse;

    margin:20px 0;

    overflow:hidden;

    border-radius:14px;

    background:white;

    box-shadow:var(--shadow);

}

.doc-table th{

    background:var(--primary);

    color:white;

    padding:16px;

    text-align:left;

}

.doc-table td{

    padding:16px;

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

}

.doc-table tr:hover{

    background:#f8fbff;

}

/*==========================================================
  Information Boxes
==========================================================*/

.note-box,
.info-box,
.tip-box,
.warning-box{

    padding:20px;

    border-radius:14px;

    margin:25px 0;

    border-left:6px solid;

}

.note-box{

    background:var(--note-bg);

    border-color:#facc15;

}

.info-box{

    background:var(--info-bg);

    border-color:#0ea5e9;

}

.tip-box{

    background:#eefcf5;

    border-color:#22c55e;

}

.warning-box{

    background:var(--warning-bg);

    border-color:#ef4444;

}

/*==========================================================
  Parameter Cards
==========================================================*/

.parameter-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

    margin:20px 0;

}

.parameter-card{

    background:var(--purple-bg);

    border-radius:14px;

    padding:18px;

    border-left:5px solid #7c3aed;

}

.parameter-card h4{

    color:#6d28d9;

    margin-bottom:10px;

}

/*==========================================================
  Badges
==========================================================*/

.badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

    margin-right:8px;

    margin-bottom:8px;

}

.badge-blue{

    background:#dbeafe;

    color:#1d4ed8;

}

.badge-green{

    background:#dcfce7;

    color:#15803d;

}

.badge-purple{

    background:#ede9fe;

    color:#6d28d9;

}

.badge-orange{

    background:#ffedd5;

    color:#c2410c;

}

.badge-red{

    background:#fee2e2;

    color:#dc2626;

}

/*==========================================================
  Buttons
==========================================================*/

.button{

    display:inline-block;

    padding:12px 22px;

    border-radius:10px;

    text-decoration:none;

    transition:.25s;

    font-weight:600;

    cursor:pointer;

}

.button-primary{

    background:var(--primary);

    color:white;

}

.button-primary:hover{

    background:var(--primary-dark);

}

.button-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:white;

}

.button-outline:hover{

    background:var(--primary);

    color:white;

}

/*==========================================================
  Code Copy Button
==========================================================*/

.copy-button{

    float:right;

    border:none;

    background:var(--primary);

    color:white;

    padding:8px 14px;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

}

.copy-button:hover{

    background:var(--primary-dark);

}

/*==========================================================
  Horizontal Divider
==========================================================*/

.divider{

    margin:50px 0;

    border:none;

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

}

/*==========================================================
  Lists
==========================================================*/

.content ul{

    margin:15px 0 20px 25px;

}

.content li{

    margin-bottom:8px;

}

/*==========================================================
  Inline Code
==========================================================*/

.inline-code{

    background:#eef2ff;

    color:#4338ca;

    padding:3px 8px;

    border-radius:6px;

    font-family:Consolas, monospace;

    font-size:14px;

}
/*==========================================================
  Module Cards
==========================================================*/

.module-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

    margin:30px 0;

}

.module-card{

    background:white;

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

    border-radius:18px;

    padding:25px;

    transition:.3s;

    box-shadow:var(--shadow);

}

.module-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.module-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.module-card p{

    margin-bottom:0;

}

/*==========================================================
  Function Navigation
==========================================================*/

.function-nav{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0 40px;

}

.function-nav a{

    text-decoration:none;

    background:white;

    color:var(--primary);

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

    padding:10px 16px;

    border-radius:30px;

    font-size:14px;

    transition:.25s;

}

.function-nav a:hover{

    background:var(--primary);

    color:white;

}

/*==========================================================
  Footer
==========================================================*/

.footer{

    margin-top:80px;

    padding:30px;

    text-align:center;

    color:var(--text-light);

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

}

/*==========================================================
  Images
==========================================================*/

img{

    max-width:100%;

    height:auto;

    border-radius:12px;

}

/*==========================================================
  Block Quotes
==========================================================*/

blockquote{

    background:#f8fbff;

    border-left:6px solid var(--primary);

    padding:18px 22px;

    margin:25px 0;

    border-radius:10px;

    color:#374151;

}

/*==========================================================
  Selection
==========================================================*/

::selection{

    background:#bfdbfe;

    color:#111827;

}

/*==========================================================
  Scrollbar
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#b6c3d6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8fa5c5;

}

/*==========================================================
  Animations
==========================================================*/

.function-card,
.module-card,
.doc-table{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
  Responsive
==========================================================*/

@media(max-width:1000px){

    .container{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

        height:auto;

        position:relative;

        top:0;

        border-right:none;

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

    }

    .content{

        padding:30px;

    }

    .example-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .topbar{

        flex-direction:column;

        gap:16px;

        padding:20px;

    }

    .search input{

        width:100%;

    }

    .logo{

        font-size:22px;

    }

    .content h1{

        font-size:34px;

    }

    .function-title{

        font-size:26px;

    }

    .parameter-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .content{

        padding:20px;

    }

    .function-card{

        padding:20px;

    }

    .doc-table th,

    .doc-table td{

        padding:10px;

        font-size:14px;

    }

}

/*==========================================================
  End
==========================================================*/